ES6 的解构赋值的理解

最新推荐文章于 2023-04-14 10:58:31 发布

原创最新推荐文章于 2023-04-14 10:58:31 发布 · 385 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文详细介绍了JavaScript中解构赋值的概念与应用，包括数组与对象的解构赋值方式，以及如何通过解构赋值简化变量交换和函数返回值处理等常见编程任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 解构赋值，即左边的结构和右边的结构一一对应

// 1、数组解构赋值，左边一个数组，右边一个数组，结构一一对应
{
  let a,b;
  [a,b]=[6,8];
  console.log(a,b); // 6  8
}

{
  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest); // 1  2  [3,4,5,6]
}

//2、对象解构赋值
{
  let a,b;
  ({a,b}={a:6,b:8})
  console.log(a,b); // 6  8
}

{
  let a,b,c;
  [a,b,c=9]=[6,8];
  console.log(a,b,c); // 6  8  9   c 取初值
}

{
    let a,b,c,rest;
    [a,b,c]=[6,8];
    console.log(a,b,c); // 6  8  undifined  c没有成功配对
}

// 3、 适用场景
// 适用于变量交换
{
  let a=6;
  let b=8;
  [a,b]=[b,a];
  console.log(a,b); // 8  6
}

// 方便获取函数的返回值
{
  function f(){
    return [6,8]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b); // 6  8
}

// 再返回多个值得情况下可以选择性的去取值
{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 1 4
}

// 把需要的元素取出，剩余的元素赋给一个数组，需要了再去遍历
{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
    console.log(a,b);// 1  [2 3 4 5]
}
{
    function f(){
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,,...b]=f();
    console.log(a,b);// 1   [3 4 5]
}

// 4、对象结构赋值
{
  let o={p:66,q:true};
  let {p,q}=o;
  console.log(p,q); // 66  true
}

// 没有赋值取默认值
{
  let {a=10,b=5}={a:3};
  console.log(a,b); // 3  5
}

{
  let aa={
    title:'abc',
    test:[{
      title:'test',
      desc:'abc'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=aa;
  console.log(esTitle,cnTitle); // abc  test
}