es6 转载
1.let命令
1)let和var的区别:let声明的变量只有所在的代码块有效。
2)没有变量的提升,一定要声明后使用。使用let命令声明变量之前,该变量都是不可用的。形成“暂时性死区”。
3)typeof 不再是一个百分之百安全的操作。
2.块级作用域
1)es5和es6比较:es5 只有全局作用域和函数作用域,没有块级作用域。
2)let实际上为javascript新增了块级作用域
3)es6 允许块级作用域的任意嵌套。
4)es5规定函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明,严格模式下会报错。为ES5和es6环境避免报错,应不要在块级作用域里声明函数。
3.const命令
1)const
声明一个只读的常量。一旦声明,常量的值就不能改变。const一旦声明变量,就必须立即初始化,不能留到以后赋值。
2)其他特性和let类似
3)对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const
命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。
1
2
3
4
5
6
7
8
|
const foo = {}; foo.prop = 123; foo.prop // 123 foo = {}; //常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。 |
ES5只有两种声明变量的方法:var
命令和function
命令。ES6除了添加let
和const
命令,后面章节还会提到,另外两种声明变量的方法:import
命令和class
命令。所以,ES6一共有6种声明变量的方法。
4.顶层对象的属性
顶层对象,在浏览器环境指的是window
对象,在Node指的是global
对象。 ES6规定,为了保持兼容性,var
命令和function
命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let
命令、const
命令、class
命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性脱钩。
1
2
3
4
5
6
7
|
var a = 1; // 如果在Node的REPL环境,可以写成global.a // 或者采用通用方法,写成this.a window.a // 1 let b = 1; window.b // undefined |
5.解构赋值
1.数组得解构赋值
1)“模式匹配”为变量赋值;var [a, b, c] = [1, 2, 3];
2) 不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。
1
2
3
4
|
let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4 |
3)解构赋值不仅适用于var命令,也适用于let和const命令,对于Set结构,也可以使用数组的解构赋值。只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
2.对象的解构赋值
1)对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
1
2
3
4
5
6
|
var { bar, foo } = { foo: "aaa" , bar: "bbb" }; foo // "aaa" bar // "bbb" var { baz } = { foo: "aaa" , bar: "bbb" }; baz // undefined |
2)变量名与属性名不一致,必须写成下面这样。这实际上说明,对象的解构赋值是下面形式的简写。也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
1
2
3
4
5
6
7
8
9
|
//对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。<br>var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; var { foo: baz } = { foo: 'aaa' , bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello' , last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world' |
3)和数组一样,解构也可以用于嵌套结构的对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
var obj = { p: [ 'Hello' , { y: 'World' } ] }; var { p: [x, { y }] } = obj; x // "Hello" y // "World" //这时p是模式,不是变量,因此不会被赋值 var node = { loc: { start: { line: 1, column: 5 } } }; var { loc: { start: { line }} } = node; line // 1 loc // error: loc is undefined start // error: start is undefined let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }); obj // {prop:123} arr // [true] |
4)数组本质是特殊的对象,因此可以对数组进行对象属性的解构
1
2
3
4
|
var arr = [1, 2, 3]; var {0 : first, [arr.length - 1] : last} = arr; first // 1 last // 3 |
3.字符串的解构赋值
1)字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
2)类似数组的对象都有一个length
属性,因此还可以对这个属性解构赋值。
1
2
3
4
5
6
7
8
9
|
const [a, b, c, d, e] = 'hello' ; a // "h" b // "e" c // "l" d // "l" e // "o" let {length : len} = 'hello' ; len // 5 |
4.数值和布尔值的解构赋值
解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。
1
2
3
4
5
6
7
8
|
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true ; s === Boolean.prototype.toString // true let { prop: x } = undefined; // TypeError let { prop: y } = null ; // TypeError |
5.变量得解构赋值用途
1)交换变量的值。
1
|
[x,y]=[y,x]; |
2)从函数返回多个值
3)函数参数的定义,解构赋值可以方便地将一组参数与变量名对应起来。
1
2
3
4
5
6
7
|
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1}); |
4)提取json数据,解构赋值对提取json对象中的数据,尤其有用。
1
2
3
4
5
6
7
8
9
10
11
12
|
var jsonData = { id: 42, status: "OK" , data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309] //可以快速提取json中的数据的值。 |
5)函数参数的默认值
1
2
3
4
5
6
7
8
9
10
11
12
|
???????????? jQuery.ajax = function (url, { async = true , beforeSend = function () {}, cache = true , complete = function () {}, crossDomain = false , global = true , // ... more config }) { // ... do stuff }; |
6)遍历map结构
任何部署了Iterator接口的对象,都可以用for...of
循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var map = new Map(); map.set( 'first' , 'hello' ); map.set( 'second' , 'world' ); for ( let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world // 获取键名 for ( let [key] of map) { // ... } // 获取键值 for ( let [,value] of map) { // ... } |
7)输入模块的指定方法
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
1
|
const { SourceMapConsumer, SourceNode } = require( "source-map" );
|
es6 转载的更多相关文章
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- ES6实战:新数字方法
本文翻译自:https://www.sitepoint.com/es6... 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文介绍了ES6中全新的数字方 ...
- ES6 Promise 用法转载
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- ES6新特性:使用export和import实现模块化(转载)
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工 ...
- ES5和ES6对象导出和导入(转载,待整理)
1.import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) // ...
- (转载) 深入理解ES6箭头函数的this以及各类this面试题总结
声明:本文转载自 https://blog.csdn.net/yangbingbinga/article/details/61424363 ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取 ...
- 基于webpack使用ES6新特性(转载)
本文转载自: http://www.tuicool.com/articles/vye2ea6
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 【Todo】【转载】ES6的学习记录
粗略看了一遍React的内容,然后看了 ES6 的入门文章: http://es6.ruanyifeng.com/#docs/intro 通过这个链接可以查看浏览器对 ES6 的支持程度: http: ...
随机推荐
- 第4章 ZK基本特性与基于Linux的ZK客户端命令行学习
第4章 ZK基本特性与基于Linux的ZK客户端命令行学习 4-1 zookeeper常用命令行操作 4-2 session的基本原理与create命令的使用
- Asp.Net MVC主项目访问不到分离项目控制器的解决方案
我在portal主项目外新建一个分离项目,控制器和Model都写在分离项目中,视图层写在portal中. 我更改了命名空间,引用了Dll,还是不能访问到控制器. 找到问题: 最后我发现是主项目port ...
- 帝国CMS7.5后台美化模板 后台风格修改 帝国CMS后台模板
都知道帝国CMS功能强悍,生成静态html也非常好用.可是有时候他的后台样式,丑的让你不想用,dede呢,漏洞太多,PHPCMS好看,可是门槛要求高,你会写PHP才行. 帝国CMS后台美化模板:全面美 ...
- HDU - 4578 线段树+三重操作
这道题自己写了很久,还是没写出来,也看了很多题解,感觉多数还是看的迷迷糊糊,最后面看到一篇大佬的才感觉恍然大悟. 先上一篇大佬的题解:https://blog.csdn.net/aqa20372995 ...
- 常用STL的常见用法
//#pragma comment(linker, "/STACK:1024000000,1024000000") //#pragma GCC optimize(2) //#inc ...
- 哈夫曼编码的理解(Huffman Coding)
哈夫曼编码(Huffman Coding),又称霍夫曼编码,是一种编码方式,可变字长编码(VLC)的一种.Huffman于1952年提出一种编码方法,该方法完全依据字符出现概率来构造异字头的平均长度最 ...
- Linux设置环境变量PATH路径的两种方法
echo 'export dataPath=$HOME/data/pre' >> ~/.bash_profile 路径即刻生效: . .bash_profile 或 source .bas ...
- 图遍历算法的应用(包括输出长度为l的路径最短最长路径)
判断从顶点u到v是否有路径 void ExistPath(AdjGraph* G, int u, int v, bool& has) { int w; ArcNode* p; visit[u] ...
- Git-GitHub-GitLab三者之间的联系及区别
在讲区别以及联系之前先简要的介绍一下,这三者都是什么(本篇文章适合刚入门的新手,大佬请出门左转) 1.什么是 Git? Git 是一个版本控制系统. 版本控制是一种用于记录一个或多个文件内容变化,方便 ...
- 106)PHP,缩略图代码和结果展示
首先是 代码展示: <?php class CImage { /** * 生成保持原图纵横比的缩略图,支持.png .jpg .gif * 缩略图类型统一为.png格式 *@param $src ...