js 数组常用方法积累

前端小菜鸡yy

已于 2024-03-28 11:20:01 修改

阅读量204

点赞数 1

分类专栏： Js 文章标签： javascript 前端 typescript

于 2022-05-20 17:24:39 首次发布

本文链接：https://blog.csdn.net/qq_45104829/article/details/124867403

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js 数组常用方法积累

1.find()

返回数组中第一个通过测试的元素的值，找到，则 find() 返回该数组元素的值（并且不检查剩余值）；否则返回 undefined.

var arr = [1,2,3,4,5,3]
let result = arr.find(item=>{
   return item > 3 
})
console.log(result);//4

2.findIndex()

返回数组中通过测试的第一个元素的索引，找到，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）；否则返回 -1

  var arr = [1,2,3,4,5,3]
  let result = arr.findIndex(item=>{
     return item > 3 
  })
  console.log(result);//3

3.push()

向数组末尾添加新项目，并返回新长度

 var arr = [1,2,3,4,5,3]
 arr.push(8)
 console.log(arr);//[1, 2, 3, 4, 5, 3, 8]

4.pop()

移除数组的最后一个元素，并返回该元素

 var arr = [1,2,3,4,5,3]
 let arr2 = arr.pop()
 console.log(arr2);//3
 console.log(arr);//[1, 2, 3, 4, 5]

5.shift()

法移除数组的第一项，返回值是被移除的项目

 var arr = [1,2,3,4,5,3]
 let arr2 = arr.shift()
 console.log(arr2);//1
 console.log(arr);//[2, 3, 4, 5, 3]

6.unshift()

将新项添加到数组的开头，并返回新的长度

 var arr = [1,2,3,4,5,3]
 let arr2 = arr.unshift(9)
 console.log(arr2);//7
 console.log(arr);//[9, 1, 2, 3, 4, 5, 3]

7.filter()

创建数组，其中填充了所有通过测试的数组元素（作为函数提供）[不会对没有值的数组元素执行该函数]

 var arr = [1,2,3,4,5,3]
 let arr2 = arr.filter(item=>{
    return item>3
 })
 console.log(arr2);// [4, 5]

8.map()

使用为每个数组元素调用函数的结果创建新数组

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.map(function a(item, i, arr) {
  item *= 2;
  console.log(arr); //[1, 2, 3, 4, 5, 6]
  return item;
});
console.log(newArr); //[2,4,6,8,10,12]

9.forEach()

按顺序为数组中的每个元素调用一次函数。(方法执行是没有返回值的，对原来数组也没有影响。)

    const arr = [1, 2, 3, 4, 5, 6];
    const newArr = arr.forEach(function a(item, i, arr) {
      item *= 2;
      console.log(arr); //[1, 2, 3, 4, 5, 6]
      return item;
    });
    console.log(newArr); //undefined

    var arr2 = [1, 2, 3, 4, 5];
    var sum = 0;
    arr2.forEach(function (value, index, array) {
        console.log(array[index] == value); // true
        sum += value;
    });
    console.log(sum); // 15

10.indexOf() 与 lastIndexOf()

在数组中搜索指定项目，并返回其位置；搜索将从指定位置开始，如果未指定开始位置，则从头(末尾）开始，并在数组末尾结束搜索。
如果未找到该项目，则返回 -1。
【indexOf】：如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置
【lastIndexOf】：如果要搜索的项目不止一次出现，lastIndexOf() 方法将返回最后一次出现的位置

var list = ['lily','sara','kathy']
console.log(list.indexOf('kathy'));//2
//指定start参数：
list.indexOf(item,start)

11.every()

检查数组中的所有元素是否都通过了测试（对数组中存在的每个元素执行一次函数）–不改变原数组

如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
如果没有出现 false，every() 返回 true

 var arr = [11,1,23,34,23,78]
 let flag = arr.every(item=>{
     return item > 11
 })
 console.log(flag);//false

12.some()

检查数组中的任何元素是否通过测试（对数组中存在的每个元素执行一次函数）–不改变原数组

如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）
否则返回 false

 var arr = [11,1,23,34,23,78]
 let flag = arr.some(item=>{
    return item > 11
 })
 console.log(flag);//true

13.join()

将数组作为字符串返回。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(energy);//Banana,Orange,Apple,Mango

14.concat()

用于连接两个或多个数组（不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值）

var arr = [1,34,23,78]
var arr2 = [22,3,222]
var fruits = ["Banana", "Orange"];
console.log(arr.concat(arr2,fruits));//[1,34, 23, 78, 22, 3, 222, 'Banana', 'Orange']

15. Array.isArray（）

定对象是否为数组。
如果对象是数组，则此函数返回 true，否则返回 false。

 var arr = [1,34,23,78]
 var str = '121212'
 console.log(Array.isArray(arr));//true
 console.log(Array.isArray(str));//false

16.reduce（）

返回上次调用回调函数的累积结果
reduce方法为数组的每个值（从左到右）执行提供的函数
**
– 对没有值的数组元素，不执行 reduce() 方法
– reduce() 方法不会改变原始数组。

参数	意义
prev	上次调用函数的返回值（必需）
cur	当前元素（必需）
index	当前元素的索引值
arr	被遍历的数组
initialValue	初始值

无初始值

let arr = [1, 2, 3, 4];
let sum = arr.reduce((prev, cur, index, arr) =>{
    return prev + cur;
})
console.log(arr, sum); // [1,2,3,4],10

有初始值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},5)
console.log(arr, sum);// [1,2,3,4],15

