ES6语法: 解构赋值

最新推荐文章于 2023-08-19 12:01:50 发布

CaptainDrake

最新推荐文章于 2023-08-19 12:01:50 发布

阅读量263

点赞数

分类专栏： # ES6 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/captaindrake/article/details/131544943

版权

ES6 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ES6引入了解构赋值，可以方便地从数组和对象中提取值并赋给变量。数组解构允许定向取值和嵌套处理，对象解构则支持别名赋值及属性深度提取。解构不成功时，变量值为undefined。在实际应用中，解构赋值常用于简化函数参数处理。

摘要由CSDN通过智能技术生成

作用: ES6允许按照一定方式从数组和对象中提取值, 并对变量进行赋值, 这被称为解构赋值.

数组解构:

let [a, b, c] = [1, 2, 3]; 
console.log(a) 
console.log(b) 
console.log(c)

如果解构不成功，变量的值为undefined。

let [foo] = []; //Cannot redeclare block-scoped variable 'foo'
let [bar, foo] = [1];  //Cannot redeclare block-scoped variable 'foo'.

补充:

// 定向取法
let arr1 = [1, 2, 3];
let [,,d] = arr1;
console.log(d); //3

// 嵌套写法
let arr = [1, [2, 3], 4];
let [a, [b, ], c] = arr;
console.log(b); //2

对象解构:

let person = { name: 'zhangsan', age: 20 };  
let { name, age } = person; 
console.log(name); // 'zhangsan'  
console.log(age); // 20

let person = { name: 'zhangsan', age: 20 };  
let {name: myName, age: myAge} = person; // myName myAge 属于别名 
console.log(myName); // 'zhangsan'  
console.log(myAge); // 20

补充:

let code = "AAAA"
let res = {
  code: 200,
  data: {
    list: ["aaa", "bbb", "ccc"]
  }
}

// 重命名写法
let {code:co} = res;
console.log(co); // 200

// 数组嵌套写法
let {data:{list:[x, y, z]}} = res;
console.log(x, y, z); // aaa bbb ccc

实际应用:

对返回参数进行解构

function getData() {
  let res = {
    code: 200,
    data: {
      list: ["aaa", "bbb", "ccc"]
    }
  }
  test(res)
}

function test({code, data:{list}}) {
  console.log(code, list);
}

getData(); // 200 ['aaa', 'bbb', 'ccc']

注意：在解构语法中，冒号左边的用于匹配值，冒号右边的是真正的变量