ES6解构赋值（数组，对象，函数）
目录
数组的解构赋值
基础写法(完全解构)
不完全解构
解构失败
设置占位
设置解构默认值
对象的解构赋值
完全解构
不完全解构
解构失败
函数的解构赋值
完全解构
不完全解构
解构失败
解构失败 设置默认值
设置默认值完善版
完善版
定义：解构赋值是ES6中提供的一种新操作，这种操作 可以将数组、对象中的数据取出来 并给变量赋值
-
分类：
-
数组的解构赋值
-
对象的解构赋值
-
函数的解构赋值
-
数组的解构赋值
基础写法(完全解构)
//目前有一个现成的数组
let arr = ["爱新觉罗","故里","西欧安家"];
//现在我想声明三个变量a、b、c 分别赋值为 数组中的数组项
let [a,b,c] = arr;数组的解构赋值 就是根据对应关系 将等号右侧的数组中的数组项 赋值给等号左侧数组中的变量
不完全解构
//目前有一个现成的数组
let arr = ["张三","李四","王五"];
//现在我想声明三个变量a、b、c 分别赋值为 数组中的数组项
let [a,b] = arr;
console.log(a,b)//张三 李四
当声明的变量个数 少于数组项个数的时候 就是不完全解构 不完全解构 会按照顺序 将数组中的数组项赋值给 变量
解构失败
//目前有一个现成的数组
let arr = ["张三","李四","王五"];
//现在我想声明三个变量a、b、c 分别赋值为 数组中的数组项
let [a,b,c,d] = arr;
console.log(a,b,c,d)//张三 李四 王五 undefined当声明的变量个数 多于 数组项个数的时候 就是解构失败 按照顺序赋值 多出来的变量 值为undefined
设置占位
let arr = [1,2,3,4];
let [,,,a] = arr
console.log(a);//4数组的解构赋值 也可以使用占位 来达到我们想要将指定值赋值给变量的目的
设置解构默认值
//目前有一个现成的数组
let arr = ["张三","李四","王五"];
//现在我想声明三个变量a、b、c 分别赋值为 数组中的数组项
//给d变量设置默认值
let [a,b,c,d="替身"] = arr;
console.log(a,b,c,d)//张三 李四 王五 替身注意：如果我们没有给变量赋值 变量就会使用默认值 如果我们给变量赋值了 即便变量有默认值 也会使用我们后来赋的值
对象的解构赋值
完全解构
let obj = {
name:"张三",
age:40,
gender:"纯爷们",
hobbies:["钱","房","车","权","人"]
}
//声明四个变量a,b,c,d 将四个属性 分别赋值给 四个变量
let {name:a,age:b,gender:c,hobbies:d} = obj
console.log(a,b,c,d);简写形式：当声明的变量名 和 属性名相同的时候 我们可以简写
let obj = {
name:"张三",
age:40,
gender:"纯爷们",
hobbies:["钱","房","车","权","人"]
}
//声明四个变量a,b,c,d 将四个属性 分别赋值给 四个变量
let {name,age,gender,hobbies} = obj
console.log(a,b,c,d);不完全解构
let obj = {
name:"张麻子",
age:40,
gender:"纯爷们",
hobbies:["钱","当县长","公平","夫人","没有黄老爷"]
}
//声明四个变量a,b,c,d 将四个属性 分别赋值给 四个变量
let {name,age,gender} = obj
console.log(name,age,gender);//张麻子 40 纯爷们不完全解构就是 声明变量的个数 少于属性的个数 按照对应关系 将属性值 赋值给 变量
解构失败
let obj = {
name:"张麻子",
age:40,
gender:"纯爷们",
hobbies:["钱","当县长","公平","夫人","没有黄老爷"]
}
//声明四个变量a,b,c,d 将四个属性 分别赋值给 四个变量
let {name,age,gender,skills:skills} = obj
console.log(name,age,gender,skills);//张麻子 40 纯爷们 undefined解构失败 是 声明的变量赋的属性值 在对象中不存在 这个时候 由于用来赋值的属性 在对象中不存在 因此 属性值为 undefined 所以 变量赋的值就是undefined
函数的解构赋值
解构赋值就是将数组或对象的内容拆出来 赋值给变量
在函数中 只有形参实参系统 涉及到 变量赋值 因此 函数的解构 解构的是形参和实参
完全解构
let obj = {name:"张三",age：18}
//在函数中 设置两个形参 name 和 age 分别赋值为 obj对象中的 name和age属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name,age}){
console.log(name);
console.log(age);
}
fn(obj)函数的解构 就是形参实参的解构 ，相当于
function fn({name,age}){
//声明形参 相当于在函数中声明变量
//写入实参 相当于给形参声明的变量赋值
//let {name,age} = obj
console.log(name);
console.log(age);
}
fn(obj)不完全解构
let obj = {name:"张三",age：18}
//在函数中 设置一个形参 name 分别赋值为 obj对象中的 name属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name}){
console.log(name);
}
fn(obj)相当于
function fn({name}){
//let {name} = {name:"张三",age：18}
console.log(name);
}
fn(obj)解构失败
就是声明的变量 没有对应的属性来赋值
let obj = {name:"张三",age：18}
//在函数中 设置一个形参 name 分别赋值为 obj对象中的 name属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name,skills}){
console.log(name);
console.log(skills);
}
fn(obj)相当于
function fn({name,skills}){
//let {name:name,skills:skills} = {name:"张三",age：18}
console.log(name);
console.log(skills);
}
fn(obj)解构失败 设置默认值
let obj = {name:"张三",age：18}
//在函数中 设置一个形参 name 分别赋值为 obj对象中的 name属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name,skills:skills=默认值}){
console.log(name);
console.log(skills);
}
fn(obj)注意：默认值 都是我们没有值来给变量赋值的时候 才使用 如果有值 就不使用默认值了
设置默认值完善版
let obj = {name:"张三",age：18}
//在函数中 设置一个形参 name 分别赋值为 obj对象中的 name属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name,skills:skills=默认值}){
console.log(name);
console.log(skills);
}
fn()如上述代码所示 如果用户在调用函数的时候 忘记传参想，相当于
let obj = {name:"张三",age：18}
//在函数中 设置一个形参 name 分别赋值为 obj对象中的 name属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name,skills:skills=默认值}){
//let {name,skills} = undefined
console.log(name);
console.log(skills);
}
fn()完善版
let obj = {name:"张三",age：18}
//在函数中 设置一个形参 name 分别赋值为 obj对象中的 name属性
//let{属性名：变量,属性名:变量，...} = 对象
function fn({name,skills:skills=默认值} = {}){
console.log(name);
console.log(skills);
}
fn()相当于
//如果用户没传参
function fn({name,skills:skills=默认值} = {}){
//let {name,skills} = {} 变量使用默认值
console.log(name);
console.log(skills);
}
fn()
//如果用户传参
function fn({name,skills:skills=默认值} = {}){
//let {name,skills} = {}
//let {name.skills} = obj
console.log(name);
console.log(skills);
}
fn(obj)