es6解构赋值

Posted 2023-04-24

参考技术A 解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构赋值要求等号两边的数据结构保持一致！

例：

  let arr = ['德玛西亚', '艾欧尼亚', '比尔吉沃特', '扭曲丛林']

    let [a, b, c, d] = arr

    console.log(a, b, c, d)

 let arr = ['德玛西亚', '艾欧尼亚', ['比尔吉沃特', '扭曲丛林']]

    let [,,[c, d]] = arr

    console.log(c, d)

 let arr = ['德玛西亚', '艾欧尼亚', ['比尔吉沃特', '扭曲丛林'], '']

    // 我们可以通过下面这种方法给变量设置默认值 当解构到的值是undefined的时候 默认值就会生效

    let [a, b, c, d = '面对疾风吧']  = arr

    console.log(c, d)

   let arr = ['德玛西亚', '艾欧尼亚', '比尔吉沃特', '扭曲丛林']

    // ... 扩展运算符 他会将剩余的所有数据赋值给同一个变量 他必须放在最后一个使用

    let [a, ...b] = arr

    console.log(a, b)

//数组合并

    var arr1 = [1, 2, 3]

    var arr2 = [4, 5, 6]

    var arr4 = [7, 8, 9]

    var arr3 = [...arr1, ...arr2, ...arr4]

    console.log(arr3)

 var arr3 = arr1.concat(arr2, arr4)

    console.log(arr3)

 // 对象的解构赋值 对象的解构赋值是按照key的名字一一对应

例：

    var obj = 

      name: 'zhangsan',

      age: 16,

      tel: 110,

      sex: undefined,

      info: 

        isSingle: true

      

    

    var tel, age, name = obj

    console.log(age)

    console.log(tel, age, name)

  let name, ...obj2 = obj

    console.log(name, obj2)

    let  name, age, tel, sex="男"  = obj

    console.log(sex)

    let info: isSingle = obj

    console.log(isSingle)

  // 字符串解构赋值 因为字符串满足数组类型的一些特定方法 比如索引值 比如length属性 所以字符串可以按照数组的解构赋值方法进行解构

    var str = '德玛西亚'

    let [a, b, c, d] = str

    console.log(a, b, c, d)

    let [a, ...b] = str

    console.log(b.join(''))

 // 数字和布尔值不能直接进行解构赋值 因为他们是一个整体

ES6-解构赋值

概念理解：

　　数组的解构赋值

　　对象的解构赋值　　

　　字符串的解构赋值

　　数值和布尔值的解构赋值

　　函数参数的解构赋值

 

数组的解构赋值：

　　一般的：

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

　　复杂点的：

    const arr = [1, 2, [3, 4, [5, 6, 7]]];
    const [, b] = arr;
    console.log(b)  // 2

    const [, , g] = [5, 6, 7];
    console.log(g)  // 7

    const [, , [, , g]] = [3, 4, [5, 6, 7]];
    console.log(g)  // 7

    const arr = [1, 2, [3, 4, [5, 6, 7]]];
    const [, , [, , [, , g]]] = arr;
    console.log(g)  // 7

    const arr1 = [1, 2, 3];
    const arr2 = ["a", "b"];
    const arr3 = ["zz", 1];
    const arr4 = [arr1, arr2, arr3];

    console.log(arr4)   // [[1,2,3],["a","b"],["zz",1]]

// 扩展运算符 
    const arr1 = [1, 2, 3];
    const arr2 = ["a", "b"];
    const arr3 = ["zz", 1];
    // const arr4 = [arr1, arr2, arr3];
    const arr4 = [...arr1, ...arr2, ...arr3];

    console.log(arr4)   // [1, 2, 3, "a", "b", "zz", 1]

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

    const arr = [1, undefined, undefined];
    const [a, b, c, d] = arr;
    console.log(a, b, c, d)  // 1 undefined undefined undefined

// 默认值
    const [a, b = 2, c, d = "d"] = arr;
    console.log(a, b, c, d)   // 1 2 undefined "d"  ----有默认值的以默认值为主

    // 交换变量
    let a = 1;
    let b = 2;

    [a, b] = [b, a];
    console.log([a, b])     // [2, 1]

 

对象的解构赋值：

    const {a,b}={a:1,b:2};
    console.log({a,b})    // {a: 1, b: 2}

　　新的对象的键名要和被解构对象的键名一样：

    const obj={
        name:"wql",
        age:23
    };
    const {name,age}=obj;
    console.log(name,age)   // wql 23
    console.log({name,age}) // {name: "wql", age: 23}

　　结合扩展运算符：

    const obj={
        name:"wql",
        age:23,
        sex:"男"
    };
    const {name,...other}=obj;
    console.log(name,other)     // wql {age: 23, sex: "男"}

 

字符串的解构赋值：

    const str="i am a man";
    const [a,b,c,...other]=str;
    console.log(a,b,c,other)    // i   a (7) ["m", " ", "a", " ", "m", "a", "n"]

 

函数参数的解构赋值：

    function fn([x,y]){
        return [y,x];
    }
    let arr=[1,2];
    arr=fn(arr);
    console.log(arr)    // [2, 1]