作为一个优秀前端的你，是不是连Array下有多少原型方法都不知道？进来我告诉你！

前言

JavaScript 中的数组是一种重要的数据结构，它提供了许多有用的方法和功能。在本文中，我们将浅浅的探讨数组的常用方法和特性，并结合唐诗、宋词和元曲等文学作品，通过案例演示这些方法的使用。让我们一起来了解JavaScript 数组的精髓！

这次我们对着浏览器中的数组方法一个个展开来讲

1. Array.prototype.at()

基本语法

array.at(index)

使用场景

at() 方法返回指定索引处的元素值。索引可以是负数，表示从数组的末尾开始计数。如果索引超出数组的范围，则返回 undefined。

使用场景示例：

1. 访问数组中的特定元素：通过指定索引来获取数组中特定位置的元素。

const array = ["明月几时有", "把酒问青天", "不知天上宫阙", "今夕是何年"];

console.log(array.at(2)); // 输出: "不知天上宫阙"
console.log(array.at(-1)); // 输出: "今夕是何年"

2. 连缀调用: 可以与其他数组方法进行连缀调用

const array = [
  '静夜思',
  '床前明月光',
  '疑是地上霜',
  '举头望明月',
  '低头思故乡'
];

const result = array
  .map(item => item.substring(0, 1).toUpperCase() + item.substring(1))
  .at(2);

console.log(result); // 输出：'疑是地上霜'

注意事项

• 当索引超出数组范围时，at() 方法返回 undefined，而不会抛出错误。
• Array.prototype.at() 方法是在较新2022的 JavaScript 版本中引入的，如果你使用的是旧版本的 JavaScript，可能不支持该方法。

总结

at() 方法可用于获取数组中指定索引处的元素值，支持负数索引。当需要访问特定位置的数组元素时，可以使用该方法。如果索引超出数组范围，将返回 undefined。

2. Array.prototype.concat()

基本语法

array.concat(value1, value2, ..., valueN)

使用场景

concat() 方法可用于将多个数组或值合并为一个新数组。它接受一个或多个参数，可以是数组或值，并返回一个包含原始数组和要合并的数组或值的新数组。这对于将多个数组的元素组合在一起非常方便。

使用场景示例：

1. 合并多个数组：将多个数组合并为一个新数组。

const array1 = ["白日依山尽", "黄河入海流"];
const array2 = ["欲穷千里目", "更上一层楼"];
const array3 = ["床前明月光", "疑是地上霜"];

const newArray = array1.concat(array2, array3);

console.log(newArray);
// 输出: ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼", "床前明月光", "疑是地上霜"]

1. 合并数组和值：将数组和值合并为一个新数组。

const array1 = ["静夜思", "床前明月光"];
const value = "疑是地上霜";

const newArray = array1.concat(value);

console.log(newArray);
// 输出: ["静夜思", "床前明月光", "疑是地上霜"]

注意事项

• concat() 方法不会修改原始数组，而是返回一个新的合并后的数组。
• 如果参数是数组，则 concat() 方法会将数组展开，将数组中的每个元素添加到新数组中。
• 如果参数是值而不是数组，该值将直接添加到新数组的末尾。

总结

concat() 方法可用于将多个数组或值合并为一个新数组。它不会修改原始数组，而是返回一个新的合并后的数组。可以通过将多个数组作为参数传递给 concat() 方法，或将数组和值作为参数传递来合并它们。

3. Array.prototype.constructor()

基本语法

array.constructor

使用场景

constructor 属性返回创建指定数组实例的函数。在 JavaScript 中，Array 构造函数用于创建数组对象。通过访问数组的 constructor 属性，可以获取创建该数组的构造函数。

使用场景示例：

1. 检查数组的构造函数：通过 constructor 属性来检查数组对象的构造函数。

const array = ["床前明月光", "疑是地上霜"];

console.log(array.constructor === Array); // 输出: true
console.log(array.constructor === Object); // 输出: false

需要注意的是，使用 constructor 属性来判断对象类型并不是最可靠的方法。因为在某些情况下，它可能会受到对象原型链上的修改或重写的影响。更推荐的方式是使用 Array.isArray() 方法进行类型检查，它能够准确地判断一个值是否为数组。

注意事项

• constructor 属性是只读的，不能对其进行赋值。
• 在继承的情况下，constructor 属性可能会指向继承链中的其他构造函数。

总结

constructor 属性用于返回创建指定数组实例的构造函数。通过检查数组的 constructor 属性，可以确定数组对象的构造函数是否为 Array。这在需要验证对象是否为数组时非常有用。

4. Array.prototype.copyWithin()

基本语法

array.copyWithin(target, start, end)

使用场景

copyWithin() 方法在数组内部对指定位置的元素进行拷贝，并将其放置到数组的指定位置上。它接受三个参数：

• target（必需）：拷贝的目标位置，即将被拷贝的元素将从此位置开始替换。
• start（可选）：拷贝的起始位置，默认为 0。如果为负数，则表示倒数的索引。
• end（可选）：拷贝的结束位置，默认为数组长度。如果为负数，则表示倒数的索引。

使用场景示例：

1. 拷贝数组元素：将数组内部的元素拷贝到指定位置。

const array = ["明月几时有", "把酒问青天", "不知天上宫阙", "今夕是何年"];

// 将索引为 0 的元素拷贝到索引为 2 的位置
array.copyWithin(2, 0, 1);

console.log(array);
// 输出: ["明月几时有", "把酒问青天", "明月几时有", "今夕是何年"]

在上述示例中，索引为 0 的元素 "明月几时有" 被拷贝到索引为 2 的位置，原来索引为 2 的元素 "不知天上宫阙" 被覆盖。

注意事项

• copyWithin() 方法会修改原始数组，并返回修改后的数组。
• 如果 target 大于等于 start，则拷贝的元素会覆盖后面的元素。
• 如果 end 参数被省略或超过数组长度，则拷贝到末尾。

总结

copyWithin() 方法可用于在数组内部对指定位置的元素进行拷贝，并将其放置到数组的指定位置上。通过指定目标位置、起始位置和结束位置，可以灵活地进行元素的拷贝和替换。注意该方法会修改原始数组。

5. Array.prototype.entries()

基本语法

array.entries()

使用场景

entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引处的键值对。

使用场景示例：

1. 遍历数组键值对：使用 entries() 方法遍历数组中的键值对。

const array = ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼"];

const iterator = array.entries();

for (const [index, value] of iterator) {
  console.log(`索引: ${index}, 值: ${value}`);
}
// 输出:
// 索引: 0, 值: 白日依山尽
// 索引: 1, 值: 黄河入海流
// 索引: 2, 值: 欲穷千里目
// 索引: 3, 值: 更上一层楼

在上述示例中，使用 entries() 方法获取数组的迭代器对象，然后使用 for...of 循环遍历迭代器对象，每次迭代得到索引和对应的值。

注意事项

• entries() 方法返回一个迭代器对象，需要使用迭代器来访问键值对。
• 迭代器对象的键值对使用数组 [index, value] 的形式表示。
• 迭代器对象会遍历数组中所有索引，包括稀疏索引和被删除的索引。

总结

entries() 方法可用于遍历数组中每个索引处的键值对。通过获取数组的迭代器对象，并使用迭代器进行遍历，可以获取每个索引和对应的值。注意需要使用迭代器对象来访问键值对。

6. Array.prototype.every()

基本语法

array.every(callback(element, index, array), thisArg)

使用场景

every() 方法用于检测数组中的所有元素是否满足指定的条件（通过回调函数判断）。它会对数组中的每个元素执行回调函数，并返回一个布尔值表示是否所有元素都满足条件。

使用场景示例：

1. 检查数组中的所有元素是否大于 0：使用 every() 方法检查数组中的所有元素是否都大于 0。

const array = ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼"];

const allContainsMoon = array.every((element) => element.includes("月"));

console.log(allContainsMoon); // 输出: false

在上述示例中，回调函数 (element) => element.includes("月") 用于检查每个元素是否包含"月"这个字。every() 方法会对数组中的每个元素应用该回调函数，并返回 false，表示并非所有元素都包含"月"这个字。

注意事项

