扩展运算符「spread」的交谈

awesome23 发布于2019-08-22 13:48 / 2221人阅读

摘要：原文链接航洋无声扩展运算符，看起来和参数外观相似，也是三个点，不过和参数功能可是不一样呢扩展运算符号，分二种情况一般情况为数组一般情况为对象在标准的中，只有针对数据实现了扩展运算符它把数据的数据序列转换为用逗号分割的参数序列比如此行代码

原文链接 - 航洋无声 - Github

扩展运算符，看起来和 rest 参数外观相似，也是三个点「...」，
不过和 rest 参数功能可是不一样呢

扩展运算符号，分二种情况

iterable「一般情况为数组」

enumerable「一般情况为对象」

在标准的 ES2015 中，只有针对 iterable 数据实现了扩展运算符
它把 iterable 数据的数据序列转换为用 逗号分割的参数序列

比如：

let array = [5, 12]
let arrayCopy = [11, ...array]
// 此行代码类似于：let arrayCopy = [11, 5, 12]
// arrayCopy ==> [11, 5, 12]

console.log(...[5, 12])
console.log(5, 12)
// 上面 2 行代码意义一样
// 输出结果都是是：5 12

经过上面的 2 个列子，
应该能更好的理解「扩展运算符的结果是 逗号分隔的参数序列」的含义

不过有个需要注意的点：
非 iterable 数据执行扩展运算符，会报错

在 ES7 的某个提案中，
讲扩展运算符引入 enumerable 数据

比如：

let obj = {name: "hangyangws"}
let objCopy = {...obj}
console.log(objCopy) // 输出：{name: "hangyangws"}

其实 enumerable 数据的扩展运算符底层实现是利用了 Object.assign

Object.assign(target, ...sources) 我们比较熟悉，有 2 个特点：

sources 参数如果是「原始类型」会被包装为「对象」

sources 参数如果是 null 和 undefined 会被忽略

比如：

Object.assign({}, null) // 结果为：{}
Object.assign({}, undefined) // 结果为：{}

Object.assign({}, 0) // 结果为：{}
Object.assign({}, "FJ") // 结果为：{0: "F", 1: "J"}
// 所以有个点可以注意一下：
// 只有字符串的包装对象才可能有自身可枚举属性
// 对于「数字」，结果和 null、undefined 类似

既然扩展运算符有 2 种情况，那么 JS 解释器怎么知道使用哪一种？
所以扩展运算符会根据代码的具体的 执行上下文 判断

比如：

let test = [...null]
// 报错：null is not iterable

let test = {...null}
// test ===> {}

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

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

es6 -- 默认参数Default，不定参数Rest，扩展运算符Spread详解

摘要：将数组中的每个元素展开为函数参数扩展运算符取代方法的一个实际的例子，应用方法，简化求出一个数组最大元素的写法。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言记录一下在实际开发中，很有用的三个es6的新方法用法详解默认参数 function f(x, y=13) { // 如果没有传入y或传入了undefined，y的默认值为13 retur...

Betta 2019-08-23 15:20 评论0 收藏0
[译]使用 JavaScript 对象 Rest 和 Spread 的7个技巧

摘要：下面针对对象时使用和时的个鲜为人知的技巧。对属性进行排序有时性质并不按照我们需要的顺序排列。若要将移到最后一个属性，请从对象中解构。默认属性默认属性是仅当它们不包含在原始对象中时才设置的值。 showImg(https://segmentfault.com/img/remote/1460000018610267?w=800&h=530); [译]使用 JavaScript 对象 Res...

alexnevsky 2019-08-23 16:15 评论0 收藏0
JavaScript展开操作符(Spread operator)介绍

摘要：本文介绍的展开操作符。你可以通过展开操作符扩展一个数组对象和字符串。展开运算符是三个点可以将可迭代对象转为用逗号分隔的参数序列。也就是说，展开运算符不会递归地深度拷贝所有属性。在计算机图形学前端可视化方面有深入研究。本文介绍JavaScript的展开操作符(Spread operator)...。本文适合ES6初学者。你可以通过展开操作符(Spread operator)...扩展...

ningwang 2019-08-02 15:20 评论0 收藏0
JavaScript展开操作符(Spread operator)介绍

摘要：本文介绍的展开操作符。你可以通过展开操作符扩展一个数组对象和字符串。展开运算符是三个点可以将可迭代对象转为用逗号分隔的参数序列。也就是说，展开运算符不会递归地深度拷贝所有属性。在计算机图形学前端可视化方面有深入研究。本文介绍JavaScript的展开操作符(Spread operator)...。本文适合ES6初学者。你可以通过展开操作符(Spread operator)...扩展...

codergarden 2019-08-23 18:13 评论0 收藏0