ES6指北【5】——展开语法(spread syntax)

ZoomQuiet 发布于2019-08-26 12:16 / 1325人阅读

摘要：我们先来看一看的官方定义展开语法可以在函数调用数组构造时将数组表达式或者在语法层面展开还可以在构造字面量对象时将对象表达式按的方式展开。

我们先来看一看MDN的官方定义

展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；
还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

从定义我们可以了解到展开语法的使用场景如下

函数调用

数组构造

构造字面量对象(ES2018)

作用如下

展开数组

展开字符串

展开对象（只能用于构造字面量对象）

1. 在函数调用时使用

// 展开数组
console.log(...[1,2,3]) // 1 2 3

// 展开字符串
console.log(..."hello world") // h e l l o   w o r l d

// 展开对象【无法使用，会报错】
console.log(...{a:1}) // Uncaught TypeError

1.1 与rest参数对比

在函数调用时使用展开语法时，需要特别注意数组、字符串其实是被展开成了参数序列。
还记得rest参数是将参数都都收集为数组吗？
展开语法正好是它的逆运算——将数组展开为参数
还有注意的是rest参数在函数定义时使用【处理形参】，展开语法在函数调用时使用【处理实参】，可能有些拗口，下面看个例子大家就明白了

function test(x, y, ...params) {
  // 定义一个函数时，使用的是rest参数
  console.log(...params) // 调用一个函数时，使用的是rest参数
}

1.2 作为apply的语法糖

let numArr = [1, 10, 2, 234]
Math.max.apply(null, numArr)
// 完全等价于
Math.max(...numArr) // 将numArr展开为参数序列

1.3 在new的时候使用

因为new的时候是无法调用apply的，所以展开语法这个时候起到了很牛X的作用

function Person(name, age, weight) {
  this.name = name
  this.age = age
  this.weight = weight
}

let blues = new Person("blueswong", "16", "60")
// 完全等价于
let blues = new Person(...["blueswong", "16", "60"])

这在需要生产很多个实例时，非常有用

function Person(name, age, weight) {
  this.name = name
  this.age = age
  this.weight = weight
}

let persons = [["blues1", "16", "60"], ["blues2", "16", "60"], ["blues3", "16", "60"]]
let createdPersons = {}
persons.forEach(e => {
  console.log(e[0])
  createdPersons[e[0]] = new Person(...e)
})

2. 在数组构造时使用

// 展开数组
let arr1 = [1, 2, 3]
let arr2 = [0, ...arr1, 4] // [0, 1, 2, 3, 4]

// 展开字符串
let arr1 = [1, 2, 3, ..."456"] // [1, 2, 3, "4", "5", "6"]

2.1 代替将已有数组元素插入到新数组重的所有API

以往我们将已有数组的元素插入到新数组的中，需要借用一些API例如push/unshift/splice/concat，现在我们使用展开语法可以对上述api进行替换。

需要特别强调的是，这在创建新数组的时候才比较方便

let arr = [4, 5]
let arr2 = [6, 7, 8]
// 在数组任意位置增加元素
let newArr1 = [1, 2, 3, ...arr] // [1, 2, 3, 4, 5]
let newArr2 = [...arr, 1, 2, 3] // [4, 5, 1, 2, 3]
let newArr3 = [1, ...arr, 2, 3] // [1, 4, 5, 2, 3]
let newArr4 = [1, 2, ...arr, 3] // [1, 2, 4, 5, 3]
// 连接两个数组
let newArr5 = [...arr, ...arr2] // [4, 5, 6, 7, 8]

如果是对原有的数组进行操作，原有API+在函数调用中使用展开语法比较方便

2.2 实现对数组的浅拷贝

let obj = {a: 1}
let arr = [2, 1, "的", obj]
// 在数组任意位置增加元素
let newarr = [...arr] // [2, 1, "的", {a: 1}]

// 但仅仅是浅拷贝，新数组中的{a:1}与obj还是指向了相同的内存
newarr[3].a = 2
console.log(obj) // {a: 2}

3. 在构造字面量对象时使用 3.1 实现对象的浅拷贝

常见的实现对象浅拷贝的方法

let obj = {a: "10", b: {c: 10}, d: [1, 2, 3]}

// 1. 遍历
let newObj = {}
for (let key in obj) {
  newObj[key] = obj[key]
}
console.log(newObj)

// 2.使用assign
let newObj1 = Object.assign({}, obj)
console.log(newObj1)

使用展开语法实现

let newObj2 = {...obj}

由于这是ES2018的语法，现在浏览器支持的并不到位，因此笔者就不做过多介绍了。大家可以去mdn上查看

私有云海外云主机 Spread 指北入坑指北 syntax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108372.html

ES6指北【4】——ES6的函数参数处理，超乎你想象

摘要：参数搭配的变量是一个数组，该变量将多余的参数放入数组中。从上面的概念中，我们至少可以知道如下三个信息语法变量。一、函数的默认参数值 1. ES6之前，我们如何实现函数默认参数 1.1 方式一：使用逻辑运算符【||】 function test(x) { x = x || 默认值 // 使用||设置默认值 console.log(x) } test() // 默认值但这样...

Pandaaa 2019-08-23 11:01 评论0 收藏0
ES6：spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法

摘要：也就是说如果一个数组中的元素发生改变，那么另一个数组中的元素也相应地发生改变。依照函数定义，可以使用把数组元素应用于函数。应用于对象字面值这个特征是基于的附加特征。编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7 英文连接：ES6: The spread sy...

xuweijian 2019-08-20 16:30 评论0 收藏0
babel使用方法总结

摘要：在项目根目录下创建一个文件，注意这是个配置文件，以点号开头，没有后缀。提供了一种可以在浏览器中使用的方法，只需两步就能一劳永逸。 1.在命令行中使用 Babel Babel 官方推荐将 Babel 安装在本地，因为 Babel 的不同版本以及不同转码规则会起到不同的效果，全局安装会带来不必要的麻烦。在命令提示符中转到自己的项目目录下： npm install --save-dev ba...

沈俭 2019-08-20 14:36 评论0 收藏0
es6必会之let && const

摘要：副作用，无副作用可执行和关键词。和不能像一样同一个下声明多次和不会像一样变量声明提升原因是，存在因此不能，赋值前使用变量。 showImg(https://segmentfault.com/img/bVbhPlD?w=1271&h=715); 关键词： let ，const， blocking scope ，temporal dead zone，redeclaration，reassi...

ygyooo 2019-08-23 12:14 评论0 收藏0
ES6 ...操作符

摘要：在语法中，操作符有两种意义剩余语法，参数和展开语法，展开数组对象，作为函数数组对象的扩展运算符。使用和参数进行操作其余参数传给原始函数展开语法运算则可以看作是参数的逆运算。在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。从某种意义上说，剩余语法与展开语法是相反的：剩余语法将多...

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0