ES6 扩展运算符 三个点(...)

es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。

使用场景

  • 可变参数个数的函数调用

function push(array, ...items) {  
    array.push(...items);  
} 
let sum = (...m)=>{
    let total = 0;
    for(let i of m){
      total+=i;
    }
    console.log(total);
}
let arr = [1,2]
let push(arr,3,4,5)
console.log(arr) //[1,2,3,4,5]
sum(1,2,3,4,5) //15
  • 更便捷的数组合并

let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
//es5 旧写法
newArr = newArr.concat(arr1).concat(arr2); //[20,1,2,5,6]
console.log(newArr);
//es6 使用扩展运算符
newArr = [20,...arr1,...arr2];  //[20,1,2,5,6]
console.log(newArr);
  • 替代es5的apply方法

// ES5 的写法  
function f(x, y, z) {  
// ...  
}  
var args = [0, 1, 2];  
f.apply(null, args);  
// ES6 的写法  
function f(x, y, z) {  
// ...  
}  
var args = [0, 1, 2];  
f(...args);

求最大值Math.max()

// ES5 的写法  
Math.max.apply(null, [14, 3, 77])  
// ES6 的写法  
Math.max(...[14, 3, 77])  
//  等同于  
Math.max(14, 3, 77);

通过push函数,将一个数组添加到另一个数组的尾部

// ES5 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
Array.prototype.push.apply(arr1, arr2);  
// ES6 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
arr1.push(...arr2);
  • 与解构赋值结合,生成新数组

// ES5  
a = list[0], rest = list.slice(1)  
// ES6  
[a, ...rest] = list 
下面是另外一些例子。  
const [first, ...rest] = [1, 2, 3, 4, 5];  
first // 1  
rest // [2, 3, 4, 5]  
const [first, ...rest] = [];  
first // undefined  
rest // []:  
const [first, ...rest] = ["foo"];  
first // "foo"  
rest // []
  • 将字符串转为真正的数组

[...'hello']  
// [ "h", "e", "l", "l", "o" ]
  • 将实现了 Iterator 接口的对象转为数组

var nodeList = document.querySelectorAll('div');  
var array = [...nodeList];

推荐阅读更多精彩内容

  • 1 含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分...
    yzc123446阅读 700评论 0 1
  • 它是什么 es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函...
    ten5743阅读 31,701评论 0 20
  • 1. 扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的...
    sdcV阅读 389评论 0 0
  • spread运算符功能 1 > 主要用于函数调用该运算符将一个数组,变为参数序列 例如: function add...
    小牛智慧谷阅读 1,149评论 0 0
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 553评论 1 2
  • OH卡可以干嘛? 和老公关系不好,可以解决么?可以! 孩子不听话,可以解决么?可以! 想减肥管不住嘴,可以解决么?...
    温柔陷阱阅读 173评论 0 0
  • 凌晨零点45分,宿舍静悄悄除了舍友时缓时急的瞌睡声,独自跪在地上整理自己的行李箱,心里却幻想什么时候我能离开这个囚...
  • 01 ▲ 大一入学的时候,学校安排了一次心理测验,所有新生都参加测试,我规规矩矩的回答了所有问题。 然后没几天,我...
    安心在奔跑阅读 205评论 4 1
  • 迷失的自我找寻不到方向,亦或是方向已在脚下。自己在不知不觉间已经一点点的在向前进。从十月七号回家的那天,至今天...
    夜清凉阅读 207评论 0 0