Javascript数组常见的方法

第一类：原型方法：

栈方法（后进先出）

push

作用：将任意数量的参数逐个添加到数组尾部
影响：破坏了原数组
参数：任意个
返回值： 新数组的长度

pop

作用：删除数组最后一项
影响：破坏了原数组
参数：无
返回值：删除的项，空数组返回undefined

队列方法（先进先出）

unshift

作用：将任意个参数逐个添加到数组前端
影响：破坏了原数组
参数：任意个
返回值：新数组的长度

shift

作用：删除数组第一项
影响：破坏了原数组
参数：无
返回值：删除的项，空数组返回undefined

重排序方法

reverse

参数：无
作用：反转数组
返回值：排序后的数组
影响：破坏了原数组

sort

1）不推荐使用默认排序方法
2）接受一个比较函数作为参数，
3）比较函数接受两个参数，如果第一个参数位于第二个参数之前则返回一个负数，如两个参数相等则返回0，若第一个参数位于第二个参数之后则返回一个正数
4）比较数值数组的比较函数

function ascendingCompare(num1, num2) {
    return num1 - num2;
}

function descendingCompare(num1, num2) {
    return num2 - num1;
}
   

var arr = [1 , 2, 3];
console.log(arr.sort(ascendingCompare) // [1,2,3]
console.log(arr.sort(descendingCompare) // [3,2,1]

5）根据对象数组里的对象的某个指定属性的比较函数（闭包）

function compare(propertyName) {
    return function (object1, object2) {
        return object1[propertyName] - object2[propertyName]
    }
}

var arr [{name: '子虚', age: 12}, {name: '乌有', age: 13}]
console.log(arr.sort(compare(age)) // {name: '子虚', age: 12}, {name: '乌有', age: 13}]

6）返回值：排序后的数组
7）影响：破坏了原数组

操作方法

concat

1）先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的尾部，最后返回这个副本
2）如果参数是一个或多个数组，这该方法会将这些数组中的每一项都添加到结果数组中
3）如果参数不是数组，这些值会被简单的添加到结果数组的末尾
4）如果不传参数，它只是复制数组并返回副本（可用于复制数组）
5）不会破坏原数组

join

1） 将数组中的所有元素拼接成一个字符串并返回
2）可以在join传递一个字符串作为参数，该参数表示连接的方式
3）不会破坏原数组
String.prototype.split是Array.prototype.join的反方法

slice

1）从当前数组中取出一个或多个指定的连续的元素创建数组并返回
2) 当不传参数时，该方法返回原数组所有的项组成的新数组
2）当只有一个参数时，该方法从该参数位置开始到当前数组的所有项
3）当有两个参数时，该方法返回起始和结束位置之间的项，但不包括结束位置的项
4）当参数中有负数的时候，用数组长度加上该数来确定相应的位置
5）不会破坏原数组

splice

1）删除数组中的指定的连续的元素，也可向数组的中部插入项
2）删除：提供两个参数：删除第一项的起始位置，删除的个数
3）插入：提供三个参数：起始位置，0（删除的项数），要插入的项
4）编辑：提供三个参数：起始位置，删除的项数，要添加的项（删除的项数不一定要等于添加的项数）
5）返回从原始数组删除的项组成的数组
6）破坏了原数组

以下为es5新增

位置方法

indexOf/lastIndexOf

1）这两个方法都接受两个参数：要查找的项和（可选的）起始位置，
2）indexOf从数组开头向后查找，lastIndexOf从数组末尾向前查找
3）返回查找的项在数组中的位置，或者在没找到的情况下返回-1
4）使用全等操作符 （NaN不等于NaN）

遍历

forEach

1）对数组每一项运行遍历函数作为第一个参数，第二个参数是绑定遍历函数的this
2）该函数分别接受三个参数：数组元素，数组索引（可选），数组本身（可选）
3）无返回值
4）缺点：无法像for循环那样用break语句提前终止遍历

映射

map

1）对数组每一项运行遍历函数作为第一个参数，第二个参数是绑定遍历函数的this
2）返回每次遍历函数调用的结果组成的数组
3）该遍历函数分别接受三个参数：数组元素，数组索引（可选），数组本身（可选）

过滤

filter

1）对数组每一项运行遍历函数作为第一个参数，第二个参数是绑定遍历函数的this
2）返回该函数会返回true的项组成的数组
3）该遍历函数分别接受三个参数：数组元素，数组索引（可选），数组本身（可选）

检测

every/some

1）它们对数组元素应用指定的函数进行判定，返回true或false
2）every就像数学中的“针对所有”的量词∀，当前仅当数组中的每一项调用指定函数都返回true，它才返回true
3）some就像数学中的“存在”的量词ョ，只要数组中有一项调用指定函数返回true，它就返回true
4）一旦every和some确认返回值就会停止遍历
5）根据数学上的惯例，空数组调用every返回true，some返回false

归纳

reduce/reduceRight

1）使用指定的函数对数组元素进行组合，生成单个值，这在函数式编程中是常见操作，也可成为“注入”和“折叠”
2）reduce第一个参数是执行简化操作的化简函数，化简函数的任务是用某种方法把两个值组合或化简为一个值，并返回化简后的值，第二个参数（可选）是作为化简函数的第一个参数的初始值，如果不传就取数组的第一项
3）化简函数的第一个参数是到目前为止的化简操作累计的结果，第2-4个参数分别是数组元素、数组索引和数组本身
4）reduceRight类似于reduce，不同的是它是从右往左处理

const a = [1,2,3,4,5]
const sum = a.reduce(function(x,y){return x+y}, 0) // 数组求和
const max = a.reduce(function(x,y){return (x>y)?x:y}) // 数组求最大值

以下为es6新增

copyWithin

1）作用：在当前数组内部，将指定位置的成员复制到其他位置
2）参数：cpyWithin(pasteStart, copyStart, copyEnd)
pasteStart：从该位置开始替换元素, 如果为负值，表示从末尾开始计算；
copyStart：从该位置开始读取数据，默认为 0,如果为负值，表示从末尾开始计算；
copyEnd：到该位置前停止读取数据，不包括该位置，默认值为数组的长度,如果为负值，表示从末尾开始计算
3）返回值：当前数组
4）破坏了原数组

find/findIndex

1)find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数(参数依次为当前的值、当前的位置和原数组)，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
2)findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
3）这两个方法都可以接受第二个参数，用来绑定回调函数的this对象
4）这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足

