js对数组各种的操作方法（全）

文章将持续更新🧐...

---

一、数组遍历所有值

1、for循环

（1）优缺点

• 优点
  • 灵活性强，可控制开始和结束的索引
  • 可以在循环内部直接修改数组元素（可修改原数组）
• 缺点
  • 代码相对冗长，特别是对于简单的遍历任务
  • 需要手动处理索引和条件判断

（2）代码示例

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

2、for...of循环

（1）优缺点

• 优点
  • 直接遍历数组（或任何可迭代对象）的值，无需关心索引
  • 代码更简洁，易于阅读
  • 支持迭代所有可迭代对象，如字符串、Map、Set 等
• 缺点
  • 不适用于需要索引的场景
  • 相对于 for 循环，可能在性能上略有下降（尤其是在处理大型数组时，但差异通常不大）

（2）代码示例

function forOfTraversal(){
  for (const value of list) {
    console.log(value);
  }
}

3、for..in循环

注意：虽然for...in循环可以用于遍历数组，但它主要是用来遍历对象的属性（包括原型链上的属性），不推荐用于遍历数组

（1）优缺点

• 优点
  • 可以遍历对象的所有可枚举属性
• 缺点
  • 会遍历到对象的原型链上的属性
  • 对于数组，不能确保遍历的是数组的索引，可能包括非整数键
  • 迭代的是字符串形式的索引，而不是数组元素的值
  • 遍历顺序取决于属性的枚举顺序，这可能会因JavaScript引擎而异

（2）代码示例

function forInTraversal(){
  for (const key in list) {
    console.log(list[key]);
  }
}

4、map()

（1）优缺点

• 优点
  • 返回一个由原数组中的每个元素调用一个提供的函数后的返回值组成的新数组
  • 不改变原数组
  • 适用于将数组中的每个元素映射（转换）成新值
• 缺点
  • 如果不需要新数组，使用map会浪费内存

（2）代码示例

function mapTraversal(){
  list.map((item)=>{
    console.log(item);
  })
}

5、forEach()

（1）优缺点

• 优点
  • 为数组的每个元素执行一次提供的函数
  • 不改变原数组
  • 代码简洁，易于理解
• 缺点
  • 不能中断循环（没有像for循环中的break语句）
  • 返回值是undefined，即不返回新数组

（2）代码示例

function forEachTraversal(){
  list.forEach((item)=>{
    console.log(item);
  })
}

---

二、常见方法

1、reduce()

（1）说明

对数组中的每个元素执行一个reduce函数(升序执行)，将其结果汇总为单个返回值

（2）适用场景

累加/减/乘/除、连接字符串等

（3）代码示例

const list = [1, 2, 3, 4];  
const sum = list.reduce((pre, cur) => pre + cur, 0);  
console.log(sum); //10  
const multiple = list.reduce((pre, cur) => pre * cur);  
console.log(multiple); //24

// 连接字符串  
const strings = ['Hello', ' ', 'world', '!'];  
const concatString = strings.reduce((pre, cur) => pre + cur, '');  
console.log(concatString); //Hello world!

2、filter()

（1）说明

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

（2）适用场景

筛选：从数组中筛选出符合条件的元素

（3）代码示例

const numbers = [1, 2, 3, 4, 5, 6];  
const evenNumbers = numbers.filter(number => number % 2 === 0);  
console.log(evenNumbers); // [2, 4, 6]

3、find()

（1）说明

返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined

（2）适用场景

找到第一个符合条件的元素

（3）代码示例

const users = [  
  { id: 1, name: 'John', age: 30 },  
  { id: 2, name: 'Jane', age: 22 },  
  { id: 3, name: 'Doe', age: 24 }  
];  
  
const foundUser = users.find(user => user.age > 22);  
console.log(foundUser); // { id: 1, name: 'John', age: 30 }

4、findIndex()

（1）说明

返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1

（2）适用场景

找到第一个符合条件的元素的索引

（3）代码示例

const users = [  
  { id: 1, name: 'John', age: 30 },  
  { id: 2, name: 'Jane', age: 22 },  
  { id: 3, name: 'Doe', age: 24 }  
];  
  
const index = users.findIndex(user => user.age > 22);  
console.log(index); // 0

5、some()

（1）说明

测试数组中是不是至少有1个元素通过了被提供的函数测试，它返回的是布尔值

（2）适用场景

检测数组中是否存在至少一个符合条件的元素

（3）代码示例

const numbers = [1, 2, 3, 4, 5];  
const hasPositives = numbers.some(number => number > 0);  
console.log(hasPositives); // true

6、every()

（1）说明

返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined

（2）适用场景

找到第一个符合条件的元素

（3）代码示例

const numbers = [1, 2, 3, 4, 5];  
const areAllPositives = numbers.every(number => number > 0);  
console.log(areAllPositives); // true  
  
const mixedNumbers = [1, -2, 3, 4, 5];  
const areAllPositivesMixed = mixedNumbers.every(number => number > 0);  
console.log(areAllPositivesMixed); // false