ES6解构与剩余参数

解构赋值是 ES6 中引入的非常有用的语法，掌握解构的技巧能让你更愉悦的敲代码，延长生命的长度。这篇文章是JavaScript快速拷贝数组的几种方法的拓展，因为上一篇文章扯远了，不得不再写一篇补充。

基本概念

解构赋值是对赋值运算符的扩展。他针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。就是按照视觉上的一一对应关系进行赋值。

数组解构

赋值的顺序是数组索引的顺序

JavaScript

let arr = ["1", "2", "3"];
let [one = "one", two, three] = arr;
console.log(`one: ${one}, two: ${two}, three: ${three}`);
// 输出 “one: 1, two: 2, three: 3”

默认值

数组解构和对象解构都可以使用默认值
上面这段代码中第 2 行one = "one"是将 one 赋予默认值，当且仅当赋予one的值为undefined时使用这个值。

剩余参数

数组解构和对象解构都可以使用剩余参数
当有多余的值不想一一赋值的时候可以使用剩余参数，即将这些解构没有对应上的值全部放进一个数组：

JavaScript

const arr = ["a", "b", "c"];
let [a, ...bc];
console.log(bc); // ["b","c"]

数组解构作用

数组解构快速换值

JavaScript

var a = "a";
var b = "b";
var [b, a] = [a, b];

一行代码实现变量值对换，这样做是不是延长了寿命？/笑哭 😂

快速拷贝数组

JavaScript

const exampleArr = [1, 2, 3];
const [...newArr] = exampleArr;

具体请参考我的这篇文章JavaScript快速拷贝数组的几种方法

对象解构

语法和数组解构类似，但需要保证赋值的变量名和属性名一致：

JavaScript

const school = {
    name: "TUST",
    location: "Tian'Jin",
};
let { name: schoolName, location } = school;
console.log(`${schoolName} is located in ${location}`); // TUST is located in Tian'Jin

重命名

数组解构和对象解构中都可以使用重命名
上面这段代码第 5 行，name: schoolName将school对象的name属性的值赋给schoolName，而不是name。

对象解构的作用

解析配置对象

对象解构常用于配置对象，比如传入一个对象作为配置，并且某些配置项是可选的，比如在 Vue 中使用 ElmentUI：

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

JavaScript

import Vue from "vue";
import Element from "element-ui";
Vue.use(Element, { size: "small", zIndex: 1000 });

第三行Vue.use除了传入Element，还可以传入一个配置对象作为全局配置，这个配置参数是可选的，那我们可以这样写（不一定是真实写法）：

JavaScript

Element(...args){
  const {
    size = "-",
    z-index = 2000
  } = args[1]
  // ...若干代码
}

实现 import

在浏览器中如果我们使用script标签引入了一个 UMD 模块，使用模块中的变量可以用解构来减少写.操作符，比如：

HTML

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"
    async
></script>

JavaScript

const { of, map } = rxjs;

剩余参数和扩展运算的区别

我们使用的时候一般都不会注意这个问题，通常就是很顺畅的写完了，代码一点错误都没有，即便如此，还是要搞清楚两者的区别啊，我看到很多博客文章都将二者混淆。

其实区分他们很简单，从字面意义上理解就行了，剩余参数是参数，有将参数合并成数组的作用，而拓展运算是展开数组，同样是三个点...，一个是存，一个是取，它们的作用似乎是相反的。

本文作者：KylinLee

本文链接：https://kylin.dev/2020/05/19/ES6解构与剩余参数

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。