ES5+ 的数组相关API

前言

数组的API在日常开发中，经常会用到。梳理下，当作复习。

 

ES5 

//静态方法
//判断是否是数组
Array.isArray  

//原型方法
//移除数组最后一项,  并将它返回
Array.prototype.pop

//在数组末尾添加一项，返回添加后新数组的长度
Array.prototype.push

//移除数组开头一项，并将它返回
Array.prototype.shift

//在数组开头添加一项，返回添加后新数组的长度
Array.prototype.unshift

//反转数组，并返回反转后的数组。
Array.prototype.reverse

//基于当前数组创建新数组
//两个参数，从第一个参数开始，到第二个参数之前
//如果不传参数，就是复制数组，不过只能用于非引用类型的深复制
//如果不传第二个参数，就从第一个参数开始，到数组结束。
//如果参数为负数，就从数组末尾开始数
Array.prototype.slice

//合并数组，参数可以任意个，可以是任意值。返回新数组
//参数可以是多个数组
Array.prototype.concat

//判断参数是否存在于数组中，如果存在，返回元素的索引，如果不存在返回-1.
//第二个参数，表示从哪个索引开始检索
Array.prototype.indexOf

//类似indexOf，只不过是从数组末尾开始检索
Array.prototype.lastIndexOf

//数组排序
//没有深入了解，猜测内部是用的双重for循环。
Array.prototype.sort

//可用于数组的增，删，改，很灵活。
//从第一个参数的位置开始操作，第二个参数表示删除多少个
//后续的参数，数组会以第一个参数作为开始的位置，逐个添加进数组中。
//返回值为一个包含被删除项的数组
Array.prototype.splice
var a= [1,2,3];
a.splice(a.length, 0, 4);  //增, 类似 push 方法
a.splice(0, 1);  //删，表示从索引0开始，删除1个。类似 shift 方法
a.splice(1, 1, 'change');  //改， 可以理解成替换

 

ES5 迭代器方法

//对数组的每一项都运行给定的函数，每一项都返回true，则返回true
//第一个参数为callback，callback的内部参数为，item, index, array
//第二个参数为callback运行时使用的this值
Array.prototype.every

//对数组的每一项都运行给定的函数，任意一项返回 ture,则返回 true
//第一个参数为callback，callback的内部参数为，item, index, array
//第二个参数为callback运行时使用的this值
Array.prototype.some

//对数组的每一项都运行给定的函数，返回结果为true的项组成的数组
//第一个参数为callback，callback的内部参数为，item, index, array
//第二个参数为callback运行时使用的this值
Array.prototype.filter

//对数组的每一项都运行给定的函数，返回每次函数调用的结果组成的数组
//第一个参数为callback，callback的内部参数为，item, index, array
//第二个参数为callback运行时使用的this值
Array.prototype.map

//遍历数组。对数组的每一项都运行给定的函数，只运行，返回undefined。不能break。
//第一个参数为callback，callback的内部参数为，item, index, array
//第二个参数为callback运行时使用的this值
Array.prototype.forEach

//累加器。从左到右对数组的每一项都运行给定的函数，并将其减少单一个值
//第一个参数为callback， callback的内部参数为，accumulator，item, index, array
//accumulator 表示上一次调用callback时返回的返回值
//第二个参数表示初始值，用作第一次调用callback时，第一个参数的值。如果没有定义，则将使用数组中的第一个元素。
Array.prototype.reduce

//同reduce, 方向是从右到左
Array.prototype.reduceRight

 

ES5迭代器方法的一些日常应用。适用于函数式编程。

//年龄数组
const ageArr = [15, 16, 17, 18, 19, 20, 21, 22, 23];

//他们是不是都大于18岁？
function greatterThan18(item, index, array) {
    return item > 18;
}

//是否有到了法定结婚年龄的
function greatterThan22(item, index, array) {
    return item >= 22
}

//过滤出到了法定结婚年龄的值
function ageCanMarry(item, index, array) {
    return item >= 22;
}

//过了一年了，让他们都长一岁
function addOne(item, index, array) {
    return item + 1;      
}

//计算下年龄总和
function getAgeTotal(accumulator, item, index, array){
    return accumulator + item;
}

let isAllGreatterThan18 = ageArr.every(greatterThan18);
let hasGreatterThan22 = ageArr.some(greatterThan22);
let getItemCanMarry = ageArr.filter(ageCanMarry);
let ageAdd = ageArr.map(addOne);
let ageTotal = ageArr.reduce(getAgeTotal, 0);

 

ES6

//静态方法
//将类数组（array-like object）和可遍历（iterable）的对象转为真正的数组
//我们就不用 [].slice.call(arrayLike) 了
Array.from

//将一组数据转为数组
//Array.of(1,2,3)  ->  [1,2,3]
Array.of

//原型方法
//没有仔细了解
Array.prototype.copyWithin

//填充数组
//第二个参数表示从哪个位置开始，第三个参数表示到哪个位置之前结束。
//var a = Array(10); a.fill(1);
Array.prototype.fill

//找出第一个符合条件的数组元素，如果没有符合条件的元素，则返回undefined
//参数是一个callback， callback的内部参数是 item, index, array
Array.prototype.find

//找出第一个符合条件的数组元素的索引，如果没有符合条件的元素，则返回 -1。
//参数是一个callback， callback的内部参数是 item, index, array
Array.prototype.findIndex

//遍历数组，将数组的索引和值，生成一个键值对，并返回由所有键值对组成的遍历器对象, 可用 for...of 遍历
Array.prototype.entries

//遍历数组，返回一个由数组所有元素的索引组成的遍历器对象，可用 for...of 遍历
Array.prototype.keys

//遍历数组，返回一个由数组所有元素的值组成的遍历器对象，可用 for...of 遍历
Array.prototype.values

 

ES7

//原型方法
//判断数组中是否存在该元素， 返回值为 boolean 值, 用法与indexOf一样。
//与 indexOf 相比，优势就是可以判断 NaN
Array.prototype.includes