JavaScript 整理了一些常用的数组方法，点赞加关注内容持续更新~

1、数组splice方法

• 数组名.splice(起时索引,删除元素个数,要添加的元素,要添加的元素,…)
• 返回值：被删除的元素组成的数组

      const arr = ['a', 'b']
       //（增加）在a和b之间增加俩个元素c和d
      const res = arr.splice(1, 0, 'c', 'd')
      console.log(res)   // ['a', 'c', 'd', 'b']



      //（删除）删除序号为1的元素
      const res2 = arr.splice(1, 1)
      console.log(arr)   // ['a', 'c', 'd', 'b']
      console.log(res2)  // ['a']



      //（替换） 把b->e
      const res3 = arr.splice(1, 1, 'e')
      console.log(res3)  //['a', 'b']
      console.log(res3)  //['a', 'e']

2、数组排序sort方法

• sort()方法是数组对象的一个方法，用于对数组的元素进行排序。这个方法会改变原数组的顺序。
• 默认情况下，sort()方法按照字符串Unicode码点顺序进行排序。也就是说，它把每个元素都转换成字符串，然后按照每个字符串的Unicode编码顺序进行排序。
• 如果你想按照自定义的规则进行排序，你可以提供一个比较函数作为sort()方法的参数。这个比较函数应该接收两个参数，如果第一个参数应该排在第二个参数前面，那么比较函数应该返回一个负数。如果两个参数相等，那么比较函数应该返回0。如果第一个参数应该排在第二个参数后面，那么比较函数应该返回一个正数。

 const arr = [10, 2, 5, 1, 9,3   ]
      // sort排序  默认按照字符串排序
      // arr.sort()
      const r = arr.sort(function (a, b) {
        // return a - b 升序
        return b - a // 降序
      })
      console.log(arr)  //
      console.log(r === arr) // 返回排好序的原数组 true

3、数组操作（数组的增删改查）

.unshift(参数) 数组最前方增加

• ​ unshift方法
• ​ 语法 数组名.unshift(参数)
• ​ 功能：在数组的前面追加一个或多个元素
• ​ 参数、一个或多个要追加的元素
• ​ 返回值 元素添加之后的数组总长度

 // 例子
const arr = [1,2]
const num = arr.unshift(3, 4)//在arr最前方增加3和4

.push(参数) 数组末尾增加

• ​ push方法
• ​ 语法 数组名.push(参数)
• ​ 功能：在数组的末尾追加一个或多个元素
• ​ 参数、一个或多个要追加的元素
• ​ 返回值 ：元素添加之后的数组总长度

 // 例子
 const arr = [1,2]
 const num = arr.push(3, 4)//在arr末尾增加3和4

.shift() 删除数组第一个元素

• ​ 语法 数组名.shift()
• ​ 功能：删除数组第一个元素
• ​ 参数、无
• ​ 返回值 被删除的元素

// 例子
const arr = [1,2]
const num = arr.shift()//删除arr的第一个元素1

.pop() 删除数组末尾元素

• 语法 数组名.pop()
• 功能：删除数组末尾的元素
• 参数、无
• 返回值 被删除的元素

// 例子
const arr = [1,2]
const num = arr.pop()//删除arr末尾的元素2

4、数组其它方法

concat() 连接俩个数组

//concat() 可以连接两个数组，不改变原有数组，而是返回一个新数组
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const newArr= array1.concat(array2.array3)
console.log(newArr)   // [1,2,3,4,5,6,7,8,9]

includes()查找数组里是否包含一个值

 // includes() 此方法用来判定一个数组是否包含一个值，包含返回true,不包含返回 false
 const array1 = [1, 2, 3] 
 console.log(array1.includes(2)) // Expected output: true
    
 const pets = ['cat', 'dog', 'bat', 'dog']
 console.log(pets.includes('cat'))  // Expected output: true
 console.log(pets.includes('at'))   // Expected output: false
      

indexOf ()正向查找数组元素返回索引

// indexOf() 从左向右查找元素在数组中第一次出现的索引
// 能找到该元素返回第一次出现的索引，找不到该元素返回 -1
const pets = ['cat', 'dog', 'bat', 'dog']
console.log(pets.indexOf('dog'))  // 返回1

lastIndexOf () 反向查找数组元素返回索引

//lastIndexOf() 从右向左查找元素在数组中第一次出现的索引
// 能找到该元素返回第一次出现的索引，找不到该元素返回 -1
const pets = ['cat', 'dog', 'bat', 'dog']
console.log(pets.lastIndexOf('dog'))  //返回3

join()指定分隔符连接数组元素

//join()是一个数组方法，用于将数组中的所有元素连接到一个字符串中，不会改变原数组。这个方法会使用指定的分隔符（如果没有提供，则默认为逗号）来分隔数组中的每个元素。
const arr = ['小学', '中学', '大学']
console.log(arr.join()) // 小学,中学,大学 不传参数，默认会用逗号把元素拼接成一个字符串 
console.log(arr.join('-')) // 小学-中学-大学
console.log(arr.join(':')) // 小学:中学:大学

forEach()

