ES6的扩展运算符 [...arr]

ES6的扩展运算符可以说是非常使用的，在给多参数函数传参，替代Apply，合并数组，和解构配合进行赋值方面提供了很好的便利性。

数组去重

var arr = [1,2,3,4,5,2,3,1];

var set = new Set(arr);

var newArr = [...set ];

最终得到的newArr就是一个去了重的数组

扩展运算符就是三个点“...”，就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用。

看这个例子：

1	`console.log(...[3, 4, 5])`

结果：

3 4 5

调用其实就是：

1	`console.log(3, 4, 5)`

合并数组

可以使用扩展运算符将多个数组进行合并。

let arr1 = [1, 2, 3]

let arr2 = [4, 5, 6]

let arr3 = [7, 8, 9]

console.log([...arr1, ...arr2, ...arr3])

结果：

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

函数多参数传递, 替换Apply

先把参数定义成数组，函数定义好。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']

let fun1 = (a1, a2, a3, a4) => {

console.log( a1, a2, a3, a4)

}

在ES6前，要把数组参数传递给函数，要么按照下标访问数组元素去调用函数，缺点是数组个数和函数参数个数完全绑定，有一个个数发生变化，那么就要修改了。

1	`fun1(arr4[0], arr4[1], arr4[2], arr4[3])`

要么就用Apply进行调用，结果当然是没毛病，也是ES6之前用的最多的。

1	`fun1.apply(null, arr4)`

如果是用扩展运算符，那就方便咯。

1	`fun1(...arr4)`

结果：

arg1 arg2 arg3 arg4

调用简洁爽快。

与解构配合赋值

配合使用，可以从数组中提取除第一个以后的所有元素成另外一个数组。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]

console.log(var1)

console.log(arr5)

结果：

1
[ 2, 3, 4, 5, 6 ]

但要注意，与解构配合时，扩展运算符只能用在最后一个上，否则报错。

可以展开实现了Iterator 接口的对象

比如Map，Set，数组就是从Iterator接口实现来的，Object不是，所以扩展Object会报错。

扩展Set。

let set1 = new Set()

set1.add(1)

set1.add(2)

set1.add(3)

console.log(...set1)

结果:

1 2 3

扩展Map。

let map1 = new Map();

map1.set('k1', 1);

map1.set('k2', 2);

map1.set('k3', 3);

console.log(...map1)

结果：

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

注意，扩展出来的一个个的数组，按照map的键值对结构，每个数组都是2个元素，一个是key，一个是value。

如果扩展Object，就会报错。

let obj1 = {

p1: 1,

p2: 2,

p3: 3

}

console.log(...obj1)

报错。

ES6的扩展运算符 [...arr]相关推荐

【ES6】...扩展运算符
文章目录扩展运算符一.在函数中使用 1.1 传递实参 1.2 接收形参 1.3 new 表达式二.在数组中使用 2.1 合并数组 2.2 拷贝数组三.在对象中使用 3.1 合并对象 3.2 拷 ...
ES6 的扩展运算符
扩展语法 1. 函数 rest 参数 ES6 引入 rest 参数也叫剩余参数,用于获取函数的多余参数,可以替代使用arguments对象 ... 出现在函数参数列表的最后,那么它就是 rest 参数 ...
es6之扩展运算符 Object.assign和三个点（...）
一.导读 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里 ...
es6之扩展运算符...
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, ...
es6之三个点（...）扩展运算符数组和对象的使用场景及最常见的用法（霸霸看了都说好）
概念 es6之扩展运算符 (-) 简称三个点数组的扩展运算符应用复制数组扩展运算符提供了复制数组的简便写法. const a1 = [1, 2]; // 写法一 const a2 = [...a ...
ES6增加了扩展运算符: ... 三个点是ES几的
ES6 的扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 1.将一个数组转为用逗号分隔的参数序列(把数组中元素展开). 如下: ...
ES6 rest参数，扩展运算符，Symbol数据类型，迭代器和生成器【详解加案例】(二)
文章目录 1.ES6 rest 参数 2. ES6 扩展运算符 2.1 ES6 简介 2.2 应用 3. ES6 Symbol 数据类型 3.1 Symbol两种创建方式 3.2 Symbol注意事项 ...
ES6新特性_ES6扩展运算符的介绍---JavaScript_ECMAScript_ES6-ES11新特性工作笔记013
接下来去看es6的扩展运算符比如我声明一个常量数组tfboys=['','','']; 然后写一个函数,chunwan,然后 chunwan(tfboys);调用以后可以看到右边打印出来了,可以看到 ...
扩展运算符用法实例总结
- ES6的扩展运算符扩展运算符可以将数据展开不能单独使用扩展运算符展开数组,可以在参数中使用,将参数数组转成参数列表. 如果扩展运算符后面跟的是变量,那么接受单独多余的数组放置到数组中. 扩展运 ...

ES6的扩展运算符 [...arr]

ES6的扩展运算符 [...arr]相关推荐

最新文章

热门文章