• every() 方法对数组中的每个元素执行回调函数，直到找到一个不满足条件的元素。在这种情况下，它会立即返回 false，不再继续遍历剩余的元素。
• 回调函数接受三个参数：element（当前正在处理的元素）、index（当前元素的索引）和 array（调用 every() 方法的数组）。
• 可选的 thisArg 参数可用于在回调函数中设置 this 的值。

总结

every() 方法用于检测数组中的所有元素是否满足指定的条件。它会对数组中的每个元素应用回调函数，直到找到一个不满足条件的元素或遍历完所有元素。根据检查结果，它返回一个布尔值表示是否所有元素都满足条件。

7. Array.prototype.fill()

基本语法

array.fill(value, start, end)

使用场景

fill() 方法用指定的值填充数组中从起始位置到结束位置的所有元素。它接受三个参数：

• value（必需）：要填充的值。
• start（可选）：填充起始位置的索引，默认为 0。如果为负数，则表示倒数的索引。
• end（可选）：填充结束位置的索引，默认为数组的长度。如果为负数，则表示倒数的索引。

使用场景示例：

1. 填充数组：将数组中的元素全部替换为指定的“明月几时有”。

const array = ["花自飘零水自流", "一种相思两处闲愁", "此情无计可消除", "才下眉头却上心头"];

array.fill("明月几时有", 1, 3);

console.log(array);
// 输出: ["花自飘零水自流", "明月几时有", "明月几时有", "才下眉头却上心头"]

在上述示例中，使用 fill() 方法将数组索引 1 到 3（不包括索引 3）的元素全部替换为"明月几时有"。

注意事项

• fill() 方法会修改原始数组，并返回修改后的数组。
• 如果 start 大于等于 end，则不会进行填充。
• 如果 end 参数被省略或超过数组长度，则填充到末尾。

总结

fill() 方法用指定的值填充数组中从起始位置到结束位置的所有元素。通过指定要填充的值、起始位置和结束位置，可以对数组进行填充操作。注意该方法会修改原始数组。

8. Array.prototype.filter()

基本语法

array.filter(callback(element, index, array), thisArg)

使用场景

filter() 方法通过指定的回调函数对数组进行筛选，并返回一个新的数组，其中包含满足条件的元素。回调函数将应用于数组中的每个元素，根据返回的布尔值决定是否保留该元素。

使用场景示例：

1. 筛选包含特定词的“明月”：

const array = ["明月几时有", "白日依山尽", "把酒问青天", "不知天上宫阙", "今夕是何年"];

const filteredArray = array.filter((element) => element.includes("明月"));

console.log(filteredArray);
// 输出: ["明月几时有"]

在上述示例中，使用 filter() 方法筛选出数组中包含字词 "明月"

注意事项

• 回调函数接受三个参数：element（当前处理的元素）、index（当前元素的索引）和 array（调用 filter() 方法的数组）。
• 可选的 thisArg 参数可用于在回调函数中设置 this 的值。

总结

filter() 方法通过指定的回调函数对数组进行筛选，返回一个新的数组，其中包含满足条件的元素。根据回调函数的返回值（布尔值），决定是否保留每个元素。使用 filter() 方法可以对数组进行灵活的筛选操作。

9. Array.prototype.find()

基本语法

array.find(callback(element, index, array), thisArg)

使用场景

find() 方法用于在数组中查找满足指定条件的第一个元素，并返回该元素。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，直到找到满足条件的元素为止。

使用场景示例：

1. 查找包含特定关键词的唐诗：

const poems = ["春眠不觉晓，处处闻啼鸟", "白日依山尽，黄河入海流" ,"千山鸟飞绝，万径人踪灭", "夕阳无限好，只是近黄昏","白日依山尽，黄河入海流1111"];
	
const foundPoem = poems.find((poem) => poem.includes("黄河"));

console.log(foundPoem);
//白日依山尽，黄河入海流

在上述示例中，使用 find() 方法查找包含关键词 "黄河" 的唐诗，并返回第一个满足条件的唐诗。

注意事项

• 回调函数接受三个参数：element（当前处理的元素）、index（当前元素的索引）和 array（调用 find() 方法的数组）。
• 可选的 thisArg 参数可用于在回调函数中设置 this 的值。

总结

find() 方法用于在数组中查找满足指定条件的第一个元素，并返回该元素。通过提供一个回调函数，可以对数组中的每个元素进行判断，直到找到满足条件的元素为止。使用 find() 方法可以快速查找数组中的特定元素。

10 Array.prototype.findIndex()

基本语法

array.findIndex(callback(element, index, array), thisArg)

使用场景

findIndex() 方法用于在数组中查找满足指定条件的第一个元素的索引，并返回该索引值。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，直到找到满足条件的元素为止。

使用场景示例：

1. 查找包含特定关键词的唐诗的索引：

const poems = ["白日依山尽，黄河入海流", "春眠不觉晓，处处闻啼鸟", "千山鸟飞绝，万径人踪灭", "夕阳无限好，只是近黄昏"];

const foundIndex = poems.findIndex((poem) => poem.includes("黄河"));

console.log(foundIndex);
// 输出: 0

在上述示例中，使用 findIndex() 方法查找包含关键词 "黄河" 的唐诗的索引，并返回第一个满足条件的唐诗的索引值。

注意事项

• 回调函数接受三个参数：element（当前处理的元素）、index（当前元素的索引）和 array（调用 findIndex() 方法的数组）。
• 可选的 thisArg 参数可用于在回调函数中设置 this 的值。

总结

findIndex() 方法用于在数组中查找满足指定条件的第一个元素的索引，并返回该索引值。通过提供一个回调函数，可以对数组中的每个元素进行判断，直到找到满足条件的元素为止。使用 findIndex() 方法可以快速查找数组中满足条件的元素的索引。

11. Array.prototype.findLast()

基本语法

array.findLast(callback(element, index, array), thisArg)

使用场景

findLast() 方法用于在数组中从后向前查找满足指定条件的最后一个元素，并返回该元素。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。

使用场景示例：

const poems = [
  "明月几时有，把酒问青天",
  "白日依山尽，黄河入海流",
  "人生自古谁无死，留取丹心照汗青",
  "此情可待成追忆，只是当时已惘然",
  "千山鸟飞绝，万径人踪灭"
];

const foundLastPoem = poems.findLast((poem) => poem.includes("黄河"));

console.log(foundLastPoem);
// 输出: "白日依山尽，黄河入海流"

在上述示例中，我们使用 findLast() 方法从后向前查找包含关键词 "黄河" 的唐诗，并返回最后一个满足条件的元素。

注意事项

• 回调函数接受三个参数：element（当前处理的元素）、index（当前元素的索引）和 array（调用 findLast() 方法的数组）。
• 可选的 thisArg 参数可用于在回调函数中设置 this 的值。

总结

Array.prototype.findLast() 方法用于在数组中从后向前查找满足指定条件的最后一个元素，并返回该元素。通过提供一个回调函数，可以对数组中的每个元素进行判断，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。使用 findLast() 方法可以快速查找数组中最后一个满足条件的元素。

12. Array.prototype.findLastIndex()

基本语法

array.findLastIndex(callback(element, index, array), thisArg)

使用场景

findLastIndex() 方法用于在数组中从后向前查找满足指定条件的最后一个元素的索引，并返回该索引值。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。

使用场景示例：

const poems = [
  "明月几时有，把酒问青天",
  "白日依山尽，黄河入海流",
  "人生自古谁无死，留取丹心照汗青",
  "此情可待成追忆，只是当时已惘然",
  "千山鸟飞绝，万径人踪灭"
];

const lastIndex = poems.findLastIndex((poem) => poem.includes("黄河"));

console.log(lastIndex);
// 输出: 1

在上述示例中，我们使用 findLastIndex() 方法从后向前查找包含关键词 "黄河" 的唐诗，并返回最后一个满足条件的元素的索引值。

注意事项

• 回调函数接受三个参数：element（当前处理的元素）、index（当前元素的索引）和 array（调用 findLastIndex() 方法的数组）。
• 可选的 thisArg 参数可用于在回调函数中设置 this 的值。

总结

Array.prototype.findLastIndex() 方法用于在数组中从后向前查找满足指定条件的最后一个元素的索引，并返回该索引值。通过提供一个回调函数，可以对数组中的每个元素进行判断，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。使用 findLastIndex() 方法可以快速查找数组中最后一个满足条件的元素的索引。