高级应用
1.计算数组中每个元素出现的次数

let arr = ['name','age','long','short','long','name','name'] 
let arrResult = arr.reduce((pre,cur) =>{
    console.log(pre,cur)
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})
console.log(arrResult)//结果：{name: 3, age: 1, long: 2, short: 1}

2.去除数组中重复的元素

let arrResult = arr.reduce((pre,cur) =>{
    if(!pre.includes(cur)){
        pre.push(cur)
    }
    return pre;
},[])
console.log(arrResult)//结果：["name", "age", "long", "short"]

此方法借鉴— 详解数组中的reduce方法

17. sort( )

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序；（这种方法会改变原始数组！）
arrayObject.sort(sortby);参数sortby可选，规定排序顺序，必须是函数；
[若没有参数，将按字符编码对数组中的元素进行排序]
sort() 方法比较两个值时，将值发送给比较函数，根据返回的（负、零、正）值对值进行排序。
比较函数应该具有两个参数a和b，其返回值如下：
若a<b，在排序后的数组中a应该出现在b之前，则返回一个小于0的值；
若a=b，则返回0；
若a>b，则返回一个大于0的值；

// 示例1
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort());//['Apple', 'Banana', 'Mango', 'Orange']
// 示例2 
var points = [40, 100, 1, 5, 25, 10];
console.log(points.sort(function(a, b){return a-b}));//[1, 5, 10, 25, 40, 100] - 升序
console.log(points.sort(function(a, b){return b-a}));//[100, 40, 25, 10, 5, 1] - 降序

18.flat( )和flatMap( )

flat(depth)
数组扁平化，flat() 用于将嵌套的数组“拉平”，变成一维的数组
该方法返回一个新数组，对原数据没有影响
flat() 方法会移除数组中的空项：
–depth 可选
指定要提取嵌套数组的结构深度，默认值为 1【使用 Infinity，可展开任意深度的嵌套数组】

var arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat());// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flatMap( )
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些
具体使用参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

19.splice( )

通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组

语法：array.splice(index,howmany,item1,.....,itemX)
index ：必需；规定从何处添加/删除元素
howmany：可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item：可选。要添加到数组的新元素

删除

/* 返回被删除的内容*/
console.log([1,2,3,4,5,6,7,8].splice(2,1)); //[3]
console.log([1,2,3,4,5,6,7,8].splice(2,0)); //[] 
console.log([1,2,3,4,5,6,7,8].splice(2)); //[3,4, 5, 6, 7, 8]

替换

var arr = ['a','b','c','d','e']
console.log(arr); // ['all', 'b', 'c', 'd', 'e']

添加

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
console.log(fruits);// ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

特殊情况

// 如果start（n）为负数，则等价于array.length-n   
var arr = ['a','b','c','d','e']
let res = arr.splice(-2)
console.log(arr);//['a', 'b', 'c']
console.log(res);//['d', 'e']

20.includes( )

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
语法：

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
- fromIndex可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索(如果计算出的索引小于 0，则整个数组都会被搜索)。默认为 0。

const arr = ['hello','hi','world','some']
console.log(arr.includes('hi'));//true
console.log(arr.includes('what'));//false
console.log(arr.includes('hi',2));//false