数组的扩展运算符

一、基本使用

ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面。

let fn = (a, ...value) => {
    console.log(a);
    console.log(value[0], value[1]);
};
add(10, 20, 30);
// 10
// 20 30

数组中的扩展运算符就好比 rest参数 的逆运算,将一个数组转为用逗号分隔的参数序列(也就是展开数组),在语法上,用三个点表示(...)。

var fruits = [‘apple‘, ‘banana‘, ‘orange‘];
console.log(...fruits);   // apple banana orange

二、取代apply

扩展运算符主要应用于函数的调用,比如下面这种情况给俩个数求和,在ES5中可以使用 apply 方法实现:

let add = (a, b) => a + b;
let arr = [10, 20];
let result = add.apply(null, arr);
console.log(result);   // 30

现在不必了,直接使用扩展运算符即可:

let add = (a, b) => a + b;
let arr = [10, 20];
console.log(add(...arr));   // 30

而且可以放置于形参中的任意位置,这点和 rest参数 不同:

let add = (a, b, c, d) => a + b + c + d;
let arr = [20, 30];
console.log(add(10, ...arr, 40));   // 100

下面是俩个比较实用的取代 apply 方法例子:

// 1、取出一个数字数组中的最大值

// ES5
let arr = [10, 15, 5, 20, 10];
alert(Math.max.apply(null, arr));   // 20

// ES6
let arr = [10, 15, 5, 20, 10];
alert(Math.max(...arr));   // 20

----------------------------------------------

// 2、将一个数组添加到一个数组里

// ES5
let arr1 = [10, 20];
let arr2 = [30, 40];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);   // [ 10, 20, 30, 40 ]
console.log(arr2);   // [ 30, 40 ]

// ES6
let arr1 = [10, 20];
let arr2 = [30, 40];
arr1.push(...arr2);
console.log(arr1);   // [ 10, 20, 30, 40 ]
console.log(arr2);   // [ 30, 40 ]

三、其他运用的地方

1、复制数组

在ES5中如果你这样复制数组式其实是不对的:

let arr1 = [10, 20];
let arr2 = arr1;
arr1.push(30);
console.log(arr1);   // [ 10, 20, 30 ]
console.log(arr2);   // [ 10, 20, 30 ]

因为数组式复合类型的数据,复制的仅仅是指针,其中一个数组发生变化,另一个数组当然随之变化。

因此需要这样做:

let arr1 = [10, 20];
let arr2 = arr1.concat();
arr1.push(30);
console.log(arr1);   // [ 10, 20, 30 ]
console.log(arr2);   // [ 10, 20 ]

现在ES6使用扩展运算符更加方便:

let arr1 = [10, 20];
let arr2 = [...arr1];
arr1.push(30);
console.log(arr1);   // [ 10, 20, 30 ]
console.log(arr2);   // [ 10, 20 ]

2、合并数组

ES5中合并数组可以这样做:

let arr1 = [10, 20];
let arr2 = [30, 40];
let arr3 = arr1.concat(arr2);
arr1.push(50);
console.log(arr1);   // [ 10, 20, 50 ]
console.log(arr2);   // [ 30, 40 ]
console.log(arr3);   // [ 10, 20, 30, 40 ]

ES6中又有了新写法:

let arr1 = [10, 20];
let arr2 = [30, 40];
let arr3 = [...arr1, ...arr2];
arr1.push(50);
console.log(arr1);   // [ 10, 20, 50 ]
console.log(arr2);   // [ 30, 40 ]
console.log(arr3);   // [ 10, 20, 30, 40 ]

注意:

以上俩种写法都是浅拷贝,合并成员是复合类型的数据就要注意了:

let arr1 = [{user: ‘tom‘}];
let arr2 = [{user: ‘jack‘}];
let arr3 = arr1.concat(arr2);
let arr4 = [...arr1, ...arr2];
alert(arr1[0] === arr3[0]);   // true
alert(arr1[0] === arr4[0]);   // true

原因还是这些对象成员拷贝的是地址。

原文地址:https://www.cnblogs.com/xlj-code/p/10348541.html

时间: 2024-11-09 21:04:28

数组的扩展运算符的相关文章

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~扩展运算符后续

对象的扩展运算符 扩展运算符(...).ES2018 将这个运算符引入了对象. 解构赋值 对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable).但尚未被读取的属性,分配到指定的对象上面.所有的键和它们的值,都会拷贝到新对象上面. let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } 上面代码中,变量z是解构赋值所在的对象.它获取等号右边的所有尚未

如何提高扩展运算符的性能

博客地址:https://github.com/Wscats/articles/issues/88 在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能. 让我们首先简要介绍一下扩展运算符在数组中的工作原理. 扩展运算符,也就是我们常用的三个,让数组展开变成每个小块. 然后使用中括号语法[],重新组装这些小块构造一个新数组. 扩展运算符可以被放置在中括号[]里面的任何位置. const numbers = [1, 2, 3]; [0, ...numbers]; // => [

...扩展运算符妙用 - ES5中push方法的参数不能是数组

含义 扩展运算符( 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>] 该运算符主要用于函数调用. array.push(...ite

ES6 - 数组扩展(扩展运算符)

扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算(函数),将一个数组转为用逗号分隔的参数序列. rest: 变量将多余的参数放入数组中. spread(扩展):rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 总结:二者为逆操作. console.log(...[1, 2, 3]) // 1 2 3 该运算符主要用于函数调用. /** * 1.该运算符将一个数组,变为参数序列. */ function add(x, ...y) { // x =

ES6数组扩展运算符和字符串遍历的新方法!!!

该方法主要是让我们在学习和工作中能够更加方便的去操作数据,数组和字符串! 下面开始代码展示阶段: 1.扩展运算符 console.log(...[1,2,3]) //以上结果输出:1,2,3 console.log(1,...[2,3,4],5) //以上结果输出:1,2,3,4,5 可以看出我在数组的前面使用了三个点,这个方法就是ES6的扩展运算符,它能够把数组给解析出来,让数组变成数值 更方便的拿到数据! console.log([...[],1]) //以上输出:[1] 但是扩展运算符后面

数组的扩展

1.扩展运算符 含义:扩展运算符是三个点(...),用于将一个数组转为用逗号分隔的参数序列 用法:...['a', 'b', 'c'] console.log(...[1, 2, 3]) // 1 2 3 console.log(1, 2, ...[3, 4, 5], 6) // 1 2 3 4 5 6 console.log(1, 2, ...[3, 4, 5]) // 1 2 3 4 5 如果扩展运算符后面是一个空数组,则不产生作用 console.log(1, ...[]) // 1 扩展

day46homework常量字符串拼接结构赋值扩展运算符for-of循环map函数默认值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定义常量.html</title> <!--常量--> <script> //常量:1.一旦定义 不能更改 const PI = 3.14;  // console.log(PI); // PI = 3.1415; error 

... 扩展运算符

1  含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. [javascript] view plain copy 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>]