随着前端技术的快速发展和普及，JavaScript 的语言标准也随着不断发展和完善。在 ECMAScript 6 (ES6) 中，数组和对象扩展操作得到了很大的优化和改进，帮助前端开发者更加方便和快速地处理数据。本文主要介绍 ES6 中数组和对象的扩展操作，包括map、filter、reduce、展开操作符等，并提供示例代码。
数组扩展方法: map、filter、reduce
数组是 JavaScript 中常用的一种数据结构，ES6 中提供了一些常用的数组扩展方法，可以方便的对数组中的元素进行操作。其中最常用的三个方法是map、filter、reduce。
map 方法
map 方法可以将数组中的每一个元素映射成为另一个值，最终返回一个由新值组成的新数组，不会影响原数组。
const arr = [1, 2, 3, 4, 5]; const mapped = arr.map(item => item * item); console.log(mapped); // [1, 4, 9, 16, 25]
filter 方法
filter 方法可以根据指定的条件从数组中筛选出符合条件的元素，并返回一个由符合条件元素组成的新数组，不会影响原数组。
const arr = [1, 2, 3, 4, 5]; const filtered = arr.filter(item => item % 2 === 0); console.log(filtered); // [2, 4]
reduce 方法
reduce 方法是一个常用的累加器方法，可以使用指定的操作，将一个数组缩减成一个值。reduce 方法接收一个回调函数，该回调函数接收两个参数，第一个参数是累加器，第二个参数是当前值。回调函数的返回值将作为下一次调用时的累加器。
const arr = [1, 2, 3, 4, 5]; const sum = arr.reduce((accumulator, item) => accumulator + item); console.log(sum); // 15
对象扩展操作: 展开操作符
在 ES6 中，我们可以通过展开操作符快速的进行对象的合并、克隆和属性拷贝等操作，从而提高代码复用性和开发效率。展开操作符可以用于数组和对象。
基本用法
展开操作符使用三个点 (...) 来表示，可以方便地将一个数组或对象展开为多个值。
// 将数组展开为多个值
const arr = [1, 2, 3, 4, 5];
console.log(...arr); // 1 2 3 4 5
// 将对象展开为多个属性
const obj = {a: 1, b: 2, c: 3};
console.log({...obj}); // {a: 1, b: 2, c: 3}对象合并
展开操作符可以快速地合并多个对象，从而生成一个全新的对象。
const obj1 = {a: 1, b: 2, c: 3};
const obj2 = {d: 4, e: 5, f: 6};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}属性覆盖
如果要合并的对象中存在同名属性，则后面的值会覆盖前面的值。
const obj1 = {a: 1, b: 2, c: 3};
const obj2 = {b: 4, e: 5, f: 6};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {a: 1, b: 4, c: 3, e: 5, f: 6}属性拷贝
展开操作符还可以通过对象属性拷贝，将对象中的某些属性拷贝到一个新对象中。
const obj1 = {a: 1, b: 2, c: 3};
const copiedObj = {...obj1, b: 4};
console.log(copiedObj); // {a: 1, b: 4, c: 3}总结
ES6 中的数组和对象扩展操作能够大大提高开发效率和代码复用性，让代码更加简洁有力。本文主要介绍了三种常用的数组扩展方法——map、filter、reduce，以及对象扩展的展开操作符的基本用法，包括对象合并、属性覆盖和属性拷贝。在实际开发中，大家可以根据实际需要进行选用，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ae258968c7c53b0d2d6c1