【ES6】...扩展运算符

文章目录

扩展运算符
一、在函数中使用
- 1.1 传递实参
- 1.2 接收形参
- 1.3 new 表达式
二、在数组中使用
- 2.1 合并数组
- 2.2 拷贝数组
三、在对象中使用
- 3.1 合并对象
- 3.2 拷贝对象

扩展运算符

ES6 里面号新添加了一个运算符...，叫做扩展运算符，又称（Spread 语法）
可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；
还可以在构造字面量对象时, 将对象表达式按key-value的方式展开

let arr = [1,2,3,4,5];
console.log(...arr);    // 1 2 3 4 5

一、在函数中使用

1.1 传递实参

使用Function.prototype.apply方法

let arr = [1,2,3];
function fn(a,b,c){console.log(a,b,c);
}
fn.apply(null, arr);    // 等价于 fn(1,2,3)

使用...运算符

let arr = [1,2,3];
function fn(a,b,c){console.log(a,b,c);
}
fn(...arr); // 等价于 fn(1,2,3)

1.2 接收形参

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。

rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {let sum = 0;for (var val of values) {sum += val;}// 也可以使用数组的方法// values.map(item=>sum += item)return sum;
}add(2, 5, 3) // 10

我们也可以选择获取部分参数作为变量，并将剩余的参数收集起来。

function showName(firstName, lastName, ...titles) {alert( firstName + ' ' + lastName ); // Julius Caesar// 剩余的参数被放入 titles 数组中// i.e. titles = ["Consul", "Imperator"]alert( titles[0] ); // Consulalert( titles[1] ); // Imperatoralert( titles.length ); // 2
}showName("Julius", "Caesar", "Consul", "Imperator");

Rest 参数必须放到参数列表的末尾，否则会报错。

// 报错
function f(a, ...b, c) {// ...
}

1.3 new 表达式

使用 new 关键字来调用构造函数时，不能直接使用数组+ apply 的方式
有了展开语法, 将数组展开为构造函数的参数就很简单了

let dateFields = [2022, 2, 2];
let d = new Date(...dateFields);
console.log(d); // Wed Mar 02 2022 00:00:00 GMT+0800 (中国标准时间)

二、在数组中使用

2.1 合并数组

使用Array.concat()方法连接数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = arr1.concat(arr2);
console.log(arr3);  // [1, 2, 3, 4, 5, 6]

使用...运算符连接数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);  // [1, 2, 3, 4, 5, 6]

2.2 拷贝数组

直接赋值

let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1);  // [1, 2, 3, 4]
console.log(arr2);  // [1, 2, 3, 4]

使用...运算符拷贝

let arr1 = [1,2,3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr1);  // [1, 2, 3]
console.log(arr2);  // [1, 2, 3, 4]

...运算符执行的是浅拷贝(只遍历一层)

let arr1 = [1,2,3];
let arr2 = [[4],[5],[6]];
let arr3 = [...arr1,...arr2];
console.log(arr3);  // [1, 2, 3, [4],[5],[6]]

三、在对象中使用

3.1 合并对象

对象合并

let obj1 = { name: 'Jack', age: 42, gender:'男'};
let obj2 = { name: 'Rose', age: 13 };let mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);
// 合并后的对象: {name: "Rose", age: 13, gender: "男"}

3.2 拷贝对象

浅拷贝(不包含 prototype)对象

let obj1 = { name: 'Jack', age: 42 };
let obj2 = { name: 'Rose', age: 13 };let clonedObj = { ...obj1 };
console.log(clonedObj);
// 克隆后的对象: { name: "Jack", age: 42 }

【ES6】...扩展运算符相关推荐

ES6扩展运算符的几个小技巧
es6扩展运算符,也就是... ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...
ES6 - 扩展运算符与Object.assign对象拷贝与合并
文章目录扩展运算符能做什么? 什么是深浅拷贝使用ES6扩展运算符对象浅拷贝对象合并 Object.assign Object.assign详解 Object.assign()实用给对象添加属 ...
php es6写法,ES6...扩展运算符(示例代码)
在数组中的应用扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,++将一个数组转为用逗号分隔的参数序列++. console.log(...[1, 2, 3]) // 1 ...
ES6——扩展运算符的作用以及使用场景
文章目录对象扩展运算符解构赋值扩展运算符数组扩展运算符替代函数的apply() 方法扩展运算符的应用复制数组合并数组与解构赋值结合字符串实现了Iterator接口的对象对象扩展 ...
js数组合并、去重、降维(ES6:扩展运算符、Set)
js数组合并.去重.降维 1.合并 1.1使用concat()进行合并数组 function get_concat(collection_a, collection_b) {return collec ...
ES6——扩展运算符(...)
文章目录一.扩展运算符(...) 二.数组扩展运算符的应用 1.合并数组 2.与解构赋值结合 3.字符串转数组 4.实现了 Iterator 接口的对象 5.Map 和 Set 结构, Genera ...
JS之ES6扩展运算符三个点（...）用于剥离{} 获取属性值
1.用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 } 等价于 ...
ES6——扩展运算符/三点运算符（...）
扩展运算符(spread)是三个点(...). 数组的扩展运算符对于数组来说,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) ...
ES6 “...“ 扩展运算符 (点点点)
1.定义扩展运算符(spread)是三个点(-),它如同rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. 2.使用 console.log(...[1,2,3]); //1 2 3 con ...
ES6扩展运算符用法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中用法: 1.将一个数组放入另一个数组中 var middle = [3, ...

【ES6】...扩展运算符

文章目录

扩展运算符

一、在函数中使用

1.1 传递实参

1.2 接收形参

1.3 new 表达式

二、在数组中使用

2.1 合并数组

2.2 拷贝数组

三、在对象中使用

3.1 合并对象

3.2 拷贝对象

【ES6】...扩展运算符相关推荐

最新文章

热门文章