JS：Array 方法大总结（至 ES6）

Array	方法名	影响原数组
检测数组	instanceof、Array.isArray
创建数组	from、of、fill
转换方法	valueOf、toString、toLocaleString、join、flat、flatMap
栈方法（尾）	push、pop	√
队列方法（首）	shift、unshift	√
重排序方法	reverse、sort	√
操作方法	concat、slice、splice、copyWithin	splice、copyWithin
位置方法	indexOf、lastIndexOf、find、findIndex、includes
迭代方法	every、some、filter、map、forEach、entries、keys、values
归并方法	reduce、reduceRight
扩展运算符	…

标红为 ES6 方法

问题记录

[“1”, “2”, “3”].map(parseInt)

结果为：[1,NaN,NaN]

parseInt(string,radix)

• 其中 radix 为可选参数
• 按照 radix 进制进行转换，当为0的时候默认为10进制，如果 radix 在2-36之外会返回 NaN

array.map(function callBackFn(item,index,array){})

• map 对 array 中的每一项传入回调函数得到一个新的数组，结果不改变原数组
• 其中 item 为 array 中的值，index 为 array 的对应索引

于是原式可以转换为：[parseInt(“1”,0),parseInt(“2”,1),parseInt(“3”,2)]

过滤数组空值

let result1 = [1, 2, 0, undefined, null, false, ''].filter(Boolean);
console.log(result1);

反转字符串

str.split("").reverse().join("")

数组打平

toString flat flatMap

数组求和

var numbers = [1,2,3,4,5,4,3,2,1];
var sum = numbers.reduce(function(prev,cur,index,array){
    return prev+cur;
})
console.log(sum); //25

检测数组

对一个全局作用域而言

value instanceof Array

存在两个以上不同版本的 Array 构造函数时

Array.isArray(obj)

• 返回 bool 类型

创建数组

Array.prototype.from(arrayLike[, mapFn[, thisArg]])

从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

• arrayLike 想要转换成数组的伪数组对象或可迭代对象
• mapFn 如果指定了该参数，新数组中的每个元素会执行该回调函数
• thisArg 可选参数，执行回调函数 mapFn 时 this 对象

Array.prototype.of(element0[, element1[, …[, elementN]]])

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

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

Array.prototype.fill(value[, start[, end]])

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

• value 用来填充数组元素的值
• start 起始索引，默认值为0
• end 终止索引，默认值为 this.length

转换方法

object.prototype.valueOf()

返回数组本身。

object.prototype.toString()

返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串，实际上调用数组每一项的 toString() 方法，可用于数组打平。

Array.prototype.toLocaleString([locales[,options]])

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串。

• locales 带有BCP 47语言标记的字符串或字符串数组
• 可配置属性的对象

以上三种默认都会以逗号分隔字符串的形式返回数组项。

Array.prototype.join([separator])

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

var colors =
[
    "red",
    {
        toLocaleString:function(){
            return "BLUE";
        },
        toString:function(){
            return "blue";
        }
    },
    "green"
];
console.log(colors.valueOf()); //Array(3) ["red", Object, "green"]
console.log(colors.toString()); //red,blue,green
console.log(colors.toLocaleString()); //red,BLUE,green
console.log(colors.join()); //red,blue,green
console.log(colors.join("||")); //red||blue||green

Array.prototype.flat([depth])

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

• depth 指定要提取嵌套数组的结构深度，默认值为 1，不管有多少层嵌套都要转换为一维数组，可以用 Infinity 关键字作为参数。
• 返回一个包含将数组与子数组中所有元素的新数组。

Array.prototype.flatMap(callback[, thisArg])

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

• 返回一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

栈方法（尾）

Array.prototype.push(element1, …, elementN)

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

Array.prototype.pop()

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

队列方法（首）

Array.prototype.shift()

从数组中删除第一个元素，并返回该元素的值。

Array.prototype.unshift(element1, …, elementN)

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

重排序方法

Array.prototype.reverse()

将数组中元素的位置颠倒，并返回该数组。

Array.prototype.sort([compareFunction])

用原地算法对数组的元素进行排序，并返回数组。默认情况下，按照升序排列数组，为每项调用 toString() 方法，比较字符串大小（会出现"10"<“5”）。

• sort() 接收一个比较函数作为参数，比较函数接收两个参数，若第一个参数应该在前，则返回-1，如果相等则返回0，如果第一个参数应该在后，则返回1。

