详解ES6 扩展运算符的使用与注意事项

扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。常用的语法如下:

//函数调用:
myFunction(...iterableObj);

//字面量数组构造或字符串:
[...iterableObj, '4', ...'hello', 6];

// 构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):
let objClone = { ...obj };

在函数调用时使用扩展运算符相当于使用 Function.prototype.apply

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

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

apply 不同的是,我们不仅可以将全部参数放到一个数组中,还可以只将其中几个参数用扩展运算符展开,并且可以再一次调用中多次使用扩展运算符。

function myFunction(a, b, c, d, e) {
  console.log(a, b, c, d, e); //-1 0 1 2 3
  console.log(arguments); //[Arguments] { '0': -1, '1': 0, '2': 1, '3': 2, '4': 3 }
}
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

使用 new 关键字来调用构造函数时,不能直接使用数组加上 apply 的方式(apply 执行的是调用 [[Call]] , 而不是构造 [[Construct]])。有了展开语法, 将数组展开为构造函数的参数就很简单了:

var dateFields = [1970, 0, 1]; // 1970年1月1日
var d = new Date(...dateFields);

如果想要不使用扩展运算符实现同样的效果,我们必须用一个函数包装构造函数,将这个新的构造函数的 prototype 设为原构造函数的实例,用 Object.create(constructor.prototype)(这里主要是为了新构造函数原型的修改不影响原构造函数的原型,直接用 constructor.prototype 作为新构造函数的原型也可以实现)。

function applyAndNew(constructor, args) {
  function partial() {
    return constructor.apply(this, args);
  }
  if (typeof constructor.prototype === 'object') {
    partial.prototype = Object.create(constructor.prototype);
  }
  return partial;
}

function myConstructor() {
  console.log('arguments.length: ' + arguments.length);
  console.log(arguments);
  this.prop1 = 'val1';
  this.prop2 = 'val2';
}

var myArguments = ['hi', 'how', 'are', 'you', 'mr', null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

console.log(new myConstructorWithArguments());
// (myConstructor构造函数中):      arguments.length: 6
// (myConstructor构造函数中):      ["hi", "how", "are", "you", "mr", null]
// ("new myConstructorWithArguments"中): {prop1: "val1", prop2: "val2"}

当然用的最多的还是在字面量数组上,没有展开语法的时候,只能组合使用 push, splice, concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 通过字面量方式, 构造新数组会变得更简单、更优雅:

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

可以用来实现数组浅拷贝:

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

连接多个数组:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

扩展运算符还可以将已有对象的所有可枚举(enumerable)属性拷贝到新构造的对象中。该方法为浅拷贝,可以拷贝 Symbol 属性,但不包含原型上的属性和方法。如果同时拷贝多个对象,后面的对象会覆盖前面对象的同名属性。

var obj1 = { foo: 'bar', x: 42, [Symbol('a')]: 123 };
var obj2 = { foo: 'baz', x: 100, y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj); //{ foo: 'bar', x: 42, [Symbol(a)]: 123 }

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); //{ foo: 'baz', x: 100, y: 13, [Symbol(a)]: 123 }

该方法的性质和 Object.assign 类似,但是 Object.assign() 函数会触发 setters,而展开语法则不会。

注意事项

  1. 在数组或函数参数中使用展开语法时, 扩展运算符只能用于可迭代对象。
  2. 只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。
  3. 只能用在函数调用,字面量数组(可以在数组中展开字符串),字面量对象中。
  4. 用于数组的解构赋值的时候,扩展运算符只能处于最后一个。
  5. 展开对象可以是任意可迭代对象。

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。如果函数的最后一个命名参数以 ... 为前缀,则它将成为一个由剩余参数组成的真数组,其中从 0(包括)到 theArgs.length(排除)的元素由传递给函数的实际参数提供。

剩余语法(Rest syntax) 看起来和展开语法完全相同,不同点在于, 剩余参数用于解构数组和对象。从某种意义上说,剩余语法与展开语法是相反的:展开语法将数组展开为其中的各个元素,而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。扩展运算符是用在函数调用,而剩余参数是用在函数声明。

剩余参数和 arguments 对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
  • arguments 对象不是一个真正的数组,而剩余参数是真正的 Array 实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sortmapforEach pop
  • arguments 对象还有一些附加的属性 (如 callee 属性)。

如果剩余参数(包括在解构赋值中)右侧有逗号,会抛出 SyntaxError,因为剩余元素必须是函数的最后一个参数或者数组的最后一个元素。

