写在前面

本系列为在我读完阮一峰老师的《ES6标准入门》第二版之后，所做的阅读笔记的整理。

许多初学ES6, 同时和我一样初次阅读阮老师的这本书的时候, 读第一遍会越发的困惑, 因为阮老师上面说的很多的定义,方法,之前都是没有见过的, 读到后面才发现, 哦~原来是这样.

有一句话叫做”大神的世界我们不懂”, 所以我在初读第一遍《ES6标准入门》这本书的时候,也是踩了不少坑,读书的时候查阅了不少的资料.

所以,在这一系列的笔记教程中,我会从一个初学者的角度,向您讲述ES6的相关知识,在后面介绍的知识我会尽量不提前用,即使提前使用,也会同时做好标注,避免了阅读时各种查阅资料的烦恼.

系列博客将采用一个一个的样例，来说明书中的精华部分（当然，这只是我认为的），同时引导新手，快速入门ES6，并逐步将其投入到生产实践中。

同时,在阅读前也提醒您, 为了系统连贯性的学习ES6的基础知识,建议您从我的博客第一章开始阅读,当然,如果您对对应的知识已经有所了解,那么可以跳转到任意章节阅读,每一篇博客名中均有介绍该博客中涉及到的ES6的内容.

阮一峰老师的这本书是开源的，在其官方博客就可以下载到，但是我强烈建议大家去购买一本书, 一是方便自己查阅ES6中新增的众多API, 二也是表达一下对大神的敬仰.

什么是解构赋值?

ES6允许我们按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

解构赋值可将数组的元素或对象的属性赋予给另一个变量，该变量的定义语法与数组字面量或对象字面量很相似。此语法非常简洁，相比于传统的属性访问方式，更加直观清晰。

在不使用解构赋值的情况下，通常我们这样访问数组中的元素：

1
2
3

var first = arr[0];  
var second = arr[1];  
var third = arr[2];

使用解构赋值后，代码得到了极大的简化，同时可读性也更强：

1

var [first, second, third] = arr;

以上代码的作用和上面的实例代码是一样的,声明三个变量,存储数组arr中的前三位的内容.

数组的解构赋值

我们将数组的对应位置定义好变量,同时在相同位置定义好对应值,就可以完成赋值操作

1
2

let [foo, [[bar], baz]] = [1,[[2],3]]
console.log(foo, bar, baz)   // 1 2

当我们对变量解构赋值的时候,不想赋值的地方可以使用空数组的键值代替.当需要使用一个变量匹配后面的所有未匹配数组的时候,使用三个点号代替

1
2
3
4

let [head, ...tail] = [1,2,3,4,5,6]
console.log(head, tail)  // 1  [2,3,4,5,6]
let [x, y, ...z] = ['a'];
console.log(x,y,z)  // a undefined []

三个点号也是ES6中的新语法, 在阮一峰老师的书中有两种叫法,一个叫做扩展运算符,一个叫做rest参数, 但是我觉得三点运算符好像更加的形象贴切啊哈哈. 当然,这个三点运算符会在数组这一章进行具体讲解.

解构不成功,表示右边的值不足以匹配左边的值,不完全解构,表示右边的值超出要赋予的左边的值
当出现如下情况的时候,f是只能匹配第一个数组元素的

1
2

let [e,[f],g] = [1,[2,3],4]
console.log(e,f,g)   //1 2 4

需要注意的是,当等号的右边不是数组,或者严格的说,不是可以遍历的结构的时候,是会报错的.

1

let [a] = 1  // 报错

对于解构赋值,我们可以使用Set结构,也可以使用数组的解构赋值

那么这里再解释一下啥叫set结构,ES6提供了一种新的数据结构Set,类似于数组,但成员值是唯一的,没有重复值. set本身是一个构造函数,用来生成set数据结构.

1
2

let [h,i,j] = new Set(['a','b','c'])
console.log(h,i,j)  // a b c

