JS篇面试题16-Es6中的事件扩展符在什么场景下使用

最新推荐文章于 2024-03-25 15:13:09 发布

原创

最新推荐文章于 2024-03-25 15:13:09 发布 · 342 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端 #开发语言 #ecmascript

本文详细介绍了ES6中的事件扩展符（...）在数组和对象中的多种用途，包括数组复制、合并、去重，以及在React和Vue组件中传递props。此外，还讨论了在解构赋值和函数参数传递中的应用，并提供了相关示例。

在ES6中，事件扩展运算符可以用于数组和对象的展开操作，用于将一个数组转为用逗号分隔的参数序列或将一个对象转为多个参数的形式传入一个函数中。以下是事件扩展运算符的用法和示例

数组

构造数组：使用扩展运算符可以更简单、更优雅地构造新数组，而不必使用push、splice、concat等方法将已有数组元素变成新数组的一部分。例如

扩展运算符打印可迭代对象的每一项

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

用法1-复制数组

使用扩展运算符可以更方便地复制一个数组，而不必使用slice方法。例如

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

用法2-数组合并

使用扩展运算符可以更简单、更优雅地合并两个数组。例如

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5]
// 等同于
var arr4 = arr1.concat(arr2);
console.log(arr3, arr4); // [0, 1, 2, 3, 4, 5] [0, 1, 2, 3, 4, 5]

对象

复制对象：使用扩展运算符可以更方便地复制一个对象。例如

let obj = {a: 1, b: 2, c: 3};
let obj2 = {...obj}; // {a: 1, b: 2, c:

最低0.47元/天解锁文章