13. Array.prototype.flat()

基本语法

array.flat(depth)

使用场景

flat() 方法用于将嵌套多层的数组扁平化为一个新的数组。它接受一个可选的 depth 参数，表示要扁平化的层级深度。如果没有提供 depth 参数，则默认为 1。

使用场景示例：

const poems = [
  "白日依山尽，黄河入海流",
  "人生自古谁无死，留取丹心照汗青",
  "此情可待成追忆，只是当时已惘然",
  "千山鸟飞绝，万径人踪灭"
];

const nestedPoems = [
  "明月几时有，把酒问青天",
  poems,
  "床前明月光，疑是地上霜"
];

const flattenedArray = nestedPoems.flat();

console.log(flattenedArray);
// 输出: ["明月几时有，把酒问青天", "白日依山尽，黄河入海流", "人生自古谁无死，留取丹心照汗青", "此情可待成追忆，只是当时已惘然", "千山鸟飞绝，万径人踪灭", "床前明月光，疑是地上霜"]

在上述示例中，我们使用 flat() 方法将嵌套多层的数组 nestedPoems 扁平化为一个新的数组 flattenedArray。通过将 depth 参数设置为默认值 1，数组 poems 中的元素被展开到了最外层的结果数组中。

如果需要扁平化多层嵌套的数组，可以传递一个大于 1 的 depth 参数：

const deeplyNestedPoems = [
  "明月几时有，把酒问青天",
  [poems, "床前明月光，疑是地上霜"],
  "白日依山尽，黄河入海流"
];

const deeplyFlattenedArray = deeplyNestedPoems.flat(2);

console.log(deeplyFlattenedArray);
// 输出: ["明月几时有，把酒问青天", "白日依山尽，黄河入海流", "人生自古谁无死，留取丹心照汗青", "此情可待成追忆，只是当时已惘然", "千山鸟飞绝，万径人踪灭", "床前明月光，疑是地上霜"]

在上述示例中，我们通过将 depth 参数设置为 2，将多层嵌套的数组 deeplyNestedPoems 扁平化为一个新的数组 deeplyFlattenedArray。数组 poems 中的元素以及嵌套在数组中的元素都被展开到了最外层的结果数组中。

注意事项

• flat() 方法返回一个新数组，原始数组不会被修改。
• 如果数组中的元素有空位（undefined），它们会被跳过并在结果中被忽略。
• 如果需要完全扁平化一个数组，可以使用 Infinity 作为 depth 参数的值。

总结

Array.prototype.flat() 方法用于将嵌套多层的数组扁平化为一个新的数组。通过提供一个可选的 depth 参数，可以指定要扁平化的层级深度。使用 flat() 方法可以快速处理嵌套数组，并得到一个扁平化的结果。

14. Array.prototype.flatMap()

flatMap() 方法是数组的一个方法，它结合了 map() 和 flat() 的功能。它对数组的每个元素应用一个映射函数，并将结果扁平化为一个新数组。

基本语法

const newArray = array.flatMap(callback(element, index, array), thisArg);

• array: 原始数组。

• callback: 用于映射每个元素的回调函数。

  • element: 当前元素的值。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 flatMap() 方法的数组。

• thisArg (可选): 执行回调函数时使用的 this 值。

使用场景

flatMap() 方法适用于以下场景：

1. 对数组中的每个元素应用一个转换函数，得到一个新的值或数组。
2. 将转换函数的结果扁平化为一个新数组。

假设我们有一个包含多个诗人的数组 poets，每个诗人都有多首诗歌。我们想要获取所有诗人的所有诗歌的标题，并将它们放置在一个新数组中。

const poets = [
  { name: '李白', poems: ['静夜思', '将进酒', '望庐山瀑布'] },
  { name: '杜甫', poems: ['月夜忆舍弟', '登高', '秋夜将晓出篱门迎凉有感'] },
  { name: '苏轼', poems: ['江城子·密州出猎', '赤壁赋', '水调歌头·明月几时有'] }
];

const poemTitles = poets.flatMap(poet => poet.poems);

console.log(poemTitles);

在上述示例中，我们使用 flatMap() 方法对 poets 数组中的每个诗人对象应用一个映射函数 poet => poet.poems。这个映射函数返回每个诗人的诗歌数组。然后，flatMap() 方法将这些诗歌数组扁平化为一个新数组 poemTitles，其中包含了所有诗人的所有诗歌的标题。

输出结果如下所示：

[  '静夜思', '将进酒', '望庐山瀑布',  '月夜忆舍弟', '登高', '秋夜将晓出篱门迎凉有感',  '江城子·密州出猎', '赤壁赋', '水调歌头·明月几时有']

通过使用 flatMap() 方法，我们可以轻松地对数组中的每个元素应用转换函数，并将结果扁平化为一个新数组。

注意事项

• flatMap() 方法会自动去除结果数组中的 null 和 undefined 值。

总结

flatMap() 方法是一个功能强大的数组方法，它可以同时应用映射函数和扁平化操作，提供了一种简洁、高效的方式来处理具有嵌套结构的数组。通过合并 map() 和 flat() 的功能，flatMap() 提供了更简洁的代码编写方式，并能够在一次操作中实现多个数组的处理和合并。

15. Array.prototype.forEach()

forEach() 方法是数组的一个方法，用于对数组的每个元素执行提供的回调函数。

基本语法

array.forEach(callback(currentValue, index, array), thisArg);

• array: 要遍历的数组。

• callback : 对数组中的每个元素执行的回调函数。

  • currentValue: 当前元素的值。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 forEach() 方法的数组。

• thisArg (可选): 执行回调函数时使用的 this 值。

使用场景

forEach() 方法适用于以下场景：

1. 遍历数组并对每个元素执行某些操作，如打印元素、修改元素值等。
2. 无需返回值，仅需要遍历数组的情况。

假设我们有一个存储唐诗的数组 poems，我们想要打印每首诗的作者和内容。

const poems = [
  { title: '静夜思', author: '李白', content: '床前明月光，疑是地上霜。' },
  { title: '登鹳雀楼', author: '王之涣', content: '白日依山尽，黄河入海流。' },
  { title: '卜算子·咏梅', author: '陆游', content: '风雨送春归，飞雪迎春到。' }
];

poems.forEach(poem => {
  console.log(`《${poem.title}》 - 作者：${poem.author}`);
  console.log(`内容：${poem.content}`);
});

在上述示例中，我们使用 forEach() 方法遍历 poems 数组，并对每首诗执行回调函数。回调函数打印诗的标题、作者和内容。

注意事项

• forEach() 方法无法在遍历过程中中止或跳出循环，它会对数组的每个元素都执行回调函数。
• 如果需要在遍历过程中中止或跳出循环，可以使用 for 循环或 Array.prototype.some() 方法。

总结

forEach() 方法是一个简单且常用的数组方法，用于遍历数组并对每个元素执行回调函数。它提供了一种简洁的方式来处理数组的每个元素，并且不需要返回值。在处理数组元素时，可以根据具体需求在回调函数中进行相应的操作。

16. Array.prototype.includes()

includes() 方法是数组的一个方法，用于判断数组是否包含指定的元素，并返回相应的布尔值。

基本语法

array.includes(searchElement, fromIndex);

• array: 要进行查找的数组。
• searchElement: 要查找的元素。
• fromIndex (可选): 开始查找的索引位置，默认为 0。

使用场景

includes() 方法适用于以下场景：

1. 判断数组中是否包含某个特定的元素。
2. 检查数组是否包含指定的值，并根据结果进行相应的逻辑处理。

假设我们有一个存储唐诗标题的数组 titles，我们想要判断是否包含某个特定的标题。

const titles = ['静夜思', '登鹳雀楼', '卜算子·咏梅'];

console.log(titles.includes('静夜思'));
// 输出: true

console.log(titles.includes('月下独酌'));
// 输出: false

在上述示例中，我们使用 includes() 方法判断 titles 数组是否包含指定的标题。第一个 console.log() 输出为 true，表示 titles 数组包含 '静夜思' 这个标题。第二个 console.log() 输出为 false，表示 titles 数组不包含 '月下独酌' 这个标题。

