组是编程中很重要的数据结构。它允许我们以有序的方式存储和访问多个值（元素），从而实现更方便和高效的数据存储和读取操作。因而数组操作方法在任何语言中都尤为重要。这里总结 JavaScript 中数组的一些常用操作方法。

JavaScript 在 ES5 或者更早的版本中数组的方法相对较少，ES6后逐渐完善，操作方法可选的增多。

ES5 及以下版本

1. concat(): 将两个或多个数组合并成一个新数组。
2. join(): 将数组中所有元素组合成一个字符串。
3. indexOf(): 返回数组中指定元素的第一个索引（如果存在），如果不存在，则返回-1。
4. lastIndexOf(): 返回数组中指定元素的最后一个索引（如果存在），如果不存在，则返回-1。
5. push(): 将一个元素添加到数组末尾。
6. pop(): 删除数组中的最后一个元素。
7. shift(): 删除数组中的第一个元素。
8. unshift(): 将一个元素添加到数组的开头。
9. slice(): 返回一个包含数组中指定部分的新数组。
10. splice(): 用新元素替换数组中的元素或者移除元素。
11. reverse(): 反转数组中的元素的顺序。
12. sort(): 对数组进行排序。
13. filter(): 返回一个新数组，包含执行指定函数后返回值为 true 的元素。
14. map(): 返回一个新数组，包含对原数组中每个元素执行指定函数后的返回值。
15. forEach(): 对数组中的每个元素执行指定函数，没有返回值。
16. reduce(): 通过指定函数，从左到右依次执行并将数组简化为单一的值.
17. every() - 判断是否所有元素都符合指定的条件
18. some() - 判断是否至少有一个元素符合指定的条件

这里列举都是非常常见，使用频率较高的数组操作方法，它们可以方便地实现数组的增删改查、排序、过滤、遍历、映射等操作，非常有用。

ES6 后增加方法

ES6 中新增了一系列的数组操作方法，下面列举其中一些比较常用的：

1. Array.from(): 可以将一个类数组对象或者可迭代对象转换成真正的数组。
2. Array.of(): 用于创建一个包含任意数量元素的数组，不管元素的类型和数量。
3. Array.prototype.copyWithin(): 在数组内部，将一段元素序列拷贝到另一段位置，覆盖原有的值。
4. Array.prototype.fill(): 用一个固定值填充数组中从起始索引到终止索引内的全部元素。
5. Array.prototype.find(): 返回数组中满足提供的测试函数的第一个元素的值。如果没有满足条件的元素，则返回 undefined。
6. Array.prototype.findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引。如果没有满足条件的元素，则返回 -1。
7. Array.prototype.includes(): 判断数组中是否包含某个元素，返回一个 Boolean 值。
8. Array.prototype.flat(): 将嵌套的数组“扁平化”，变为一维数组。
9. Array.prototype.flatMap(): 类似于 map + flat，可以对数组中的每个元素执行一个回调函数，并将回调函数返回的结果转换成一维数组。
10. Array.prototype.entries(): 返回一个包含数组中每个索引（以及相应的元素）的迭代器对象。
11. Array.prototype.keys(): 返回一个包含数组中每个索引的迭代器对象。
12. Array.prototype.values(): 返回一个包含数组中每个值的迭代器对象。

用法和概念辨析

includes、some、every区别

这三个方法都是用来判断数组是否符合指定条件的方法，它们的不同在于返回的结果和判断条件的方式。

Include 方法用来判断数组中是否包含指定元素，如果包含则返回 true，否则返回 false。它的使用方式如下：