var values = [1,15,10,5,2];
console.log(values.sort((a,b)=>a-b))); //Array(5) [1, 2, 5, 10, 15]

操作方法

Array.prototype.concat(value1[, value2[, …[, valueN]]])

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

Array.prototype.slice([begin[, end]])

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

• 可接受负数参数，用数组长度加上该负数来确定相应的位置。

Array.prototype.splice(start[, deleteCount[, item1[, item2[, …]]]])

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。删除项（2个参数）、插入或替换（>2个参数）。

• start 指定修改的开始位置（从0计数）
• deleteCount 整数，表示要移除的数组元素的个数
• item1, item2, … 要添加进数组的元素,从start 位置开始

//删除项
var colors = ["red","green","blue"];
//2个参数：要删除的第一项、要删除的项数
var removed = colors.splice(0,1);
console.log(colors); //Array(2) ["green", "blue"]
console.log(removed); //Array(1) ["red"]

//插入项
//3个参数：起始位置、要删除的项数、要插入的项（任意数量）
removed = colors.splice(1,0,"yellow","orange");
console.log(colors); //Array(4) ["green", "yellow", "orange", "blue"]
console.log(removed); //Array(0) []

//替换项
//3个参数：起始位置、要删除的项数、要插入的项（任意数量）
removed = colors.splice(2,1,"red","purple");
console.log(colors); //Array(5) ["green", "yellow", "red", "purple", "blue"]
console.log(removed); //Array(1) ["orange"]

Array.prototype.copyWithin(target[, start[, end]])

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

• target 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
• start 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
• end 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。

位置方法

Array.prototype.indexOf(searchElement[, fromIndex])

Array.prototype.lastIndexOf(searchElement[, fromIndex])

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

• 在比较第一个参数与数组的每一项时，会使用全等操作符（要求查找的项必须严格相等）

Array.prototype.find(callback[, thisArg])

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

• 参数是一个回调函数，找到返回值为 true 的数组项。

Array.prototype.findIndex()

与 find() 类似，返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

Array.prototype.includes(valueToFind[, fromIndex])

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

迭代方法

5个迭代方法，都接收两个参数：要在每一项上进行的函数和（可选）运行该函数的作用域对象。

• 传入这些方法的函数会接收三个函数：数组项的值、该项在数组中的位置和数组对象本身

Array.prototype.every(callback[, thisArg])

对数组的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true

Array.prototype.filter(callback[, thisArg])

对数组中每一项运行给定函数，返回该函数会返回 true 的项组成的数组

Array.prototype.forEach(callback[, thisArg])

对数组中的每一项运行给定函数，无返回值

Array.prototype.map(callback[, thisArg])

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

Array.prototype.some(callback[, thisArg])

对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true

以上方法均不会影响数组中的值。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return (item>2);
})
console.log(everyResult); //false
var someResult = numbers.some(function(item,index,array){
    return (item>2);
})
console.log(someResult); //true
var filterResult = numbers.filter(function(item,index,array){
    return (item>2);
})
console.log(filterResult); //Array(5) [3, 4, 5, 4, 3]
var mapResult = numbers.map(function(item,index,array){
    return (item*2);
})
console.log(mapResult); //Array(9) [2, 4, 6, 8, 10, 8, 6, 4, …]

Array.prototype.entries()，Array.prototype.keys()、Array.prototype.values()

用于遍历数组。它们都返回一个遍历器对象，可以用 for…of 循环进行遍历，唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历，entries() 是对键值对的遍历。

归并方法

Array.prototype.reduce()、Array.prototype.reduceRight()

迭代数组所有项，构建一个最终返回的值。

• reduce() 从数组的第一项开始，逐个遍历到最后，reduceright() 从数组的最后一项开始，向前遍历每一项。
• 接收两个参数：在每一项上调用的函数和（可选的）作为归并基础的初始值。
• 传入的函数接收的4个参数：前一个值，当前值，项的索引和数组对象。
  这个函数返回的任何值都会作为第一个参数自动传给下一项。

var numbers = [1,2,3,4,5,4,3,2,1];
var sum = numbers.reduce(function(prev,cur,index,array){
    return prev+cur;
})
console.log(sum); //25

扩展运算符

…

将一个数组转为用逗号分隔的参数序列