解构赋值

解构赋值

​ 解构赋值就是将一个集合中的元素或者说是属性 一个一个的取出来赋给一个或者是多个变量

​ 每一个数据解构的解构赋值都是不同的 数组的数据解构和对象的数据解构不同 解构方式也不同

​ 数组的解构赋值 按照顺序进行解构 字符串和数组的数据解构相同 都是有序的 所以和数组保持一致

​ 对象的解构赋值 按照键名进行解构

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);