const arr=[1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

some 方法用来判断数组中是否至少有一个元素符合指定的条件，如果符合则返回 true，否则返回 false。它的使用方式如下：

const arr=[1, 2, 3, 4, 5];
const result=arr.some(item=> item > 3);
console.log(result); // true

every 方法用来判断数组中是否所有的元素都符合指定的条件，如果都符合则返回 true，否则返回 false。它的使用方式如下：

const arr=[1, 2, 3, 4, 5];
const result=arr.every(item=> item > 0);
console.log(result); // true

再来一个例子：

注意：some() 和 every() 方法的参数是一个判断条件的函数，该函数会被传入每个数组元素，返回值为布尔值。some() 和 every() 的区别在于判断条件的方式，some() 符合任意一个就返回 true，every() 必须符合每一个才返回 true。

find 和 filter

Array.prototype.find() 和 Array.prototype.filter() 它们都是基于一个返回值为布尔类型的回调函数来进行处理。

• find(callback [, thisArg]): 返回数组中满足指定条件的第一个元素，如果没有找到，则返回 undefined。该方法通过调用指定的回调函数对数组中的每个元素进行测试，回调函数会接收三个参数：当前元素的值、当前元素的索引和数组本身，回调函数中可以定义任何需要满足的条件来判断是否需要返回当前元素。
• filter(callback [, thisArg]): 返回一个新的数组，其中包含原始数组中通过指定回调函数测试的所有元素。该方法通过调用指定的回调函数对数组中的每个元素进行测试，回调函数会接收三个参数：当前元素的值、当前元素的索引和数组本身，回调函数中可以定义任何需要满足的条件来过滤元素。

find() 和 filter() 方法的区别在于，find() 方法返回数组中满足条件的第一个元素及其相关信息，而 filter() 方法返回数组中所有满足条件的元素的集合。例如：

const arr=[1, 2, 3, 4, 5];
const found=arr.find(item=> item > 2); //返回 3
const filtered=arr.filter(item=> item > 2); //返回 [3, 4, 5]

在上述例子中，find() 方法返回第一个满足条件 item > 2 的元素 3，而 filter() 方法返回值为一个数组，其中包含所有满足条件 item > 2 的元素，即 [3, 4, 5]。

这两个方法都非常实用，在实际开发中应用广泛，可以通过一个简单的回调函数处理数组并对其进行搜索、过滤和选择等操作。

map

map 用于对数组中的每个元素执行指定的操作并返回一个新数组。map() 方法接受一个函数作为参数，该函数会被传入数组中的每个元素作为第一个参数，当前元素在数组中的索引作为第二个参数（可选），它返回的值会成为新数组中对应位置的值。

下面是一个简单的使用 map() 方法的例子，它将数组中的每个元素都乘以 2：

const arr=[1, 2, 3, 4];
const result=arr.map(item=> item * 2);
console.log(result); // [2, 4, 6, 8]

在这个例子中，我们将数组 [1, 2, 3, 4] 作为 map() 的方法调用者，传入一个箭头函数作为参数，箭头函数的作用是将数组中的每个元素都乘以 2。然后， map() 方法会返回一个新数组 [2, 4, 6, 8]。

map() 方法常用于从一组数据中选择需要的字段或将一组数据转换为另一种数据结构。

来一个例子：

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

const objArr=numArr.map(num=> {
  return {
    value: num,
    isEven: num % 2===0
  };
});

console.log(objArr);

在这个例子中，我们将包含一些数字的数组 numArr 作为 map() 方法调用者，传入一个返回对象的箭头函数。通过使用 map() 方法和箭头函数，我们将数字数组转换为对象数组，并且添加了一个 isEven 属性，该属性用于判断数字是否为偶数。最终输出的结果如下：

在这个例子中，我们将数字数组转换为对象数组，我们可以使用 map() 和箭头函数对任何数据进行转换，例如字符串数组、日期对象等，只需要根据实际情况编写对应的转换逻辑，很好用。请记住这个方法。

entries 、keys 、values

这三个方法都可以用于遍历数组，它们返回的都是迭代器对象。通过结合使用这三种方法，我们可以很方便地遍历获取数组的键和值，以及相应的索引。

下面是一个使用 entries(), keys() 和 values() 遍历打印数组的例子：

const arr=["apple", "banana", "cherry"];
const entries=arr.entries();
const keys=arr.keys();
const values=arr.values();

console.log('entries方法');
for (const [index, value] of entries) {
  console.log(`[${index}]: ${value}`);
}

 console.log('keys方法');
for (const index of keys) {
 
  console.log(`Index: ${index}`);
}

  console.log('values方法');
for (const value of values) {
  console.log(`Value: ${value}`);
}

在这个例子中，我们使用 entries(), keys() 和 values() 方法获取数组的迭代器对象，并分别使用 for...of 循环遍历每个键值对或键或值，并将索引和值打印出来。最终输出如下：

通过结合使用 entries(), keys() 和 values()，我们可以很方便地遍历获取数组的索引、键和值，并进行相应的操作。在实际开发中，我们可以根据具体的需求，选择合适的方法和操作方案。

form 和 of

这两个都是 ECMAScript 6 新增的数组方法。

• Array.from(arrayLike [, mapFn [, thisArg]]): 该方法通过构建一个新数组来从类似数组或可迭代对象中创建数组。第一个参数接收一个类数组对象或可迭代对象，用来生成新的数组。可选参数mapFn表示对每个数组元素进行的映射操作的回调函数，thisArg用于指定回调函数中 this 关键字的取值。如果没有指定第二个参数，则以原样复制每个元素。
• Array.of(element0[, element1[, ...[, elementN]]]): 该方法通过将传入的参数创建并返回一个新的数组。传入的参数将成为新数组的元素，参数个数可以任意。如果没有参数，则返回一个空数组。

示例如下：

// Array.from() 例子
const str="Hello world";
const chars=Array.from(str);
// chars=['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

const nums=Array.from([1, 2, 3], num=> num * 2);
// nums=[2, 4, 6]

// Array.of() 例子
const arr1=Array.of();        // []
const arr2=Array.of(1, 2, 3); // [1, 2, 3]
const arr3=Array.of("a", 2);  // ['a', 2]

在上面的例子中，我们使用 Array.from() 将字符串中的单个字符存储到一个新数组中，同时以不同的方式使用了映射函数。此外，我们使用 Array.of() 创建了三个新数组，并分别使用了零个、三个和两个参数。

运行效果如下：

总结

JavaScript 数组还支持其他一些操作方法，这里仅仅分享日常应该比较多的。

绍

JavaScript 数组是基本数据结构，在 Web 开发中发挥着关键作用。它们允许开发人员有效地组织、操作和存储数据。在本综合指南中，我们将深入探讨 JavaScript 数组，从基本概念到高级技术。无论您是初学者还是经验丰富的开发人员，本文都将为您提供有关在 JavaScript 中使用数组的宝贵见解。

目录

1. 什么是数组？数组基础知识什么是数组？声明数组访问数组元素常见的数组操作添加元素删除元素修改元素数组属性和方法lengthpush()和pop()shift()和unshift()
2. 使用多维数组什么是多维数组？创建多维数组访问多维数组中的元素操作多维数组
3. 迭代数组循环for_方法forEach()_使用map()、filter()、 和reduce()
4. 数组解构解构简介解构数组
5. 展开和休息运算符价差运算符剩余参数
6. ES6 数组特性find()和findIndex()some()和every()includes()
7. 数组排序和搜索数组排序使用sort()自定义排序compare功能搜索数组indexOf(), lastIndexOf(), 和includes()
8. 经常问的问题数组和对象有什么区别？如何检查数组中是否存在某个元素？map()使用、filter()、 和的优点是什么reduce()？JavaScript 中可以有不同数据类型的数组吗？从数组中删除重复项的最佳方法是什么？
9. 高级数组操作使用集合使用该reduce()方法进行复杂操作数组操作splice()
10. 数组计算对数组元素求和寻找平均值寻找最大值和最小值寻找独特的元素

1.什么是数组？

数组基础知识

什么是数组？

数组是一种存储元素集合的数据结构，每个元素都由索引或键标识。在 JavaScript 中，数组可以保存多种数据类型，使其适用于各种用例。

声明数组

您可以使用方括号在 JavaScript 中声明数组[]并用元素填充它。例如：

let fruits=['apple', 'banana', 'cherry'];

访问数组元素

可以使用从 0 开始的索引来访问数组元素。例如：

console.log(fruits[0]); // Output: 'apple'

常见的数组操作

添加元素

要将元素添加到数组中，可以使用以下push()方法：

fruits.push('orange'); // Adds 'orange' to the end of the array

删除元素

您可以使用以下方法从数组末尾删除元素pop()：

fruits.pop(); // Removes 'orange' from the end

修改元素

要修改数组元素，只需为其分配一个新值：

fruits[1]='grape'; // Changes 'banana' to 'grape'

数组属性和方法

length

该length属性返回数组中的元素数量：

console.log(fruits.length); // Output: 3

push()和pop()

我们已经了解了如何操作push()以及如何pop()工作。它们通常用于管理数组的末尾。

shift()和unshift()

要从数组开头添加或删除元素，可以使用shift()and unshift()：

fruits.shift(); // Removes 'apple' from the beginning
fruits.unshift('kiwi'); // Adds 'kiwi' to the beginning

2. 使用多维数组

什么是多维数组？

多维数组是数组的数组，创建类似网格的结构。您可以将其视为具有行和列的表格。创建方法如下：

let matrix=[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

访问多维数组中的元素涉及使用嵌套索引：

console.log(matrix[0][1]); // Output: 2

操作多维数组对于处理数学矩阵或处理复杂数据结构等任务至关重要。

3. 遍历数组

循环for_

迭代数组的一种经典方法是使用循环for：

for (let i=0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

方法forEach()_

该forEach()方法提供了一种更优雅的方式来迭代数组：

fruits.forEach(function(fruit) {
  console.log(fruit);
});

使用map()、filter()、 和reduce()

这些高阶函数为转换和处理数组提供了强大的工具：

• map()：对每个元素应用一个函数并返回一个新数组。
• filter()：创建一个新数组，其中包含满足指定条件的元素。
• reduce()：基于reducer函数将数组缩减为单个值。

4. 数组解构

解构简介

解构允许您轻松地从数组和对象中提取值。以下是解构数组的方法：

let [first, second]=fruits;
console.log(first); // Output: 'apple'
console.log(second); // Output: 'banana'

当使用返回数组的函数时，解构特别有用。

5. 展开和休息运算符

价差运算符

展开运算符 ( ...) 用于将数组拆分为单独的元素。它对于复制数组或组合它们很方便：

let moreFruits=['kiwi', 'mango'];
let allFruits=[...fruits, ...moreFruits];

剩余参数

函数参数中的剩余参数 ( ...) 允许您将多个参数收集到一个数组中：

function sum(...numbers) {
  return numbers.reduce((total, num)=> total + num, 0);
}

console

.log(sum(1, 2, 3)); // Output: 6

6. ES6 数组特性

find()和findIndex()

该find()方法返回满足给定条件的第一个元素，同时findIndex()返回该元素的索引。

let scores=[85, 90, 78, 92, 88];
let highScore=scores.find(score=> score > 90);
console.log(highScore); // Output: 92

some()和every()

some()检查至少一个元素是否满足条件，同时every()检查所有元素是否满足条件。

let ages=[25, 30, 16, 42, 19];
let canVote=ages.every(age=> age >=18);
console.log(canVote); // Output: false

includes()

该includes()方法检查数组是否包含特定元素，返回trueor false：

let pets=['dog', 'cat', 'rabbit'];
console.log(pets.includes('cat')); // Output: true

7. 数组排序和搜索

数组排序

使用sort()

该sort()方法按字母或数字顺序排列数组元素：

let fruits=['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'cherry']

自定义排序compare功能

对于自定义排序，您可以将比较函数传递给sort()：

let numbers=[10, 3, 5, 8, 1];
numbers.sort((a, b)=> a - b);
console.log(numbers); // Output: [1, 3, 5, 8, 10]

搜索数组

indexOf(),lastIndexOf(), 和includes()

这些方法可帮助您查找数组中的元素：

• indexOf()：返回第一次出现的索引。
• lastIndexOf()：返回最后一次出现的索引。
• includes()：检查元素是否存在。

8. 常见问题

数组和对象有什么区别？

数组是通过数字索引访问的值的有序集合，而对象是通过键（字符串）访问的键值对的集合。数组最适合项目列表，而对象适合对现实世界的实体进行建模。

如何检查数组中是否存在某个元素？

您可以使用该includes()方法来检查数组中是否存在某个元素。例如：

let fruits=['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // Output: true

map()使用、filter()、 和的优点是什么reduce()？

• map()：通过对每个元素应用函数来创建新数组，这对于转换数据很有用。
• filter()：返回一个新数组，其中的元素满足指定条件，非常适合选择数据。
• reduce()：通过应用reducer函数将数组缩减为单个值，有助于聚合数据。

JavaScript 中可以有不同数据类型的数组吗？

是的，JavaScript 允许数组包含不同数据类型的元素。这种灵活性是 JavaScript 数组的优势之一。

从数组中删除重复项的最佳方法是什么？

您可以通过将数组转换为 Set 然后再转换回数组来从数组中删除重复项：

let uniqueArray=[...new Set(arrayWithDuplicates)];

9. 高级数组操作

使用集合

JavaScript Sets 提供了一种处理数组中唯一值的便捷方法。您可以将数组转换为 Set 以自动删除重复项：

let uniqueFruits=new Set(fruits);

使用该reduce()方法进行复杂操作

该reduce()方法对于在数组上执行复杂的操作非常强大。例如，您可以使用它来计算数组中值的总和：

let numbers=[1, 2, 3, 4, 5];
let total=numbers.reduce((accumulator, currentValue)=> accumulator + currentValue, 0);
console.log(total); // Output: 15

数组操作splice()

该splice()方法允许您添加、删除或替换数组中特定位置的元素：

let colors=['red', 'green', 'blue'];
colors.splice(1, 0, 'yellow'); // Inserts 'yellow' at index 1

10. 数组计算

对数组元素求和

您可以使用该方法计算数组中所有元素的总和reduce()，如前面所示。

寻找平均值

要求数字数组的平均值，请将总和除以元素数：

let numbers=[10, 20, 30, 40, 50];
let sum=numbers.reduce((acc, num)=> acc + num, 0);
let average=sum / numbers.length;

寻找最大值和最小值

和函数对于查找数字数组中Math.max()的Math.min()最大值和最小值非常有用：

let numbers=[10, 20, 5, 30, 15];
let max=Math.max(...numbers); // Maximum value
let min=Math.min(...numbers); // Minimum value

寻找独特的元素

要查找数组中的唯一元素，可以使用 Set 数据结构，如前所述。

结论

JavaScript 数组是 Web 开发人员不可或缺的多功能工具。它们使您能够高效地处理数据集合、执行复杂的操作以及创建交互式 Web 应用程序。通过掌握本指南中讨论的概念和技术，您将能够充分利用 JavaScript 数组在项目中的全部潜力。快乐编码！

avaScript 数组中的最小值和最大值

在 JavaScript 中使用数值数组时，我们可能会发现自己需要找到最小值或最大值。幸运的是，JavaScript 的内置 Math 对象已经涵盖了相应方法。我们可以简单地使用 Math.min()或Math.max() 将其与扩展运算符(...) 结合使用，因为这两个函数都接受任意数量的参数。

JavaScript

const nums=[2, 4, 6, 8, 1, 3, 5, 7];
Math.max(...nums); // 8
Math.min(...nums); // 1

对于更复杂的情况，例如在对象数组中查找最小值/最大值，您可能不得不求助于 Array.prototype.map() 或 Array.prototype.reduce()。另一方面，我们后续的 minBy 或 maxBy 文章也会介绍到。