注意事项

• includes() 方法使用严格相等运算符（===）进行比较。
• 如果 fromIndex 参数为负数，则从末尾开始计算索引。
• includes() 方法返回的是布尔值 true 或 false。

总结

includes() 方法是一个简单而实用的数组方法，用于判断数组是否包含指定的元素。通过返回布尔值，我们可以根据结果进行相应的逻辑处理。它提供了一种简洁的方式来检查数组中的值，避免了手动遍历数组的麻烦。

17. Array.prototype.indexOf()

indexOf() 方法是数组的一个方法，用于查找指定元素在数组中首次出现的索引位置。

基本语法

array.indexOf(searchElement, fromIndex);

• array: 要进行查找的数组。
• searchElement: 要查找的元素。
• fromIndex (可选): 开始查找的索引位置，默认为 0。

使用场景

indexOf() 方法适用于以下场景：

1. 查找指定元素在数组中的位置。
2. 判断数组中是否包含某个特定的元素。
3. 根据元素的索引进行后续的操作，如删除、替换等。

假设我们有一个存储唐诗标题的数组 titles，我们想要查找某个特定的标题在数组中的索引位置。

const titles = ['静夜思', '登鹳雀楼', '卜算子·咏梅'];

console.log(titles.indexOf('登鹳雀楼'));
// 输出: 1

console.log(titles.indexOf('月下独酌'));
// 输出: -1

在上述示例中，我们使用 indexOf() 方法查找 '登鹳雀楼' 在 titles 数组中的索引位置。第一个 console.log() 输出为 1，表示 '登鹳雀楼' 在数组中的索引位置为 1。第二个 console.log() 输出为 -1，表示 '月下独酌' 不在数组中，返回 -1。

注意事项

• indexOf() 方法使用严格相等运算符（===）进行比较。
• 如果 fromIndex 参数为负数，则从末尾开始计算索引。
• 如果 searchElement 在数组中多次出现，indexOf() 方法仅返回首次出现的索引位置。

总结

indexOf() 方法是一个常用的数组方法，用于查找指定元素在数组中首次出现的索引位置。它提供了一种便捷的方式来判断数组中是否包含某个特定的元素，并获取其位置。通过返回索引位置，我们可以根据需求进行后续的操作。

18. Array.prototype.join()

join() 方法是数组的一个方法，用于将数组中的所有元素连接成一个字符串。

基本语法

array.join(separator);

• array: 要进行连接的数组。
• separator (可选): 指定连接元素的分隔符，默认为逗号 ,。

使用场景

join() 方法适用于以下场景：

1. 将数组中的元素连接成一个字符串。
2. 自定义分隔符来连接数组元素。

假设我们有一个存储唐诗作者的数组 authors，我们想要将数组中的元素用逗号分隔连接成一个字符串。

const authors = ['李白', '王之涣', '陆游'];

const joinedString = authors.join(', ');

console.log(joinedString);
// 输出: '李白, 王之涣, 陆游'

在上述示例中，我们使用 join() 方法将 authors 数组中的元素用逗号和空格分隔连接成一个字符串。joinedString 的值为 '李白, 王之涣, 陆游'。

注意事项

• 如果数组中的元素是对象或其他复杂类型，会先调用它们的 toString() 方法将其转换为字符串，然后再进行连接。
• 如果数组中的元素为 undefined 或 null，它们会被转换为空字符串。
• 如果数组为空，则返回空字符串。

总结

join() 方法是一个方便的数组方法，用于将数组中的元素连接成一个字符串。它可以根据指定的分隔符进行连接，并且可以灵活地适应不同的连接需求。通过使用 join() 方法，我们可以快速将数组转换为字符串，并进行后续的处理。

19. Array.prototype.keys()

keys() 方法是数组的一个方法，用于返回一个包含数组索引的迭代器。

基本语法

earray.keys();

• array: 要返回索引迭代器的数组。

使用场景

keys() 方法适用于以下场景：

1. 遍历数组的索引。
2. 获取数组索引进行后续的操作。

假设我们有一个存储唐诗标题的数组 titles，我们想要遍历数组的索引并打印出来。

const titles = ['静夜思', '登鹳雀楼', '卜算子·咏梅'];

const iterator = titles.keys();

for (const index of iterator) {
  console.log(index);
}
// 输出: 0
// 输出: 1
// 输出: 2

在上述示例中，我们使用 keys() 方法获取 titles 数组的索引迭代器，并通过 for...of 循环遍历迭代器获取索引值。在循环体内，我们打印出每个索引值，即 0、1、2。

注意事项

• keys() 方法返回一个迭代器，可以通过 for...of 循环来遍历索引值。
• 迭代器按照数组的索引顺序返回索引值。
• 如果数组元素被删除或更改，迭代器仍会返回原始的索引值。

总结

keys() 方法是一个便捷的数组方法，用于返回一个包含数组索引的迭代器。通过遍历迭代器，我们可以获取数组的索引值，并根据需求进行后续的操作。它为数组的索引遍历提供了一种简单且可靠的方式。

20. Array.prototype.lastIndexOf()

lastIndexOf() 方法是数组的一个方法，用于查找指定元素在数组中最后一次出现的索引位置。

基本语法

array.lastIndexOf(searchElement, fromIndex);

• array: 要进行查找的数组。
• searchElement: 要查找的元素。
• fromIndex (可选): 开始查找的索引位置，默认为数组末尾。

使用场景

lastIndexOf() 方法适用于以下场景：

1. 查找指定元素在数组中最后一次出现的位置。
2. 判断数组中是否包含某个特定的元素。
3. 根据元素的索引进行后续的操作，如删除、替换等。

假设我们有一个存储唐诗标题的数组 titles，我们想要查找某个特定的标题在数组中最后一次出现的索引位置。

const titles = ['静夜思', '登鹳雀楼', '卜算子·咏梅', '登鹳雀楼'];

console.log(titles.lastIndexOf('登鹳雀楼'));
// 输出: 3

console.log(titles.lastIndexOf('静夜思'));
// 输出: 0

console.log(titles.lastIndexOf('月下独酌'));
// 输出: -1

在上述示例中，我们使用 lastIndexOf() 方法查找 '登鹳雀楼' 在 titles 数组中最后一次出现的索引位置。第一个 console.log() 输出为 3，表示 '登鹳雀楼' 在数组中最后一次出现的索引位置为 3。第二个 console.log() 输出为 0，表示 '静夜思' 在数组中最后一次出现的索引位置为 0。第三个 console.log() 输出为 -1，表示 '月下独酌' 不在数组中，返回 -1。

注意事项

• lastIndexOf() 方法使用严格相等运算符（===）进行比较。
• 如果 fromIndex 参数为负数，则从末尾开始计算索引。
• 如果 searchElement 在数组中多次出现，lastIndexOf() 方法仅返回最后一次出现的索引位置。

总结

lastIndexOf() 方法是一个常用的数组方法，用于查找指定元素在数组中最后一次出现的索引位置。它提供了一种便捷的方式来判断数组中是否包含某个特定的元素，并获取其最后出现的位置。通过返回索引位置，我们可以根据需求进行后续的操作。

21. Array.prototype.map()

map() 方法是数组的一个方法，用于创建一个新数组，其结果是对原数组中的每个元素应用指定的函数后的返回值。

基本语法

array.map(callback(element, index, array));

• array: 要进行映射的数组。

• callback: 用于处理每个元素的回调函数，可以接受三个参数：

  • element: 当前正在处理的元素。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 map() 方法的原数组。

使用场景

map() 方法适用于以下场景：

1. 对数组中的每个元素进行转换或处理，生成一个新的数组。
2. 将数组中的元素映射为另一种类型的值。

我们使用 map() 方法将存储唐诗的数组中的每首诗的标题提取出来：

const poems = [
  { id: 1, title: '静夜思', author: '李白' },
  { id: 2, title: '登鹳雀楼', author: '王之涣' },
  { id: 3, title: '卜算子·咏梅', author: '陆游' },
  { id: 4, title: '长恨歌', author: '白居易' }
];

const titles = poems.map(poem => poem.title);

console.log(titles);
// 输出: ['静夜思', '登鹳雀楼', '卜算子·咏梅', '长恨歌']

