文章目录
  1. 1. 概述
  2. 2. 扩展运算符(spread operator)…
    1. 2.1. 创建新数组
    2. 2.2. 合并数组
    3. 2.3. 创建新数组
    4. 2.4. 创建新对象
    5. 2.5. 展开字符串

概述

ES6风风风火火的出来很长时间了,从最初的babel插件支持,到vue或者react框架,再到浏览器原生支持。ES6中定义了很多方便实用的特性,但是一直没怎么深入了解,从今天起开始陆续深入平时写代码的过程中,遇到的ES6各种特性。

扩展运算符(spread operator)…

使用扩展运算符可以展开数组,对象和字符串。

扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中

创建新数组

1
2
const a = [1, 2, 3]
const b = [...a, 4, 5, 6] // Array(6) [ 1, 2, 3, 4, 5, 6 ]

合并数组

1
2
3
4
5
6
7
8
// ES5中concat()方法
const arr1 = ["a", "b"]
const arr2 = ["c"]
const arr3 = ["d", "e"]
const arrAll = arr1.concat(arr2, arr3) // Array(5) [ "a", "b", "c", "d", "e" ]

// 扩展云算法
const arrAll = [...arr1, ...arr2, ...arr3] // Array(5) [ "a", "b", "c", "d", "e" ]

创建新数组

1
2
3
4
const arr1 = ["a", "b"]
const arr2 = ["c"]
const arr3 = ["d", "e"]
const arr4 = [...arr1, ...arr2, ...arr3, "f", "g"] // Array(7) [ "a", "b", "c", "d", "e", "f", "g" ]

创建新对象

1
2
3
4
5
const oldPerson = {
user: "tudouya",
password: "123456"
}
const newPerson = { ...oldPerson } // Object { user: "tudouya", password: "123456" }

展开字符串

1
2
const str = "hello"
const arr = [...str] // Array(5) [ "h", "e", "l", "l", "o" ]