JavaScript 是一种动态弱类型的编程语言，它的数据结构非常灵活。在 ES6 中，数组和对象的扩展表达式语法提供了一种更加简洁和易读的方式来操作数组和对象。这些新特性不仅可以提高代码的可读性和可维护性，还可以帮助开发者更加高效地编写代码。
数组扩展
扩展运算符
扩展运算符是 ES6 中的一个新特性，它可以用来展开一个数组或者将一个数组转换为参数序列。在函数调用中，扩展运算符可以将一个数组中的元素作为单独的参数传递给函数。在数组字面量中，扩展运算符可以将一个数组中的元素插入到另一个数组中。
-- -------------------- ---- ------- -- ------------ -------- ------------- -- -- - -------------- -- --- - --- --- - --- -- --- ------------------- -- ---- - - -- -------------- --- ---- - --- -- --- --- ---- - --- -- --- --- ---- - --------- --------- ------------------ -- ------ -- -- -- -- --
Array.from()
Array.from() 方法可以将一个类数组对象或者可迭代对象转换为一个数组。它的第一个参数是要转换的对象，第二个参数是一个可选的映射函数，用来对数组中的每个元素进行转换。
-- -------------------- ---- ------- -- ------------- --- ---- - --------------------------------- --- --- - ----------------- -- ------------- --- --- - -------- --- --- - ---------------- -- -------- ---- ---- ---- ---- -- ----------------- --- ---- - --- -- --- --- ---- - ---------------- - -- - - --- -- ------ -- --
Array.of()
Array.of() 方法可以根据传入的参数创建一个新的数组。它的参数可以是任意数量的任意类型的值。
// 使用 Array.of() 方法创建一个新的数组
var arr = Array.of(1, 2, 3, 'hello', {name: 'Alice'});
console.log(arr); // 输出：[1, 2, 3, "hello", {name: "Alice"}]find() 和 findIndex()
find() 方法可以用来查找数组中满足条件的第一个元素，它的参数是一个回调函数，用来判断每个元素是否满足条件。如果找到了满足条件的元素，find() 方法会返回该元素，否则返回 undefined。
findIndex() 方法与 find() 方法类似，但是它返回的是满足条件的元素的索引，如果没有找到满足条件的元素，它会返回 -1。
// 使用 find() 方法查找数组中的元素 var arr = [1, 2, 3, 4, 5]; var result = arr.find(x => x > 3); // 输出：4 // 使用 findIndex() 方法查找数组中的元素的索引 var arr = [1, 2, 3, 4, 5]; var result = arr.findIndex(x => x > 3); // 输出：3
fill() 和 copyWithin()
fill() 方法可以用来填充数组中的元素，它的第一个参数是要填充的值，第二个参数是要填充的起始位置，第三个参数是要填充的结束位置。
copyWithin() 方法可以用来复制数组中的元素，它的第一个参数是要复制到的位置，第二个参数是要复制的起始位置，第三个参数是要复制的结束位置。
// 使用 fill() 方法填充数组中的元素 var arr = [1, 2, 3, 4, 5]; arr.fill(0, 2, 4); // 输出：[1, 2, 0, 0, 5] // 使用 copyWithin() 方法复制数组中的元素 var arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3); // 输出：[4, 5, 3, 4, 5]
对象扩展
属性初始化器简写
在 ES6 中，我们可以使用属性初始化器简写来更加简洁地创建对象。如果属性名称和属性值的变量名相同，我们可以省略属性名称。
// 使用属性初始化器简写创建对象
var name = 'Alice';
var age = 18;
var obj = {name, age};
console.log(obj); // 输出：{name: "Alice", age: 18}计算属性名称
在 ES6 中，我们可以使用计算属性名称来动态地创建对象的属性名称。计算属性名称需要使用方括号包裹属性名称，方括号内可以是任意的 JavaScript 表达式。
// 使用计算属性名称创建对象
var name = 'Alice';
var obj = {[name]: 'hello'};
console.log(obj); // 输出：{Alice: "hello"}Object.assign()
Object.assign() 方法可以用来将多个对象合并为一个对象。它的第一个参数是目标对象，后面的参数是源对象。如果目标对象和源对象有相同的属性名称，后面的属性值会覆盖前面的属性值。
// 使用 Object.assign() 方法合并对象
var obj1 = {name: 'Alice', age: 18};
var obj2 = {name: 'Bob', gender: 'male'};
var obj3 = Object.assign(obj1, obj2);
console.log(obj3); // 输出：{name: "Bob", age: 18, gender: "male"}总结
ES6 中的数组和对象的扩展表达式语法提供了一种更加简洁和易读的方式来操作数组和对象。这些新特性可以帮助开发者更加高效地编写代码，提高代码的可读性和可维护性。在实际开发中，我们可以根据具体的需求选择合适的扩展表达式语法来优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65083f5195b1f8cacd364609