28个Javascript数组方法

精品 | 发表于 | 分类于 | 浏览: | 5.4k | 24 分钟

数组提供了很多方法，为了让开发变得简单高效，这里整理汇总了一些有用的JavaScript数组方法。

整理一

Array.map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

1
2
3
4
5
const list = [😫, 😫, 😫, 😫];
list.map((⚪️) => 😀); // [😀, 😀, 😀, 😀]

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

Array.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

1
2
3
4
5
6
const list = [😀, 😫, 😀, 😫];
list.filter((⚪️) => ⚪️ === 😀); // [😀, 😀]

// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

Array.reduce()

reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

1
2
3
4
5
6
const list = [😀, 😫, 😀, 😫, 🤪];
list.reduce((⬜️, ⚪️) => ⬜️ + ⚪️); // 😀 + 😫 + 😀 + 😫 + 🤪

// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

Array.reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

1
2
3
4
5
6
const list = [😀, 😫, 😀, 😫, 🤪];
list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // 🤪 + 😫 + 😀 + 😫 + 😀

// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

Array.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

1
2
3
4
5
6
const list = [😀, 😫, 😀, 😫, 🤪];
list.fill(😀); // [😀, 😀, 😀, 😀, 😀]


const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

Array.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.find((⚪️) => ⚪️ === 😀); // 😀
list.find((⚪️) => ⚪️ === 😝); // undefined


const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

Array.indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.indexOf(😀); // 0
list.indexOf(😡); // -1

// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

Array.lastIndexOf()

1
arr.lastIndexOf(searchElement[, fromIndex])

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.lastIndexOf(😀); // 3
list.lastIndexOf(😀, 1); // 0

// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

Array.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const list = [😀, 😫, 😀, 😫, 🤪];
list.findIndex((⚪️) => ⚪️ === 😀); // 0

// You might be thinking how it's different from `indexOf` 🤔
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

// OR
const array = [{
  id: 😀
}, {
  id: 😫
}, {
  id: 🤪
}];

array.findIndex((element) => element.id === 🤪); // 2

Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

