变量的解构赋值和展开运算符

本文对变量的解构赋值(destructing)和展开运算符(spread operator …)做个简单的介绍。

变量的解构赋值

以下例子通过Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3216.0 Safari/537.36测试。

数组赋值

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

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

// 不完全解构
let [a, b] = [1, 2, 3]
console.log(a); // 1
console.log(b); // 2

// 设置默认值
let [a = 1] = []
console.log(a); // 1

对象赋值

// 用于提取数据
const {a, b, ...rest} = {a:1, b:2, c:3, d:4}
console.log(a); // 1
console.log(b); // 2
console.log(rest); // {c: 3, d: 4}

函数参数

// 默认值设置
function fun([a, b = 3]) {
    return a + b;
}
fun([1]) // 4

[[1, 2], [3, 4]].map(([a, b]) => a + b) // [3, 7]

对象展开运算符

扩展运算符（spread operator …）将一个数组、类数组、字符串转为用逗号分隔的序列。

最早是在Vuex文档看到

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
// 来自: https://vuex.vuejs.org/zh-cn/state.html

得知是对象展开运算符。查阅资料发现属于ES6变量的解构赋值的内容。说来也惭愧《ES6 标准入门》第1版，第2版都看过，当初看的不深入，很多知识点都有漏洞。而今天在封装Vue组件的时候，如下代码看的甚是变扭，ES6模块和CommonJS规范糅杂在一起。

import components from './components';

const install = function (Vue) {
  Object.keys(components).forEach((key) => {
    Vue.component(key, components[key]);
  });
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

module.exports = Object.assign(components, { install });  // eslint-disable-line no-undef

于是做了如下调整

export default {
  install,
  ...packages,
};

Vuex的文档中有介绍对象展开运算符（现处于 ECMASCript 提案 stage-3 阶段）。

The TC39 categorizes proposals into the following stages:

Stage 0 - Strawman: just an idea, possible Babel plugin.
Stage 1 - Proposal: this is worth working on.
Stage 2 - Draft: initial spec.
Stage 3 - Candidate: complete spec and initial browser implementations.
Stage 4 - Finished: will be added to the next yearly release.

摘自文档 https://babeljs.io/docs/plugins/

大致翻译如下:

Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）
进入 2 阶段，基本上都已经确定要发布了。

在 2015 年进入 stage4 的叫做 es2015
在 2016 年进入 stage4 的叫做 es2016
以此类推

作者：Yugo
链接：http://www.jianshu.com/p/41d3f7768095

对象合并

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

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

函数传参

function fun(...args) {
    console.log(args) //  [1, 2]
}
fun(1, 2);


function func2(a, b, c) {
    console.log(a, b, c) // {a: 1} 3 "cc"
}
let rest = [3];
func2({a: 1}, ...rest, 'cc');

扩展阅读

总结

知识点的理解结合具体的项目代码，能快速掌握。不清楚不懂的查漏补缺，just-do-it，对!就是立刻做，这是你知识体系的短板，深挖进去发现会收获很多。