在上述示例中，我们有一个存储唐诗对象的数组 poems。通过使用 map() 方法，我们遍历数组中的每个对象，并通过箭头函数将每个对象的 title 属性提取出来。titles 是一个新的数组，其中包含了每首唐诗的标题。

这个案例展示了 map() 方法的另一个常见用法，即从对象数组中提取特定属性形成新的数组。通过灵活运用 map() 方法，我们可以方便地对存储对象的数组进行数据提取和转换操作。

注意事项

• map() 方法会创建一个新的数组，原始数组不会被修改。
• map() 方法会按照原始数组的顺序依次处理每个元素，并将处理结果放入新数组的相应位置。
• 如果原始数组中有空位（未定义的元素），则新数组中对应位置也是空位。
• 如果只是想遍历数组而不生成新的数组，可以考虑使用 forEach() 方法。

总结

map() 方法用于创建一个新数组，其中每个元素是通过应用指定函数后的返回值。它允许我们对数组中的每个元素进行处理或转换，并生成一个具有相同长度的新数组。通过使用 map() 方法，我们可以轻松地对数组中的元素进行映射操作，满足不同的转换需求。

22. Array.prototype.pop()

pop() 方法用于从数组中删除并返回最后一个元素。

基本语法

array.pop()

• array: 要操作的数组。

使用场景

pop() 方法适用于以下场景：

1. 从数组中删除最后一个元素。
2. 获取数组中的最后一个元素，并在删除后使用。

假设我们有一个存储唐诗的数组 poems，我们想要删除数组中的最后一首诗。

const poems = ['静夜思', '登鹳雀楼', '卜算子·咏梅', '长恨歌'];

const lastPoem = poems.pop();

console.log(lastPoem);
// 输出: '长恨歌'

console.log(poems);
// 输出: ['静夜思', '登鹳雀楼', '卜算子·咏梅']

在上述示例中，我们使用 pop() 方法从 poems 数组中删除了最后一首诗，并将其返回给变量 lastPoem。lastPoem 包含了被删除的最后一首诗的值。同时，poems 数组也被修改，最后一首诗被从数组中删除。

注意事项

• pop() 方法会修改原始数组，从数组中删除最后一个元素。
• 如果数组为空，则 pop() 方法返回 undefined。
• 可以将 pop() 方法与变量结合使用，以获取并处理最后一个元素。

总结

pop() 方法是一个常用的数组方法，用于从数组中删除并返回最后一个元素。它提供了一种简便的方式来操作数组的末尾元素。通过了解 pop() 方法的使用场景和注意事项，我们可以更好地利用它在处理数组时的实际需求。

23. Array.prototype.push()

push() 方法用于向数组末尾添加一个或多个元素，并返回修改后的数组的新长度。

基本语法

array.push(element1, element2, ..., elementN)

• array: 要操作的数组。
• element1, element2, ..., elementN: 要添加到数组末尾的元素。

使用场景

push() 方法适用于以下场景：

1. 向数组末尾添加一个元素。
2. 向数组末尾连续添加多个元素。

假设我们有一个存储唐诗的数组 poems，我们想要向数组末尾添加一首新的诗。

const poems = ['静夜思', '登鹳雀楼', '卜算子·咏梅'];

poems.push('春夜喜雨');

console.log(poems);
// 输出: ['静夜思', '登鹳雀楼', '卜算子·咏梅', '春夜喜雨']

在上述示例中，我们使用 push() 方法向 poems 数组末尾添加了一首新的诗 '春夜喜雨'。push() 方法会将新元素添加到数组的末尾，并返回修改后的数组的新长度。

注意事项

• push() 方法会修改原始数组，向其末尾添加新元素。
• push() 方法返回的是修改后的数组的新长度，而不是新数组本身。
• 可以通过连续调用 push() 方法来向数组末尾添加多个元素。

总结

push() 方法是一个常用的数组方法，用于向数组末尾添加一个或多个元素。它提供了一种简便的方式来修改数组，实现动态添加元素的需求。通过了解 push() 方法的使用场景和注意事项，我们可以更好地利用它在处理数组时的实际需求。

24. Array.prototype.reduce()

Array.prototype.reduce() 方法就像是我们在人生旅途中的一个忠实伴侣，帮助我们将一系列的元素化繁为简，融合成一个有意义的结果。

基本语法

array.reduce(callback, initialValue)

• array：需要进行处理的数组。

• callback：回调函数，用于对数组中的每个元素进行操作。

  • 回调函数接收四个参数：累积值（accumulator）、当前值（currentValue）、当前索引（currentIndex）、原始数组（array）。

• initialValue（可选）：初始值，作为回调函数的第一个累积值。

使用场景

Array.prototype.reduce() 方法适用于以下场景：

1. 当我们需要将数组中的元素合并为一个单一的值时，如计算总和、求平均值等。
2. 当我们需要对数组进行聚合操作，并生成一个结果值时。

让我们以一个例子来说明 Array.prototype.reduce() 的使用：

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);
// 输出：15

在上述示例中，我们使用 reduce() 方法将数组中的所有元素相加，并将初始值设置为 0。回调函数对每个元素进行累加操作，将当前值加到累积值上。

注意事项

• 如果不提供初始值 initialValue，reduce() 方法会从索引 1 开始遍历数组，并将索引 0 的元素作为初始累积值。
• 回调函数会在数组的每个元素上被调用，直到处理完所有元素。
• 可以根据实际需求，在回调函数中进行其他操作，如过滤、转换等。

总结

Array.prototype.reduce() 方法是一个强大的工具，帮助我们在处理数组时将多个元素聚合为一个结果。通过传入回调函数和初始值，我们可以灵活地操作数组中的元素，生成我们所需的结果。

25. Array.prototype.reduceRight()

在唐朝的元稹的诗中有一句：“春蚕到死丝方尽，蜡炬成灰泪始干。” Array.prototype.reduceRight() 方法就像是一盏蜡烛，在我们处理数组时从右向左逐步燃烧，帮助我们将数组的元素逐个合并为一个结果。

基本语法

array.reduceRight(callback, initialValue)

• array：需要进行处理的数组。

• callback：回调函数，用于对数组中的每个元素进行操作。

  • 回调函数接收四个参数：累积值（accumulator）、当前值（currentValue）、当前索引（currentIndex）、原始数组（array）。

• initialValue（可选）：初始值，作为回调函数的第一个累积值。

使用场景

Array.prototype.reduceRight() 方法适用于以下场景：

1. 当我们需要从右向左将数组中的元素合并为一个单一的值时，如逆序计算总和、逆序求平均值等。
2. 当我们需要对数组进行逆序的聚合操作，并生成一个结果值时。

让我们以一个例子来说明 Array.prototype.reduceRight() 的使用：

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

const sum = numbers.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);
// 输出：15

在上述示例中，我们使用 reduceRight() 方法从右向左将数组中的所有元素相加，并将初始值设置为 0。回调函数对每个元素进行累加操作，将当前值加到累积值上。

注意事项

• 如果不提供初始值 initialValue，reduceRight() 方法会从数组的最后一个元素开始向前遍历，并将最后一个元素作为初始累积值。
• 回调函数会在数组的每个元素上被调用，直到处理完所有元素。
• 可以根据实际需求，在回调函数中进行其他操作，如过滤、转换等。

总结

Array.prototype.reduceRight() 方法是一个有用的工具，帮助我们从右向左逐步合并数组中的多个元素，生成一个结果。通过传入回调函数和初始值，我们可以在逆序处理数组元素时进行灵活的操作。

26. Array.prototype.reverse()

这个方法用于将数组中的元素顺序颠倒，使最后一个元素变为第一个元素，第一个元素变为最后一个元素。

基本语法

array.reverse()

使用场景

比如，我们有一个唐诗数组，我们想将其元素倒序排列，使最后一首诗成为第一首诗，第一首诗成为最后一首诗。

const poems = ["静夜思", "登鹳雀楼", "卜算子·咏梅", "长恨歌"];

poems.reverse();

console.log(poems);
// 输出：["长恨歌", "卜算子·咏梅", "登鹳雀楼", "静夜思"]

注意事项

