JS数组方法汇总

头像
猪猪猪惠婷
    阅读 9 分钟

    工具类方法

    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(): 返回一个字符串，表示指定的数组及其元素.

    数组方法数组javascript
    猪猪猪惠婷
    298 声望10 粉丝

    正在努力成为一名还不错的前端工程师

    « 上一篇
    Object构造函数常用的方法
    下一篇 »
    微信开发之微信jssdk录音功能开发

    引用和评论

    推荐阅读
    头像
    JavaScript模块化简述

    猪猪猪惠婷阅读 1.7k

    头像
    100个React最佳实践小技巧

    夕水赞 27阅读 6.8k评论 4

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.9k评论 3

    0 条评论
    得票最新