Array数组常用对象方法,整理归类方便查阅

28,522 阅读8分钟

影响原数组方法(变异方法)

这些方法会改变原数组

push()

push()方法用于向数组末尾添加一个或多个元素,并返回修改后的数组的新长度。

const list = [1, 2];
const length = list.push(3,4,5);
console.log(list);  //[1,2,3,4,5]
console.log(length);   //5
const list = [1, 2];
const length = list.push(3,4,5);
console.log(list);  //[1,2,3,4,5]
console.log(length);   //5

pop()

pop() 方法用于删除并返回数组的最后一个元素。

const list = [1,2,3,4];
const lastElement  = list.pop();
console.log(list);  //[1,2,3]
console.log(lastElement);   //4const list = [1,2,3,4];
const lastElement  = list.pop();
console.log(list);  //[1,2,3]
console.log(lastElement);   //4

shift()

移除并返回数组开头的元素

const array = [1, 2, 3];
const firstElement = array.shift();
console.log(array); // [2, 3]
console.log(firstElement); // 1const array = [1, 2, 3];
const firstElement = array.shift();
console.log(array); // [2, 3]
console.log(firstElement); // 1

unshift()

在数组开头添加一个或多个元素,并返回新的长度

const array = [1, 2, 3];
const newLength = array.unshift(0, 0);
console.log(array); // [0, 0, 1, 2, 3]
console.log(newLength); // 5const array = [1, 2, 3];
const newLength = array.unshift(0, 0);
console.log(array); // [0, 0, 1, 2, 3]
console.log(newLength); // 5

splice()

splice() 方法用于从数组中删除、替换或添加元素,并返回被删除的元素组成的数组(如果有删除的话)

array.splice(start, deleteCount, item1, item2, ...)

start表示要修改的起始位置,deleteCount表示要删除的元素个数,item1、item2等表示要添加的元素。如果deleteCount为0,则表示只添加元素,不删除元素。

const array = [1, 2, 3, 4, 5];
const removed = array.splice(1, 2, "a", "b"); //从下标1开始删除2个元素并在重新插入“a”“b”两个元素
console.log(array); // [ 1, 'a', 'b',4, 5 ]
console.log(removed); // [ 2, 3 ]const array = [1, 2, 3, 4, 5];
const removed = array.splice(1, 2, "a", "b"); //从下标1开始删除2个元素并在重新插入“a”“b”两个元素
console.log(array); // [ 1, 'a', 'b',4, 5 ]
console.log(removed); // [ 2, 3 ]

reverse()

反转数组元素的顺序

const array = [1, 2, 3];
console.log(array.reverse()); // [3, 2, 1]const array = [1, 2, 3];
console.log(array.reverse()); // [3, 2, 1]

sort()

排序数组元素的顺序,

可以传入一个函数(不传则按照 Unicode 码点进行默认排序):函数接收两个参数,通常被称为 a 和 b,表示进行比较的两个元素。比较函数的返回值规则如下:(a,b)=>{return a-b}

  1. 如果返回值小于 0,则 a 排在 b 前面。
  2. 如果返回值等于 0,则 a 和 b 的相对位置不变。
  3. 如果返回值大于 0,则 a 排在 b 后面。
const array = [3, 1, 4, 1, 5, 9, 2];
array.sort();
console.log(array); // [1, 1, 2, 3, 4, 5, 9]

const array = [3, 1, 4, 1, 5, 9, 2];
array.sort((a,b)=>{return b-a});
console.log(array); // [9, 5, 4, 3, 2, 1,1]
const array = [3, 1, 4, 1, 5, 9, 2];
array.sort();
console.log(array); // [1, 1, 2, 3, 4, 5, 9]

const array = [3, 1, 4, 1, 5, 9, 2];
array.sort((a,b)=>{return b-a});
console.log(array); // [9, 5, 4, 3, 2, 1,1]

不影响原数组的方法

以下方法不会改变原始数组,而是返回新的数组。

concat()

合并两个或多个数组,返回一个新的数组

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const newArray = array1.concat(array2,array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const newArray = array1.concat(array2,array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

join()

将数组中的所有元素以指定的分隔符连接成一个字符串

const array = ["A", "B", "C"];
const result = array.join("-");
console.log(result); // "A-B-C"const array = ["A", "B", "C"];
const result = array.join("-");
console.log(result); // "A-B-C"

slice()

用于从数组中截取指定位置的元素,返回一个新的数组。

array.slice(start, end) ,其中,startend都是可选参数,表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组,包含从startend不包括end)的元素。

const array = ["A", "B", "C", "D", "E"];
const newArray1 = array.slice(1, 4);
const newArray2 = array.slice();
const newArray3 = array.slice(2);
const newArray4 = array.slice(5);
console.log(newArray1); // ["B", "C", "D"]
console.log(newArray2); // ["A", "B", "C", "D", "E"]
console.log(newArray3); // ["C", "D", "E"]
console.log(newArray4); // []const array = ["A", "B", "C", "D", "E"];
const newArray1 = array.slice(1, 4);
const newArray2 = array.slice();
const newArray3 = array.slice(2);
const newArray4 = array.slice(5);
console.log(newArray1); // ["B", "C", "D"]
console.log(newArray2); // ["A", "B", "C", "D", "E"]
console.log(newArray3); // ["C", "D", "E"]
console.log(newArray4); // []

toString()

把数组转换为字符串并以逗号隔开,并返回该字符串

const array = ["A", "B", "C"];
const result = array.toString();
console.log(result); // "A,B,C"const array = ["A", "B", "C"];
const result = array.toString();
console.log(result); // "A,B,C"

toLocaleString()

将数组转换为一个由数组元素组成的字符串,元素之间同样用逗号分隔,但是它会根据当前环境的语言和地区设置来决定元素的格式。

//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19

const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19

const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000

遍历数组方法

forEach()

对数组中的每个元素执行一个回调函数

const array = [1, 2, 3, 4, 5];
array.forEach((element)=>{
  console.log(element);
});const array = [1, 2, 3, 4, 5];
array.forEach((element)=>{
  console.log(element);
});

map()

对数组中的每个元素执行一个回调函数,并返回一个新的数组。

const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(element) {
  return element * 2;
});
console.log(newArray); // [2, 4, 6, 8, 10]const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(element) {
  return element * 2;
});
console.log(newArray); // [2, 4, 6, 8, 10]

