一.数组基本用法

在JavaScript中，处理数组是一项非常常见的任务。JavaScript提供了多种内置函数和方法来方便地操作数组，比如添加、删除、查找、迭代、转换等。以下是一些常用的数组处理函数：

1. 添加元素

• push()：在数组的末尾添加一个或多个元素，并返回新的长度。

  let arr = [1, 2, 3];
  arr.push(4); // arr现在是[1, 2, 3, 4]

• unshift()：在数组的开头添加一个或多个元素，并返回新的长度。

  arr.unshift(0); // arr现在是[0, 1, 2, 3, 4]

2. 删除元素

• pop()：删除数组的最后一个元素，并返回该元素的值。

  arr.pop(); // arr现在是[0, 1, 2, 3]，返回值为4

• shift()：删除数组的第一个元素，并返回该元素的值。

  arr.shift(); // arr现在是[1, 2, 3]，返回值为0

• splice()：通过删除现有元素和/或添加新元素来修改数组，返回被删除的元素组成的数组。

  arr.splice(1, 2); // 从索引1开始删除2个元素，arr现在是[1, 3]
  arr.splice(0); // 从索引0开始删除所有元素，arr现在是[]

3. 查找元素

• indexOf()：返回数组中可以找到给定元素的第一个索引，否则返回-1。

  let index = arr.indexOf(3); // 返回2，因为3在索引2的位置

• includes()：判断数组是否包含一个特定的值，返回布尔值。

  let hasValue = arr.includes(3); // 返回true

• find()：返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

  let found = arr.find(element => element > 2); // 返回3，因为它是第一个大于2的元素
  let found = arr.find(element => {
    return element > 2; // 根据返回的布尔值查找元素,返回true时,表示选择了此选项 
  });

4. 迭代数组

• forEach()：对数组的每个元素执行一次提供的函数。

  arr.forEach(element => console.log(element)); // 输出数组中的每个元素

• map()：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

  let newArr = arr.map(element => element * 2); // [2, 6]
  let newArr = arr.map(element => {
    return element * 2;
  }); // [2, 3, 4],通过返回的值创建新数组

• filter()：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

  let filteredArr = arr.filter(element => element > 2); // [3]
  let filteredArr = arr.filter(element =>{
    return element > 2; //通过 返回的布尔值过滤数组
  });

5. 转换和连接数组

• join()：将数组中的所有元素连接成一个字符串。

  let str = arr.join(', '); // "1, 2, 3"

• concat()：用于合并两个或多个数组。此方法不会改变现有数组，而是返回一个新数组。

  let newArr = arr.concat([4, 5]); // [1, 2, 3, 4, 5]

这些是处理JavaScript数组的一些基本方法。根据你的具体需求，可能还会用到更多高级方法，如reduce()、sort()等。这些方法提供了极大的灵活性来处理和转换数据。

二.数组常用高阶方法

这些都是数组的核心遍历/处理方法，是前端开发必掌握的知识点，我用通俗解释 + 代码示例 + 适用场景给你讲清楚，一看就会。

方法	作用	返回值	是否改变原数组
sort()	数组排序	排序后的新数组	是
map()	映射/加工数组每一项	新数组（长度不变）	否
filter()	过滤数组（筛选符合条件项）	新数组（长度≤原数组）	否
find()	查找第一个符合条件项	找到的项 / undefined	否
findIndex()	查找第一个符合项的索引	索引 / -1	否
every()	判断所有项是否满足条件	true / false	否
some()	判断至少一项满足条件	true / false	否
reduce()	数组累计/聚合计算	最终累计结果	否

---

1. sort()：数组排序

作用：对数组元素进行排序（默认按字符串 Unicode 排序，数字需要手动处理）。 特点：会改变原数组，返回排序后的数组。

语法

arr.sort((a, b) => a - b) // 升序
arr.sort((a, b) => b - a) // 降序

示例

const arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b); 
console.log(arr); // [1,2,3,4] 原数组被改变

场景：数字排序、对象按某个属性排序（如价格、年龄）。

---

2. map()：映射/加工数组

作用：遍历数组每一项，做加工处理，返回一个长度和原数组一致的新数组。 特点：不改变原数组，必须有 return（返回处理后的值）。

示例

const arr = [1, 2, 3];
// 给每个数字 ×2
const newArr = arr.map(item => item * 2); 
console.log(newArr); // [2,4,6]
console.log(arr); // [1,2,3] 原数组不变

场景：列表渲染加工数据、字段转换、批量修改数组元素。

---

3. filter()：过滤数组

作用：筛选出所有满足条件的元素，返回新数组（长度 ≤ 原数组）。 特点：return 条件为 true 的项会被保留。

示例

const arr = [1, 2, 3, 4, 5];
// 筛选出大于2的数字
const newArr = arr.filter(item => item > 2); 
console.log(newArr); // [3,4,5]

场景：搜索筛选、删除不符合条件的项、数组去重。

---

4. find()：查找第一个匹配项

作用：找到第一个满足条件的元素，找到就立刻返回，不再继续遍历。 特点：返回元素本身，没找到返回 undefined。

示例

const arr = [1, 2, 3, 4];
const res = arr.find(item => item > 2); 
console.log(res); // 3（只返回第一个）

场景：根据 id 查找对象、查找唯一符合条件的项。

---

5. findIndex()：查找第一个匹配项的索引

作用：找到第一个满足条件元素的索引。 特点：返回索引，没找到返回 -1。

示例

const arr = [1, 2, 3, 4];
const index = arr.findIndex(item => item > 2); 
console.log(index); // 2

场景：需要知道元素位置、根据索引删除元素。

---

6. every()：所有项都满足？

作用：判断数组中每一项是否都满足条件，一假即假。 返回：true / false。

示例

const arr = [2,4,6];
const res = arr.every(item => item % 2 === 0); 
console.log(res); // true（全是偶数）

场景：表单全量校验（所有字段都必填）、权限全量判断。

---

7. some()：至少一项满足？

作用：判断数组中是否至少有一项满足条件，一真即真。 返回：true / false。

示例

const arr = [1,3,4];
const res = arr.some(item => item % 2 === 0); 
console.log(res); // true（有偶数4）

场景：判断数组是否包含某类元素、表单至少一项填写。

---

8. reduce()：累计/聚合计算（最强）

作用：数组累加、求和、求平均值、去重、对象统计等所有聚合操作都能用它实现。 语法：

arr.reduce((累计值, 当前项) => 新累计值, 初始值)

示例 1：求和

const arr = [1,2,3];
const sum = arr.reduce((total, item) => total + item, 0); 
console.log(sum); // 6

示例 2：统计元素出现次数

const arr = ['a','b','a','c'];
const count = arr.reduce((obj, item) => {
  obj[item] = (obj[item] || 0) + 1;
  return obj;
}, {});
console.log(count); // {a:2, b:1, c:1}

场景：求和、求最大值、数组去重、对象统计、扁平化数组。

---

总结

1. 加工数组用 map()，筛选用 filter()
2. 找单个元素用 find()/findIndex()
3. 全满足用 every()，有一个满足用 some()
4. 排序用 sort()（注意改原数组）
5. 聚合计算、求和、统计全能用 reduce()

这些方法配合箭头函数，能让代码极度简洁优雅，是 ES6 数组操作的核心！