ES6扩展运算符用法

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中

用法：

1、将一个数组放入另一个数组中

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

使用扩展运算符：

var middle = [3, 4];
var arr = [1, 2, …middle, 5, 6];
console.log(arr);
// [1, 2, 3, 4, 5, 6]

2、拼接数组

使用扩展运算符可以代替concat()来拼接数组。

let ary1 = [1,2,3];
let ary2 = [3,4,5];//concat，concat返回值为拼接后的数组，原来两个数组不变
let ary = ary1.concat(ary2);
console.log('ary',ary); //[ 1, 2, 3, 3, 4, 5 ]
console.log('ary1',ary1) //[ 1, 2, 3 ]//方法1  同concat
let ary3 = [...ary1,...ary2];
console.log('ary3',ary3) //[ 1, 2, 3, 3, 4, 5 ]//方法2  用push，返回值为新数组个数
let ary4 = ary1.push(...ary2);
console.log('ary4',ary4)  //6
console.log('ary1',ary1) //[ 1, 2, 3, 3, 4, 5 ]

3、扩展运算符可以与解构赋值结合起来，生成数组

//扩展运算符可以与解构赋值结合起来，生成数组
const [first,...rest] = [1,2,3,4,5];
console.log('first',first) //1
console.log('rest',rest) //[ 2, 3, 4, 5 ]

rest参数补充：

JS对于传入参数的数量没有限制，如果传入参数过多，函数会自动将多余的参数舍弃，如果传入的参数少于定义传参数量，调用的函数会返回NaN。JS引入了rest参数，可以处理过多传入的参数

4、Math，例子：获取数组最大值

console.log('Math',Math.max(100, 3, 4)) //100//在没有扩展运算符，在数组上使用Math.max()最容易方法就是使用.apply()。
var arr = [2, 4, 8, 6, 0];
function max(arr) {return Math.max.apply(null, arr);
}
console.log('apply',max(arr)); //8//使用扩展运算符
var max1 = Math.max(...arr);
console.log('...',max1);//8//numStr:['1','5','9','2','0'],
console.log('numStr',Math.max(...this.numStr)); //9let strArr = ['h','e','s','a','c']
console.log('strArr',Math.max(...strArr)); //NaN

5、扩展运算符可以将类数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');//获取页面中所有的div标签
oDivs = [...oDivs];//将伪数组转换为真正的数组

6、字符串转数组

let str = "hello";
let chars = [...str];
console.log(chars); //[ "h", "e", "l", "l", "o" ]//使用split
let splitArr = str.split('')
console.log('split',splitArr) //[ "h", "e", "l", "l", "o" ]

ES6扩展运算符用法相关推荐

ES6扩展运算符的几个小技巧
es6扩展运算符,也就是... ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...
ES6 - 扩展运算符与Object.assign对象拷贝与合并
文章目录扩展运算符能做什么? 什么是深浅拷贝使用ES6扩展运算符对象浅拷贝对象合并 Object.assign Object.assign详解 Object.assign()实用给对象添加属 ...
php es6写法,ES6...扩展运算符(示例代码)
在数组中的应用扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,++将一个数组转为用逗号分隔的参数序列++. console.log(...[1, 2, 3]) // 1 ...
ES6——扩展运算符的作用以及使用场景
文章目录对象扩展运算符解构赋值扩展运算符数组扩展运算符替代函数的apply() 方法扩展运算符的应用复制数组合并数组与解构赋值结合字符串实现了Iterator接口的对象对象扩展 ...
js数组合并、去重、降维(ES6:扩展运算符、Set)
js数组合并.去重.降维 1.合并 1.1使用concat()进行合并数组 function get_concat(collection_a, collection_b) {return collec ...
ES6——扩展运算符(...)
文章目录一.扩展运算符(...) 二.数组扩展运算符的应用 1.合并数组 2.与解构赋值结合 3.字符串转数组 4.实现了 Iterator 接口的对象 5.Map 和 Set 结构, Genera ...
扩展运算符用法实例总结
- ES6的扩展运算符扩展运算符可以将数据展开不能单独使用扩展运算符展开数组,可以在参数中使用,将参数数组转成参数列表. 如果扩展运算符后面跟的是变量,那么接受单独多余的数组放置到数组中. 扩展运 ...
JS之ES6扩展运算符三个点（...）用于剥离{} 获取属性值
1.用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 } 等价于 ...
ES6——扩展运算符/三点运算符（...）
扩展运算符(spread)是三个点(...). 数组的扩展运算符对于数组来说,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) ...

ES6扩展运算符用法

ES6扩展运算符用法相关推荐

最新文章

热门文章