摘要
本文主要收录了常用的javascript数组的操作,附有详细的解释和代码说明,掌握之后能够优雅地写出日常开发中关于数组的代码,快来学习然后惊艳和你一起工作的小伙伴吧。
生成数组
Array()
// Array(arrayLength), 0 <= arrayLength <= 2^32 - 1
// 生成长度为arrayLength的空数组,其中的每一项为undefined
const arr = new Array(4);
console.log(arr);
console.log(arr[0]);
// [,,,]
// undefined
// Array(element0,element1,...elementN)
// 生成由括号内组成的数组
const arr = new Array('a', 'b', 3, '4', true);
// ["a","b",3,"4",true]
Array.from()
接受两个参数,第一个参数是可迭代的对象,第二个参数是一个函数,用于对每一个迭代对象进行操作 可迭代的对象包含
- 数组
- 类数组
- 字符串
- Set
- Map
// 1. 数组
const arr = Array.from([1,2,3])
// [1,2,3]
// 2. 类数组
const imageElements = document.querySelectorAll('img');
const imageSrcs = Array.from(imageElements, (image) => image.src);
// 3. 字符串
const arr = Array.from('array');
// ["a","r","r","a","y"]
// 4. Set
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]
// 5. Map
const map = new Map([
[1, 2],
[2, 4],
[4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]
Array.of()
// Array.of(ele0,ele1,...,eleN),生成括号内元素对应的数组
const arr = Array.of('a', 'b', 3, '4', true);
// ["a","b",3,"4",true]
判断是否是数组
const arr = Array.of('a', 'b', 3, '4', true);
console.log(arr instanceof Array) // true
console.log(Array.isArray(arr)) // true
操作数组,返回新数组,不对原有数组产生影响
Array.prototype.forEach((element, index, thisArray) => void)
对数组的每个元素执行一次给定的函数
const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
Array.prototype.map((element, index, thisArray) => element)
传入参数为一个函数,对数组进行遍历,每次遍历可以使用函数将数组的每个元素进行修改
const users = [{
name: 'user1',
isVip: true,
title: '一般用户'
}, {
name: 'user1',
isVip: true,
title: '一般用户'
}, {
name: 'user1',
isVip: false,
title: '一般用户'
}];
const newUsers = users.map((user) => {
if (user.isVip) {
return {
...user,
title: 'Vip用户'
}
}
return user;
});
/*
[{
"name": "user1",
"isVip": true,
"title": "Vip用户"
},
{
"name": "user2",
"isVip": true,
"title": "Vip用户"
},
{
"name": "user3",
"isVip": false,
"title": "一般用户"
}]
*/
Array.prototype.filter((element, index, thisArray) => Boolean)
使用传入函数对已有数组进行筛选操作,返回结果为true的元素
const users = [{
name: 'user1',
isVip: true,
title: '一般用户'
}, {
name: 'user2',
isVip: true,
title: '一般用户'
}, {
name: 'user3',
isVip: false,
title: '一般用户'
}];
const newUsers = users.fillter((user) => user.isVip);
/*
[
{
"name": "user1",
"isVip": true,
"title": "一般用户"
},
{
"name": "user2",
"isVip": true,
"title": "一般用户"
}
]
*/
Array.prototype.flat(depth)
创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中
const arr1 = [0, 1, 2, [3, 4]];
arr1.flat();
// [0,1,2,3,4]
const arr2 = [0, 1, [2, [3, [4, 5]]]];
arr2.flat();
// [0, 1, 2, [3, [4, 5]]]
arr2.flat(2);
// [0, 1, 2, 3, [4, 5]]
arr2.flat(Infinity);
// [0, 1, 2, 3, 4, 5]
Array.prototype.concat(element1,element2,...elementN)
合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
// 传入单个数组
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
// array3 => ["a", "b", "c", "d", "e", "f"]
// 传入多个数组
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);
// numbers => [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 传入组合
const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
// alphaNumeric => ['a', 'b', 'c', 1, 2, 3]
// concat是浅拷贝,所以会保留引用
const num1 = [[1]];
const num2 = [2, [3]];
const numbers = num1.concat(num2);
// numbers => [[1], 2, [3]]
// 修改 num1 的第一个元素
num1[0].push(4);
// numbers => [[1, 4], 2, [3]]
Array.prototype.slice(startIndex, endIndex)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
// 只写起始位置,会从起始位置截断至最后
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]
// 写上起始和结束位置
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
// 位置为负数,会从后往前计算
console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]
// 这样就能够获取正数和倒数之间的数据
console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]
数组的查找
Array.prototype.at(index)
返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。
const array1 = [5, 12, 8, 130, 44];
array1.at(2) // 8
array1.at(-2) // 130
Array.prototype.includes(element, startIndex)
判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true
,否则返回 false
。
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// Expected output: true
console.log(pets.includes('at'));
// Expected output: false
// startIndex 可以控制查找的起始位置,若超出数组长度直接返回false
console.log(pets.includes('cat', 1));
// Expected output: false
// 如果 `fromIndex` 为负值,计算出的索引将作为开始搜索 `searchElement` 的位置。如果计算出的索引小于 `0`,则整个数组都会被搜索。
const arr = ["a", "b", "c"];
// 数组长度为 3
// fromIndex 为 -100
// 计算出的索引为 3 + (-100) = -97
arr.includes("a", -100); // true
arr.includes("b", -100); // true
arr.includes("c", -100); // true
arr.includes("a", -2); // false
Array.prototype.indexOf(searchElement, startIndex)
返回数组中第一次出现给定元素的下标,如果不存在则返回 -1。
// 找出指定元素出现的所有位置
const indices = [];
const array = ["a", "b", "a", "c", "a", "d"];
const element = "a";
let idx = array.indexOf(element);
while (idx !== -1) {
indices.push(idx);
idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]
find 系列
Array.prototype.find((element, index, thisArray) => Boolean)
返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
const inventory = [
{ name: "apples", quantity: 2 },
{ name: "bananas", quantity: 0 },
{ name: "cherries", quantity: 5 },
];
function isCherries(fruit) {
return fruit.name === "cherries";
}
console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
Array.prototype.findIndex((element, index, thisArray) => Boolean)
返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
function isPrime(element) {
if (element % 2 === 0 || element < 2) {
return false;
}
for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
if (element % factor === 0) {
return false;
}
}
return true;
}
console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1,没有找到
console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2(array[2] 是 7)
Array.prototype.findLast((element, index, thisArray) => Boolean)
反向迭代数组,并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素,则返回 undefined。
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found);
// Expected output: 130
Array.prototype.findLastIndex((element, index, thisArray) => Boolean)
反向迭代数组,并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素,则返回 -1。
const array1 = [5, 12, 50, 130, 44];
const isLargeNumber = (element) => element > 45;
console.log(array1.findLastIndex(isLargeNumber));
// Expected output: 3
// Index of element with value: 130
检测数组是否通过某条件
Array.prototype.every((element, index, thisArray) => Boolean)
测试一个数组内的所有元素
是否都能通过指定函数的测试。它返回一个布尔值
function isBiggerThan10(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBiggerThan10); // false
[12, 54, 18, 130, 44].every(isBiggerThan10); // true
Array.prototype.some((element, index, thisArray) => Boolean)
测试数组中是否至少有一个元素
通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
堆栈操作
Array.prototype.shift()
从数组中删除第一个
元素,并返回该元素的值。此方法更改数组的长度。
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// Expected output: Array [2, 3]
console.log(firstElement);
// Expected output: 1
Array.prototype.unshift(element1, element2, ..., elementN)
将指定元素添加到数组的开头,并返回数组的新长度
array1.unshift(4, 5)
console.log(array1);
// Expected output: Array [4, 5, 2, 3]
队列操作
Array.prototype.push(element0, element1, ..., elementN)
将指定的元素添加到数组的末尾,并返回新的数组长度。
const plants = ['broccoli'];
['cauliflower', 'cabbage', 'kale', 'tomato'].forEach(item => plants.push(item));
console.log(plants);
// ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
Array.prototype.pop()
从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。
plants.pop();
console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
累计操作
Array.prototype.reduce((prevValue, currentValue, index, thisArray) => calculatedElement, initValue)
对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被用作初始值,迭代器将从第二个元素开始执行(即从索引为 1 而不是 0 的位置开始)。
// 累加
const sum = [1, 2, 3, 4].reduce((prev, current) => prev + current);
// sum => 10
// n的阶乘
const genNArray = n => Array.from(Array(n), (_, index) => index + 1);
const nArray = genNArray(5);
const mult = nArray.reduce((prev, current) => prev * current);
// mult => 120
// 求最大(最小
const getMax = (a, b) => Math.max(a, b);
const getMin = (a, b) => Math.min(a, b);
[1, 100].reduce(getMax); // 100
[1, 100].reduce(getMin); // 1
// 使用 reduce() 来替代 [].filter().map()
// 使用 filter() 和 map() 会遍历数组两次,但是你可以使用 reduce() 只遍历一次并实现相同的效果,从而更高效。
const numbers = [-5, 6, 2, 0];
const doubledPositiveNumbers = numbers.reduce((accumulator, currentValue) => {
if (currentValue > 0) {
const doubled = currentValue * 2;
return [...accumulator, doubled];
}
return accumulator;
}, []);
console.log(doubledPositiveNumbers); // [12, 4]
排序
Array.prototype.sort((firstValue, secondValue) => Number)
对数组的元素进行排序,并返回对相同数组的引用,不返回新数组
。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。
compareFn(a, b) 返回值 | 排序顺序 |
---|---|
> 0 | a 在 b 后,如 [b, a] |
< 0 | a 在 b 前,如 [a, b] |
=== 0 | 保持 a 和 b 原来的顺序 |
function compareFn(a, b) {
if (根据排序标准,a 小于 b) {
return -1;
}
if (根据排序标准,a 大于 b) {
return 1;
}
// a 一定等于 b
return 0;
}
const items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
];
// 根据 value 排序
items.sort((a, b) => a.value - b.value);
// 根据 name 排序
items.sort((a, b) => {
const nameA = a.name.toUpperCase(); // 忽略大小写
const nameB = b.name.toUpperCase(); // 忽略大小写
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// name 必须相等
return 0;
});
Array.prototype.toSorted((firstValue, secondValue) => Number)
toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组,不改变原始数组,使用方法和sort一致。
Array.prototype.reverse()
翻转数组(对调数组内元素),返回原数组引用,不返回新数组。
const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log('reversed:', reversed);
// ["three", "two", "one"]
Array.prototype.toReversed()
翻转数组(对调数组内元素),返回新数组。