Javascript 数组方法整理
- 1、 Array.map() 与 Array.forEach()
- 2、Array.filter()
- 3、Array.reduce() 与 Array.reduceRight()
- 4、Array.fill()
- 5、Array.find()
- 6、Array.indexOf() 与 Array.lastIndexOf()
- 7、Array.findIndex()
- 8、Array.includes()
- 9 、Array.pop()
- 10、Array.shift()
- 11、Array.push()
- 12、Array.unshift()
- 13、Array.splice()
- 14、Array.slice()
- 15、Array.join()
- 16、Array.reverse()
- 17、Array.sort()
- 18、Array.some()
- 19、Array.every()
- 20、Array.from() 与 Object.keys(object) 与 Object.values(object)
- 21、Array.of()
- 22、Array.isArray()
- 23、Array.at()
- 24、Array.copyWithin()
- 25、Array.concat()
- 26、Array.entries()
- 27、Array.toString()
1、 Array.map() 与 Array.forEach()
相同点:
- 都是循环遍历数组中的每一项
- 每次执行匿名函数参数一样,分别是item(当前每一项)、index(索引值)、arr(原数组)
- 只能遍历数组
- 匿名函数中的this都是指向window;
- 两种方法都不能用 break 中断
不同点:
- map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
forEach()方法返回undefinedconst numbers = [1, 2, 3, 4, 5]; // 使用 forEach() const squareUsingForEach = []; numbers.forEach(x => squareUsingForEach.push(x*x)); // 使用 map() const squareUsingMap = numbers.map(x => x*x); console.log(squareUsingForEach); // [1, 4, 9, 16, 25] console.log(squareUsingMap); // [1, 4, 9, 16, 25]
- map() 方法按照原始数组元素顺序依次处理元素。
- map() 不会对空数组进行检测,它也不会改变原始数组。
const list = [1, 2, 3, 4]; list.map((el) => el * 2); // [2, 4, 6, 8]
- map() 速度比 forEach() 快;
//性能对比 const users=new Array(10000).fill("半生过往"); // 1. forEach() console.time("forEach"); const newArray = []; users.forEach((item) => { newArray.push(item) }); console.timeEnd("forEach"); // 2. map() console.time("map"); const newArray2 = users.map ((item) => { return item }); console.timeEnd("map");
- map()方法输出可以与其他方法(如reduce()、sort()、filter())链接在一起,以便在一条语句中执行多个操作。
forEach()是一个终端方法,这意味着它不能与其他方法链接,因为它返回undefined。//在这里插入代码片使用以下两种方法找出数组中每个元素的平方和: const numbers = [1, 2, 3, 4, 5]; // 使用 forEach() const squareUsingForEach = [] let sumOfSquareUsingForEach = 0; numbers.forEach(x => squareUsingForEach.push(x*x)); squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square); // 使用 map() const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total,value) => total + value); console.log(sumOfSquareUsingForEach); // 55 console.log(sumOfSquareUsingMap); // 55
2、Array.filter()
三个参数:
item 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象(原数组)
filter() 方法创建一个新的数组,并返回一个包含所有元素的新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意:
- filter() 不会对空数组进行检测,它也不会改变原始数组。
const list = [1, 2, 3, 4]; console.log(list.filter((el) => el % 2 === 0)); // [2, 4]
3、Array.reduce() 与 Array.reduceRight()
四个参数:
total 必需。初始值 或 函数先前返回的值。
item 必需。当前元素的值。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象(原数组)
reduce() 方法接收一个函数作为累加器 (result/tоtаl) 中,数组中的每个值(从左到右)开始缩减,最终减为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意:
- reduce() 对于空数组是不会执行回调函数的。
const list = [1, 2, 3, 4, 5]; console.log(list.reduce((total, item) => total + item, 0)); // 15
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意:
- reduceRight() 对于空数组是不会执行回调函数的。
const list = [1, 2, 3, 4, 5]; console.log(list.reduceRight((total, item) => total + item, 0)); // 15
4、Array.fill()
fill() 方法用于将一个固定值替换数组的元素。
三个参数:
value 必需。填充的替换值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)
const list = [1, 2, 3, 4, 5];
console.log(list.fill(0)); // [0, 0, 0, 0, 0]
5、Array.find()
-
返回满足条件数组中第一个元素的值。否则返回undefined。
-
当数组中的元素满足条件时返回 true , find() 返回符合条件的元素,之后的值不会再调用执行函数。
三个参数: value 必需。填充的替换值。 start 可选。开始填充位置。 end 可选。停止填充位置 (默认为 array.length)
const list = [1, 2, 3, 4, 5];
console.log(list.find((el) => el === 3)); // 3
console.log(list.find((el) => el === 6)); // undefined
6、Array.indexOf() 与 Array.lastIndexOf()
-
indexOf() 方法可返回数组中某个指定的元素位置。
-
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
-
如果在数组中没找到指定元素则返回 -1。
三个参数: item 必需。查找的元素。 start 可选。数组中开始检索的位置。
const list = [1, 2, 3, 4, 5, 3, 4, 5];
console.log(list.indexOf(3)); // 2 (从开始位置查找,查找到第一个 3 下标为 2)
console.log(list.indexOf(3,4)); // 6 (从下标为 4 位置开始查找,查找到第它后面的第一个个 3,也就是整个数组里的第二个三 下标为 6)
console.log(list.indexOf(6)); // -1 (没有找到 元素为 6 的数据)
lastIndexOf() 使用方法 同 indexOf()
- lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。
- 如果要检索的元素没有出现,则该方法返回 -1。
7、Array.findIndex()
-
返回满足条件的数组中第一个元素的索引。否则返回 -1
-
注意: findIndex() 对于空数组,函数是不会执行的。不改变数组的原始值。
三个参数: item 必需。当前元素的值。 index 可选。当前元素的数组索引。 arr 可选。当前元素所属的数组对象(原数组)
const array = [5, 12, 8, 130, 44];
console.log(array.findIndex((element) => element > 13)); // 3
8、Array.includes()
-
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
两个参数: item 必需。需要查找的元素值。 index 可选。从该索引处开始查找,如果为负值,则按升序从 array.length + index 的索引开始搜索,如果计算出的索引小于 0,则整个数组都会被搜索。
const list = [1, 2, 3, 4, 5];
console.log(list.includes(3)); // true
console.log(list.includes(6)); // false
console.log(list.includes(3,-1)); // true //数组长度是5 index 是 -1 computed index 是 5 + (-1) = 4
console.log(list.includes(3,-100)); // true //数组长度是5 index 是 -100 computed index 是 5 + (-100) = -95 小于 0 整个数组都会被搜索
console.log(list.includes(3,5)); // false
9 、Array.pop()
- pop() 方法用于删除数组的最后一个元素并返回删除的元素。
- 注意:此方法改变数组的长度!
const list = [1, 2, 3, 4, 5];
console.log(list.pop()); // 5 当前删除的数据
console.log(list); // [1, 2, 3, 4] 最新数组
10、Array.shift()
- shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
- 注意, 此方法改变数组的长度!
const list = [1, 2, 3, 4, 5];
console.log(list.shift()); // 1 当前删除的数据
console.log(list); // [2, 3, 4, 5] 最新数组
11、Array.push()
将新元素附加到数组的末尾,并返回新的长度。
参数
item1,item2, ..., itemX 可选。向数组末尾位置添加一个或者多个元素。
const list = [1, 2, 3, 4, 5];
console.log(list.push(6)); // 数组长度6
console.log(list); // [1, 2, 3, 4, 5, 6]
12、Array.unshift()
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
参数
item1,item2, ..., itemX 可选。向数组起始位置添加一个或者多个元素。
const list = [1, 2, 3, 4, 5];
console.log(list.unshift(0)); // 数组长度 6
console.log(list); // [0, 1, 2, 3, 4, 5]
13、Array.splice()
splice() 方法从数组添加/删除项目,并返回删除的项目,注意,splice() 方法会改变原始数组。
三个参数
index: 数组开始下标
len: 替换/删除的长度
item: 替换的值,删除操作的话 item为空
const list = [1, 2, 3, 4, 5];
console.log(list.splice(1, 2)); // 从下标1 开始 删除 两个 [2, 3]
console.log(list); // [1, 4, 5]
//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr);
//['a','c','d'];
//删除起始下标为1,长度为2的一个值(len设置2)
var arr2 = ['a','b','c','d']
arr2.splice(1,2);
console.log(arr2);
//['a','d']
//替换起始下标为1,长度为1的一个值为‘ttt',len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);
//['a','ttt','c','d']
var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2);
//['a','ttt','d'] 替换起始下标为1,长度为2的两个值为‘ttt',len设置的1
// 添加 ---- len设置为0,item为添加的值
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);
//['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'
14、Array.slice()
- slice() 方法可从已有的数组中返回选定的元素。【截取数组】
- slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分
- 不会改变原始数组。
const list = [1, 2, 3, 4, 5];
console.log(list.slice(1, 2)); // 从下标1 开始 删除 两个 [2, 3]
console.log(list); // [1, 2, 3, 4, 5]
15、Array.join()
- join() 方法将数组作为字符串返回,元素将由指定的分隔符分隔,默认分隔符是逗号 (,)。
- 注意,join() 方法不会改变原始数组。
const list = [1, 2, 3, 4, 5];
console.log(list.join(', ')); // "1, 2, 3, 4, 5"
16、Array.reverse()
reverse() 方法反转数组中元素的顺序,但是reverse() 方法会改变原始数组。
const list = [1, 2, 3, 4, 5];
console.log(list.reverse()); // [5, 4, 3, 2, 1]
console.log(list); // [5, 4, 3, 2, 1]
17、Array.sort()
- sort() 方法对数组的项目进行排序。排序顺序可以是按字母或数字,也可以是升序(向上)或降序(向下)。
- 默认情况下,sort() 方法将按字母和升序将值作为字符串进行排序。
- 但是,如果数字按字符串排序,则 “25” 大于 “100” ,因为 “2” 大于 “1”。
- 正因为如此,sort() 方法在对数字进行排序时会产生不正确的结果。
- 我们可以通过提供“比较函数”来解决此问题。
- 注意,sort() 方法会改变原始数组。
const array = ['D', 'B', 'A', 'C'];
console.log(array.sort()); // ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
console.log(array.sort()); // [1, 10, 2, 3, 4]
console.log(array.sort((a, b) => a - b)); // [1, 2, 3, 4, 10]
18、Array.some()
-
some() 方法用于检测数组中的元素是否满足指定条件(函数提供),它会依次执行数组的每个元素,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;如果没有满足条件的元素,则返回false。
-
注意:some() 不会对空数组进行检测,some() 也不会改变原始数组。
const list = [1, 2, 3, 4, 5];
console.log(list.some((el) => el === 3)); // true
console.log(list.some((el) => el === 6)); // false
19、Array.every()
-
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供),every() 方法使用指定函数检测数组中的所有元素,如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测;如果所有元素都满足条件,则返回 true。
-
注意:every() 不会对空数组进行检测,every() 也不会改变原始数组。
const list = [1, 2, 3, 4, 5];
console.log(list.every((el) => el === 3)); // false
const list = [2, 4, 6, 8, 10];
console.log(list.every((el) => el%2 === 0)); // true
20、Array.from() 与 Object.keys(object) 与 Object.values(object)
-
from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
-
用于数组的浅拷贝。就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
-
object中必须有length属性,返回的数组长度取决于length长度, key 值必须是数值
三个参数 object 必需,要转换为数组的对象。 mapFunction 可选,数组中每个元素要调用的函数。 thisValue 可选,映射函数(mapFunction)中的 this 对象。
const obj = {
0: '1',
1: '2',
2: '3',
'length': 3
}
const arr = Array.from(obj)
console.log(arr);//['1', '2', '3']
//const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
//console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
- 返回一个对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致
const obj = {
0: '1',
1: '2',
2: '3',
}
const arr = Object.keys(obj)
console.log(arr); //['1', '2', '3']
- 与第一种不同的是不需要length属性,返回一个对象所有可枚举属性值
let obj = {
0: '1',
1: '2',
2: '3',
}
let arr = Object.values(obj)
console.log(arr); //['1', '2', '3']
21、Array.of()
array.of()函数是JavaScript中的內置函数,它使用变量作为函数的参数创建一个新的数组实例。
const list = Array.of(1, 2, 3, 4, 5);
console.log(list); // [1, 2, 3, 4, 5]
22、Array.isArray()
- isArray() 方法用于判断一个对象是否为数组。
- 如果对象是数组返回 true,否则返回 false。
console.log(Array.isArray([1, 2, 3, 4, 5])); // true
console.log(Array.isArray(5)); // false
23、Array.at()
返回指定索引处的值。
const list = [1, 2, 3, 4, 5];
console.log(list2.at(1)); // 2
console.log(list2.at(-1)); // 5
console.log(list2.at(-2)); // 4
24、Array.copyWithin()
copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,但不会改变原数组的长度。
三个参数
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4);
console.log(list)// [4, 2, 3, 4, 5]
25、Array.concat()
-
concat() 方法用于连接两个或多个数组。
-
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
多个参数 array2, array3, ..., arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
const A = ["1", "2"];
const B = ["3", "4", "5"];
const C = ["6", "7"];
const ABC = A.concat(B,C);
console.log(ABC)//["1", "2", "3", "4", "5", "6", "7"]
26、Array.entries()
- entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。
- 迭代对象中数组的索引值作为 key, 数组元素作为 value。
let obj = {
0: 'A',
1: 'B',
2: 'C',
3: 'D',
}
let arr = Object.entries(obj)
console.log(arr);
// ['0', "A"]
// ['1', "B"]
// ['2', "C"]
// ['3', "D"]
const fruits = ["A", "B", "C", "D"];
let arr1 = fruits.entries();
console.log(arr1);
// ['0', "A"]
// ['1', "B"]
// ['2', "C"]
// ['3', "D"]
27、Array.toString()
- toString() 方法可把数组转换为字符串,并返回结果。
- 注意: 数组中的元素之间用逗号分隔。
const A = ["1", "2", "3", "4", "5"]
A.toString() // "1", "2", "3", "4", "5"