• Array.prototype.reverse() 方法会直接修改原始数组，而不会创建新的数组。
• 它会改变数组中元素的顺序，使最后一个元素成为第一个元素，第一个元素成为最后一个元素。
• reverse() 方法是原地修改，不会返回新的数组。

总结

Array.prototype.reverse() 方法是一个方便的工具，用于将数组中的元素顺序颠倒。通过简单地调用该方法，我们可以修改原始数组，使其元素逆序排列。

27. Array.prototype.shift()

这个方法用于从数组中移除并返回第一个元素。

基本语法

array.shift()

使用场景

比如，我们有一个元曲人物数组，我们想要从数组中移除并获取第一个人物。

const characters = ["关雎", "韩翃", "张生", "蝶恋花"];

const firstCharacter = characters.shift();

console.log(firstCharacter);
// 输出："关雎"
console.log(characters);
// 输出：["韩翃", "张生", "蝶恋花"]

注意事项

• Array.prototype.shift() 方法会直接修改原始数组，而不会创建新的数组。
• 它会移除并返回数组的第一个元素，同时将其他元素的索引值减一。
• 如果数组为空，则返回 undefined。

总结

Array.prototype.shift() 方法是一个用于从数组中移除并返回第一个元素的便捷方法。通过调用该方法，我们可以修改原始数组，并获取被移除的元素。

28. Array.prototype.slice()

这个方法用于从数组中提取指定范围的元素，创建一个新的数组并返回。

基本语法

array.slice(startIndex, endIndex)

使用场景

比如，我们有一个宋词数组，我们想要提取其中的前两首词组成一个新的数组。

const songs = ["浣溪沙", "如梦令", "渔家傲", "青玉案"];

const slicedSongs = songs.slice(0, 2);

console.log(slicedSongs);
// 输出：["浣溪沙", "如梦令"]

注意事项

• Array.prototype.slice() 方法不会修改原始数组，而是创建一个新的数组。
• startIndex 是要提取的起始位置的索引（包括该位置），endIndex 是要提取的结束位置的索引（不包括该位置）。
• 如果省略 endIndex，则会提取从 startIndex 到数组末尾的所有元素。
• 如果提取范围超出了数组的长度，slice() 方法会自动调整范围，以确保返回有效的结果。
• 如果 startIndex 或 endIndex 是负数，则表示从数组末尾开始计算的索引。

总结

Array.prototype.slice() 方法是一个灵活的工具，用于从数组中提取指定范围的元素，并创建一个新的数组。通过指定起始位置和结束位置，我们可以轻松地获取所需的元素子集。

29. Array.prototype.some()

这个方法用于检测数组中是否至少有一个元素满足给定的条件，如果有则返回 true，否则返回 false。

基本语法

array.some(callback)

使用场景

比如，我们有一个元曲人物数组，我们想要检查是否存在姬、王两个角色。

const characters = ["关雎", "韩翃", "张生", "蝶恋花"];

const hasJiOrWang = characters.some((character) => character === "姬" || character === "王");

console.log(hasJiOrWang);
// 输出：false

注意事项

• Array.prototype.some() 方法会遍历数组中的每个元素，执行回调函数进行条件判断。
• 回调函数接受三个参数：当前元素的值、当前元素的索引、原始数组。
• 如果回调函数对于至少一个元素返回 true，则 some() 方法返回 true，否则返回 false。
• some() 方法不会修改原始数组。
• some() 方法在遇到满足条件的元素后会停止遍历，不再继续执行回调函数。

总结

Array.prototype.some() 方法是一个用于检测数组中是否至少有一个元素满足给定条件的便捷方法。通过传入回调函数并进行条件判断，我们可以快速确定数组中是否存在满足要求的元素。

30. Array.prototype.sort()

sort() 方法用于对数组的元素进行排序。默认情况下，它将元素按照字符串的 Unicode 编码进行排序，即使数组中的元素是数字类型。

基本语法

array.sort(compareFunction)

使用场景

比如，我们有一个唐诗作者数组，我们想按照字母顺序对其进行排序。

const poets = ["白居易", "杜甫", "王之涣", "李白"];

poets.sort();

console.log(poets);
// 输出：["李白", "白居易", "王之涣", "杜甫"]

注意事项

• sort() 方法默认按照字符串的 Unicode 编码进行排序。
• 如果元素是数字类型，sort() 方法会将其转换为字符串后再进行比较。
• 如果想要按照其他规则进行排序，可以传入一个比较函数作为参数，该函数定义了排序的规则。
• 比较函数接受两个参数，表示要比较的两个元素。
• 如果比较函数返回负值，则第一个元素在排序后的数组中排在第二个元素之前；如果返回正值，则第一个元素在排序后的数组中排在第二个元素之后；如果返回 0，则两个元素的相对位置不变。
• sort() 方法会修改原始数组，并返回排序后的数组。

总结

Array.prototype.sort() 方法是对数组元素进行排序的常用方法。默认情况下，它按照字符串的 Unicode 编码进行排序，但我们也可以传入自定义的比较函数来实现按照其他规则排序。通过合理地使用 sort() 方法，我们可以轻松对数组进行排序操作。

31. Array.prototype.splice()

splice() 方法用于从数组中添加或删除元素，并返回被删除的元素。它可以修改原始数组。

基本语法

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

使用场景

比如，我们有一个数组存储着唐诗的若干行，我们想在指定位置插入新的诗句，并删除一些旧的诗句。

const poems = ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼"];

// 在索引为 2 的位置插入新的诗句
poems.splice(2, 0, "江山如此多娇");

// 删除索引为 3 和 4 的诗句
poems.splice(3, 2);

console.log(poems);
// 输出：["白日依山尽", "黄河入海流", "江山如此多娇"]

注意事项

• splice() 方法会修改原始数组，并返回一个包含被删除元素的数组。
• start 参数表示要进行添加或删除操作的起始索引。
• deleteCount 参数表示要删除的元素数量。如果为 0，则不删除任何元素。
• 可以在删除元素的同时，通过添加额外的参数来插入新的元素。
• 如果删除的元素数量超过数组中的元素数量，splice() 方法会删除从起始索引开始到数组末尾的所有元素。
• splice() 方法会改变原始数组的长度。

总结

Array.prototype.splice() 方法是在数组中添加或删除元素的灵活工具。通过合理地使用起始索引和删除数量参数，我们可以实现在指定位置插入新元素或删除指定范围的元素。它是修改数组的重要方法之一，可以应用于各种场景。

32. Array.prototype.toLocaleString()

toLocaleString() 方法返回一个字符串，表示数组中的元素根据宿主环境的语言和字符集进行格式化后的结果。

基本语法

array.toLocaleString([locales[, options]])

使用场景

toLocaleString() 方法通常用于将数组中的元素以特定的语言和字符集格式化为字符串。

const numbers = [12345.6789, 98765.4321];

// 使用默认语言环境的格式化
const formattedString = numbers.toLocaleString();

console.log(formattedString);
// 输出（可能因语言环境而异）：12,345.679, 98,765.432

// 指定英语美国语言环境的格式化
const formattedStringUS = numbers.toLocaleString('en-US');

console.log(formattedStringUS);
// 输出：12,345.679, 98,765.432

// 指定德语德国语言环境的格式化
const formattedStringDE = numbers.toLocaleString('de-DE');

console.log(formattedStringDE);
// 输出：12.345,679, 98.765,432

注意事项

• toLocaleString() 方法会将数组中的每个元素转换为字符串，并根据语言环境的要求进行格式化。
• 可以通过可选的 locales 参数指定要使用的语言环境。如果未指定 locales 参数，则使用默认的语言环境。
• options 参数可以用于进一步指定格式化选项，如货币符号、小数位数等。
• 格式化结果可能因不同的语言环境而异。

总结

Array.prototype.toLocaleString() 方法是将数组中的元素以特定的语言和字符集进行格式化的实用工具。通过指定语言环境和可选的格式化选项，我们可以获得适合特定地区或国家的格式化字符串。这对于国际化的应用程序或需要根据语言环境进行格式化的场景非常有用。

33. Array.prototype.toReversed()

该方法是Array.prototype.reverse()方法的复制版本，它返回一个以相反顺序排列的新数组。

基本语法

array.toReversed()

使用场景

