js数组方法汇总

Mr.一

已于 2023-12-14 21:04:03 修改

阅读量19

点赞数

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

于 2023-12-12 19:59:19 首次发布

本文链接：https://blog.csdn.net/weixin_46016926/article/details/134957440

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1. push()

在数组最后添加项

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.push(1);
console.log(res);    //结果为9    返回新数组长度
console.log(arr1);   //结果为 [1, 3, 7, 2, 4, 7, 8, 9, 1]    原数组为最新结果

2. pop()

删除数组最后一项

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.pop();
console.log(res);   //结果为9    返回被删除的项的值
console.log(arr1);    //结果为 [1, 3, 7, 2, 4, 7, 8]    原数组为最新结果

3. shift()

删除数据第一项

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.shift();
console.log(res);   //结果为1    返回被删除的项的值
console.log(arr1);    //结果为 [3, 7, 2, 4, 7, 8, 9 ]    原数组为最新结果

4. unshift()

在数组最前面添加数据项

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.unshift(2);
console.log(res);    //结果为9    返回新数组长度
console.log(arr1);   //结果为 [2,1, 3, 7, 2, 4, 7, 8, 9]    原数组为最新结果

5. reverse()

翻转数组

var arr3 = [3, 5, 1, 2];
let res = arr3.reverse();
console.log(res);     //结果为[2, 1, 5, 3]   返回新数组
console.log(arr3);    //结果为[2, 1, 5, 3]  原数组为最新结果

6. sort()

排序

提示：这个排序方法只能排序个位数,意思假如一个数是23 它只会把这个数按照2的大小排 .同时sort()方法也可以对字母进行顺序排序

var arr3 = [3, 5, 1, 2];
let res = arr3.sort();
console.log(res);     //结果为[1, 2, 3, 5]   返回新数组
console.log(arr3);    //结果为[1, 2, 3, 5]  原数组为最新结果

// 为了解决sort()方法排序弊端，引申出了一个方法：
let leng = [10,20,15,8]
	var aaa = leng.sort((a,b)=>{
          return b - a   //b-a就是从大到小排序   return a-b就是从小到大排序
        })
 console.log(leng)    //结果为[20,15,10,8]  原数组为最新结果
 console.log(aaa)    //结果为[20,15,10,8] 原数组为最新结果

7. indexOf()

查找是否包含某个值以及它的位置

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.indexOf(7);
console.log(res);    //结果为2    返回要查找的值的索引    
// 如果没有要查找的值返回-1   要查找的值有多个相同的只会返回第一个值的位置
console.log(arr1);   //结果为[1, 3, 7, 2, 4, 7, 8, 9];    原数组不变

8. lastIndexOf()

查找是否包含某个值以及它的位置,和arr.indexOf()的功能一样，不同的是从后往前查找

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.lastIndexOf(7);
console.log(res);    //结果为5    从右向左查找,返回要查找的值的索引    如果没有要查找的值返回-1   要查找的值有多个相同的只会返回从右向左第一个值的位置
console.log(arr1);   //结果为[1, 3, 7, 2, 4, 7, 8, 9];    原数组不变

9. includes()

检测数组是否包含某项数据

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.includes(10);
console.log(res);    //结果为false    返回的结果有要查找的就是true   没有就是false
console.log(arr1);   //结果为[1, 3, 7, 2, 4, 7, 8, 9];    原数组不变

10. concat()

连接数组 (内容可以是字符串的形式逗号隔开,也可以直接是一个数组)

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.concat(1,2,[3,4]);
console.log(res);    //结果为 [1, 3, 7, 2, 4, 7, 8, 9, 1, 2, 3, 4]    返回新数组
console.log(arr1);   //结果为[1, 3, 7, 2, 4, 7, 8, 9];    原数组不变

11. slice()

数组截取

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.slice(0,2);    // 第一个参数索引开始位置 第二个结束位置 
console.log(res);    //结果为 [1, 3]    返回被截取的项组成的数组
console.log(arr1);   //结果为[1, 3, 7, 2, 4, 7, 8, 9];    原数组不变

12. splice()

数组截取

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.splice(0,2);    // 第一个参数截取开始位置  第二个截取数量  第三个替换内容 
console.log(res);    //结果为 [1, 3]    返回被截取的项组成的数组
console.log(arr1);   //结果为[7, 2, 4, 7, 8, 9];    原数组为截取后的最新结果

13. forEach()

遍历数组

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.forEach((item, index) => {
      console.log(item);        遍历数组的每一项的值
        console.log(index);     遍历数组的每一项的索引
      });
console.log(res);    //结果为undefined     没有返回值
console.log(arr1);    //原数组不变

14. map()

映射(也是遍历数组,可以做一对一的结果转换)

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.concat(1,2,[3,4]);
console.log(res);    //结果为 [1, 3, 7, 2, 4, 7, 8, 9, 1, 2, 3, 4]    返回新数组
console.log(arr1);   //结果为[1, 3, 7, 2, 4, 7, 8, 9];    原数组不变

15. findIndex()

查找目标项的索引只会返回第一个符合要求的索引

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
 let res = arr1.findIndex((item, index) => {
        return item > 2;
      });
console.log(res);   //结果为1   返回符合要求的项的索引     没有符合的返回-1
console.log(arr1);   //原数组不变

