es6之解构

解构赋值

es6的主要的解构为两类

  • 对象解构 let {prop1: 《pattern》,prop2: 《pattern》} = object

    如 let {name:x, age:y} = {name:1,age:2},此时x为1,y为2

  • 数组解构 let [x,y] = iterable
    如 let [x,y] = [1,2],测试x为1,y为2

对象结构的过程

  1. 先将被解构者通过全局的toObject()包装为一个Object,而非Object(),因为Object在转换null和undefined时不会抛出异常,而toObject()会抛出,以便提示转化失败

  2. 变量结构的“变量“指:后面的变量而非属性名,然后以属性名为对应依据,将被解构者某属性的值与结构者
    该属性对应的变量名相对应
    即 let {length: len} = ‘abc’; len 为3 ,此时以属性length为依据,将值‘abc’与变量len对应

  3. 当解构者的key与value名相同时,可以省略一个,即let { x:x} = {x:1},则可只写一个let {x}={x:1}

数组解构原理:

  1. 以角标为对应依据,解构iterable,请参考ES6_Iteration protocols包括string,celection,generator等可迭代的对象,结构不可迭代对象的会抛出异常

  2. 以角标为依据可以跳过holes,记let [,,x] = [1,2,3];x===3 ;true

  3. “…”操作符解构数组时,在没有对应值得情况下返回[],let[a,y,…z]=[‘a’],y为undefined,z为[]

设定默认值

在没有对应值时,解构结果为默认值,对应值为undefined时不会覆盖默认值,undefined会触发默认值
let {x:1} = {x:undefined} x为1

陷阱

  1. 不要以花括号开头
  2. 注意不要重复声明,let {x:x,y:y}即已经声明,之前就不要在声明,如let x;

参数处理

  1. spread符 与 rest符,都是’…‘
    rest操作符从Array中解构数据,用于function中把剩余的参数转化一个array(抛弃arguments,拥抱剩余参数)和解构Array使用

  2. spread操作符可以将数组解析为function的参数,如Math.max(…[1,2,3]),解析为(1,2,3); array.push(…[1,2,3])解析为array.push(1,2,3);
    在字面量数组中将可迭代的元素( iterable)解析为元素,如[1,…[123],4]解析为[1,1,2,3,4] ; […’abc’]解析为[‘a’,’b’,’c’] 解析generator […{*[Symbol.iterator(){yield ‘a’; yield ‘b’}]}]