filter()

对数组中的每个元素执行一个回调函数,并返回一个符合条件的元素组成的新数组

const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(element) {
  return element % 2 === 0;
});
console.log(newArray); // [2, 4]const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(element) {
  return element % 2 === 0;
});
console.log(newArray); // [2, 4]

reduce()

对数组中的每个元素执行一个回调函数,并返回一个累加结果

array.reduce(callback, initialValue)

initialValue:初始值

callback可以接收四个参数,分别是:

  1. accumulator:累加器,用于存储上一次回调函数的返回值或初始值。
  2. currentValue:当前元素的值。
  3. currentIndex:当前元素的索引。
  4. array:数组对象本身。
const array = [1, 2, 3, 4, 5];
const sum = array.reduce(function(acc, element) {
  return acc + element;
}, 0);
console.log(sum); // 15

//根据数组生成键值对
const array = [{id:1,value:'a'}, {id:2,value:'b'}];
const newArr = array.reduce(function(acc, item) {
  console.log(item)
  return {...acc,[item.id]:item}
}, {});
console.log(newArr); //{"1": {"id": 1,"value": "a"},"2": {"id": 2,"value": "b"}}
const array = [1, 2, 3, 4, 5];
const sum = array.reduce(function(acc, element) {
  return acc + element;
}, 0);
console.log(sum); // 15

//根据数组生成键值对
const array = [{id:1,value:'a'}, {id:2,value:'b'}];
const newArr = array.reduce(function(acc, item) {
  console.log(item)
  return {...acc,[item.id]:item}
}, {});
console.log(newArr); //{"1": {"id": 1,"value": "a"},"2": {"id": 2,"value": "b"}}

every()

用来检测是否所有元素都符合指定条件的方法。如果所有元素都满足条件,则返回true;否则返回false。

array.every(callback[, thisArg])

其中,callback是一个函数,用来测试每个元素是否满足指定条件。callback函数可以接受以下三个参数:

  • element:当前元素的值。
  • index:当前元素的索引。
  • array:被遍历的数组。

thisArg参数是可选的,用来指定callback函数中this的值。

const arr = [1, 2, 3, 4, 5];
const result = arr.every(item => item > 0);
console.log(result); // true

const result2 = arr.every(item => item > 2);
console.log(result2); // false

查询数组方法

indexOf()

indexOf方法只会返回第一个匹配项的位置。如果数组中存在多个相同的元素,该方法只会返回第一个元素的位置。indexOf方法还可以接受一个可选的第二个参数,用于指定从哪个位置开始查找。

const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3);
const index2 = array.indexOf(3,3);
console.log(index); // 2
console.log(index2); // -1const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3);
const index2 = array.indexOf(3,3);
console.log(index); // 2
console.log(index2); // -1

lastIndexOf()

用于查找数组中某个元素最后一次出现的索引(位置),如果找到则返回该索引值,否则返回 -1。

const array = [1, 5, 3, 4, 5];
const index = array.lastIndexOf(5);
console.log(index); // 4const array = [1, 5, 3, 4, 5];
const index = array.lastIndexOf(5);
console.log(index); // 4

includes()

用于检查数组中是否包含某个元素,如果包含则返回 true,否则返回 false。

const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // falseconst array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // false

find()

查找数组中符合条件的第一个元素,如果找到返回该元素,否则返回undefined

const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const result = array.find(function(element) {
  return element.age >= 30;
});
console.log(result); // {name: "B", age: 30}const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const result = array.find(function(element) {
  return element.age >= 30;
});
console.log(result); // {name: "B", age: 30}

findIndex()

查找数组中符合条件的第一个元素的索引,如果找到返回该索引,否则返回-1。

const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const index = array.findIndex(function(element) {
  return element.age >= 30;
});
console.log(index); // 1const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const index = array.findIndex(function(element) {
  return element.age >= 30;
});
console.log(index); // 1

some()

返回一个布尔值,表示数组中是否存在满足指定条件的元素。当有一个元素满足条件时,立即返回true。如果数组中没有满足条件的元素,则返回false。

const arr = [1, 2, 3, 4, 5];
const result = arr.some(item => item > 3); // true

转换数组方法

Array.from()

将一个类数组对象或可迭代对象转换为数组。

const array = Array.from("ABC");
console.log(array); // ["A", "B", "C"]const array = Array.from("ABC");
console.log(array); // ["A", "B", "C"]

Array.of()

以参数形式创建一个新数组.

const array = Array.of(1, 2, 3);
console.log(array); // [1, 2, 3]const array = Array.of(1, 2, 3);
console.log(array); // [1, 2, 3]

Array.isArray()

判断一个对象是否是一个数组

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("ABC")); // falseconsole.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("ABC")); // false