ES6系列——解构(六)

从这个标题可以看出解构这个词,意思就是把一个东西拆分开,然后再按照一定的逻辑或者是规则合并起来,当然解构可以是针对于数组、对象、字符串等等。所以我们先从最简答你的入手。


数组解构

先举一个简单的例子:

  1. //通常在ES5中声明多个变量的方法有一下写法:
  2. var a = 0;
  3. var b = 1;
  4. var c = 2;
  5. //另一种写法
  6. var a = 0,
  7. b = 1,
  8. c = 2;

我们利用es6的数组解构的属性可以写成为:

  1. let [a,b,c] = [1,2,3];

这里我们可以看到等号两边都是数组,那么在解构的时候对于两边都是数组的形式采用按照顺序的模式进行一一匹配。

同时我们也可以使用ES6的特殊嵌套式声明模式。如下:

  1. let [a,[b,[c]]] = [1,[2,[3]]];

这种嵌套模式,必须是数组两边的模式相同,才能进行匹配,如果解构不成功的变量值将会为undefined,如果说等号右边的模式与左边的模式不相同则会报错。

默认赋值

ES6中允许对变量进行默认赋值,如下:

  1. let [a = true ] = [];
  2. a;//true

在创建了变量a之后,变量的值优先使用自己的默认赋值,如果右侧的数组中没有匹配到值,则使用变量的默认值,如果右侧和默认值都没有匹配到,则值为undefined

对象的解构赋值

对象的解构赋值,先看一个示例:

  1. let { a , b } = { a 1 b : 2};
  2. a;//1
  3. b;//2

注意:对象的解构与数组不同,数组的解构在上面我们已经说了,是按照顺序进行一一匹配的,而对象的解构,则是按照“键值对”中的 keyvalue进行对应的,意思就是说,在对前面声明的变量进行赋值的时候,是按照变量的名字进行查找的,
而和右面的对象中的值的顺序没有关系,我们再来看另一个例子方便我们更加深入的了解:

  1. var { foo : a } = { foo : "sss" , bar : "ddd"};
  2. a;//sss

从上面的例子看出。也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者,而不是前者,前者叫模式,后者叫变量。

字符串结构赋值

最后我们来看看字符串赋值,仍然是举个例子:

  1. let [ a , b , c , d , e ] = "hello";
  2. a//h
  3. b//e
  4. c//l
  5. d//l
  6. e//o

字符串的赋值规则比较简单,如果等号右边不是对象,则先转换为对象,再进行拆分,这里需要注意的是,undefinednull不能转换为对象,所以不能进行解构赋值,会报错。

解构赋值核心语法

ES6引入了新的扩展运算符,即rest参数,形式为(...变量名),详细说明请点击此处
同时,解构赋值的上实用了特殊的扩展运算符的语法之后。写法如下:

  1. let [ a, ...b ] = [1,2,3,4];
  2. a;//1
  3. b;//2,3,4

同样的方法我们可以用在函数的参数上,或者是数组的操作,从而替换原生javascript中的apply()等方法。详情参考

评论: