js扩展运算符(spread)三个点(...)

常见用法:

1、该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

2、扩展运算符取代apply方法的一个实际的例子,应用Math.max方法,简化求出一个数组最大元素的写法。

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

// 等同于

Math.max(14, 3, 77);

3、通过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);

4、合并数组

[1, 2].concat(more) // ES5
[1, 2, ...more] // ES6

var arr1 = [‘a‘, ‘b‘];
var arr2 = [‘c‘];
var arr3 = [‘d‘, ‘e‘];
// ES5的合并数组
arr1.concat(arr2, arr3); // [ ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘ ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3] // [ ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘ ]

扩展运算符将字符串转为真正的数组

[...‘hello‘]
// [ "h", "e", "l", "l", "o" ]

原文地址:https://www.cnblogs.com/sweet-ice/p/10819295.html

时间: 2024-08-01 15:59:18

js扩展运算符(spread)三个点(...)的相关文章

js扩展运算符

js扩展运算符(spread)是三个点 作用:将一个数组转为用逗号分隔的参数序列. 原文地址:https://www.cnblogs.com/zxyzm/p/10647963.html

ES6扩展运算符(三点运算符)...的用法

1. 第一个叫做 展开运算符(spread operator),作用是和字面意思一样,就是把东西展开.可以用在array和object上都行. let a = [1,2,3]; let b = [0, ...a, 4]; // [0,1,2,3,4] let obj = { a: 1, b: 2 }; let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 } let obj3 = { ...obj, a: 3 }; // { a:3, b:2 } 2.

ES6扩展/收集运算符--spread/rest(3)

ES6引入了一个新的运算符"...",通常称为spread/rest(展开或收集运算符),取决于在哪如何使用,这里先介绍此运算符的概念和基本使用,更多应用将在函数.数组部分学习 第一种:作为扩展运算符(spread)    场景:使用在数组之前. 作用:将一个数组转为用逗号分隔的参数序列 举例1:数组之前 function foo(x, y, z){ console.log(x, y, z) }foo.appley(null, [1, 2, 3]) //在ES6之前我们这样使用数组作为

妙用ES6解构和扩展运算符让你的代码更优雅

Javascript ES6/ES2015尘埃落定,其中许多特性其实是为了简化代码.解构运算符,扩展运算符,和rest运算符就是其中很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳.现在各浏览器及node.js都加快了部署ES6的步伐.ES6的学习正当其时. 解构 解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 数组解构赋值: var arr = ['this is

ES6系列_4之扩展运算符和rest运算符

运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁. 运算符有两种:对象扩展运算符与rest运算符. 1.对象扩展( spread)运算符(...) (1)解决参数个数问题 以前我们编程是传递的参数一般是确定,否则将会报错或者异常,如下: function test(a,b,c,d) { console.log(a) console.log(b) console.log(c) console.log(d) console.log(e)//e is not defi

ES6扩展运算符的用途

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

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

1  含义 扩展运算符( 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')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. function push(

Js es6中扩展运算符(...)

拓展运算符,是es6一个很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳.下面我将列出拓展运算符的主要应用场景,以及相关知识. 1.在函数调用时使用拓展运算符. 以前如果我们想将数组元素迭代为函数参数使用,一般使用Function.prototype.apply的方式. function myFunction(x, y, z) { console.log(x+""+y+""+z); } var args

由 Rest参数 和 Spread扩展运算符想到的...

ES2018 为对象解构提供 rest 参数和spread扩展运算符. 1. 合并俩对象: let obj = {a:1,b:2}, obj2={} let obj3 = {...obj, ...obj2} console.log(obj3) // {a: 1, b: 2} 2. 对象的值如果是undefined 或者 null let obj1 = {a: 1, b: 2}, obj2={c: undefined, d: null} console.log({...obj1, ...obj2}