• forEach() 方法对数组的每个元素执行一次给定的函数。
• **forEach()**不会改变原数组，也不会返回一个新数组。它只是简单地遍历数组并执行函数。如果你需要在遍历过程中改变原数组或者创建一个新数组，你可能需要使用其它方法，如map()或reduce()等。

以下是forEach()的基本语法：

array.forEach(callback(element [, index [, array]])[, thisArg])

参数说明：

• callback：为数组中每个元素执行的函数，该函数接收三个参数：
  • element：数组中正在处理的当前元素。
  • index（可选）：数组中正在处理的当前元素的索引。
  • array（可选）：forEach()被调用的数组。
• thisArg（可选）：执行回调函数时用作this的值。

let numbers = [1, 2, 3, 4, 5];  
  
numbers.forEach(function(item, index) {  
  console.log('数组元素：' + item + '，索引：' + index);  
});
/*数组元素：1，索引：0
  数组元素：2，索引：1
  数组元素：3，索引：2
  数组元素：4，索引：3
  数组元素：5，索引：4*/

map()

map()是一个数组方法，它不会修改原始数组，而是返回一个新的数组。其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

map()方法的语法如下：

let newArray = arr.map(callback(element [, index [, array]])[, thisArg])

其中：

• newArray：新数组，每个元素都是回调函数的结果。
• arr：需要调用map()方法的数组。
• callback：数组中每个元素都要执行的函数，接收三个参数：
  • element：数组中正在处理的当前元素。
  • index（可选）：数组中正在处理的当前元素的索引。
  • array（可选）：map()方法被调用的数组。
• thisArg（可选）：执行 callback 函数时使用的 this 值。

这是一个更详细的使用例子：

let numbers = [1, 2, 3, 4, 5];  
  
let doubled = numbers.map(function(num) {  
    return num * 2;  
});  
  
console.log(doubled); // 输出：[2, 4, 6, 8, 10]

在这个例子中，我们不仅对数组中的每一个元素进行了平方根运算，还使用了所有的参数，并在map()函数中使用了箭头函数。同时，我们也指定了thisArg，尽管在这个例子中它并未被用到。

forEach()和map() 的区别

都是用于遍历数组的函数，但它们有一些重要的区别。

1. 函数参数：forEach接收一个回调函数作为参数，这个回调函数对数组的每个元素执行一次。

   ​ map也接收一个回调函数作为参数，但返回一个新数组，该新数组是由每次回调返回的结果组成的。

2. 返回值：forEach没有返回值，它只是对数组的每个元素执行一次提供的函数。

   ​ map返回一个新的数组，该数组是由每次回调返回的结果组成的。

3. 对原始数组的影响：forEach不会改变原始数组

   ​ map也不会改变原始数组，但会创建一个新数组，该数组包含由每次回调返回的结果组成的元素。

下面是一个简单的示例来展示这两者的区别：

let numbers = [1, 2, 3, 4, 5];  
  
// 使用forEach  
numbers.forEach(function(num) {  
  console.log(num * num);  
});  
// 输出: 1, 4, 9, 16, 25 (这是每个数字的平方)  
  
// 使用map  
let squares = numbers.map(function(num) {  
  return num * num;  
});  
console.log(squares); // 输出: [1, 4, 9, 16, 25] (这是每个数字的平方组成的数组)

在这个例子中，我们可以看到forEach只是简单地打印出每个数字的平方，而map创建了一个新的数组squares，其中包含了每个数字的平方。

find()返回满足条件的第一个元素

查找满足条件的第一个元素 找到就返回该元素，找不到返回undefined

 const arr = [1, 3, 5, 7, 9, 7]
      const item = arr.find(function (item, index, arr) {
        console.log(item, index, arr)
        return item === 7
      })
      console.log(item) // 7

findIndex()查找满足条件的第一个元素的索引

查找满足条件的第一个元素的索引 找到就返回该元素的索引，找不到返回-1

const arr = [1, 3, 5, 7, 9, 7]
      const index = arr.findIndex(function (item, index, arr) {
        console.log(111)
        return item > 5
      })
      console.log(index) // 3

some()一些

对数组进行循环，发现满足条件的第一个元素则循环结束 返回true,假如所有元素不满足 返回false

以下是some()方法的语法：

javascript复制代码

array.some(function(currentValue, index, arr), thisArg)

参数说明：

• function(currentValue, index, arr)：必需参数，用于测试每个元素的函数。
  • currentValue：必需参数，当前正在处理的元素。
  • index：可选参数，当前正在处理的元素的索引。
  • arr：可选参数，some()被调用的数组。
• thisArg：可选参数，执行回调函数时用作 this 的值。

const arr = [1, -3, 20, 9, 11, 12]
const flag = arr.some(function (item) {
        return item % 2 === 0
      })
      console.log(flag) // true

every()每个

every()是一个数组方法，对数组进行循环,用于检查数组中的所有元素是否都满足测试函数中的条件。如果所有元素都通过测试，则返回true；否则返回false

以下是every()方法的语法：

javascript复制代码

array.every(callback(element, index, [array]), thisArg)  //callback 代表回调函数的意思

参数说明：

