解构赋值
ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构。
1.解构赋值：基本用法、解构重命名、解构默认值
基本用法：字符串，数组，对象都可以进行解构赋值，下面是数组的解构
let json = ["张三", 20, "男"]
let [name,age,sex] = json;
console.log(name,age,sex); // 张三 20 男
//注意：等号前面的解构变量不能有引号，它是一个变量，不是字符串，如：let ["name","age","sex"] = ["张三", 20, "男"]; 这样写是错误的。
//可以修改解构变量的值：
name="李四" //上面的"张三"就改为"李四"了
----------------------------------------------------
解构重命名：可以对数据对象的key值，进行重命名
let json = {
name:"张三",
age:20,
sex:"男"
}
let { name,age:a,sex:b } = json;
console.log(name,a,b); // 张三 20 男
----------------------------------------------------
解构默认值：可以对没有解构到的变量赋默认值
let json = ["张三", 20, "男"]
let [name,age,sex,love="运动"] = json;
console.log(name,age,sex,love); // 张三 20 男 运动
注意：这个地方有一点需要注意：如果带有默认值的的变量，解构到的数据是 null 时，他此时的值将不再是默认值，二是 null 。
如果解构到的值是 undefiend ,他此时的值任然是默认值。例如：
let [name,age,sex,love="运动"] = ["张三", 20, "男",undefiend];
console.log(name,age,sex,love); // 张三 20 男 运动
let [name,age,sex,love="运动"] = ["张三", 20, "男",null];
console.log(name,age,sex,love); // 张三 20 男 null交换两个数的位置
let a = 10;
let b = 20;
[a,b] = [b,a]
console.log(a,b) // 20 102.对象解构赋值：
//基本用法：
let {name，age,sex} = {name:"张三", age:"20", sex:"男"} ;
console.log(name); // 张三
console.log(age); // 20
console.log(sex); // 男
//含有数组：
let {name，age, sex, friend} = {name:"张三", age:"20", sex:"男", friend:["李四", "王五"]} ;
console.log(name); // 张三
console.log(age); // 20
console.log(sex); // 男
console.log(friend); // ["李四", "王五"]
//含有对象：
let {name,age, sex, friend, pet} = {name:"张三", age:"20", sex:"男", friend:["李四", "王五"], pet:{name:"旺财" ,age:"2"}} ;
console.log(name); // 张三
console.log(age); // 20
console.log(sex); // 男
console.log(friend); // ["李四", "王五"]
console.log(pet); // {name:"旺财" ,age:"2"}
//注意：对象的结构赋值，key值的顺序可以随便,但前后的key值名称一定要一一对应，不然就会出undefined,写。
let {name:str} = {name:"张三"};
console.log(name); // 显示不出结果
console.log(str); // 张三
//因此，不要用这种方式解构赋值，一定要按照key值对应解构；关于对象，先定义变量后，再解构赋值问题解析 ：如果{}前面没有变量声明符如let , 浏览器会直接将{ } 看成是一个块级作用域，会报语法错误。
先定义的变量，再解构赋值，这样写的话，会报错语法错误
let a;
{ a } = { a:"123", b:12}
----------------------------------------------------------
如果坚持要先定义变量再解构，需要这样写才不会出错，用()包起来
let a;
({ a } = { a:"123", b:12})3.数组嵌套解构赋值：
let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
concole.log(arr1,arr2,arr3,arr4,arr5) // 1, 2, 3, 4, 5
//注意：不管简单还是复杂的数组解构赋值，只要前后解构关系一样就都可以赋值成功
//解构赋值没有找到时会返回undefiend
let [arr] = [];
console.log(arr) // undefiend
let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
//解构赋值是按照从左往右的顺序一一对应查找赋值的:
let [a, , , c] = [1, 2, 3];
console.log(a) // 1
console.log(c) // undefined4.基本类型的解构赋值：（开发中晕的比较少。了解即可）
//String类型有构造器的，可以解析。
let [a, b, c, d, e] = "我是中国人";
console.log(a) // 我
console.log(b) // 是
console.log(c) // 中
console.log(d) // 国
console.log(e) // 人
//Number类型是没有构造器的，无法解析。
let [a, b, c, d, e] = 12306;
console.log(a) // 直接报错
console.log(b) // 直接报错
console.log(c) // 直接报错
console.log(d) // 直接报错
console.log(e) // 直接报错延展操作符/扩展运算符
语法是三个点：...
扩展的作用：将数组展开
let arr = ["red","blue",green]
console.log(...arr) // red blue green
-------------------------------------------------------
重置的作用：包装成数组，多用于函数传参
function show(...a){
console.log(arguments) // 以前的用法 [1,2,3,4,5,6]
console.log(a) // [1,2,3,4,5,6]
}
show(1,2,3,4,5,6)
-------------------------------------------------------
剩余运算的作用：将剩余的参数包装成一个数组
function show(a,b,...c){
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5,6]
}
show(1,2,3,4,5,6)
注意：包装剩余的参数一定要放在最后，不能放在其他文位置
function show(a,...b,c){
// 浏览器会直接报错
}
show(1,2,3,4,5,6)复制数组、对象：浅拷贝
let arr = [1,2,3,4];
//let arr2 = Array.from(arr) // 以前的用法
let arr2 = [...arr]
console.log(arr2) // [1,2,3,4]
let arr = {name:"a",age:12};
let arr2 = {...arr}
console.log(arr2) // {name:"a",age:12}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
