js --- 扩展运算符

参数扩展与收集

ES6 增加有一个特殊符号，拓展运算符 ’ … ’ 即三个点。
它的使用如下：

扩展参数

… 扩展运算符能将可迭代对象转换为逗号分隔的参数系列；

如将数组拆开，其位置在传值体前（实参，需把自身拆开的变量）前

const arr = ['手机','电脑','人一个']
...arr  //  => '手机'，'电脑','人一个'

应用场景：

1. 如果将数组作为参数传入；则传入的只有一个参数，参数是一个数组；如果传入参数时给数组前加上扩展运算符如…arr;如会将数组解构出来，将每个元素做为参数传入；

function fun4() {console.log(arguments);
}
fun4(...[1, 2, 3]) //  { '0': 1, '1': 2, '2': 3 }fun4([1, 2, 3])  // { '0': [ 1, 2, 3 ] }

2.[…arr1,…arr2] 可将两个数组（字符串也可以）合并在一起；如果只有一个数组，则可以复制数组，返回给新数组；

console.log([...[1, 2, 3], ...[4, 5, 6]]);   // [ 1, 2, 3, 4, 5, 6 ]

3. 可以将伪数组转换成数组，包括arguments;

function fun4() {console.log(...arguments);
}
fun4(1, 2, 3)   // 1 2 3

收集参数

在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。这有点类似arguments 对象的构造机制，只不过收集参数的结果会得到一个 Array 实例

function fun5(...params) {console.log(params);  // [ 1, 2, 3, 4 ]
}
fun5(1, 2, 3, 4)function fun6(a, ...params) {console.log(a)console.log(params)
}
fun6(1, 2, 3) // 1  //  [2,3]
fun6(1) // 1 []
fun6()  // undefined  []

注意

扩展运算符用于形参和其他参数一起使用时必须放在最后

fun(...a , b )   // 报错
fun(a , ...b  ,c)  // 报错

js --- 扩展运算符相关推荐

js扩展运算符的使用
一.对数组进行操作(es6) 1.进行数组的复制 {// 扩展运算的使用// 进行数组的复制const list = ['a','b','c','d'];let list1 = [...list];/ ...
js扩展运算符的应用
(1)复制数组 const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法二 const [...a2] = a1; (2)合并数组 const arr1 ...
c语言扩展运算符是什么,扩展运算符（spread）是三个点（…)
扩展运算符(spread)是三个点(-),将一个数组||类数组||字符串转为用逗号分隔的序列. js中用来对数组进行操作,把数组里面的东西统统拿出来一.展开数组 //展开数组 let a = [1, ...
扩展运算符的作用以及使用场景
扩展运算符对象的扩展运算符(-)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中在JS中,扩展运算符(spread)是三个点-,剩余运算符(rest)同为三个点(-) 我们可以把-理解为展开运 ...
js数组的方法和扩展运算符
示例使用的数组 var arr = [1, 2, 3]; ES5 数组方法不改变原数组函数说明示例 Array.isArray() 判断一个值是否为数组 Array.isArray(arr); ...
js ... es6中三个点是什么意思真名叫扩展运算符
前言:求真求实东西实现了居然不知道怎么做完的有点恐怖背景 js去重 let inCmpGroup = [...new Set(this.selectedData.map(x => x. ...
js数组合并、去重、降维(ES6:扩展运算符、Set)
js数组合并.去重.降维 1.合并 1.1使用concat()进行合并数组 function get_concat(collection_a, collection_b) {return collec ...
JS之ES6扩展运算符三个点（...）用于剥离{} 获取属性值
1.用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 } 等价于 ...
JS:ES6-5 rest参数与扩展运算符
rest参数概述: ES6 引入 rest 参数,用于获取函数的实参,注意与arguments对象的区别 rest参数只包括没有给出名称的参数,而arguments包含所有参数 arguments 对 ...