【博学谷学习记录】超强总结,用心分享丨前端开发:Array常用方法

Array

Array 是内置的构造函数，用于创建数组

数组常用方法

1.forEach

作用：遍历数组
说明：不返回，用于不改变值，经常用于查找打印输出值

const arr = [1,2,3,4,5]
  //语法：要遍历的数组.forEach(function(数组当前项的值(item),数组当前项的索引(index)可不填,数组对象本身(array)可不填))
  arr.forEach(function(item,index,array){
    console.log(item);
    console.log(index);
    console.log(array);
  })

2.filter

作用：过滤数组
说明：筛选数组元素，生成新数组，返回新数组，如果没有任何数组元素通过测试，则返回空数组。

const arr = [1,2,3,4,5]
  //语法：要遍历的数组.filter(function(数组当前项的值(item),数组当前项的索引(index)可不填,数组对象本身(array)可不填))
  const newArr = arr.filter(function(item,index,array){
    return item > 3
  })
  console.log(newArr);

3.map

作用：迭代数组
说明：返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据

const arr = [1,2,3,4,5]
  //语法：要遍历的数组.map(function(数组当前项的值(item),数组当前项的索引(index),数组对象本身(array)))
  const newArr = arr.map(function(item){
    return item *= 2
  })
  console.log(newArr);

4.reduce

作用：累计器
说明：返回函数累计处理的结果，经常用于求和等

const arr = [1,2,3,4,5]
  // 注意 reduce方法有2个参数，第一个是回调函数，第二个是 初始值，这里写 0
  //语法：要遍历的数组.reduce(function(prev,item,index,array),初始值)
  //prev:上一次调用回调函数时的返回值。在第一次调用时，若指定了初始值 0，其值则为 0，否则为数组索引为 0 的元素 array[0]。
  //item:数组中正在处理的元素。在第一次调用时，若指定了初始值 0，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
  //index:数组中正在处理的元素的索引。若指定了初始值 0，则起始索引号为 0，否则从索引 1 起始。
  //array:用于遍历的数组。
  const sum = arr.reduce(function(prev,item){
    return prev + item
  },0)
  console.log(sum);

5.join

作用：将数组元素拼接成字符串
说明：返回一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串。

 const arr = [1,2,3,4,5]
  //语法：数组.join(separator)
  //separator:指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略，数组元素用逗号（,）分隔。如果 separator 是空字符串（""），则所有元素之间都没有任何字符。
  const str = arr.join('')
  const str2 = arr.join(',')
  console.log(str);
  console.log(str2);

6.find

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

const arr = [1,2,3,4,5]
  //语法：要遍历的数组.find(function(数组当前项的值(item),数组当前项的索引(index)可不填,数组对象本身(array)可不填))
 const found =  arr.find(function(item){
    return item > 2
  })
  console.log(found);

7.every

作用：测试一个数组内的所有元素是否都能通过某个指定函数的测试。
说明：它返回一个布尔值。

const arr = [1,2,3,4,5]
  //语法：要遍历的数组.every(function(数组当前项的值(item),数组当前项的索引(index)可不填,数组对象本身(array)可不填))
 const bool =  arr.every(function(item){
    return item > 2
  })
  const bool2 =  arr.every(function(item){
    return item >= 1
  })
  console.log(bool);
  console.log(bool2);

8.some

作用：测试数组中是不是至少有 1 个元素通过了被提供的函数测试。
说明：它返回的是一个 Boolean 类型的值。数组中有至少一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。

const arr = [1,2,3,4,5]
  //语法：要遍历的数组.some(function(数组当前项的值(item),数组当前项的索引(index)可不填,数组对象本身(array)可不填))
 const bool =  arr.some(function(item){
    return item > 2
  })
  const bool2 =  arr.some(function(item){
    return item < 1
  })
  console.log(bool);
  console.log(bool2);

9.concat

作用：用于合并两个或多个数组。
说明：此方法不会更改现有数组，而是返回一个新数组。

const arr = [1,2,3,4,5]
const arr2 = [6,7,8,9,10]
  //语法：concat(value)
  //value:数组和/或值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝。
 const newArr = arr.concat(arr2)
 console.log(newArr);

10.sort

作用：对数组的元素进行排序，并返回数组。
说明：返回排序后的数组。请注意，数组已原地排序，并且不进行复制。

const arr = [1,4,3,2,5]
// 语法：要遍历的数组.sort(function(a,b){})
//a:第一个用于比较的元素。
//b:第二个用于比较的元素。
// 如果 compareFn(a, b) 大于 0，b 会被排列到 a 之前。
// 如果 compareFn(a, b) 小于 0，那么 a 会被排列到 b 之前；
// 如果 compareFn(a, b) 等于 0，a 和 b 的相对位置不变。
arr.sort(function(a, b){
  //升序
  return a - b
})
console.log(arr);
arr.sort(function(a, b){
  //降序
  return b - a
})
console.log(arr);

11.splice

作用：通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。
说明：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。此方法会改变原数组。

const arr = [1,2,3,4,5]
// 语法：splice(start, deleteCount, item1, item2, itemN)
// start:指定修改的开始位置（从 0 计数）。
// deleteCount:整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
// item1,item2,itemN:要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
arr.splice(1,2)
console.log(arr);

12.reverse

作用：将数组中元素的位置颠倒，并返回该数组。
说明：数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

const arr = [1,2,3,4,5]
// 语法：数组.reverse()
arr.reverse()
console.log(arr);

13.findIndex

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

const arr = [1,2,3,4,5]
//语法：要遍历的数组.findIndex(function(数组当前项的值(item),数组当前项的索引(index)可不填,数组对象本身(array)可不填))
const index = arr.findIndex(function(item){
  return item > 3
})
console.log(index);
const index2 = arr.findIndex(function(item){
  return item > 5
})
console.log(index2);