• callback：必需参数，用于测试每个元素的函数。
  • element：必需参数，当前正在处理的元素。
  • index：可选参数，当前正在处理的元素的索引。
  • array：可选参数，every()被调用的数组。
• thisArg：可选参数，执行回调函数时用作 this 的值。

 const arr = [1, -3, 20, 9, 11, 12]
 const flag = arr.every(function (item) {
        console.log(item)
        return item > -9
      })
      console.log(flag) // true

reverse() 翻转

是一个数组方法，用于反转数组的元素顺序。这意味着，如果你有一个数组，例如[1, 2, 3, 4, 5]，使用reverse()方法后，数组将变为[5, 4, 3, 2, 1]。

下面是一个使用reverse()方法的简单示例：

let array = [1, 2, 3, 4, 5]
const r = array.reverse()
console.log(rray) // 输出：[5, 4, 3, 2, 1]
console.log(r===rray) // true

reverse()方法会直接修改原始数组，而不是创建一个新的反向数组。如果你不想修改原始数组，你可以先使用slice()或concat()方法创建一个副本，然后再对副本使用reverse()方法。

filter() 过滤

• filter()是一个数组方法，用于创建一个新数组，该数组中的元素是通过检查指定函数中的条件而符合条件的所有元素。
• filter()方法接收一个回调函数作为参数，该函数会被数组的每个元素调用，返回一个布尔值来决定是否保留该元素。如果回调函数返回true，则该元素会被保留在新的数组中；如果返回false，则会被排除。

下面是一个使用filter()方法的示例：

const numbers = [1, 2, 3, 4, 5];  
  
const evenNumbers = numbers.filter(function(num) {  
  return num % 2 === 0;  
});  
  
console.log(evenNumbers); // 输出：[2, 4]

在上面的示例中，我们定义了一个回调函数来检查一个数字是否为偶数。对于每个数字，如果它是偶数，回调函数会返回true，否则返回false。只有返回true的数字会被保留在新数组中，因此最终得到的是一个包含所有偶数的数组。

reduce()减少

是一个数组方法，用于将数组中的元素从左到右合并，以便将其减少为单个值。这个方法通过遍历数组中的每个元素并执行一个提供的reducer函数来工作，将数组中的所有值合并为一个值。

reduce()方法接收两个参数：

1. reducer函数：这是一个执行每个数组元素上的操作的函数，它接受四个参数：累加器、当前值、当前索引和源数组。
2. 初始值（可选）：这是传递给reducer函数的初始值。如果没有提供初始值，则将使用数组的第一个元素作为初始值，并从第二个元素开始进行迭代。

下面是一个使用reduce()方法的示例：

const numbers = [1, 2, 3, 4, 5];  
  
const sum = numbers.reduce((accumulator, currentValue) => {  
  return accumulator + currentValue;  
}, 0);  
  
console.log(sum); // 输出：15

在上面的示例中，我们使用reduce()方法来计算数组中所有元素的总和。我们将一个reducer函数传递给reduce()方法，该函数将累加器和当前值相加，并返回结果作为下一次迭代的累加器。我们将初始值设置为0，以便在第一次迭代时将累加器设置为0，并将当前值与累加器相加。最终，我们将得到数组中所有元素的总和。

下面是一个例子

const scores = [
    {
        subject: 'math',
        score: 88
    },
    {
        subject: 'chinese',
        score: 95
    },
    {
        subject: 'english',
        score: 80
    }
];
const dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}
const sum = scores.reduce((pre,item) => {
    return pre + item.score * dis[item.subject]
},0)
console.log(sum) // 88.5

flat()数组扁平化

flat() 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

语法:

flat()
flat(depth)

参数:

• depth 可选

  指定要提取嵌套数组的结构深度，默认值为 1。

返回值:

一个新的数组，其中包含拼接后的子数组元素。

描述：

flat() 方法属于复制方法。它不会改变 this 数组，而是返回一个浅拷贝，该浅拷贝包含了原始数组中相同的元素。

示例：

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.from()ES6

Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

**Array.from()**方法的基本语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])

参数说明：

• arrayLike：必需参数，一个类似数组的对象或者可迭代对象。
• mapFn：可选参数，用于对每个元素进行操作并返回一个新数组。
• thisArg：可选参数，用作 mapFn 回调函数中的 this 值。

下面是一些示例：

// 字符串转化为数组  
let str = 'hello';  
let arr = Array.from(str);  
console.log(arr); // ['h', 'e', 'l', 'l', 'o']  
  
// 类似数组的对象转化为数组  
let arrayLike = {0: 'a', 1: 'b', length: 2};  
let arr2 = Array.from(arrayLike);  
console.log(arr2); // ['a', 'b']  
  
// 使用mapFn函数转化元素  
let arr3 = Array.from([1, 2, 3, 4], x => x * x);  
console.log(arr3); // [1, 4, 9, 16]

Array.isArray ()ES6

// Array.isArray() 判断是不是数组，如果是数组就返回true ，不是数组返回 false
// 通过构造函数直接调用的方法-静态方法
console.log(Array.isArray(10)) // false
console.log(Array.isArray([])) // true