JavaScript中常用的数组方法

Posted 2023-03-03 Huang_xianlong

在日常开发中，我们会接触到js中数组的一些方法，这些方法对我们来说，可以很便利的达到我们想要的结果，但是因为方法比较多，有些方法也不常用，可能会过一段时间就会忘记，那么在这里我整理了一些数组的方法，供大家查阅。

一、改变原数组的

• Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。

let arr = [1,2,3];
arr.push(4,5,6);
//arr = [1,2,3,4,5,6];

• Array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。

let arr = [1,2,3];
var del = arr.pop();
// del = 3;
// arr = [1,2];

• Array.unshift()，向数组的开头添加一个或多个元素，并返回新的数组长度。

let arr = [1,2,3];
var res = arr.unshift(0);
// res = 4;
// arr = [0,1,2,3];

• Array.shift()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。

let arr = [1,2,3];
var res = arr.shift();
// res = 1;
// arr = [2,3];

• Array.reverse()，将数组倒序。

let arr = [1,2,3];
arr.reverse();
// arr = [3,2,1];

• Array.sort()，对数组元素进行排序。按照字符串UniCode码排序。

let arr = [1,4,2,5,3];
// 从小到大
arr.sort(function(a, b)return a-b);
// [1,2,3,4,5]
// 从大到小
arr.sort(function(a, b)return b-a);
// [5,4,3,2,1]

• Array.splice(index,howmany,arr1,arr2…) ，用于添加或删除数组中的元素。从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。

//移除数组的第三个元素，并在数组第三个位置添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
//Banana,Orange,Lemon,Kiwi,Mango

二、不改变原数组的

• Array.concat(arr1,arr2…)，合并两个或多个数组，生成一个新的数组。

let arr = [1,2];
let arr1 = [3,4];
let arr2 = [5,6];
let res = arr.concat(arr1,arr2);
//res = [1,2,3,4,5,6]
//arr = [1,2]

• Array.join()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

let arr = [1,2,3,4,5];
let str1 = arr.join();
let str2 = arr.join('-');
//str1=1,2,3,4,5
//str2=1-2-3-4-5

• Array.slice() 按照条件查找出其中的部分内容。

  参数：

  array.slice(n, m)，从索引n开始查找到m处（不包含m）

  array.slice(n) 第二个参数省略，则一直查找到末尾

  array.slice(0)原样输出内容，可以实现数组克隆

  array.slice(-n,-m) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项

  返回值：返回一个新数组

  是否改变原数组：不改变

let arr = [1,2,3,4];
let res = arr.slice(2,4);
// res = [3,4]

• Array.map( function ( item, index, arr) )，原数组的每一项执行函数后，返回一个新的数组。

第一个参数:item,必须,当前元素的值

第二个参数:index,可选,当前元素在数组中的索引值

第三个参数:arr,当前元素属于的数组对象

特点：

(1) 函数执行次数 === 数组长度

(2) 函数内部的return

return 新的元素，如果没有return，则map的返回值都是undefined

(3) map方法的返回值

返回映射之后的新数组

const arr = [88,90,100,20,50]
const res = arr.map(item => item * 0.8)

• Array.forEach(function ( item, index,arr)  )，用于调用数组的每个元素，并将元素传递给回调函数。（注意该方法和map的区别，若直接打印Array.forEach，结果为undefined）。

第一个参数: item,必须,当前元素的值

第二个参数 : index,可选,当前元素在数组中的索引值

第三个参数 : arr,当前元素所处的数组对象

注意点：

(1) forEach() 对于空数组是不会执行回调函数的。

(2) forEach() 是不支持的 continue 与 break 语句的，利用try...catch在特定时机抛出异常达到跳出循环的效果。

const arr = [1,2,3,4,5]
arr.forEach( (item , index ) => 
    console.log( item, index )
)

• Array.filter(function)，过滤数组中，符合条件的元素并返回一个新的数组。

let arr = [1,2,3,4];
let res = arr.filter(item => item > 2);
// res = [3,4]

• Array.reduce(function)，reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let arr = [1,2,3,4,5];
let res1 = arr.reduce((a,b) => a + b));
let res2 = arr.reduce((a,b) => a * b));
// arr = [1,2,3,4,5]
// res1 = 15
// res1 = 120

• Array.some(function)，对数组中的每一项进行判断，若都不符合则返回false，否则返回true。

const arr = [10,20.50,60,70,80]
const res = arr.some(item => item < 0)
// res: flase

• Array.every(function)，对数组中的每一项进行判断，若都符合则返回true，否则返回false。

const arr = [10,20,30,40,50,60]
const res = arr.every(item => item > 5)
// res: true

• Array.indexOf()，将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。如果在数组中没找到指定元素则返回 -1。

//语法
// array.indexOf(item,start) 
//item 必须 要查找的元素的位置，
//start 非必须可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
let food= ["番茄", "胡萝卜", "排骨", "苹果"];
let a = food.indexOf("苹果");
console.log(a) // 3
let b= food.indexOf("香蕉");
console.log(b) // -1