ES6解构赋值详解(对象,数组,字符串,方法,参数)

// 数组解构
var a=1, b = 2, c = 3;
var [a, b, c] = [1, 2, 3];
console.log(a,b,c);
// 带默认值
var [a, b, c='default', d='default'] = [1, 2, 3];
console.log(a,b,c,d); //a:1, b:2, c=3, d:default

var [a, b, c] = [1, 2];
console.log(a, b, c)//1,2,c为 undefined

var [a, , c] = [1, 2, 3];
console.log(a, b, c)  //b is not defined

var [a, ...c] = [1, 2, 3];
console.log('a:', a);  // a:1
console.log('c:', c);  // c: [2, 3]


//对象解构
var obj = {
  arr: [
    'mily',
    {a: 1}
  ]
}
let {arr: [name,{a:A}]}=obj;
// console.log(name,a) 
// 这里是把a重命名为A, 所以上面的在ES5中会显示为undefined, ES6则会报错:a is not defined
console.log(name,A)   //mily 1


//复杂对象解构
let res = {
  status: 200,
  id: 11,
  data: [
    {name: 'mily'},
    {name: 'huahua'}
  ]
}

let {status, id, data}=res;
console.log(status, id, data[0].name); // (200 11 "mily")


//解构方法
let {floor, pow} = Math;
let num = 1.3;
console.log('floor(num)', floor(num));  //floor(num): 1;  这里把Math里面的方法直接解构出来调用

console.log('pow(2, 3)', pow(2, 3));    //floor(num): 8; 2的3次方. 这里把Math里面的方法直接解构出来调用



//字符串解构
let {length} = 'mily';            // length是字符串原生的属性
console.log('length:', length);   // length: 4

let [a1, b1, c1] = 'mily';
console.log(a1, b1, c1)           //'m' 'i' 'l'


// 解构方法参数
var obj = { a:1, b:2};
function test( {a, b} ) {
  console.log('a:', a);
  console.log('b:', b);
}
test(obj);  //这时的参数只要直接传入对象即可; es6中这里{a,b}=obj

var obj = {a: 3};
function test({a, b=10}) {  //这里直接给b设置默认值10
  console.log(a, b)         
}
test(obj)                   //3, 10