es6学习笔记2-解构赋值

Posted 2020-07-03

解构赋值基本概论就按照一定的模式通过数组或者对象对一组变量进行赋值的过程。

　　1.通过数组对变量进行赋值：

/*通过这种方式赋值要注意左右两边的结构模式要一样，在赋值的时候，根据位置进行赋值对应模式.*/
//普通赋值方式
 var a = 1;
 var b = 2;
 var c = 3;

//解构赋值方式
var [a,b,c] = [1,2,3];

// 针对其他比较特殊的模式赋值方式，如果变量解构不成功就赋值undefined
var [a,[[b],c]] = [1,[[2],3]] // a =1, b = 2, c = 3
var [ , , c] = [1,2,3] // c = 3
var [a ,b, ] = [1,2,3] // a =1, b = 2
var [a , ...b] = [1,2,3,4] //a = 1 ,b = [2,3,4]
var [a ,b ,...c] = [1] // a = 1, b = undefined, c = []

//在赋值结果数量与变量不匹配的时候根据模式进行从左向右开始赋值
var  [a ,b] = [1,2,3] // a = 1, b = 2 
var  [a, [b], d] = [1, [2, 3], 4] // a = 1, b = 2, d = 4

　　注意：在赋值的过程中，如果右值不是数组(不可遍历对象-实现Iterator)那么赋值将会事变！

// 报错
let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

　　解构赋值可以定义默认值

var [a = true] = []; // a = true

[x, y = ‘b‘] = [‘a‘] // x=‘a‘, y=‘b‘
[x, y = ‘b‘] = [‘a‘, undefined] // x=‘a‘, y=‘b‘

var [x = 1] = [undefined]; // x = 1

var [x = 1] = [null]; //x = null

/*在通过表达式进行赋值的时候属于惰性赋值，即在使用的时候才会进行表达式求值*/
function add(a,b){
      return  a + b   
}
var [ a = add(1,2)] = [ 0 ] // 只有在用到a的时候才进行求值操作！！！

// 解构变量可以进行引用，但是引用的变量必须先赋值
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

　　2.对象的解构赋值

/*与数组赋值不同的是，数组是通过位置决定赋值结果的，而对象是通过属性名字进行赋值的，所以赋值对象的顺序可以和要被赋值的顺序不同，如果没有同名属性，则该属性值为undefined*/
var { foo, bar } = { foo: "aaa", bar: "bbb" };
var { bar, foo } = { 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‘

var { foo: baz } = { foo: "aaa", bar: "bbb" }; /*baz = "aaa" ,foo = error: foo is not defined*/