16. find()

遍历数组查找目标元素

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
 let res = arr1.find((item, index) => {
        return item > 2;
      });
console.log(res);   //结果为3   返回符合要求的项的值    没有符合的返回undefined
console.log(arr1);   //原数组不变

17. filter()

遍历数组查找符合要求的所有项

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.filter((item, index) => {
        return item > 4;
      });
console.log(res);      //结果为[7, 7, 8, 9]   返回符合要求的所有项   没有符合的返回空数组[]
console.log(arr1);      //原数组不变

18. some()

判断数组中是否至少有一个元素满足条件

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.some((item, index) => {
        return item == 4;
      });
console.log(res);      //结果为true   只要有一项符合要求返回true  否则为false
console.log(arr1);      //原数组不变

19. every()

判断数组中是否所有元素都满足条件

let res = arr1.every((item, index) => {
        return item >1;
      });
console.log(res);      //结果为false   只要有一项 不符合 要求返回false   否则为true
console.log(arr1);      //原数组不变

20. join()

使用一个字符将数组分割成字符串

var arr1 = [1, 3, 7, 2, 4, 7, 8, 9];
let res = arr1.join("*")      //  join()括号里面的内容就是以什么分割的内容  不写或者写逗号,  就是转换成字符串   
let res = arr1.toString()     //也可以用toString转换为字符串
console.log(res);       //结果为1*3*7*2*4*7*8*9     
console.log(arr1);    //原数组不变

21. reduce()

数组合计

// 接收两个参数: 第一个是迭代执行的函数 (包含四个参数:
// 1.prev：上次调用函数的返回值
// 2.cur：当前元素
// 3.index：当前元素索引
// 4.arr：被遍历的数组) 
// 第二个是函数迭代的初始值  默认值是0

var arr = [ 1,2,3,4,5 ]
var newArr = arr.reduce(function(pre,next,index){    
// 执行过程：第一次：pre=1 next=2 index=1 pre+next=3  
// 第二次：pre=3 next=3 index=2 pre+next=6
// 第三次：pre=6 next=4 index=3 pre+next=10
// 第四次：pre=10 next=5 index=4 pre+next=15
return pre + next
})
console.log(newArr) //结果为15

22. reduceRight()

数组合计,与arr.reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加

var arr = [ 1,2,3,4,5 ]
var newArr = arr.reduce(function(pre,next,index){    
// 执行过程：第一次：pre=5 next=4 index=1 pre+next=9
// 第二次：pre=9 next=3 index=2 pre+next=12
// 第三次：pre=12 next=2 index=3 pre+next=14
// 第四次：pre=14 next=1 index=4 pre+next=15
return pre + next
})
console.log(newArr) //结果为15

23. Array.from()

用于将一个类数组对象或者可遍历对象转换成一个真正的数组对象：最基本的要求就是具体length属性的对象；

// 举例1:
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike);   // ['a', 'b', 'c']

// 举例2: 如果没有length属性，输出[]
let array = {
0:“aaa”,
1:“12”,
2:[“bbb”,“ccc”,“ddd”],
}
let arr = Array.from(array);  // 输出结果：[];

// 举例3:
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

// Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)  // [1, 4, 9]

24. Array.of()

将一组值转换成数组，类似于声明数组

let str = '123'
console.log(Array.of(str))   // ['123']
// 等价于
console.log(new Array('123'))  // ['123']
// 但是new Array()有缺点，当只有一个数字时 会当成数组的长度而不是数组的内容
console.log(new Array(2))   //[empty × 2]  是个空数组
console.log(Array.of(2))    // [2]

25. fill()

使用特定值填充数组中的一个或多个元素

// 接收三个参数: 
// 1.用来填充数组元素的值 
// 2.填充开始位置,默认为0  
// 3.填充结束位置(取不到结束位置,默认数组length) 

let arr = [1, 2, 3,  'cc' , 5];
arr.fill(1);
console.log(arr); //[1,1,1,1,1];

26. toLocaleString()

将数组转换为字符串

const array = [22, 3, 31, 12];
const str = array.toLocaleString();
console.log(str); // 22,3,31,12

27. toString()

将数组转换为字符串

const array = [22, 3, 31, 12];
const str1 = array1.toString();
console.log(str1); // 22,3,31,12

28. copyWithin()

用于从一个数组的指定位置开始拷贝元素到另一个数组的指定位置中，同时，返回拷贝过后的数组。

// 接收三个参数: 
// 1.复制到指定目标索引位置
// 2.元素复制起始位置
// 3.停止复制的索引位置 (默认为 array.length)

const array = [1, 2, 3, 4];
let res = array.copyWithin(2,0,1);
console.log(array); // [1, 2, 1, 4]
console.log(res); // [1, 2, 1, 4]

29. flat()

扁平化数组

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

// flat()默认只会“拉平”一层
// flat()方法的参数，表示想要拉平的层数，默认为1。 如果想要多少层都拉成一层,可以传 Infinity
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

// 如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

30. flatMap()

扁平化数组

// flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），
// 然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组 
// 且 flatMap()只能展开一层数组。

[2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
// 相当于 [2, 3, 4].map(x => [x, x*2]).flat()