ES6学习之-变量的解构赋值

第一部分：数组的解构

1、基本用法

概念：ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值。这被称为结构赋值 数组结构是有顺序的，

 const arr = [1, 2, 3, 4]
 let [A, B, C, D] = arr
 
 //模式匹配,只要等号两边的结构相同
 let [[m],n]=[[4],5]
 let [,,j]=[1,2,3]   j=3
 
 let [y,...x]=[1,2,3,4,5]
 x  //[2,3,4,5]   //有了扩展运算符
 let [...y,...x]=[2,3,4,5,6]  //这里是不被允许的，扩展运算符必须放在last

let [x, y, ...z] = [1];
x  //1
y  //undefined
z //[]

//如果解构不成功，值为undefined
let [foo]=[]
foo  //undefined

注意：等号右边需要为可遍历的结构，下面的全部报错，不具备Iterator 接口

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

对于 Set 结构，也可以使用数组的解构赋值。只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

let [x, y, z] = new Set(['a', 'b', 'c']);

2、解构赋值允许默认值

let [m=2,n]=[,3]
m  //2

//如果有值，就用解构的值，没有就读取默认值
//当数组成员严格等于undefined，默认值才生效
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [null];  //x=null

第二部分：对象解构

对象的结构是没有顺序的，只要是在左边的对象中写了key值就会提取到

var person={
  name:'vina',
  age:18,
  level:2
}
let {name,age:A}=person  //左边的key必须要与提取对象的属性值要一样
//给age设置别名A
//数组元素按次序排放，对象的属性没有次序，变量名与属性名同名即可取到值
let { bar } = { foo: 'aaa', bar: 'bbb' };  //bar='bbb'
let { baz } = { foo: 'aaa', bar: 'bbb' };  baz // undefined
//也可用于嵌套
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p: [x, { y }] } = obj; //这里的p是模式
let {p}   
//对象的结构也可以设置默认值。
var person={
  
  age:18,
  level:2
}
let {name='vina',age:A}=person

//对象的结构也可以设置默认值。
var person={
  
  age:18,
  level:2
}
let {name='vina',age:A}=person

第三部分：函数解构

//对象
var context={
   firstName:'liu',
   lastName:'wei'
}
function concat({firstName,lastName}){
    console.log(firstName+lastName)
}
concat({context})

//数组
var arr=[2,3]
function add([a,b]){
  return a+b
}
add(arr)

总结： 对象解构使用比较使用比较多，学习框架的时候使用很多库，库暴露出来的就是对象。 函数参数的结构，可以快速的从数组 或者对象中获取值，作为函数参数，可以大大简化书写代码