zoukankan      html  css  js  c++  java
  • ES6展开运算符(...)

    这是在网上看见的es6展开运算符的总结,原文地址:http://www.jianshu.com/p/c5230c11781b

    作者:可木Changer
    链接:http://www.jianshu.com/p/c5230c11781b
    來源:简书

    总结还可以,借鉴下

    三个点(...)在es6中,有两个含义:

      用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... )

      用在数组前面,可以把数组的值全部打散,展开,叫展开运算符. 语法格式:  在数组面前加三个点( ... )

    不使用Apply的函数调用

    我们经常使用Function.prototype.apply,传递一个数组作为参数,使用数组中存放的一组参数调用一个函数。

    function doStuff (x, y, z) { }
    var args = [0, 1, 2];
    // 调用函数,传递args参数
    doStuff.apply(null, args);

    采用展开用算符我们能够在避免使用apply的同时,轻易的调用函数。只需在数组前加上展开运算符即可。

    doStuff(...args);

    这段代码变得更短,更清晰,并且不需要使用多余的null!

    合并数组

    已经有好多种合并数组的方法,但是展开运算符带来了一种全新的方式。

    arr1.push(...arr2) // 将arr2 追加到数组的末尾
    arr1.unshift(...arr2) // 将arr2 追加到数组的开头

    如果你想要整合两个数组,并且想把某个数组放在另一个数组的任意特定位置上,你可以这么做:

    var arr1 = ['two', 'three'];
    var arr2 = ['one', ...arr1, 'four', 'five'];
    
    // ["one", "two", "three", "four", "five"]

    这是一种比其他方式更短的语句!

    拷贝数组

    得到一份数组的拷贝是很常见的任务,过去我们使用Array.prototype.slice来做,但现在我们可以使用展开运算符:

    var arr = [1,2,3];
    var arr2 = [...arr]; // 和arr.slice()差不多
    arr2.push(4)

    记住:数组中的对象依然是引用值,所以不是任何东西都“拷贝”过去了。

    arguments或者NodeList转换为Array

    像拷贝数组一样,我们常常使用Array.Prototype.slice来将NodeListarguments这种类数组对象转换为真正的数组。但是现在我们能够用展开运算符轻易的实现这项任务:

    [...document.querySelectorAll('div')]

    使用此法,你甚至可以像数组一样获取参数。

    var myFn = function(...args) {
    // ...
    }

    别忘了你也能用Array.from达成相同的目的!

    使用Math函数

    当然了,展开运算符将数组“展开”成为不同的参数,所以任何可接收任意数量的参数的函数,都能够使用展开运算符来传参。

    let numbers = [9, 4, 7, 1];
    Math.min(...numbers); // 1

    Math对象的一系列的方法,正是展开运算符作为唯一参数传递给函数的完美例子。

    解构的乐趣

    解构是一项很棒的实践方法,我在自己的React项目中以及Node.js 程序中大量的使用到它。你能够使用解构和展开运算符将信息解压到你想要的变量中去:

    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // { a: 3, b: 4 }

    剩余的属性被分配到了展开运算符之后的z变量中。

  • 相关阅读:
    javascript推荐书籍
    关于Cookie和Session的优缺点
    PHP try catch
    DQL、DML、DDL、DCL的概念与区别
    XP/Win7下QTP11循环试用30天的破解方法
    struts.xml配置详解
    MyEclipse8.5破解方法
    Myeclipse编写struts程序
    关于Hibernate的关联映射
    Java代码到字节码——第一部分
  • 原文地址:https://www.cnblogs.com/zhangjiabin/p/7648024.html
Copyright © 2011-2022 走看看