ES6 数组对象解构赋值 其他类型的解构赋值

数组解构赋值

1.解构赋值的定义

解析某一数据的结构，将想要的东西提取出来，赋值给变量或常量。

const arr = [1, 2, 3];
// const a=arr[0];
// const b=arr[1];
// const c=arr[2];
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1 2 3

// 模式(结构)匹配,索引值相对应
let [a,b,c]=[1,2,3];

// 如果想要取出1,5,3
const [d,[,,e],f]=[1,[2,4,5],3];
console.log(d,e,f); //1 5 3

2.解构赋值的默认值

只有当一个数组成员严格等于（===） undefined时，它的的默认值才会生生效。如果默认值是表达式时，默认值表达式是惰性求值的。

const [a, b] = []; //a=undefined,b=undefined
const [c = 1, d = 2] = []; //1 2

//只有当一个数组成员严格等于（===） undefined时，对应的默认值才会生生效。
const [e = 1, f = 2] = [3, 4] //3,4
const [i = 2, j = 6] = [5] //5 6
console.log(a, b, c, d, e, f, i, j); //undefined undefined 1 2 3 4 5 6

// 如果默认值是表达式时，默认值表达式是惰性求值的
const func = () => {
    console.log("我被执行了")
    return 2;
};
const [x = func()] = [1]; // 此时函数func并没有执行
const [y=func()]=[];
console.log(x,y); //1 2 

3.解构赋值的应用

类数组可以进行解构赋值

// 1.常见的类数组的解构赋值
// arguments
function func(){
    const [a,b]=arguments;
    console.log(a,b); //1 2
}
func(1,2); 

// NodeList
console.log(document.querySelectorAll('p')); //NodeList(3) [p, p, p]
const [p1,p2,p3]=(document.querySelectorAll("p"));
console.log(p1,p2,p3);

函数参数的解构赋值

const array=[1,2];
// 不用解构赋值参数的写法如下
// const add=arr=>arr[0]+arr[1];
// 使用解构赋值
const add=([x,y])=>x+y;
console.log(add(array)); //3 

//还可以给形参添加默认值
const add1=([x=1,y=3])=>x+y;
console.log(add1([])); //4

交换变量的值

let x=1 ,y=2;
//相当于[x,y] =[2,1]，而不是右边的y赋值给x，x赋值给y
[x,y]=[y,x];
console.log(x,y); //2 1

对象解构赋值

1.模式匹配，属性名相同的完成赋值，不需要按照顺序

// 1.模式匹配，属性名相同的完成赋值，不需要按照顺序
//简写形式
const {age,name}={name:"alex",age:18};
console.log(age,name); //18 "alex"
// 完整形式
const {age:age1,name:name1}={name:"alex",age:18};
console.log(name1,age1); //alex 18

2.对象解构赋值的注意事项

// 1.默认值的生效条件
// 对象的数值值严格等于undefined时，对应的默认值才会生效
const {name } = { name: "alex"};
console.log(name); //"alex"
// 注意默认值的赋值是用等号，而不是用冒号
const {name1="billie",age=0}={};
console.log(name1);
// 2.如果默认值是表达式，默认值表达式是惰性求值的

// 3.将一个已经声明的变量用于解构赋值
let x=1;
// {x}={x:3}; 会报错，和解决箭头函数的单行语句的返回值是对象一样，在整个外层加上括号
({x}={x:3});
console.log(x); //3

// 4.可以取到继承的属性
const {toString}={};
console.log(toString);// 并没有输出undefined
// toString的属性继承自Object
console.log(Object.prototype);
const {a}={};
console.log(a); //undefined

3.对象解构赋值的应用

// 函数参数的解构赋值
//const info=user=>console.log(user.name,user.age);
const info=({age,name})=>console.log(age,name);
info({name:"hh",age:12});

其他数组类型的解构赋值

1.字符串的解构赋值

//数组形式的解构赋值
const [a,b,,,c]="hello";
console.log(a,b,c); //h e o
// 对象形式解构赋值
const {0:x,1:y,length}="hello";
console.log(x,y,length); //h e 5

2.数值和布尔值的解构赋值(只能按照对象形式解构赋值), 会自动将右侧的数值或布尔值转换为对象

const {aa,toString}=123;
console.log(aa,toString); //toString属性是继承而来的

3.undefined和null的解构赋值会报错

// 由于undefined和null，无法转化为对象，所以对它们进行解构赋值都会报错
const {ff}=undefined;
console.log(ff); //报错

总结