该方法用于将数组元素以相反的顺序进行排列，并返回一个新的数组。调用该方法不会改变原始数组。

1. 将数组中的唐诗倒序排列：toReversed()方法可以用于将数组中的唐诗以相反的顺序进行排列，从而实现倒序输出的效果。

const poems = [
  '白日依山尽',
  '黄河入海流',
  '欲穷千里目',
  '更上一层楼'
];

const reversedPoems = poems.toReversed();
console.log(reversedPoems);
// 输出：
// ['更上一层楼', '欲穷千里目', '黄河入海流', '白日依山尽']

注意事项

• toReversed()方法对于稀疏数组（包含空槽的数组）的处理方式是将空槽视为undefined。

总结

Array.prototype.toReversed()方法返回一个以相反顺序排列的新数组，可以用于实现数组倒序输出的效果。它是reverse()方法的复制版本，不会修改原始数组。在处理需要反转数组元素顺序的场景下非常有用。

34. Array.prototype.toSorted()

Array.prototype.toSorted() 方法是 sort() 方法的复制版本，用于对数组进行升序排序并返回一个新数组。

基本语法

array.toSorted()

使用场景

该方法用于对数组元素进行排序，以升序排列，并返回一个新的已排序数组。调用该方法不会改变原始数组。

1. 对数组进行升序排序：

const poems = [ '白日依山尽', '黄河入海流', '欲穷千里目', '更上一层楼' ]; 
const sortedPoems = poems.toSorted(); 
console.log(sortedPoems); 
// 输出：
// ['更上一层楼', '欲穷千里目', '黄河入海流', '白日依山尽'] 
console.log(poems); 
// 输出： 
// ['白日依山尽', '黄河入海流', '欲穷千里目', '更上一层楼']

注意事项

• 当在稀疏数组上使用 toSorted() 方法时，空槽会被视为 undefined 值，并且它们会被排序到数组的末尾。

总结

Array.prototype.toSorted() 方法可以对数组元素进行升序排序，并返回一个新的已排序数组。它是 sort() 方法的复制版本，不会修改原始数组。在需要对数组进行排序的场景下非常有用。

35. Array.prototype.toSpliced()

Array.prototype.toSpliced() 方法是 splice() 方法的复制版本，用于在数组中删除和/或替换元素，并返回一个新数组。

基本语法

array.toSpliced(start)
array.toSpliced(start, deleteCount)
array.toSpliced(start, deleteCount, item1)
array.toSpliced(start, deleteCount, item1, item2, itemN)

使用场景

该方法用于在数组中删除和/或替换元素，并返回一个新数组。调用该方法不会改变原始数组。

1. 删除、添加和替换元素：

const poems = ['白日依山尽', '黄河入海流', '欲穷千里目', '更上一层楼'];

// 在索引 1 处添加一个元素
const poems2 = poems.toSpliced(1, 0, '夜静春山远');
console.log(poems2);
// 输出：
// ['白日依山尽', '夜静春山远', '黄河入海流', '欲穷千里目', '更上一层楼']

// 从第 2 个索引开始删除两个元素
const poems3 = poems2.toSpliced(2, 2);
console.log(poems3);
// 输出：
// ['白日依山尽', '夜静春山远', '更上一层楼']

// 在索引 1 处用两个新元素替换一个元素
const poems4 = poems3.toSpliced(1, 1, '行人欲断魂', '楼台望月春');
console.log(poems4);
// 输出：
// ['白日依山尽', '行人欲断魂', '楼台望月春', '更上一层楼']

// 原数组不会被修改
console.log(poems);
// 输出：
// ['白日依山尽', '黄河入海流', '欲穷千里目', '更上一层楼']

注意事项

• toSpliced() 方法不会产生稀疏数组。如果原始数组是稀疏的，在新数组中空槽将会被替换成 undefined。

总结

Array.prototype.toSpliced() 方法用于在数组中删除和/或替换元素，并返回一个新数组。它是 splice() 方法的复制版本，不会修改原始数组。在需要对数组进行删除、添加和替换操作的场景下非常有用。

36. Array.prototype.toString()

Array.prototype.toString() 方法将数组转换为一个由数组元素字符串化后连接而成的字符串，并返回该字符串。

基本语法

array.toString()

使用场景

该方法用于将数组转换为字符串形式，并返回该字符串。数组中的每个元素会通过调用其 toString() 方法进行字符串化。数组元素之间会使用逗号 , 进行连接。

1. 将唐诗数组转换为字符串：

const poems = [
  '白日依山尽',
  '黄河入海流',
  '欲穷千里目',
  '更上一层楼'
];
const poemsString = poems.toString();
console.log(poemsString);
// 输出： "白日依山尽,黄河入海流,欲穷千里目,更上一层楼"

注意事项

• toString() 方法会将数组中的 null 和 undefined 值转换为空字符串。
• 如果数组中的元素是对象，则会调用每个对象的 toString() 方法进行转换。

总结

Array.prototype.toString() 方法将数组转换为一个由数组元素字符串化后连接而成的字符串，并返回该字符串。它会使用逗号 , 将数组元素连接起来。在需要将数组转换为字符串的场景下非常有用。

37. Array.prototype.unshift()

Array.prototype.unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

基本语法

array.unshift(element1, element2, ..., elementN)

使用场景

该方法用于将一个或多个元素添加到数组的开头，并返回新数组的长度。原数组中的所有元素将向后移动，为新添加的元素腾出空间。

1. 在唐诗数组开头添加新的诗句：

let poems = [
  '白日依山尽',
  '黄河入海流',
  '欲穷千里目',
  '更上一层楼'
];

const newPoem = '登鹳雀楼';
const newLength = poems.unshift(newPoem);

console.log(newLength);
// 输出：5
console.log(poems);
// 输出：
// [
//   '登鹳雀楼',
//   '白日依山尽',
//   '黄河入海流',
//   '欲穷千里目',
//   '更上一层楼'
// ]

2. 在唐诗数组开头添加多个新的诗句：

let poems = [
  '白日依山尽',
  '黄河入海流',
  '欲穷千里目',
  '更上一层楼'
];

const newPoems = ['登鹳雀楼', '静夜思'];
const newLength = poems.unshift(...newPoems);

console.log(newLength);
// 输出：6
console.log(poems);
// 输出：
// [
//   '登鹳雀楼',
//   '静夜思',
//   '白日依山尽',
//   '黄河入海流',
//   '欲穷千里目',
//   '更上一层楼'
// ]

注意事项

• unshift() 方法会直接修改原始数组，并返回新数组的长度。
• unshift() 方法会改变数组的长度，以及所有后续元素的索引。
• unshift() 方法可以一次添加一个或多个元素到数组的开头。
• unshift() 方法的参数是按顺序添加到数组开头的，参数列表中的第一个元素将成为数组的第一个元素。

总结

Array.prototype.unshift() 方法用于将一个或多个元素添加到数组的开头，并返回新数组的长度。它会直接修改原始数组，并改变数组的长度和元素索引。在需要向数组开头添加元素的场景下非常有用。

38. Array.prototype.values()

Array.prototype.values() 方法返回一个新的数组迭代器对象，该对象包含唐诗集合中的每首唐诗。

基本语法

array.values()

使用场景

该方法用于获取唐诗集合中每首唐诗，并返回一个新的数组迭代器对象。通过遍历迭代器对象，可以逐个访问唐诗集合中的唐诗。

const tangPoems = [
  "白日依山尽",
  "黄河入海流",
  "欲穷千里目",
  "更上一层楼"
];
const iterator = tangPoems.values();

console.log(iterator.next().value); // 输出：白日依山尽
console.log(iterator.next().value); // 输出：黄河入海流
console.log(iterator.next().value); // 输出：欲穷千里目
console.log(iterator.next().value); // 输出：更上一层楼
console.log(iterator.next().value); // 输出：undefined

注意事项

• Array.prototype.values() 方法返回一个新的数组迭代器对象，并不直接返回唐诗集合的值。
• 迭代器对象可以通过调用 next() 方法逐个获取唐诗集合中的唐诗，直到遍历完所有唐诗或到达唐诗集合的末尾。
• 当迭代器对象遍历到唐诗集合末尾后，调用 next() 方法将返回一个对象，其 value 属性为 undefined。
• 迭代器对象是一种可迭代对象，可以使用 for...of 循环或 Array.from() 方法将其转换为数组。

