JavaScript 常用数组方法总结日常开发中常用数组总结 some includes filter find map

判断数组中是否存在某个元素 `includes` `some`

includes()
判断一个数组是否包含一个指定的值。如果是返回 true，否则false

const arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出: true

some()
检测数组元素中是否含有指定条件的元素。

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

const arr = [1, 2, 3];
console.log(arr.some((element) => element > 2)) // 输出: true
// 数组里面是对象
const arr = [
  {
    age: 10,
  },
  {
    age: 20,
  },
]
console.log(arr.some(element => element.age > 10)) // 输出: true

查找数组中满足条件的元素 `filter` `find` `every`

filter()
创建一个新数组，返回符合条件的元素。如果没有符合条件的元素则返回空数组。

const arr = [1, 2, 3, 4];
const newArr = arr.filter((element) => element > 2);
// 数组里面是对象
const arr = [
  {
    age: 10,
  },
  {
    age: 20,
  },
]
console.log(arr.filter(element => element.age > 10)) // 输出: [{ age: 20}]

find()
返回数组中满足条件的第一个元素的值。否则返回 undefined

const arr = [1, 2, 3];
console.log(arr.find((element) => element > 1)); // 输出: 2
// 数组里面是对象
const arr = [
  {
    age: 10,
  },
  {
    age: 20,
  },
    {
    age: 30,
  }
]
console.log(arr.find(element => element.age > 10)) // 输出: { age: 20}

every()
检测数组中所有元素是否都符合指定条件

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

const arr = [1, 2, 3];
console.log(arr.every((element) => element > 2)); // 输出: false  因为其中有一个不符合条件

查找元素的索引 `indexOf` `findIndex`

indexOf()
查找元素首次出现的索引，若未找到则返回 -1

const arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 输出: 1

findIndex()
返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

const arr = [1, 2, 3];
console.log(arr.findIndex((element) => element > 1)); // 输出: 1

数组的添加和删除 `push` `unshift` `pop` `shift`

push()
在数组末尾添加一个或多个元素，返回新的数组长度
pop()
移除并返回数组的最后一个元素
unshift()
在数组开头添加一个或多个元素，返回新的数组长度
shift()
移除并返回数组的第一个元素
slice()
选取数组的一部分，并返回一个新数组。

包含从 start 到 end （不包括该元素）的元素
此方法属于浅拷贝
如果该元素是个对象引用（不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 3);
console.log(newArr); // 输出: [2, 3]

数组万能方法删除替换添加 `splice`

splice()
可以删除、替换或添加元素到数组的指定位置

splice第一个参数规定从何处添加/删除元素。当前添加的时候，是从当前索引的前面开始。
splice第二个参数规定应该删除多少元素。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
splice第三个参数规定要添加到数组的新元素

// 删除  会改变原数组
const fruits = ['apple', 'banana', 'cherry', 'date'];
const removed = fruits.splice(1, 2);
console.log(fruits); // 输出: ['apple', 'date']
console.log(removed); // 输出: ['banana', 'cherry']
// 添加 会改变原数组
const numbers = [1, 2, 3, 4]; 
numbers.splice(2, 0, 5, 6); 
console.log(numbers); // 输出: [1, 2, 5, 6, 3, 4]
// 替换
const colors = ['red', 'green', 'blue'];
const replaced = colors.splice(1, 1, 'yellow');
console.log(colors); // 输出: ['red', 'yellow', 'blue']
console.log(replaced); // 输出: ['green']

数组排序 `sort` `reverse`

sort()
对数组的元素进行排序，并返回数组

const arr = [3, 1, 2];
arr.sort((a, b) => a - b);
console.log(arr); // 输出: [1, 2, 3]

reverse()
反转数组中元素的顺序

const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // 输出: [3, 2, 1]

数组转化和拼接 `concat` `join`

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

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
console.log(newArr); // 输出: [1, 2, 3, 4]

join()
将数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

const arr = [1, 2, 3];
const str = arr.join('-');
console.log(str); // 输出: '1-2-3'

数组遍历 `forEach` `map`

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

没有返回值，本质上等同于 for 循环。所以不能赋值使用。
forEach回调函数的参数，它只是数组元素值的一个副本，并非元素本身。

forEach回调函数的参数，它只是数组元素值的一个副本，并非元素本身
// 错误使用
let arr = [1,2,3]
arr.forEach(ss => {
  ss = ss * 2
})
console.log(arr); // [1, 2, 3]
// 正确使用
let arr = [1, 2, 3];
arr.forEach((ss, index) => {
    arr[index] = ss * 2;
});
console.log(arr); // [2, 4, 6]
// 数组里面是对象的时候的使用
// 当数组里面是对象的可以直接改变对象的值。
// 因为对象是引用类型，当你在forEach循环里直接修改 `ss` 对象（也就是数组中的元素）的属性时，
// 实际上是直接修改了原数组中的对象。
let arr = [{age:10},{age:20}]
arr.forEach(ss => {
  ss.age  = ss.age * 2
})
console.log(arr); // [{age:20},{age:40}]
let arr = [{age:10},{age:20}]
arr.forEach(ss => {
  Object.assign(ss, {
    sex:'man'
  })
})
console.log(arr); // [ { age: 10, sex: 'man' }, { age: 20, sex: 'man' } ]

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

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);

reduce()
对数组中的每个元素执行一个由您提供的 reducer 函数 (升序执行)，将其结果汇总为单个返回值
flat()
创建一个新数组，所有子数组元素递归地连接到该数组中，直到达到指定的深度

const arr = [1, [2, [3]]];
const newArr = arr.flat(2);
console.log(newArr); // 输出: [1, 2, 3]

flatMap()
首先使用映射函数映射每个元素，然后将结果压缩成一个新数组

const arr = [1, 2, 3];
const newArr = arr.flatMap((element) => [element * 2]);
console.log(newArr); // 输出: [2, 4, 6]

JavaScript 常用数组方法总结

判断数组中是否存在某个元素 includes some

查找数组中满足条件的元素 filter find every

查找元素的索引 indexOf findIndex

数组的添加和删除 push unshift pop shift

数组万能方法 删除 替换 添加 splice

数组排序 sort reverse

数组转化和拼接 concat join

数组遍历 forEach map