解构赋值也允许使用默认值,所以,当我们为其不传值,或者传值为undefined的时候,是会使用默认值的

1
2

let [foo = true] = [undefined]
console.log(foo)  // true

但是因为ES6修复了很多之前因为 null == Object 而导致的许多问题,所以,在ES6中,因为其内部的判定机制,如果所属的值不严格等于undefined,那么其值为null的时候,是可以进行赋值的

1
2

let [foo = true] = [null]
console.log(foo)

对象的解构赋值

同样的,解构赋值也支持对对象的解构赋值

对象不同于数组,数组是按次序排列的,但是对象的属性时没有次序的,只能通过查找对象的键值来找到相应的值

在这里可能很多童鞋就有点懵逼了,为啥对象你写个名字,不赋值都行啊?

那么这里还是要再补充一下,ES6新增了一种对象的表示方法, 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。也就是说:

{bar, foo} === {bar: bar, foo: foo}

1
2
3

var {bar, foo} = {foo: 'aaa', bar: 'bbb'}
console.log(foo)  // bbb
console.log(bar)  // aaa

需要注意的是,我们给对象进行解构赋值的时候,其实是赋值给了对象的键值,对象的键名是不会改变的.

1
2
3

let obj = {first: 'hello', last: 'world'};
let {first: i, last: j} = obj
console.log(i, j) // hello  world

那么还有一个问题就是,进行解构赋值的时候,我们必须将声明和赋值写在一起,不写在一起的话就会报错

在书写的时候有一个小坑也需要注意一下

当我们不加圆括号而是直接使用花括号的话,javascript引擎会把{foo}人为是一个语法块,从而不会正常进行语句的解构

那么解决办法就是将整条语句使用圆括号括起来,从而让引擎正确理解这条语句

1
2
3

let foo
({foo} = {foo: 1})
console.log(foo) // 1

使用解构赋值的小技巧

当我们频繁使用某一个函数或是语句的时候,我们可以使用解构赋值,获得相应的更简便的书写方法

1
2
3
4

let {logl, sin, cos} = Math;
console.log(cos(60))
let {log, dir, debug} = console
log(log)

对应此方法,字符串也可以进行解构赋值,此时字符串被转换成了一个类似数组的对象

1
2
3
4
5

const str = 'abcd'
const [a, b, c, d] = str;
const {length: len} = str
console.log(a,b,c,d) // a b c d
console.log(len)  // 4

当等号右边是数值或布尔值的时候,会转换为对象,因此也拥有了此类的对象相应的方法和属性

需要注意的是,每个内部类型对象的构造函数中都是拥有toString的方法的

1
2
3

const {toString: s} = 123;
console.log(s === Number.prototype.toString) // true
console.log(s === Object.prototype.toString) // false

变量解构赋值在函数参数中的应用

函数的参数也是可以参与到解构赋值中的

1
2
3
4

function add([x, y]) {
	return x + y;
}
console.log(add([1,2]))

我们可以将函数的返回值作为解构赋值的值来进行使用

1
2
3
4
5

function example() {
	return [1,2,3]
}
var [a,b,c] = example()
console.log(a,b,c)

同样的,不仅能使用函数的返回值,还可以使用解构赋值给函数赋值

1
2
3
4

function f([x,y,z]){}
f([1,2,3])
function j({x,y,z}){}
j({x: 1,y: 2, z: 3})

因为解构赋值的特性,因此其对提取json数据有奇效

1
2
3
4
5
6
7

var jsonData = {
	id: 42,
	status: 'OK',
	data: [123,432]
}
let {id, status, data} = jsonData
console.log(id, status, data) // 42 OK [123, 432]

遍历Map结构

Map结构也是ES6中定义的新的数据结构,它类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以当做键

1
2
3
4
5
6

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world')
for(let [key, value] of map) {
	console.log(key + ' is ' + value)
}

(完)