JavaScript数组API整理

总结

1. 截至ES7，数组一共有33个标准的API方法和1个非标准的API方法；
2. 其中改变自身的方法9个：push、pop、shift、unshift、sort、splice、reverse、copyWithin、fill；
3. 不改变自身的方法也有9个：concat、join、slice、toString、toLocalString、indexOf、lastIndexOf、toSource、includes；
4. 数组遍历方法12个：forEach、map、filter、some、every、reduce、reduceRight、keys、values、entries、find、findIndex;

标准 / 数组分类	改变自身方法	不改变自身方法	数组遍历方法
ES5及以前	push、pop、shift、unshift、sort、splice、reverse	concat、join、slice、toString、toLocalString、indexOf、lastIndexOf	forEach、map、filter、some、every、reduce、reduceRight
ES6、ES7、ES8	copyWithin、fill	toSource、includes	keys、values、entries、find、findIndex

一、数组构造函数

多数情况我们创建数组的方式有两种：1、使用Array构造器；2、使用[]字面量；

var arr1 = [];                    //创建一个空数组
var arr2 = [5];                   //创建一个具有单个元素的数组
var arr3 = [5,6,7];               //创建一个具有多个元素的数组

var arr1 = new Array();          //创建一个空数组
var arr2 = new Array(5);         //创建一个长度为5，值为空的数组
var arr3 = new Array(5,6,7);     //创建一个具有多个元素的数组

新增的构造方法：Array.of  Array.form

• Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例;
• Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型;
• Array.isArray() 方法用于判断一个对象是否为数组;

Array.isArray([1, 2, 3, 4]);  // --> true

关于一个变量是否是数组的判断方法

var a = [];
// 1.基于instanceof
a instanceof Array;
// 2.基于constructor
a.constructor === Array;
// 3.基于Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);
// 4.基于getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype;
// 5.基于Object.prototype.toString
Object.prototype.toString.apply(a) === '[object Array]';

二、改变自身的方法

pop push shifit unshift 对数组首尾进行操作

let arr = [1,3,4,5,6,7,88,23];
// 移除数组最后一项
console.log("pop:", arr.pop()); // 返回数组移除项：23
console.log("pop:", arr); // [1,3,4,5,6,7,88]
// 数组最后添加一项
console.log("pop:", arr.push(11)); // 返回数组长度：9
console.log("pop:", arr); // [1,3,4,5,6,7,88,23,11]
// 移除数组第一项
console.log("pop:", arr.shift()); // 返回数组移除项：1
console.log("pop:", arr); // [3,4,5,6,7,88,23]
// 数组最前添加一项
console.log("pop:", arr.unshift(33)); // 返回数组长度：9
console.log("pop:", arr); // [33,1,3,4,5,6,7,88,23]

sort 数组排序

let arr = [1,3,4,5,6,7,88,23];
// 系统字符默认排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort())//[ 'Apple', 'Banana', 'Mango', 'Orange' ]
console.log(arr.sort()) //[1,23,2,4,5,6,7,88]

//数字排序
console.log(arr.sort((a, b) => a-b)) //升序
console.log(arr) //[1,3,4,5,6,7,23,88];
console.log(arr.sort((a, b) => b-a)) //降序
console.log(arr) //[88,23,7,6,5,4,3,1]

//数组对象按某一个字段排序
let info = [
    {name: "lili", age: 18},
    {name: "bobo", age: 20},
    {name: "lucy", age: 16}
]
//按年龄升序
info.sort((a, b) => {
    return a.age - b.age
})
console.log(info);

// 题外话---更少的代码处理数组的取最小、大值
console.log(Math.min(...arr))
console.log(Math.min.apply(null, arr))
console.log(Math.max(...arr))
console.log(Math.max.apply(null, arr))

splice 用于添加或删除数组中的元素

//array.splice(index,howmany,item1,.....,itemX)
let arr = [1,2,3];
arr.splice()
console.log(arr) //[1,2,3];

arr.splice(0,1)
console.log(arr) //[2,3];

arr.splice(-1,1)
console.log(arr) //[1,2];

arr.splice(0,0,0,4)
console.log(arr) //[0,4,1,2,3];

reverse 方法用于颠倒数组中元素的顺序。
该函数不会创建新数组，它仅仅是改变原数组的顺序，并返回原数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.reverse();

copyWithin 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。  
array.copyWithin(target, start, end);

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
console.log(fruits)//[ 'Banana', 'Orange', 'Banana', 'Orange' ]

fill 用于将一个固定值替换数组的元素  
array.fill(value, start, end)

let arr = [1,2,3,4,5];
arr.fill(0,3,5)
console.log(arr) //[ 1, 2, 3, 0, 0 ]