[NaN].indexOf(NaN) // -1
[NaN].findIndex(y => Object.is(NaN, y)) // 0

fill

1）参数：参数1用来填充数组的元素，参数2填充数组的起始位置（可选），参数3填充数组的结束位置（可选，不包括结束位置）

['a', 'b', 'c'].fill(7, 1) // ['a', 7, 7]

2）返回值：新数组
3）破坏了原数组
4）如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象

let arr = new Array(3).fill({name: "Mike"});
// [{name: "Mike"}, {name: "Mike"}, {name: "Mike"}]
arr[0].name = "Ben";
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

keys/values/entries

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历。唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，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"

如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

includes

1)参数：要检测的元素
2）作用：检测某个数组是否包含给定的元素
3）返回值：布尔值
4）使用不一样的判断算法

[NaN].includes(NaN) // true

flat/flatMap

flat
1)用于将嵌套的数组“拉平”，变成一维的数组。
2)参数是想要拉平的层数，默认值为1，如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
3)该方法返回一个新数组.
4)对原数组没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

flatMap
1)对原数组的每个成员执行一个遍历函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。
2)只能拉平一层。
3）第一个参数是一个遍历函数，这个遍历函数有三个参数，分别是当前数组的成员，当前索引，和当前数组，第二个参数是绑定遍历函数的this。
4）返回一个新数组。
5）不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

//只能拉平一层 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

第二类：静态方法：

Array.of()

1)诞生原因：Array()构造器有一个总所周知的陷阱，就是只传一个参数，且这个参数是数字的话，那么不会构造出一个值为这个数字的单元素的数组，而是一个空数组，其length属性为这个数字；
2）Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.from()

1）用于将两类对象转为真正的数组：类似数组的对象（arguments, nodelist）和可遍历（iterable）的对象（Set ,Map, 字符串）

var arrLike = {
    length: 4,
    2: "foo",
}
Array.from(arrLike) // [undefined, undefined, "foo", undefined]

2）第一个参数是要转换的数据，第二个是可选参数，是一个映射回调函数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组，还可以传第三个可选参数，用于指定第二个参数回调函数的this

var arrLike = {
    length: 4,
    2: "foo",
}
Array.from(arrLike, item => item || 0)  // [0, 0 , "foo", 0]

参考资料：《黄皮书》《红皮书第三版》《犀牛书》《阮大神es6》