在ES6中，数组新增扩展及其用法汇总

在ES6中，数组新增了多项扩展，极大提高了操作数组的便捷性。以下是一些常用的扩展及其用法：

1. Array.from()

用于从类数组对象或迭代器创建一个新的数组实例。这个方法可以接受两个参数：

• source (来源)：这是必须的参数，可以是一个类数组对象（如arguments对象，DOM的NodeList对象等）或者任何可迭代对象（如字符串、Map或Set等）。Array.from()将会把这个对象转换成数组。

• mapFn(映射函数)：这是可选的参数，如果提供了此函数，则会应用于目标数组中的每个元素，并且新数组中对应的元素将是调用该函数的结果。映射函数会被作为Array.prototype.map()的回调函数来使用，它接收三个参数：当前处理的元素值、元素的索引以及源数组。

// 使用 Array.from() 从字符串创建数组
const str = 'hello';
const arr = Array.from(str);
console.log(arr); // 输出: ['h', 'e', 'l', 'l', 'o']

// 使用 Array.from() 并提供映射函数
const numArr = [1, 2, 3, 4, 5];
const squaredArr = Array.from(numArr, x => x * x);
console.log(squaredArr); // 输出: [1, 4, 9, 16, 25]

在这个例子中，第一个Array.from()调用将字符串转换为字符数组，而第二个则创建了一个新数组，其中包含了原数组元素的平方值。

2. Array.of()

Array.of() 是 JavaScript 中的一个静态方法，用于从零个或多个给定的参数创建一个新的 Array 实例。这个方法非常直接，主要用于那些需要将几个单独的值组合成一个数组的情况。

基本语法

Array.of(item1[, item2[, ...[, itemN]]])

参数

• item1, item2, ..., itemN：这些是要包含在新数组中的项。可以是任意类型的数据，包括 undefined, null, 对象, 字符串等等。

返回值

• 返回的新数组包含了传入的所有项。

示例

以下是一些使用 Array.of() 的示例：

// 创建一个只有一个数字的数组
let singleItemArray = Array.of(10);
console.log(singleItemArray); // 输出: [10]

// 创建一个包含多个混合类型的数组
let mixedArray = Array.of('hello', 42, true);
console.log(mixedArray); // 输出: ['hello', 42, true]

// 创建一个空数组
let emptyArray = Array.of();
console.log(emptyArray); // 输出: []

与字面量数组的区别

使用 Array.of() 和直接使用方括号创建数组（即字面量数组）的主要区别在于处理单个参数的方式：

// 使用字面量方式创建数组
let singleNumberLiteral = [10]; // 结果是一个包含单个元素的数组: [10]

// 使用 Array.of() 创建数组
let singleNumberArrayOf = Array.of(10); // 同样结果是一个包含单个元素的数组: [10]

// 使用字面量方式创建单元素数组与直接创建单值
let justANumber = [10,]; // 也会得到一个数组: [10], 但是通常不需要逗号

// 使用 Array.of() 时，即使只传递一个参数，也会创建一个数组
let justANumberWithArrayOf = Array.of(10); // 结果是一个数组: [10]

总的来说，Array.of() 可以确保即使只传递一个参数也能正确地返回一个数组，而在方括号字面量的情况下，单个值不会自动变成数组的一部分，除非明确地将其放入方括号内。

3. find() 和 findIndex()

在 JavaScript 中，Array.prototype.find() 和 Array.prototype.findIndex() 都是用来查找数组中满足特定条件的元素的方法，但它们返回的结果有所不同。

Array.prototype.find()

find() 方法会遍历数组中的每个元素，直到找到第一个使提供的函数返回 true 的元素为止，然后返回该元素。如果没有找到符合条件的元素，则返回 undefined。

语法

array.find(callback[, thisArg])

参数

• callback(element[, index[, array]]): 必需。一个函数，对于数组中的每个元素都会调用一次。该函数应该返回一个布尔值。
  • element: 当前遍历到的数组元素。
  • index: 当前遍历到的元素的索引。
  • array: 调用 find 的数组。
• thisArg: 可选。执行回调函数时使用的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

// 寻找第一个大于 3 的元素
const foundElement = numbers.find((element, index, arr) => {
   
  return element > 3;
});

console.log(foundElement); // 输出: 4

Array.prototype.findIndex()

findIndex() 方法同样会遍历数组中的每个元素，直到找到第一个使提供的函数返回 true 的元素为止，然后返回该元素的索引。如果没有找到符合条件的元素，则返回 -1。

语法

array.findIndex(callback[, thisArg])

参数

• callback(element, index, array): 必需。一个函数，对于数组中的每个元素都会调用一次。该函数应该返回一个布尔值。
  • element: 当前遍历到的数组元素。
  • index: 当前遍历到的元素的索引。
  • array: 调用 findIndex 的数组。
• thisArg: 可选。执行回调函数时使用的 this 值。

示例

const numbers = [1, 2, 3, 4