携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天 点击查看活动详情

前言

昨天回顾了一下JavaScript的历史。学习了ES6最常见的两个定义变量的方法，感觉学到了很多，今天来学习ES6 有一个让我觉得非常有意思的语法：扩展运算符和解构赋值

接下来打算使用node.js实际运行一下这个新特性语法

扩展运算符

非常简单，使用是三个点来展开数组或者对象，直接在在浏览器里面试一下：

扩展数组

扩展字符串：

参与运算

新建一个test.js 使用node 运行这个js文件测试一下

当做函数的参数

这里是往函数传递实参的时候，做一个分解参数

扩展运算符扩展表达式

使用扩展运算符打开表达式的结果：

深拷贝数组

先看下浅拷贝：

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

使用后扩展运算符深拷贝,这就简单了很多：

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

解构赋值

结构赋值就是扩展运算符更高级用法，对数组或者对象进行一一匹配，然后对其中的变量进行赋值，简化了代码语法，先看看最简单的例子：

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

在其他语言中也有类似的操作，我最早接触的是Python就有这个操作，可以批量给变量赋值

除了数组还可以对对象进行结构赋值：

let { a, b: [] } = { a: 1, b: [2, 3] }
console.log({a})  //  { a: 1 }

获取函数返回的多个值

function res()
{
    return {a:1,b: 2,c: 3};
}

let {a, b, c}  = res()
console.log(a, b, c)  // 1 2 3

遍历Map

Map这个结构在JavaScript里面还是比较少见的：

总结

今天就实践了一下ES6中的扩展运算符与解构赋值的简单的用法，有了一些基本映象，这两个特性简化了代码逻辑，还算比较好了解，使用...来分解数组或者对象还算比较另类，哈哈。