1
2
3
4
5
6
7
const list = [😀, 😫, 😀, 😫, 🤪];
list.includes(😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

Array.pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.pop(); // 🤪
list; // [😀, 😫, 😀, 😫]

// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

Array.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.push(😡); // 5
list; // [😀, 😫, 😀, 😫, 🤪, 😡]

// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

Array.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

1
2
const list = [😀, 😫, 😀, 😫, 🤪]; list.shift(); // 😀 list; // [😫, 😀, 😫, 🤪]
// Code const list = [1, 2, 3, 4, 5]; list.shift(); // 1 list; // [2, 3, 4, 5]

Array.unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.unshift(😡); // 6
list; // [😡, 😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

Array.splice()

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

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.splice(1, 2); // [😀, 😫]
list; // [😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]

Array.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.slice(1, 3); // [😫, 😀]
list; // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

Array.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

1
2
3
4
5
6
const list = [😀, 😫, 😀, 😫, 🤪];
list.join('〰️'); // "😀〰️😫〰️😀〰️😫〰️🤪"

// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"

Array.reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.reverse(); // [🤪, 😫, 😀, 😫, 😀]
list; // [🤪, 😫, 😀, 😫, 😀]

// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

Array.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

1
2
3
4
5
6
7
8
9
10
11
const list = [😀, 😫, 😀, 😫, 🤪];
list.sort(); // [😀, 😀, 😫, 😫, 🤪]

// This make more sense 🤔
const array = ['D', 'B', 'A', 'C'];
array.sort(); // 😀 ['A', 'B', 'C', 'D']

// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // 😧 [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // 😀 [1, 2, 3, 4, 10]

Array.some()

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

1
2
3
4
5
6
7
8
const list = [😀, 😫, 😀, 😫, 🤪];
list.some((⚪️) => ⚪️ === 😀); // true
list.some((⚪️) => ⚪️ === 😡); // false

// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

Array.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

1
2
3
4
5
6
7
8
9
10
11
12
const list = [😀, 😫, 😀, 😫, 🤪];
list.every((⚪️) => ⚪️ === 😀); // false

const list = [😀, 😀, 😀, 😀, 😀];
list.every((⚪️) => ⚪️ === 😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

1
2
3
4
5
6
7
8
const list = 😀😫😀😫🤪;
Array.from(list); // [😀, 😫, 😀, 😫, 🤪]

const set = new Set(['😀', '😫', '😀', '😫', '🤪']);
Array.from(set); // [😀, 😫, 🤪]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个 undefined 组成的数组）。

1
2
3
4
5
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

1
2
3
4
5
6
Array.isArray([😀, 😫, 😀, 😫, 🤪]); // true
Array.isArray(🤪); // false

// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

Array.at()

at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

1
2
3
4
5
6
7
8
9
10
11
12
const list = [😀, 😫, 😀, 😫, 🤪];
list.at(1); // 😫

// Return from last 🤔
list.at(-1); // 🤪
list.at(-2); // 😫

// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

Array.copyWithin()

1
arr.copyWithin(target[, start[, end]])

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

1
2
3
4
5
6
7
8
9
const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(1, 3); // [😀, 😀, 🤪, 😫, 🤪]

const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(0, 3, 4); // [😫, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

如果没看懂，可以看MDN介绍：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin

Array.flat()

1
2
var newArray = arr.flat([depth])
// depth 可选:指定要提取嵌套数组的结构深度，默认值为 1。

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

1
2
3
4
5
6
const list = [😀, 😫, [😀, 😫, 🤪]];
list.flat(Infinity); // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Array.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

1
2
3
4
5
6
const list = [😀, 😫, [😀, 😫, 🤪]];
list.flatMap((⚪️) => [⚪️, ⚪️ + ⚪️ ]); // [😀, 😀😀, 😫, 😫😫, 😀, 😀😀, 😫, 😫😫, 🤪, 🤪🤪]

// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

整理二

Array.map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意，map() 不会对空数组进行检测，它也不会改变原始数组。

1
2
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

Array.filter()

filter() 方法创建一个新的数组，并返回一个包含所有元素的新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter() 不会对空数组进行检测，它也不会改变原始数组。

1
2
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

Array.reduce()

reduce() 方法接收一个函数作为累加器 (result/tоtаl) 中，数组中的每个值（从左到右）开始缩减，最终减为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意:，reduce() 对于空数组是不会执行回调函数的。

1
2
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

Array.reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

注意， reduce() 对于空数组是不会执行回调函数的。

1
2
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

Array.fill()

用静态值填充数组中的元素。

1
2
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

Array.find()

返回满足提供的测试功能的数组中第一个元素的值。否则返回undefined。

1
2
3
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

Array.indexOf()

返回可以在数组中找到给定元素的第一个索引，如果不存在，则返回 -1。

1
2
3
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

Array.lastIndexOf()

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。

如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

1
2
3
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

Array.findIndex()

返回满足提供的测试功能的数组中第一个元素的索引。否则返回 -1。

1
2
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

Array.includes()

如果给定元素存在于数组中，则返回 true。

1
2
3
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

Array.pop()

从数组中删除最后一个元素并返回该元素。

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

Array.push()

将新元素附加到数组的末尾，并返回新的长度。

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

Array.shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

注意， 此方法改变数组的长度！

1
2
3
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

Array.unshift()

unshift() 方法将新项添加到数组的开头，并返回新的长度。

注意：unshift() 方法会改变数组的长度。

1
2
3
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

Array.splice()

splice() 方法从数组添加/删除项目，并返回删除的项目，注意，splice() 方法会改变原始数组。

1
2
3
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]

Array.slice()

返回数组中被选中的元素，选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束。注意，slice() 方法不会改变原始数组。

1
2
3
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

Array.join()

join() 方法将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符是逗号 (,)。注意，join() 方法不会改变原始数组。

1
2
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"

Array.reverse()

reverse() 方法反转数组中元素的顺序，但是reverse() 方法会改变原始数组。

1
2
3
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

Array.sort()

sort() 方法对数组的项目进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。

默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。

这适用于字符串（”Apple” 出现在 “Banana” 之前）。但是，如果数字按字符串排序，则 “25” 大于 “100” ，因为 “2” 大于 “1”。

正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。

可以通过提供“比较函数”来解决此问题。

注意，sort() 方法会改变原始数组。

1
2
3
4
5
6
const array = ['D', 'B', 'A', 'C'];
array.sort(); // ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // [1, 2, 3, 4, 10]

Array.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供），它会依次执行数组的每个元素，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。

注意：some() 不会对空数组进行检测，some() 也不会改变原始数组。

1
2
3
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

Array.every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），every() 方法使用指定函数检测数组中的所有元素，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。

注意：every() 不会对空数组进行检测，every() 也不会改变原始数组。

1
2
3
4
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false
const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

Array.from()

Сreаtes 从аrrаy-like or iterаble оbjeсt 创建一个新的аrrаy。

1
2
const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.of()

array.of()函数是JavaScript中的內置函数，它使用变量作为函数的参数创建一个新的数组实例。

1
2
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]

