JS数组方法汇总
工具类方法
Array.from() :从一个类似数组或者可迭代对象中创建一个新的数组实例。
用一种更通俗易懂的方式来说,就是Array.from方法用于将两类对象转为真正数组:类数组对象(array-like object)和可遍历(iterable)的对象。
实际应用中,常见的类数组对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
语法:Array.from(arrayLike[, mapFn[, thisArg]])
参数:
arrayLike 想要转换成数组的伪数组对象或可迭代对象。
mapFn (可选参数) 如果指定了该参数,新数组中的每个元素会执行该回调函数。
thisArg (可选参数) 可选参数,执行回调函数 mapFn 时 this 对象。
返回值: 一个新的数组实例
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
Array.isArray() 用于确定传递的值是否是一个 Array
语法:Array.isArray(obj)
参数:obj 需要检测的值;
返回值:如果对象是 Array,则为true; 否则为false
Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
Array.of方法用于将一组值,转换为数组
语法:Array.of(element0[, element1[, ...[, elementN]]])
参数:
elementN
任意个参数,将按顺序成为返回数组中的元素。
返回值:新的 Array 实例。
Array.of 和构造函数Array的区别
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。
Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
遍历方法
Array.prototype.forEach:对数组的每个元素执行一次提供的函数
语法:
array.forEach(callback(currentValue, index, array){
//do something
}, this)
参数:
callback: 为数组中每个元素执行的函数,该函数接收下面3个参数;
currentValue: 当前数组元素;
index(可选): 当前数组索引;
array(可选): 被遍历的数组本身;
this(可选): 当执行callback回调函数时用作this的值(参考对象)
返回值:undefined
示例:
// 打印每个数组元素
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
Array.prototype.map(): 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
语法:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array }[,
thisArg])
参数:
callback:生成新数组元素的函数,有下面3个参数:
currentValue: 当前数组元素;
index(可选): 当前数组索引;
array(可选): 被遍历的数组本身;
thisArg(可选): 当执行callback回调函数时用作this的值(参考对象)
返回值:一个新数组,每个元素都是回调函数的结果。
示例:
// 求数组中每个元素的平方根
let arr = [1, 4, 9];
let new_arr = arr.map(currentValue => {
return Math.sqrt(currentValue)
})
console.log(new_arr)
Array.prototype.reduce():reduce方法把一个函数作用在数组的所有元素。这个函数必须接收至少两个参数,reduce()把函数的返回结果继续和数组的下一个元素做累积计算
语法:
arr.reduce(function callback(accumulator, currentValue[, currentIndex, array]) {
// coding...
}[, initialValue)
参数:
callback: 执行数组中每个值的函数,包含四个参数:
accumulator: 函数回调的返回值;它是上一次调用回调时返回的累积值,或initialValue(见于下方)。
currentValue: 数组正在处理的元素。
currentIndex: 数组中正在处理的当前元素的索引。如果提供了initialValue,则索引号未0,否则索引为1。
array: 调用reduce()的数组。
initialValue: 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值:函数累计处理的结果。
示例:
// 求数组中每个元素的和
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (x, y) {
return x + y;
}
// 10
Array.prototype.reduceRight():reduceRight方法把一个函数作用在数组的所有元素。这个函数必须接收至少两个参数,reduceRight()把函数的返回结果继续和数组的下一个元素做累积计算。和reduce不同的是,reduceRight的遍历顺序是从右到左。
Array.prototype.every(): every方法测试数组的所有元素是否都通过了指定元素的测试。
语法:
arr.erery(callback[, thisArg])
参数:
callback:用来测试每个元素的函数。
thisArg:执行callback时内部指定的this值。
示例:
var arr = [1, 2, 3, 4, 11];
var passed = arr.every(function (x) {
return x < 10;
}
// passed is false
Array.prototype.some():some方法测试数组的所有元素中是否有通过测试的。
语法:
arr.some(callback[, thisArg])
参数:
callback:用来测试每个元素的函数。
thisArg:执行callback时内部指定的this值。
示例:
var arr = [1, 2, 3, 4, 10];
var passed = arr.some(function (x) {
return x < 10;
}
// passed is true
Array.prototype.filter(): filter()方法创建一个数组,其包含通过所提供函数实现的测试的所有元素。
语法:
var new_array = arr.filter(callback(element[, index[, array]])[, thisArg])
参数:
callback
用来测试数组的每个元素的函数。调用时使用参数(element, index, array)。
返回true表示保留该元素(通过测试),false则不保留,它接受三个参数:
element 当前在数组中处理的元素
index(可选) 正在处理元素在数组中的索引
array(可选) 调用了filter的数组
thisArg(可选) 执行callback时的用于 this 的值
示例:
var filtered = [12, 5, 8, 130, 44].filter(currentValue => {
return currentValue > 10;
});
// filtered is [12, 130, 44]
Array.prototype.keys(): 对数组键名(也就是索引值)的遍历,返回一个遍历器对象。
Array.prototype.value(): 对数组键值(也就是数组元素)的遍历,返回一个遍历器对象。
Array.prototype.entries: 对数组键值对(索引值,对应数组元素)的遍历,返回一个遍历器对象。
直接上示例代码:
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
查找方法
Array.prototype.find(): 用于找出第一个满足提供的回调函数的数组成员。所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。否则返回undefined。
Array.prototype.findIndex():用于找出第一个满足提供的回调函数的数组成员。所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员的位置(也就是索引)。否则返回-1。
语法:
arr.find(callback[, thisArg]);
arr.findIndex(callback[, thisArg]);
参数:
callback
针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。
thisArg 可选。执行callback时作为this对象的值.
示例:
[1, 5, 10, 15].find(function(value, index, arr) {
return value % 2 == 0;
}) // 10
[1, 5, 10, 15].find(function(value, index, arr) {
return value % 2 == 0;
}) // 2
Array.prototype.indexOf:indexOf方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
Array.prototype.lastIndexOf:lastIndexOf方法返回在数组中可以找到一个给定元素的最后一个索引(从数组的后面向前查找),如果不存在,则返回-1。
语法:
arr.indexOf(searchElement[, fromIndex = 0])
arr.lastIndexOf(searchElement[, fromIndex = 0])
参数:
searchElement 要查找的元素
fromIndex 开始查找的位置(对indexOf而言)或者开始逆向查找的位置(对lastIndexOf而言)
示例:
var indexof = [1, 5, 10, 5].indexOf(5) // 1
var lastindexof = [1, 5, 10, 5].indexOf(5) // 3
Array.prototype.includes(): includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
语法:
arr.includes(searchElement, fromIndex)
参数:
searchElement 需要查找的元素值。
fromIndex 可选 从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0。
增删元素方法
Array.prototype.pop: 从数组中删除最后一个元素,并返回该元素的值。此方法改变数组的长度。
Array.prototype.push: 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
示例:
// pop
let myFish = ["angel", "clown", "mandarin", "surgeon"];
let popped = myFish.pop();
console.log(myFish);
// ["angel", "clown", "mandarin"]
console.log(popped);
// surgeon
// push
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");
console.log(sports);
// ["soccer", "baseball", "football", "swimming"]
console.log(total);
// 4
Array.prototype.shift(): 从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
Array.prototype.unshift(): 将一个或多个元素添加到数组的开头,并返回该数组的新长度。
示例:
// shift
let myFish = ["angel", "clown", "mandarin", "surgeon"];
let shift_length = myFish.shift();
console.log(myFish);
// ["clown", "mandarin", "surgeon"]
console.log(shift_length);
// angel
// unshift
let sports = ["soccer", "baseball"];
let unshift_length = sports.unshift("football", "swimming");
console.log(sports);
// ["football", "swimming", "soccer", "baseball"]
Array.prototype.splice: 通过删除现有元素和/或添加新元素来更改一个数组的内容
语法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数:
start:指定修改的开始位置(从0开始计数)
deleteCount:可选 指定要删除的数组元素的个数,如果省略该参数,则从start开始的所有数组元素都被删除(包括第start位)
item1, item2, ... : 可选,要添加进数组的元素,如果省略该参数,则只删除数组元素
返回值:
如果没有删除元素,则返回空数组。由被删除的数组元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。
示例:
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1, 'big', 'small');
console.log(myFish);
console.log(removed)
// > Array ["angel", "clown", "drum", "big", "small", "sturgeon"]
// > Array ["mandarin"]
拼接/截取方法
Array.prototype.concat(): 拼接两个或者多个数组,此方法不会修改原数组,而是返回一个新的数组。
示例:
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var new_arr = arr1.concat(arr2);
// new_arr [1, 2, 3, 4, 5, 6]
Array.prototype.slice(): 返回一个新的数组对象,这一对象是一个由 begin和end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变。
语法:arr.slice(begin, end);
参数:
begin: 可选 从该索引处开始提取原数组中的元素,如果省略该参数,则从0开始。
end: 可选 从该索引处结束提取原数组中的元素,如果省略该参数,则会一直提取到原数组末尾。
示例:
var arr = [1, 2, 3, 4, 5, 6];
var sub_arr = arr.splice(1, 4);
// sub_arr [2, 3, 4]
排序方法
Array.prototype.reverse(): 将数组中元素的位置颠倒,第一个数组元素成为最后一个数组元素,最后一个数组元素成为第一个。
示例:
var arr = [1, 2, 3, 4, 5, 6];
arr.reverse();
// arr -> [6, 5, 4, 3, 2, 1]
Array.prototype.sort():MDN给出的定义是用原地算法对数组的元素进行排序,并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。具体是咋排的我也不知道,我的理解就是按照字符串的Unicode码点进行排序的。
语法:arr.sort([compareFunction])
参数:
compareFunction: 用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序;如果不省略 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:
- 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
- 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript
标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本); - 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
- compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
示例:
//升序
function sort_increase(a, b) {
return a - b
}
// 降序
function sort_decrease(a, b) {
return b - a
}
var arr = [3, 0 ,6 ,2 ,4 ,7]
arr.sort(sort_increase)
console.log(arr)
arr.sort(sort_decrease)
console.log(arr)
// > Array [7, 6, 4, 3, 2, 0]
// > Array [0, 2, 3, 4, 6, 7]
其他
Array.prototype.copyWith():在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,这个方法会修改原有数组。
语法:arr.prototype.copyWith(target, start = 0, end = this.length)
参数:
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
示例:
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
Array.prototype.fill(): 使用给定值,填充一个数组。这个方法会修改原有数组。
语法:arr.fill(value[, start[, end]])
参数:
value 用来填充数组元素的值。
start 可选 起始索引,默认值为0。
end 可选 终止索引(不包括该位置),默认值为 this.length。
示例:
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
Array.protytye.join(): 一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
语法:arr.join(separator)
参数:
separator 指定一个字符串来分隔数组的每个元素,如果省略(),数组元素用逗号分隔。默认为 ","。
Array.prototype.toLocalString(): 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
Array.prototype.toString(): 返回一个字符串,表示指定的数组及其元素.