你不知道的ES6扩展运算符

本文非原创,希望原创作者不要介意。

  1. 扩展运算符
function doStuff (x,y,z) {}   //定义函数时也可使用扩展运算符定义
var args = [0,1,2];
//调用函数,并进行传参
doStuff.apply(null,args);
doStuff(...args);  //es6新增的方法,在参数数组前加上扩展运算符
  1. 函数形参的默认赋值
function add(a=10,b=20) {
    console.log(a + b);
}
add();
  1. 合并数组
arr1.push(...arr2); //把arr2合并到arr1的后面
arr1.unshift(...arr2); //把arr2合并到arr1的前面

数组中合并数组

var arr1 = ['two','three'];
var arr2 = ['one',...arr1,'four','five'];
  1. 复制数组
    在过去,我们会使用Array.prototype.slice去实现,现在可以使用扩展运算符来得到一个复制后的数组
var arr = [1,2,3];
var arr2 = [...arr]; //就像arr.slice
arr2.push(4);

记住:数组仍通过指针得到,所以我们并没有复制数组本身,我们复制的只是一个新的指针。

  1. 把arguments或NodeList转为数组
    和复制数组十分类似,我们以前使用Array.prototype.slice去把NodeList和arguments转换成真正的数组,但现在我们可以使用扩展运算符去完成这个工作:
    //NodeList或arguments(我们常说的类数组) 转  数组
    var aDiv = document.querySelectorAll('div');  //获取所有的div标签
    // 转数组方法1: 传统方法
    console.log(Array.prototype.slice.call(aDiv));
    // es6新增方法2:
    console.log(Array.from(aDiv));
    // es6扩展运算符方法3:
    console.log([...aDiv]);

你还可以让arguments在传递时就变成一个数组:

var myFn = function(...args){
    // args等同于[...args];
}
  1. 使用Math函数
    扩展运算符把数组“扩展”成一个个不同的参数是理所当然的,所以,可以在任何函数参数上进行扩展,而且它能接受任意多个参数:
let numbers = [1,2,3,4];
Math.min(...numbers);

在Math对象的成员方法上使用扩展运算符是一个完美的例子,而且只需要传递一个参数。

  1. 有趣的解构赋值
// 解构赋值是非常有意思的,以下例子v8引擎暂未实现
let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4};
console.log(x);
console.log(y);
console.log(z);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分...
    yzc123446阅读 774评论 0 1
  • es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数...
    RThong阅读 711评论 0 0
  • 一. 字符串的一些扩展 for...of遍历ES6为字符串添加了遍历器接口,似的字符串可以被for...of循环遍...
    我不叫奇奇阅读 415评论 0 0
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 736评论 1 2
  • 部分列子引用的阮一峰ES6教程中的例子 这篇文章主要是自己经常用得一些方法总结, 想全篇学习es6, 可以看阮一峰...
    有情怀的程序猿阅读 605评论 0 1