JavaScript最全数组方法合集，JS map、forEach、iterator、finlter、some方法使用详解

---

一、splice() —— 裁剪

splice() 常用于对数组进行裁剪，可以接收三个参数。

• 参数一：从数组的第几项开始裁剪
• 参数二：裁剪掉多少项
• 参数三(不必传)：追加什么数据

1.1 常规裁剪数组

let arr = [1,2,3,4,5]
let arr1 = arr.splice(0,2)
console.log(arr)   // 输出结果：[3, 4, 5]
console.log(arr1)  // 输出结果：[1, 2]

1.2 裁剪后并追加数据

let arr = [1,2,3,4,5]
let arr1 = arr.splice(1,1,10,20,30)
console.log(arr)   // 输出结果：[1, 10, 20, 30, 3, 4, 5]
console.log(arr1)  // 输出结果：[2]

---

二、sort() —— 排序

sort() 常用于对数组进行排序，既能对简单数组进行排序，也能根据对象中的某个值，对 对象进行排序

• X - Y：从小到大排序
• Y - X：从大到小排序

2.1 从到小到大(X - Y)

 let arr = new Array(6,5,2,8,19,35,5)
 arr.sort((x,y)=>x-y)   // 从小到大排列
 console.log(arr)       // 输出结果：[2, 5, 5, 6, 8, 19, 35]

2.2 从到大到小(Y - X)

 let arr = new Array(6,5,2,8,19,35,5)
 arr.sort((x,y)=>y-x)   // 从小到大排列
 console.log(arr)       // 输出结果：[35, 19, 8, 6, 5, 5, 2]

2.3 根据对象中的某个值，将对象进行排序

let arr = [
  {name: "张三",age: 25,},
  {name: "李四",age: 23,},
  {name: "王五",age: 30,},
];
// 根据 age ,从小到大排序
arr.sort((x, y) => x.age - y.age);
console.log(arr);
// 输出结果如下：
// [
//  {name: "李四",age: 23,},
//  {name: "张三",age: 25,},
//  {name: "王五",age: 30,},
// ]

---

三、concat() —— 连接

concat() 可将两个数组进行连接

let arr1 =new Array(1,2,3)
let arr2 =new Array(5,6,7)
// 将 arr1 与 arr2进行连接
let arr3= arr1.concat(arr2)
console.log(arr3);     // 输出结果；[1, 2, 3, 5, 6, 7]

// 将 arr1、arr2、10,11,12 进行连接
let arr4= arr1.concat(arr2,10,11,12)
console.log(arr4);    // 输出结果；[1, 2, 3, 5, 6, 7, 10, 11, 12]

---

四、every() —— 所有值均满足条件

every() 可对数组进行遍历，返回值是一个布尔值

• 当数组 所有项均满足条件时 ，才返回 true
• 反之，返回 false

4.1 有值不满足条件

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 10);
 console.log(result)  // 输出结果：false。显然并非每一项都大于10

4.2 均满足条件

let arr = new Array(10, 11, 12, 13, 14, 15);
let result = arr.every((item) => item < 20);
console.log(result)  // 输出结果：true。显然数组中的每一项都小于20

---

五、some() —— 至少一项满足条件

some() 可对数组进行遍历，返回值是一个布尔值。注意与 every() 方法区分

• 数组中 至少一项满足条件时 ，就返回 true
• 反之，返回 false

5.1 所有值均不满足条件

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 20);
 console.log(result)  // 输出结果：false。显然数组中不存在任何一项大于20

5.2 有至少一项满足条件

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 14);
 console.log(result)  // 输出结果：true。显然数组中存在一项大于14

---

六、filter() —— 过滤数组

filter() 用于把数组的某些元素过滤掉，然后返回剩下的元素

6.1 过滤偶数

 let arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
 let arr2 = arr.filter((item) => {
   return item % 2 != 0;
 });
 console.log(arr2)   // 输出结果：[1, 3, 5, 7, 9]

6.2 过滤数组中的对象

let arr = [
   { name: "张三", age: 15 },
   { name: "李四", age: 25 },
   { name: "王五", age: 30 },
   { name: "陈皮", age: 40 },
 ];
 let arr2 = arr.filter((item) => {
   // 可自行设置过滤条件
   return item.age > 25;
 });
 console.log(arr2);  // 输出结果：[{ name: "王五", age: 30 },{ name: "陈皮", age: 40 }]

---

七、map() —— 返回新数组

返回一个新数组，数组中的元素为原始数组调用函数处理后的值

let arr = new Array(10, 11, 12, 13, 14, 15);
let arr2 = arr.map((item) => item + "你好"); // 返回新数组，进行数据拼接
console.log(arr2)   // 输出结果：["10你好","11你好","12你好","13你好","14你好","15你好"]

---

八、forEach() —— 循环遍历

个人最常用的循环遍历方法，非常的快捷好用