使用 for...of 循环遍历唐诗集合中的唐诗：

const tangPoems = [
  "白日依山尽",
  "黄河入海流",
  "欲穷千里目",
  "更上一层楼"
];

for (const poem of tangPoems.values()) {
  console.log(poem);
}
// 输出：
// 白日依山尽
// 黄河入海流
// 欲穷千里目
// 更上一层楼

使用 Array.from() 方法将迭代器对象转换为数组：

const tangPoems = [
  "白日依山尽",
  "黄河入海流",
  "欲穷千里目",
  "更上一层楼"
];
const iterator = tangPoems.values();
const poemArray = Array.from(iterator);

console.log(poemArray);
// 输出：["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼"]

总结

Array.prototype.values() 方法返回一个新的数组迭代器对象，用于遍历唐诗集合中的每首唐诗。

39. Array.prototype.with()

Array.prototype.with() 方法返回一个新的数组，其中包含指定元素添加到当前数组的结果。

基本语法

array.with(element1, element2, ..., elementN)

使用场景

该方法用于在当前数组的末尾添加指定的元素，并返回一个新的数组。新数组包含原始数组的所有元素以及添加的元素。

const tangPoems = [
  "白日依山尽",
  "黄河入海流",
  "欲穷千里目",
  "更上一层楼"
];

const newArray = tangPoems.with("静夜思", "床前明月光");

console.log(newArray);
// 输出：
// ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼", "静夜思", "床前明月光"]

注意事项

• Array.prototype.with() 方法返回一个新的数组，不会修改原始数组。
• 可以一次添加一个或多个元素到数组末尾。
• 添加的元素的顺序与在方法参数中的顺序相同。

总结

Array.prototype.with() 方法返回一个新的数组，其中包含指定元素添加到当前数组的结果。可以用于快速向数组末尾添加一个或多个元素，而不改变原始数组。

40. Array.from()

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

基本语法

Array.from(iterable, mapFn, thisArg)

使用场景

Array.from() 方法可用于将类似数组的对象（例如字符串、Set、Map等）或可迭代对象（例如数组、类数组对象等）转换为数组。

以下是使用 Array.from() 方法将唐诗、宋词和元曲转换为数组的示例：

1. 将唐诗转换为数组：

const tangPoems = new Set([
  "白日依山尽",
  "黄河入海流",
  "欲穷千里目",
  "更上一层楼"
]);

const tangPoemArray = Array.from(tangPoems);

console.log(tangPoemArray);
// 输出：
// ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一层楼"]

2. 将宋词转换为数组：

const songLyrics = new Map([
  [1, "青青子衿，悠悠我心。"],
  [2, "纵我不往，子宁不嗣音？"]
]);

const songLyricArray = Array.from(songLyrics.values());

console.log(songLyricArray);
// 输出：
// ["青青子衿，悠悠我心。", "纵我不往，子宁不嗣音？"]

3. 将元曲转换为数组：

function* generateYuanQu() {
  yield "秦淮河畔，月明人静。";
  yield "繁华落尽，唯余伤心。";
}

const yuanQuArray = Array.from(generateYuanQu());

console.log(yuanQuArray);
// 输出：
// ["秦淮河畔，月明人静。", "繁华落尽，唯余伤心。"]

以上示例将唐诗、宋词和元曲转换为了数组，方便进行进一步的操作和处理。

注意事项

• Array.from() 方法返回一个新的数组实例，不会修改原始对象。
• 可以提供第二个参数 mapFn，用于在转换过程中对元素进行映射操作。
• 可以提供第三个参数 thisArg，用于在映射函数中绑定 this 的值。

总结

Array.from() 方法可用于从类似数组或可迭代对象中创建一个新的数组实例，并提供了映射函数和绑定 this 的选项。

41. Array.isArray()

Array.isArray() 方法用于判断给定的值是否为数组。

基本语法

Array.isArray(value)

使用场景

该方法用于确定给定的值是否为数组。它返回一个布尔值，如果值是数组，则返回 true；否则返回 false。

const tangPoems = [
  "白日依山尽",
  "黄河入海流",
  "欲穷千里目",
  "更上一层楼"
];

const isTangPoemsArray = Array.isArray(tangPoems);
console.log(isTangPoemsArray); // 输出：true

const songLyrics = [
  "青青子衿，悠悠我心。",
  "但为君故，沉吟至今。",
  "呦呦鹿鸣，食野之蒿。",
  "我有嘉宾，鼓瑟吹笙。",
  "明明如月，何时可掇？",
  "忧从中来，不可断绝。",
  "越陌度阡，枉用相存。",
  "契阔谈䜩，心念旧恩。",
  "月明星稀，乌鹊南飞。",
  "绕树三匝，何枝可依？",
  "山不厌高，海不厌深。",
  "周公吐哺，天下归心。"
];

const isSongLyricsArray = Array.isArray(songLyrics);
console.log(isSongLyricsArray); // 输出：true

const yuanDrama = [
  "明月几时有？把酒问青天。",
  "不知天上宫阙，今夕是何年？",
  "我欲乘风归去，又恐琼楼玉宇，高处不胜寒。",
  "起舞弄清影，何似在人间！",
  "转朱阁，低绮户，照无眠。",
  "不应有恨，何事长向别时圆？",
  "人有悲欢离合，月有阴晴圆缺，此事古难全。",
  "但愿人长久，千里共婵娟。"
];

const isYuanDramaArray = Array.isArray(yuanDrama);
console.log(isYuanDramaArray); // 输出：true

以上代码分别创建了唐诗集合、宋词集合和元曲集合，并使用 Array.isArray() 方法判断它们是否为数组，最后将结果输出。根据约定的格式，输出了每个集合是否为数组的布尔值（true 表示是数组）。

注意事项

• Array.isArray() 是一个静态方法，直接通过 Array 对象调用，而不是通过数组实例调用。
• 该方法对于检测由其他窗口或框架创建的数组是不可靠的，因为不同的全局执行环境有不同的构造函数。
• 如果需要在数组的原型链上判断一个对象是否为数组，可以使用 Array.prototype.isPrototypeOf() 方法。

总结

Array.isArray() 方法是用于判断给定的值是否为数组的实用工具函数。通过检查值的类型，它返回一个布尔值来指示是否为数组。

42. 什么是稀疏数组

稀疏数组是指数组中包含有空槽（empty slot）的数组。空槽指的是在数组中没有被赋值的位置，也就是说在数组中存在间隔的索引值，对应的元素值为undefined。

例如，下面是一个稀疏数组的示例：

const sparseArray = [“白日依山尽”, , , ”更上一层楼“];

在上面的示例中，索引为1和2的位置是空槽，没有被赋予任何值。这样的数组在内部表示中会占用更少的内存空间，因为它只存储有值的元素和对应的索引关系。

需要注意的是，稀疏数组的长度（length）属性仍然会考虑空槽的存在，即它会计算空槽的数量在内。在进行遍历或使用一些数组方法时，空槽会被视为undefined值。

以下是一些处理稀疏数组的注意事项：

1. 遍历稀疏数组时，空槽会被跳过：

const sparseArray = [“白日依山尽”, , , “更上一层楼“];

sparseArray.forEach(element => {
  console.log(element);
});

2. 空槽在数组方法中被当作undefined值处理：

const sparseArray = [“白日依山尽”, , , ”更上一层楼“];

console.log(sparseArray.length); 
console.log(sparseArray[1]); 
console.log(sparseArray.includes(undefined)); // 输出：true

3. 在稀疏数组上使用一些数组方法可能会导致不一致的结果，因为空槽不会被传递给回调函数或参与计算。因此，在处理稀疏数组时需要注意这些行为差异。

需要注意的是，大多数情况下，稀疏数组并不常见，通常更多地使用密集数组（dense array），其中所有的索引位置都有被赋值的元素。

总结

读完这篇文章，相信我们对 JavaScript 数组的常用方法和特性有了更清楚的了解。无论是添加、删除、切片、拼接，还是遍历和验证，数组提供了丰富的功能和灵活性，使我们能够更好地处理和操作数据。希望本文对您有所启发，并能在实际开发和创作中发挥作用！