Array.isArray()

如果给定的值是一个数组，则返回 true。

1
2
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

Array.at()

返回指定索引处的值。

1
2
3
4
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

Array.copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，但不会改变原数组的长度。

1
2
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

整理三

影响原数组

push()

  1. 接收任意数量的参数，并将他们添加到数组的末尾，并返回最新长度
  2. 用法：
1
2
3
4
const arr = [0, 1, 2, 3];
const newarr = arr.push(4, 5, 6);
console.log(arr);//[0,,1,2,3,4,5,6]
console.log(newarr);//7

unshift()

  1. 在数组的开头添加任意多个值，然后返回新的数组长度
  2. 用法：
1
2
3
4
const arr = [0, 1, 2, 3];
const newarr = arr.unshift(4, 5, 6);
console.log(arr); //[4,5,6,0,1,2,3]
console.log(newarr);//7

splice()

  1. 传入三个参数，分别是起始位置，要删除的元素数量，插入的元素

  2. 返回的是被删除的元素

  3. 用法：

1
2
3
4
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.splice(2, 3, 'red', 'yellow', 'blue');
console.log(arr);[ 0, 1, 'red', 'yellow', 'blue', 5, 6, 7, 8, 9 ]
console.log(newarr);//[ 2, 3, 4 ]

pop()

  1. 删除数组的最后一项
  2. 减少数组的长度并影响原数组
  3. 返回删除的那个元素
  4. 用法：
1
2
3
4
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.pop();
console.log(arr);//[0, 1, 2, 3, 4, 5, 6, 7, 8]
console.log(newarr);//9

shift()

  1. 删除数组的第一项
  2. 减少数组的长度并影响原数组
  3. 返回被删除的那个元素
  4. 用法：
1
2
3
4
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.shift();
console.log(arr);//[1, 2, 3, 4, 5,6, 7, 8, 9]
console.log(newarr);//0

reverse()

  1. 将数组的元素方向调转排列
  2. 用法：
1
2
3
4
const arr = [3, 6, 9, 2, 5, 8, 1, 4, 7]
const newarr = arr.reverse()
console.log(arr);
console.log(newarr);

sort()

  1. 传入一个比较函数判断数组是从大到小或者从小到大排列
  2. 用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
const arr = [3, 6, 9, 2, 5, 8, 1, 4, 7, 11, 22]
function fn(num1, num2) {
    if (num1 > num2) {
        return -1
    } else if (num1 < num2) {
        return 1
    } else {
        return 0
    }
}
const newarr = arr.sort(fn)
console.log(arr);//[22, 11, 9, 8, 7,6,  5, 4, 3, 2,6,  5, 4, 3, 2,]
console.log(newarr);//[22, 11, 9, 8, 7,6,  5, 4, 3, 2,6,  5, 4, 3, 2,]

不影响原数组

concat()

  1. 创建一个当前数组的副本，把参数添加到副本的末尾
  2. 返回新数组
  3. 用法：
1
2
3
4
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.concat('red', 'yellow', 'blue');
console.log(arr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newarr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'red', 'yellow', 'blue']