8.1 简写

let arr = [
  {name:'张三',age:15},
  {name:'李四',age:23},
  {name:'王五',age:32},
  {name:'陈皮',age:27},
]
// 只用到item,不用index时，可以省略括号
arr.forEach(item=>{
  // 拿到数组中的每一项，即可写入对应的逻辑代码
  console.log(item)
})

8.2 index

let arr = [
  {name:'张三',age:15},
  {name:'李四',age:23},
  {name:'王五',age:32},
  {name:'陈皮',age:27},
]
arr.forEach((item,index)=>{
  // 可以拿到数组中的每一项，以及对应性的 index 
  console.log(item,index)
})

---

九、reduce() 方法介绍

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。

9.1 数组累加

let arr = [1, 2, 3, 4, 5];
// 下一次循环时，item1 + item2 的值会赋值给 item1
let arr2 = arr.reduce((item1, item2) => item1 + item2);
console.log(arr2);  // 输出结果：15

9.2 数组累计相乘

let arr = [1, 2, 3, 4, 5];
// 下一次循环时，item1 * item2 的值会赋值给 item1
let arr2 = arr.reduce((item1, item2) => item1 * item2);
console.log(arr2);  // 输出结果：120

9.3 数组去重

let arr = [1, 3, 5, 7, 9, 1, 3, 5];
let arr1 = arr.reduce((total, current, index) => {
  // 判断total中是否包含current
  if (!total.includes(current)) {
    return total.concat(current);
  } else {
    return total;
  }
}, []);
console.log(arr1);   // 输出结果：[1,3,5,7,9]

9.4 将二维数组转换为一维数组

let arr = [[1,2],[3,4],[5,6]]
let arr1 = arr.reduce((total,current)=>{   // 方法二
  return total.concat(current)
},[])
console.log(arr1)  // 输出结果：[1,2,3,4,5,6]

插曲，此处还有更简单的方法可以将二维数组转为以为数组

let arr = [[1,2],[3,4],[5,6]]
// 只需一行代码，即可将二维数组，转为一维数组
let arr1 = arr.flat(Infinity)
console.log(arr1)  // 输出结果：[1,2,3,4,5,6]

9.5 统计元素出现次数

let arr = ["王", "李", "王", "张", "张", "张"];
let num = arr.reduce((total, current) => {
  //  current in total current 是否在total中
  if (current in total) {
    total[current]++;
  } else {
    total[current] = 1;
  }
  return total;
},{});
console.log(num);  // 输出结果：{王: 2, 李: 1, 张: 3}

---

十、iterator迭代器对象

迭代器对象有多个，可通过不同的迭代器对象获取到不同的值

• arr.keys() 获取数组里的每一个的键
• arr.values() 获取数组里的每一个的值
• arr.entries() 获取数组里的每一个键值对

10.1 简易for循环

let arr = [10, 11, 12, 13, 14];
for(let item of arr){
  console.log(item)  // 输出结果： 10, 11, 12, 13, 14
}

10.2 迭代器对象拿到数组的键值对

let arr = [10, 11, 12, 13, 14];
for(let item of arr.entries(){
  console.log(item)
}

输出结果：

10.3 迭代器对象仅获取键

let arr = [10, 11, 12, 13, 14];
for (let item of arr.keys()) {
  console.log(item);
}

输出结果：

10.4 迭代器对象仅获取值

let arr = [10, 11, 12, 13, 14];
for (let item of arr.values()) {
  console.log(item);
}

输出结果：

---

十一、Array.from()

Array.from() 可以将类似数组的机构转换为数组

function test() {
  // 通过 Array.from() 将 arguments 转为数组
  console.log(Array.from(arguments));
  // 转为数组后可以调用数组的方法
  Array.from(arguments).forEach(item=>{
    console.log(item)
  })
}
test(1, 2, 3);

输出结果：

---

十二、查找 —— indexOf()

arr.indexOf 可以获取元素在数组中的位置

• 有该元素，返回其index
• 无该元素，返回 -1

let arr = [10, 11, 12, 13, 14, 15];
console.log(arr.indexOf(11), "11的index");  // 输出结果：1 '11的index'
console.log(arr.indexOf(20), "20的index");  // 输出结果：-1 '20的index'

---

十三、查找 —— find()

find()，从头到尾查找，返回第一个符合条件的值

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item > 10);
console.log(res)  // 输出结果：11

---

十四、查找 —— findLast()

findLast()，从尾到头查找，返回第一个符合条件的值

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item < 14);
console.log(res)  // 输出结果：13

---

十五、查找 —— findIndex()

findIndex()，从头到尾查找，返回第一个符合条件的数据的index值

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item > 10);
console.log(res)  // 输出结果：1

---

十六、查找 —— findLastIndex()

findLastIndex()，从尾到头查找，返回第一个符合条件的数据的index值

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item < 14);
console.log(res)  // 输出结果：3