以上就是详解ES6 扩展运算符的详细内容,更多关于ES6 扩展运算符的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript 扩展运算符用法实例小结【基于ES6】

    本文实例讲述了JavaScript 扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符格式 扩展运算符格式很简单,就是三个点(-) 重点:需要ES6 语法支持 扩展运算符作用??? 扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展. 1.将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. 创建一个数组middle ②. 创建第二个包含middle的数组 ③. 输出结果 var middle =

  • ES6扩展运算符的用途实例详解

    ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点"...",就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用. 看这个例子: console.log(...[3, 4, 5]) 结果: 3 4 5 调用其实就是: console.log(3, 4, 5) 合并数组 可以使用扩展运算符将多个数组进行合并. let arr1 = [1, 2, 3]

  • es6数组之扩展运算符操作实例分析

    本文实例讲述了es6数组之扩展运算符操作.分享给大家供大家参考,具体如下: 扩展运算符(spread)是三个点(-).它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] 该运算符主要用于函数调用. function push(array, ...it

  • ES6中的rest参数与扩展运算符详解

    前言 本文主要给大家介绍了关于ES6中rest参数与扩展运算符的相关内容,rest参数和扩展运算符都是ES6新增的特性.rest参数的形式为:...变量名:扩展运算符是三个点(...).下面话不多说了,来一起看看详细的介绍: rest参数 rest参数用于获取函数的多余参数,这样就不需要使用arguments对象了.rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of val

  • ES6扩展运算符和rest运算符用法实例分析

    本文实例讲述了ES6扩展运算符和rest运算符用法.分享给大家供大家参考,具体如下: 运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁. 运算符有两种:对象扩展运算符与rest运算符. 1.对象扩展( spread)运算符(...) (1)解决参数个数问题 以前我们编程是传递的参数一般是确定,否则将会报错或者异常,如下: function test(a,b,c,d) { console.log(a) console.log(b) console.log(c) c

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

  • ES6扩展运算符用法实例分析

    本文实例讲述了ES6扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值,扩展运算符有以下几点作用 一.展开数组 //展开数组 let a = [1,2,3,4,5], b = [...a,6,7]; console.log(b); //打印出来的值[1, 2, 3, 4, 5, 6, 7] 二.数组的拷贝 //数组的拷贝 var c = [1, 2, 3]; var d = [...c]; d.push(4); cons

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • C++位运算符详解(异或运算符和移位运算符)

    什么是位运算 位运算符按二进制进行运算,这些运算符只能用于整数类型的操作.如:char,short,int,long 通过位运算符来获取高位值和低位值 int a=0x1234; int high,low; high = (a>>8) &0x00ff; low = a & 0x00ff; 左移运算符和右移运算符(<<和>>) 左移是将一个二进制数,移动若干位,右边空出的位置用0来填补,高位左移溢出应该舍弃该高位. 如:inta = 8, a = 0000

  • 详解ES6 CLASS在微信小程序中的应用实例

    ES6 CLASS基本用法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 1.1 constructor方法 constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加.

  • 详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

    当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时,我们会不假思索回答道:indexOf方法.其实,ES6 又提供了三种新方法includes().startsWith().endsWith(),也是比较好用的. indexOf方法在这里就不多说了,大家都比较熟悉,意思就是:返回给定元素在数组中第一次出现的位置,返回结果是匹配开始的位置,如果没有出现则返回-1. 下面详细介绍ES6新增的这三种方法: ①includes():返回布尔值,表示是否找到了参数字符串. 如下所示: let

  • 详解C#扩展方法原理及其使用

    1.写在前面 今天群里一个小伙伴问了这样一个问题,扩展方法与实例方法的执行顺序是什么样子的,谁先谁后(这个问题会在文章结尾回答).所以写了这边文章,力图从原理角度解释扩展方法及其使用. 以下为主要内容: 什么是扩展方法 扩展方法原理及自定义扩展方法 扩展方法的使用及其注意事项 2.什么是扩展方法 一般而言,扩展方法为现有类型添加新的方法(从面向对象的角度来说,是为现有对象添加新的行为)而无需修改原有类型,这是一种无侵入而且非常安全的方式.扩展方法是静态的,它的使用和其他实例方法几乎没有什么区别.

  • 详解C++ 重载运算符和重载函数

    C++ 允许在同一作用域中的某个函数和运算符指定多个定义,分别称为函数重载和运算符重载. 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是它们的参数列表和定义(实现)不相同. 当您调用一个重载函数或重载运算符时,编译器通过把您所使用的参数类型与定义中的参数类型进行比较,决定选用最合适的定义.选择最合适的重载函数或重载运算符的过程,称为重载决策. C++ 中的函数重载 在同一个作用域内,可以声明几个功能类似的同名函数,但是这些同名函数的形式参数(指参数的个数.类型或

  • 详解SQL EXISTS 运算符

    EXISTS 运算符 EXISTS 运算符用于判断查询子句是否有记录,如果有一条或多条记录存在返回 True,否则返回 False. SQL EXISTS 语法 SELECT column_name(s) FROM table_name WHERE EXISTS (SELECT column_name FROM table_name WHERE condition); 演示数据库 在本教程中,我们将使用 RUNOOB 样本数据库. 下面是选自 "Websites" 表的数据: +---

随机推荐