灵活运用ES6处理数据-解构赋值

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

前面文章学习了 JavaScript 中操作数组的一些方法(Array.prototype.splice()/slice()/map()/reduce()等)也都是高阶函数, JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表

在项目开发中对于请求后端的数据多为对象/数组, 经常需要对这个"大型"数据进行处理后得到我们想要的数据结构. 本文来学习 ES6 的一个相对高级的操作方法:解构赋值.

ES6 - 解构赋值

概念:

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

解构赋值(Destructuring assignment) 是ES6 开始实现的一种 复合声明与赋值语法

先来看个简单的例子:

let [a, b] = [10, 20]

let rest
;[a, b, ...rest] = [10, 20, 30, 40, 50]

// 则相当于 let a = 10, b = 20 // 而 rest 则相当于一个数组: [30, 40, 50]

解释

由上面的简单示例进行理解: 在解构赋值中, 等号(=)右边的值是数组或对象(这两个都是"结构化的值"), 而左手边则是通过模拟数组或对象字面量语法指定的一个或多个变量.

在解构时, 会从右侧原始数据中提取数据(一个或多个值), 然后对左侧变量进行对应赋值;

解构赋值用处:

1. 解构赋值用在 以 const/ let/ var 声明语句中, 进行变量初始化

   例子如上

2. 也可以用在常规赋值表达式中使用.

3. 在函数的参数定义时, 也有用到

4. 处理函数返回的数组/对象(通常从后端请求的数据)

   从一个函数返回一个数组是十分常见的情况: 比如: 当一个函数返回一个数组时, 这时候使用解构赋值来进行取值就比较方便了

解析一个从函数返回的数组:

function returnArrayData(x, y) {
  return [x, y]
}
let [x, y] = returnArrayData(111, 222)
// 这时就是 let [x, y] = [111, 222]
// 就相当于 x = 111, y = 222

相关阅读文章列表

• JavaScript 学习-函数剩余参数
• JS 小问题学习-函数可选参数
• JS 学习-for 循环
• JS 不完美亦可运行-自动加分号(;)问题、
• JS 不完美亦可运行-数组对象相加问题、
• JS 并不完美之箭头函数相关(二)、
• JS 并不完美~(一)浮点数
• JavaScript 高阶函数(一)
• JavaScript 高阶函数之 reduce
• 数组扁平化 Array.prototype.flat()
• 灵活操作数组数据 slice()
• 灵活操作数组-数组中间插入数据 splice()

参考文档

• MDN | ES6-Destructuring_assignment