slice()

  1. 创建一个包含原有数组中一个或多个元素的新数组
  2. slice(起始位置,最后位置)，在一个新数组返回数组的起始位置到最后位置的数字

用法：

1
2
3
4
5
6
7
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.slice(2);
const newarr2 = arr.slice(2, 4);

console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(newarr);//[3, 4, 5, 6, 7, 8, 9]]
console.log(newarr2);//[3, 4]

indexOf()

  1. 返回要查找的元素在数组中的位置，如果数组中有相同的即返回查找到的第一个
  2. 找到返回元素在数组中的下标，没找到返回-1

用法：

1
2
3
4
5
6
const arr = [0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const num = arr.indexOf(99)
const num2 = arr.indexOf(0)
console.log(arr);//[0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num);//-1
console.log(num2);//0

includes()

  1. 返回要查找的元素在数组中的位置

  2. 找到返回true，没找到false

  3. 用法：

1
2
3
4
5
6
const arr = [0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const num = arr.includes(99)
const num2 = arr.includes(0)
console.log(arr);//[0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num);//false
console.log(num2);//true

find()

  1. 返回符合条件的第一个元素，不符合返回undefined
  2. 对于空数组，函数是不会执行的
  3. 用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

function fn(num) {
    return num > 33
}

function fn1(num) {
    return num > 2
}
const someone = arr.find(fn)
const someone1 = arr.find(fn1)
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(someone);//undefined
console.log(someone1);//3

join()

  1. 接收一个字符串分隔符，返回以该字符分隔的字符串
  2. 用法：
1
2
3
4
5
6
const arr = [3, 6, 9, 2, 5, 8, 1, 4, 7, 11, 22]

const newarr = arr.join('//')

console.log(arr);//[3, 6, 9, 2, 5, 8, 1, 4, 7, 11, 22]
console.log(newarr);//3//6//9//2//5//8//1//4//7//11//22

some()

  1. 对数组每一项都运行传入的函数，如果有一项达到标准返回true，则这个方法为true
  2. item是元素，index是元素的下标，array当前元素属于的数组对象
  3. 用法：
1
2
3
4
5
6
let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];

let newarr = arr.some((item, index, array) => item > 5);

console.log(arr) // [3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr) // true

every()

  1. 对数组每一项都运行传入的函数，如果有一项达到标准返回false，则这个方法为false
  2. item是元素，index是元素的下标，array当前元素属于的数组对象
  3. 用法：
1
2
3
4
let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];
let newarr = arr.some((item, index, array) => item > 5);
console.log(arr) // [3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr) // false

forEach()

  1. 遍历数组，for循环的加强版
  2. item是数组的每一项，index是数组的每一项下标，array是当前元素属于的数组对象
  3. 用法：
1
2
3
4
5
6
7
8
9
let arr = [9, 6, 3];

arr.forEach(function(item, index, newarr) {
  console.log(item);
  console.log(index);
  console.log(newarr);
});

console.log(arr);

filter()

  1. 对数组每一项都运行传入的函数，符合条件的组成新数组后返回
  2. item是数组的每一项，index是数组的每一项下标，array是当前元素属于的数组对象
  3. 用法：
1
2
3
4
let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];
const newarr = arr.filter((item, index, array) => item > 3)
console.log(arr);//[3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr);//[ 6, 9, 5, 8, 4, 7 ]

map()

  1. 对数组每一项都运行传入的函数，符合条件的组成新数组后返回
  2. item是数组的每一项，index是数组的每一项下标，array是当前元素属于的数组对象
  3. 返回每次调用函数的结果组成的新数组
  4. 用法：
1
2
3
4
5
6
let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];

const newarr = arr.map((item, index, array) => item > 3)

console.log(arr);//[3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr);//大于3为true，小于为false
相关文章
点击查看

本文标题:28个Javascript数组方法

文章作者:LiJing

发布时间:2022年08月01日 - 10:35:03

最后更新:2023年06月10日 - 23:44:54

原始链接:https://blog-next.xiaojingge.com/posts/1875201410.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
倍感荣幸
晶哥小站
请多关照
❤️
❤️