解构赋值
解构赋值就是将一个集合中的元素或者说是属性 一个一个的取出来赋给一个或者是多个变量
每一个数据解构的解构赋值都是不同的 数组的数据解构和对象的数据解构不同 解构方式也不同
数组的解构赋值 按照顺序进行解构 字符串和数组的数据解构相同 都是有序的 所以和数组保持一致
对象的解构赋值 按照键名进行解构
1.数组的解构赋值
数组的解构赋值是按照数组的方式 使用数组进行解构 按照下标的顺序 变量的名字自定义
1.数组的完全解构
完全解构就是将数组中所有的值全部取出 赋给所有的变量 变量的数量和数组元素的数量相等
/*
数组的解构赋值
1.使用数组解构数组 中括号
2.数组的解构按照下标的顺序
3.变量可以自定义
*/
// let a,b,c,d,e = arr;
// console.log(a);
// console.log(e);
let [a,b,c,d,e] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
2.数组解构的缺省情况
缺省情况有两种 变量大于数组元素数量 数组元素数量大于变量
但是缺省情况都不会报错 只是对数组的不完全解构
/*
缺省情况
数组元素的数量大于变量的数量
这种情况 不错报错 只是不完全解构 还是按照数组的下标进行解构
数组元素的数量小于变量的数量
这种情况 也不会报错 但是多余的变量会被赋值为undefined
*/
// let [a,b] = arr;
// console.log(a);
// console.log(b);
let [a,b,c,d,e,f] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f); //undefined
3.解构默认值
在解构赋值的时候 如果说变量的数量多余数组元素 那么可以给变量设定默认值
// 数组解构
let arr = [22,66,88];
// 默认值从后往前设定默认值
let [a = 33,b = 55,c = 77,d = 99] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
4.占位符解构
主要的目的是尽量少的使用栈空间的内存
// 占位符解构
let arr = [11,33,55,666,88,99];
let [,,,num] = arr;
console.log(num);
2.字符串解构赋值
字符串的数据解构和数组是完全相同的 每一个字符都有自己的下标
都是有序的数据结构 可以迭代
// 字符串解构赋值
let str = "YES";
// console.log(str[0]);
// 完全解构
// let [a,b,c] = str;
// console.log(a);
// console.log(b);
// console.log(c);
// 不完全解构
// let [a,b,c,d] = str;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// 默认值
// let [a,b,c,d = 'M'] = str;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
let [,a] = str;
console.log(a);
3.对象解构赋值
对象解构赋值 因为对象是无序的 所以说对象不能按照顺序进行解构 但是对象有键名
所以说 我们可以按照键名进行解构赋值 解构的时候 和数组不同
1.使用对象解构对象 使用大括号{}
2.按照键名解构赋值
3.可以不按照顺序进行解构
let obj = {
name : 'Eric',
age : 18,
sex : '男'
};
// console.log(obj);
// 如果说解构对象的时候 按照键名 不按照顺序
// let {name : uname,sex : usex,age : uage} = obj;
// console.log(uname);
// console.log(usex);
// console.log(uage);
// 缺省情况
// let {name : uname,age : uage} = obj;
// console.log(uname);
// console.log(uage);
// let {name : uname,sex : usex,age : uage,address : addr} = obj;
// console.log(uname);
// console.log(usex);
// console.log(uage);
// console.log(addr);
// 默认值解构
let {name : uname,sex : usex,age : uage,address : addr = '吉林长春'} = obj;
console.log(uname);
console.log(usex);
console.log(uage);
console.log(addr);
特殊的对象解构赋值
// 特殊的解构赋值方式
let {name,sex,age} = obj;
console.log(name);
console.log(age);
console.log(sex);
4.函数参数解构赋值
// 函数参数解构赋值 参数是数组得情况下
function fn1([a,b,c] = array) {
// console.log(array);
console.log(a);
console.log(b);
console.log(c);
}
// 定义一个数组 作为实参
let arr = [11,33,88];
fn1(arr)
// 参数是对象的情况下
let obj = {name : 'Eric',age : 18};
// 对象的解构赋值和外面有点不一样
function fn2({name,age} = {name : 'Mary',age : 16}) {
// console.log(object);
console.log(name);
console.log(age);
}
fn2();
fn2(obj);