三、不改变自身的数组方法

concat 方法是用于连接两个或多个数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2);
console.log(arr) //[ 1, 2, 3, 4, 5, 6 ]
console.log(arr1) //[ 1, 2, 3 ]
console.log(arr2) //[ 4, 5, 6 ]

join 方法就是将array数据中每个元素都转为字符串，用自定义的连接符分割

let joinArr = [1,2,3];
console.log(joinArr.join("")) //123
console.log(joinArr.join("-")) //1-2-3
console.log(joinArr) //[1,2,3]

slice  方法可从已有的数组中返回选定的元素。可提取字符串的某个部分，并以新的字符串返回被提取的部分

let sliceArr = [1,2,3,4,5,6];
console.log(sliceArr.slice()) //[1,2,3,4,5,6]
console.log(sliceArr.slice(1,3)) //[2,3]
console.log(sliceArr) //[1,2,3,4,5,6]

toString方法可把数组转换为字符串，字符串是以逗号分隔，并返回结果；

console.log(sliceArr.toString()) //1,2,3,4,5,6

toLocalString() 方法与 toString() 方法用法基本相同，主要区别在于 toLocalString() 方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。  
indexOf：查找某个字符在字符串第一次出现的位置   
lastIndexOf：从右往左查找某个字符最后(这个最后是左面>>>右边)出现在字符串的位置

let newArr = [4,2,4,4,6,6];
console.log(newArr.indexOf(4)) //0
console.log(newArr.lastIndexOf(4)) //3

toSource 将对象、数组等数据类型转换成可执行的源代码

var arrn = ["apple", "orange", "pear", "banana"];
var sourceArr = arrn.toSource();
console.log(sourceArr);//["apple", "orange", "pear", "banana"]

includes 可以判断一个数组中是否包含某一个元素，并返回true 或者false

let arry = ['a','b','c'];
console.log(arry.includes('a')) //true

四、数组遍历方法

forEach 方法对数组的每个元素执行一次提供的函数;

• 第一个参数是遍历的数组内容
• 第二个参数是对应的数组索引
• 第三个参数是数组本身

var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){
   array[index] == value; //结果为true
   sum+=value; 
});
console.log(sum); //结果为 10

map 返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值
array.map(function(currentValue, index, arr), thisIndex)

let array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
    return item * item;
})
console.log(newArray)  // [1, 4, 9, 16, 25]

filter 它用于把Array的某些元素过滤掉，然后返回剩下的元素。
array.filter(function(currentValue,index,arr), thisValue)

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
console.log(r); // [1, 5, 9, 15]

some 方法用于检测数组中是否有满足指定条件的元素，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测，否则返回false。    
array.some(function(currentValue,index,arr),thisValue)

var ages = [4, 12, 16, 20];
// 检测数组中是否有元素大于 18:
console.log(ages.some(i => i>=18)) //true

every 方法用于检测数组中是否所有元素都满足指定条件，如果有一个元素不满足条件，则表达式返回false , 剩余的元素不会再执行检测，否则返回true；   
array.every(function(currentValue,index,arr),thisValue)

var ages = [4, 12, 16, 20];
// 检测数组中是否有元素大于 18:
console.log(ages.every(i => i>=18)) //false

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)   
reduceRight() 与reduce() 相反是从右到左

var ages = [4, 12, 16, 20];
// 无初始值
var sum = ages.reduce((pre, current) => {
    return pre + current;
})
//有初始值
let sum1 = ages.reduce((prev,curr,index,arr)=>{
   return prev+curr
},100)
console.log(sum)//52
console.log(sum1)//152

entries()，keys()和values() 这三个方法是ES6中扩展的数组迭代方法，

• entries()是对键值对遍历
• keys()是对键名遍历
• values()是对键值遍历

var a = [1,2,3]
for (let [item,index] of a.entries()) {
    console.log(item, index)
}
for (let item of a.values()) {
    console.log(item)
}
for (let item of a.keys()) {
    console.log(item)
}

find与findIndex 这两个方法都是找出数组中的匹配项，它们都接收一个函数参数，该函数中可以自定义匹配条件，找出第一个匹配的项就返回。而它们的区别就在于返回值，find()方法返回的是匹配项的值，如果没找到就返回undefined，
而findIndex()方法返回的是匹配项的下标，如果没找到就返回-1，是不是和indexOf()方法很像。

var a = ['菜鸟', '大佬', '菜鸟', '大佬'];
console.log(a.find(item => { return item == "菜鸟"})) //菜鸟
console.log(a.findIndex(item => {return item == "大佬"}))//3