JavaScript展开操作符(Spread operator)介绍

codergarden 发布于2019-08-23 18:13 / 2383人阅读

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

本文介绍JavaScript的展开操作符(Spread operator)...。本文适合ES6初学者。

你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串。展开运算符（spread）是三个点（…）,可以将可迭代对象转为用逗号分隔的参数序列。如同rest参数的逆运算。

用于数组

以数组为例，首先创建一个数组，

const a = [1, 2, 3],
          b = [4,5,6];

你可以轻松赋值一个数组：

const c = [...a]  // [1,2,3]

你还可以轻松拼接两个数组：

const d = [...a，...b] //  [1,2,3,4,5,6]

也可以如下拼接

const d = [...a,4, 5, 6] //  [1,2,3,4,5,6]

如果要把一个数组b的元素全部插入到数组a的后面(不生成新数组)，可以这样操作：

const a = [1,2,3];
a.push(...b);

如果要把一个数组b的元素全部插入到数组a的前面(不生成新数组)，可以这样操作：

const a = [1,2,3];
a. unshift(...b);

类数组对象变成数组

可以通过展开运算符把类数组对象变成真正的数组：

var list=document.getElementsByTagName("a");
var arr=[..list];

用于对象

展开操作符同样可以用于对象。可以通过以下方式clone一个对象：

const newObj = { ...oldObj }

注意: 如果属性值是一个对象，那么只会生成一个指向该对象的引用，而不会深度拷贝。也就是说，展开运算符不会递归地深度拷贝所有属性。并且，只有可枚举属性会被拷贝，原型链不会被拷贝。

还可以用于merge两个对象。

const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }

当然也可以适用于以下的情况：

const others = {third: 3, fourth: 4, fifth: 5}
const items = { first:1, second:1, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

如果merge的多个对象有相同属性，则后面的对象的会覆盖前面对象的属性,比如

const obj1 = { a: 111, b: 222 };
const obj2 = { b: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111,  b: 333, d: 444 }

const obj1 = {a:111,b:222}
const merged = {a:222,...obj1}; 
console.log(merged); // -> { a: 111,  b: 333 }

const obj1 = {a:111,b:222}
const merged = {...obj1,a:222}; 
console.log(merged); // -> { a: 222,  b: 333 }

用于字符串

通过展开操作符，可以把一个字符串分解成一个字符数组，相当于

const hey = "hey"
const arrayized = [...hey] // ["h", "e", "y"]

以上代码相当于:

const hey = "hey"
const arrayized = hey.split("") // ["h", "e", "y"]

用于函数传参

通过展开操作符，可以通过数组给函数传参：

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

用于具有 Iterator 接口的对象

具有 Iterator 接口的对象Map 和 Set 结构，Generator 函数，可以使用展开操作符，比如:

var s = new Set();
s.add(1);
s.add(2);
var arr = [...s]// [1,2]


function  * gen() {
    yield 1;
    yield 2;
    yield 3;
}

var arr = [...gen()]  // 1，2，3

如果是map，会把每个key 和 value 转成一个数组：

var m = new Map();
m.set(1,1)
m.set(2,2)
var arr = [...m] // [[1,1],[2,2]]

注意以下代码会报错,因为obj不是一个Iterator对象：

var obj = {"key1": "value1"};
var array = [...obj]; // TypeError: obj is not iterable

欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划和程序员理财投资有浓厚兴趣。

云服务器 GPU云服务器介绍javascript javascript介绍 javascript技术介绍 Spread

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

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

JavaScript展开操作符(Spread operator)介绍

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

ningwang 2019-08-02 15:20 评论0 收藏0
JavaScript剩余操作符Rest Operator

摘要：剩余操作符和展开操作符的表示方式一样，都是三个点但是他们的使用场景会不同。获取参数剩余操作符可以用来方便地获取传进来的参数。想要变成数组，可以通过方法，使用剩余操作符可以避免将转为数组的麻烦。本文适合JavaScript初学者阅读剩余操作符之前这篇文章JavaScript展开操作符(Spread operator)介绍讲解过展开操作符。剩余操作符和展开操作符的表示方式一样，都是三...

jone5679 2019-08-26 10:13 评论0 收藏0
【译】如何在 JavaScript 中使用对象的方法

摘要：中的所有对象都来自父的构造函数。不同于数组的原型方法例如和只能被数组实例使用，对象方法直接来自构造函数，并使用对象实例作为参数。这称为静态方法。创建对象的键值对的嵌套数组。可用于确定对象是否已冻结，并返回布尔值。原文：How To Use Object Methods in JavaScript作者：Tania Rascia译者：博轩介绍 JavaScript 中，对象是键/值 ...

longmon 2019-08-23 17:03 评论0 收藏0
19 个 JavaScript 编码小技巧

摘要：有些语言也将抛出一个警告或错误。然而，这个符号可以让你编写可重用代码块。如果你是一位新手的话，对于逐位运算符你应该永远不会在任何地方使用。你可以在这里阅读更多关于位运算符相关的知识。这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码，帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理...

KitorinZero 2019-08-19 10:25 评论0 收藏0