ES6展开运算符

转载 2018年04月16日 22:58:08

语法

  • 用于函数调用

    myFunction(...iterableObj);
  • 用于数组字面量

    [...iterableObj, 456]

函数传参

目前为止,我们都是使用Function.prototype.apply方法来将一个数组展开成多个参数:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

使用es6的展开运算符可以这么写:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
  • 选择性传参

    function filter(type, ...items) {
        return items.filter(item => typeof item === type);
    }
    filter('boolean', true, 0, false);        // => [true, false]
    filter('number', false, 4, 'Welcome', 7); // => [4, 7]

还可以同时展开多个数组:

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

数据解构

let cold = ['autumn', 'winter'];
let warm = ['spring', 'summer'];
// 析构数组
let otherSeasons, autumn;
[autumn, ...otherSeasons] = cold;
otherSeasons      // => ['winter']

数据构造

  • 两个对象连接返回新的对象

    let a = {aa:'aa'}
    let b = {bb:'bb'}
    let c = {...a,...b}
    console.log(c)
    // {"aa":"aa","bb":"bb"}
  • 两个数组连接返回新的数组

    let d = ['dd']
    let e = ['ee']
    let f = [...d,...e]
    console.log(f)
    // ["dd","ee"]
    • 在中间插入数组

      var parts = ['shoulder', 'knees'];
      var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
    • 在尾部插入数组

      // ES5
      var arr1 = [0, 1, 2];
      var arr2 = [3, 4, 5];
      // 将arr2中的所有元素添加到arr1中
      Array.prototype.push.apply(arr1, arr2);
      
      // ES6
      var arr1 = [0, 1, 2];
      var arr2 = [3, 4, 5];
      arr1.push(...arr2);
  • 数组加上对象返回新的数组

    let g = [{gg:'gg'}]
    let h = {hh:'hh'}
    let i = [...g,h]
    console.log(i)
    // [{"gg":"gg"},{"hh":"hh"}
  • 数组+字符串

    let j = ['jj']
    let k = 'kk'
    let l = [...j,k]
    console.log(l)
    // ["jj","kk"]
  • 带有数组和对象的结合

    let state = {
        resultList: [],
        currentPage: 0,
        totalRows: {}
    }
    let data = {
        resultList: [{new:'new'}],
        currentPage: 2,
        totalRows: {row:'row'}
    }
    let combile = {
                    ...state,
                    resultList: [
                        ...state.resultList,
                        ...data.resultList
                    ],
                    currentPage: data.currentPage,
                    totalRows: data.totalRows
                }
    console.log(combile)
    // {"resultList":[{"new":"new"}],"currentPage":2,"totalRows":{"row":"row"}}

ES6展开运算符(扩展运算符)的使用技巧

原文链接在ES6中,我们有了一个新的运算符–展开运算符,它可以使我们的代码的数量有一定的减少,有时候甚至有很有用的作用,我们来举几个常用的例子,同时通过例子来了解展开运算符的使用。...
  • u012362458
  • u012362458
  • 2017-09-07 17:16:02
  • 617

ES6 展开运算符 Spread operator

展开运算符展开运算符(spread)是三个点(…),可以将数组转为用逗号分隔的参数序列。如同rest参数的逆运算。...
  • zhao_shanshan
  • zhao_shanshan
  • 2016-07-01 17:16:35
  • 4718

记录一下ES6扩展运算符(三点运算符)...的用法

该记录源于segmentfaul网友的评论,特意感谢!  ...运算符用于操作数组,有两种层面 1. 第一个叫做 展开运算符(spread operator),作用是和字面意思一样,就是把东西展开...
  • ChauncyWu
  • ChauncyWu
  • 2017-06-11 18:51:32
  • 3544

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

1  含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3]) // 1 2 3 c...
  • qq_30100043
  • qq_30100043
  • 2016-11-29 12:55:59
  • 78726

es6 javascript对象的扩展运算符

目前, ES7 有一个提案,将 Rest 解构赋值 / 扩展运算符( ... )引入对象。 Babel 转码器已经支持这项功能。( 1 ) Rest 解构赋值对象的 Rest 解构赋值用于从一个对象取...
  • qq_30100043
  • qq_30100043
  • 2016-12-01 18:30:55
  • 4721

webpack打包,es6语法报错,解决方案(包括es6扩展运算符报错)

webpack 2以上的版本需要增加安装包: babel-preset-stage-3 webpack配置如下: presets: ['env', 'es2015', 'react', ...
  • whx_0408
  • whx_0408
  • 2018-02-05 11:26:14
  • 323

ES6 对象的扩展 简单测试

测试环境:max oS,node v6.3.1  , 不使用严格模式,2016/7/22 1、属性的简洁表示法(支持) function get(){ var x=1, y=2; retu...
  • hao5743
  • hao5743
  • 2016-07-22 14:23:20
  • 2913

[js高手之路] es6系列教程 - 不定参数与展开运算符(...)

三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... )用在数组前面,可以把数组...
  • iseagold
  • iseagold
  • 2017-09-25 17:22:26
  • 229

ES6-rest参数和扩展运算符

翻看ES6代码,很多时候都会看到三个点(...)的存在,它在ES6语法中,有两种应用形式,分别为函数中的rest参数,以及扩展运算符 REST参数 rest参数和一个变量名搭配使用,生成一个数组,用于...
  • u010603896
  • u010603896
  • 2017-08-04 14:44:53
  • 813

展开运算符

展开运算符允许一个表达式在某处展开,在多个参数(用于函数调用)或者多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方就会这样。 语法EDIT 用于函数调用: myFunctio...
  • hsany330
  • hsany330
  • 2016-11-30 15:15:14
  • 921
收藏助手
不良信息举报
您举报文章:ES6展开运算符
举报原因:
原因补充:

(最多只允许输入30个字)