2.解构赋值

1. 解构赋值 声明和赋值都放到一起了

2. 解构 表示等号左边和右边解构类似

3. 数组的必须位置相同

1.数组的解构赋值

 let arr = [1,2,3,4];
// let x = arr[0];
// let y = arr[1];
// let m = arr[2];
// let n = arr[3];//我们要获取到数组中的每个值，要么像这样取，要么用循环

1.ES6中提供了解构赋值：

let [x,y,m,n] = arr;
console.log(x, y, m, n);//顺序打印出了arr中的每个值

2.若数组长度不够：

    let [i,j,k] = [1,2];
    console.log(i, j, k);//k被打印出undefined

3.若数组长度超过：

let [q,w,e] = [1,2,3,4];
console.log(q, w, e);//纸打印出前面的三个

4.有默认值的情况 只有后面结构赋值是undefined的时候，才会采用默认值，即x2为10，而不是被赋值为undefined

    let [x1,x2=10] = [1,2];
    console.log(x1, x2);//1 2

默认值测试：

let [m1,m2=(function () {console.log("哈哈")();return 10;})] = [1,2];//我们让m2的默认值为一个自执行函数，如果是先执行默认值再赋值，会打印“哈哈”，再让m2等于返回的值10
console.log(m1, m2);//结果只打印了1,2 说明没有使用默认值

5.省略赋值，把位置空出来

    let[,,m3] = [1,2,3];
    console.log(m3);//打印3

6.不定参数赋值

若我想将后三项全部拿到？
将后面的项放在一个数组中赋值给y3，即y3=[3,4,5]

let[y1,y2,...y3] = [1,2,3,4,5];
console.log(y3);//打印一个数组

2.对象的解构赋值

如果变量名和属性名一样的话 可以直接省略写法

let {name:name,age:age}={name:"hello",age:19};
等价于
let {name,age} = {name:"hello",age:20};
    console.log(name);

1.拿到数组的length

对象解构时名字必须相同

把右面的数组看做对象，读取对象的length

let { length } = ['hello', 9];
console.log(length);

2.对象中也有默认值的情况,若赋值的是undefined，那么还是采用默认值

let {name,age=10} = {name:"helloo",age:20};
console.log(age);

3.嵌套(数组合对象的混合情况)

    let {name,age=10,list:[a1,a2,a3,a4]} = {name:"hello",age:20,list:["js","node","vue","react"]};
    console.log(name,age,a1,a2,a3,a4);//此时要拿数组中的内容应该直接拿变量名即可
    // console.log(list[a1]);//这样会提示 list没有定义

我们还可以这样定义对象

let x1,x2;
({x1,x2} = {x1:1,x2:2});
console.log(x1, x2);//拿括号包起来是因为块级作用域
//1 2

4.如果有关键字可以采用:的形式进行更改名字

let { name, age, default: d } = { name: 'hello', age: 9, default: 'xxx' };
console.log(d);

5.其数据类型解构赋值

1.使用数组解构赋值的形式，如果等号右边不是一个数组默认将其转换为类数组，里面包含的是字符串(类似数组的对象，必须有一个length属性)

    let [x,y] = "123";
    console.log(x, y);//也可以拿到，“1”和“2”，都是字符串
    let [x,y] = "123";
    console.log(x, y);//也可以拿到，“1”和“2”，都是字符串

    // let [m,n] = 1;
    // console.log(m, n);//报错：1 is not iterable，1没有length属性

2.使用对象解构赋值的形式 如果等号右边不是对象 默认转为对象 再进行结构赋值

因此 我们可以利用解构赋值来拿到一些属性的值

    let {a} = 1;
    console.log(a);//打印undefined，没有报错，因为默认把1转为一个对象
    console.log(Object(1));//打印Number {1}  把1转为对象后，可以发现，它有一个属性名：__proto__

    //因此我们这样赋值
    let{__proto__:a1} = 1;//等号右边的内容相当于一个对象，有一个__proto__属性名
    console.log(a1);//这样就拿到了__proto__的值

    let {length:b} = "1234";
    console.log(Object("1234"));//发现转为对象后，有一个length属性，那我们就这样来取值
    console.log(b);//输出b，我们就拿出了length的值

let {length:b} = "1234";
console.log(Object("1234"));//发现转为对象后，有一个length属性，那我们就这样来取值
console.log(b);//输出b，我们就拿出了length的值

3.函数参数的结构赋值

 function getA([a,b,c,...d]) {
        console.log(a, b, c, d);
    }
    getA([1,2,3,4,5]);//打印出了 1,2,3,[4,5]

    function getB({name,age}) {
        console.log(name, age);
    }
    getB({name:"hello",age:19});//打印出了："hello" 19

    //有默认值的情况
    function getC({name="hello",age=20}) {
        console.log(name, age);
    }
    getC({name:"hello",age:19});
    //但是若一个参数都不传
    getC();
    //报错：Cannot destructure property `name` of 'undefined' or 'null'.没有实参会报错

4.函数参数解构赋值拓展

function getC1({name="hello",age=20}={}) {
        console.log(name, age);
    }
    function getC2({name,age}={name:"hello",age:20}) {
        console.log(name, age);
    }
    getC1();
    getC2();//C1和C2都输出了hello 20

    getC1({});//hello 20
    getC2({});//undefined undefined

    //要是没有传入参数，那么我们可以采用以上两种方式来避免报错

    //在第二种情况，赋空对象的情况下，C1因为参数本身存在空对象赋值给形参的情况，所以还是会打印出内容
    //C2则是将参数变为了空对象赋值给了形参，所以会变为undefined

5.解构的应用

解析返回的结果：

function test() {
  return [1, 2, 3];
}
let [a, b, c] = test();

ajax

function ajax({ url = new Error('url without'), type = "get", data = xxx }) {
  console.log(url, type, data);
}
ajax({
  url: '/test',
  data: {}
});