数组API

一、会改变原数组

splice()

let newArr = arr.splice(start,count,value1,value2...);

用法：

​ 删除数组中的元素，会直接在原数组上操作

参数：

​ start：开始的下标

​ count：删除的数量

​ value…：删除以后补充的元素

​ 如果count为空表示删除到最后，value为空表示不补充任何元素；返回删除的元素，原数组会发生变化

返回值：

​ 返回一个新的数组都是要删除的元素

案例：

let arr = [0,1, 2, 3, 4,5,6];
let newArr = arr.splice(2,3,"111","222","333");
console.log(arr);    // [0, 1, "111", "222", "333", 5, 6]
console.log(newArr);   // [2, 3, 4]

reverse()

let newArr = arr.reverse();

用法：

​ 翻转数组中的元素

参数：

返回值：

​ 返回翻转后的数组

案例：

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

push()

let newArr = arr.push(value..);

用法：

​ 在数组的末尾添加元素

参数：

​ value…：要添加的元素列表

返回值：

​ 返回数组的长度

案例：

let arr = [1]
let arrLenght = arr.push(2,3);
console.log(arr);   //[1, 2, 3]
console.log(arrLenght)   //3

pop()

let newArr = arr.pop();

用法：

​ 删除数组末尾的一个元素

参数：

返回值：

​ 返回删除的元素

案例：

let arr = [1,2,3]
let arrLenght = arr.pop();
console.log(arr);   //[1, 2]
console.log(arrLenght)   //3

unshift()

let newArr = arr.unshift(value...);

用法：

​ 在数组的开头添加元素

参数：

​ value…：要添加的元素列表

返回值：

​ 返回数组的长度

案例：

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

shift()

let newArr = arr.shift(value...);

用法：

​ 删除数组开头的一个元素

参数：

​ value…：要添加的元素列表

返回值：

​ 返回删除的元素

案例：

let arr = [0,1,2,3]
let arrLenght = arr.shift();
console.log(arr);   //[1,2,3]
console.log(arrLenght)   //0

sort()

array.sort(sortby)

用法：

​ sort() 函数用于将当前数组对象的元素按指定顺序进行排序，并返回排序后的数组。

参数：

​ sortby：可选，回调函数，规定排序顺序，每个元素都会执行这个函数

返回值：

​ 返回排好序的原数组

说明：

1. 没有参数时默认排序顺序是根据字符串UniCode码进行排序

2. 有参数时比较回调函数的参数a和b

   若 a 小于 b，即 a - b 小于零，则返回一个小于零的值，数组将按照升序排列。

   若 a 等于 b，则返回 0 。

   若 a 大于 b, 即 a - b 大于零，则返回一个大于零的值，数组将按照降序排列

   a -->代表每一次执行匿名函时候，找到的数组中的当前项；
   b -->代表当前项的后一项；

案例：

var arr = [268,65,314,39,52];
arr.sort( (a,b) => a-b );
console.log(arr); 
// [39, 52, 65, 268, 314]

var arr = [268,65,314,39,52];
arr.sort( (a,b) => b-a );
console.log(arr); 
// [314, 268, 65, 52, 39]

按照数组中对象的某一个属性值进行排序

var arr = [
	{"name":"LiMing","money":"3000"},
    {"name":"Jenny","money":"1000"},
	{"name":"Danny","money":"2000"},
];

function rich(prop){
    return function(a,b){
        var value1 = a[prop];
        var value2 = b[prop];
        return value1 - value2;
    }
}
console.log(arr.sort(rich('money')))

forEach()

array.forEach(function(elem,index,arr), thisValue)

js有五个迭代方法，分别为：every、some、filter、map、forEach

用法：

​ 方法用于调用数组的每个元素，并将元素传递给回调函数，回调函数在对拿出的元素进行操作（这里会发生按值传递，具体见下文）。

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ thisValue：可选。对象作为该执行回调时使用，传递给回调函数，用作“this”值，没有值为undefined

返回值：

​ 不会有返回值只是循环操作

案例：

var arr = [1,2,3];
arr.forEach(function(elem,i,arr){
		 elem = elem*2;
	  })
console.log(arr); // [1, 2, 3]

var arr = [1,2,3];
arr.forEach(function(elem,i,arr){
		 arr[i] = elem*2;
	  })
console.log(arr); // [2, 4, 6]

var objs=[{x:1},{x:2},{x:3}]
objs.forEach(function(elem,i,arr){
    elem.x*=2;
})
console.log(objs);
//[{x: 2},{x: 4},{x: 6}]

看以上案例，第一个直接对elem进行操作，并没有改变原数组中的元素，是因为这时发生了按值传递，把原数组中当前元素复制了一个副本出来进行操作，这时操作副本对原来的值并没有任何影响。

第二个是通过地址值找到了当前的数组，直接在原数组上进行赋值，所以第一个没有任何改变，第二个发生了变化。

第三个是按值传递时复制了一个地址副本，在对elem元素操作时先通过地址值找原数组中的对象再进行操作。

按值传递传送门

注意：

1. 不会对空数组进行循环
2. 修改元素值时注意当前元素是原始类型还是引用类型，原始类型用回调函数参数中数组.下标，引用类型直接用回调函数参数中的当前元素

二、不会改变原数组

toString()

let stringObject=arr.toString();

用法：

​ 将数组元素转为字符串，按逗号分隔

参数：

返回值：

​ 转化后的字符串

案例：

console.log([1,2,3].toString());  //"1,2,3"

join()

let stringObject=arr.join();

用法：

​ 将数组元素转字符串，可以按照指定的字符串分隔元素

参数：

​ 指定的要分隔符字符串

返回值：

​ 转化后的字符串

案例：

console.log([1,2,3].join("|"));  //"1|2|3"

concat()

let arrayObject=arr.concat(arr1,arr2...);

用法：

​ 拼接arr1,arr2…多个数组到arr中

参数（必需）：

​ 该参数可以是具体的多个值，也可以是多个数组对象，还可以混搭。

返回值：

​ 返回一个新的数组，该数组是通过把所有 arr1,arr2… 参数添加到 arr 中生成的

案例：

let newArr=[1].concat(2,[3],4);   //newArr = [1, 2, 3, 4]

slice()

let newArr = arr.slice( start,end );

用法：

​ 截取数组中的元素

参数：

​ slice：开始的下标

​ end：结束的下标

​ 包头不包尾，如果是负数表示倒数，如果end 为空表示截取到最后

返回值：

​ 返回一个新的数组，该数组是通过截取数组中的元素生成的

案例：

let newArr = [1, 2, 3, 4].slice(1,3);   //newArr = [2,3]

every()

array.every(function(elem,index,arr), thisValue)

js有五个迭代方法，分别为：every、some、filter、map、forEach

用法：

​ 方法用于检测数组所有元素是否都符合指定条件（通过回调函数提供）。

​ 如果有一个元素不满足条件，则整个表达式返回false，且剩余的元素不会再进行检测。

​ 如果所有条件都满足则返回true

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ thisValue：可选。对象作为该执行回调时使用，传递给回调函数，用作“this”值，没有值为undefined

返回值：

​ true/false

案例：

var arr = [2,4,6];
var bool=arr.every(function(elem,i,arr){
		return elem%2 == 0;
	  })
console.log(bool)   // true

注意： 不会对空数组进行检测

some()

array.some(function(elem,index,arr), thisValue)

js有五个迭代方法，分别为：every、some、filter、map、forEach

用法：

​ 方法用于检测数组中的元素是否满足指定条件（通过回调函数提供）。

​ 如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。

​ 如果没有满足条件的元素，则返回false

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ thisValue：可选。对象作为该执行回调时使用，传递给回调函数，用作“this”值，没有值为undefined

返回值：

​ true/false

案例：

var arr = [1,2,3];
var bool=arr.some(function(elem,i,arr){
		return elem%2 == 0;
	  })
console.log(bool)   // true

注意： 不会对空数组进行检测

map()

array.map(function(elem,index,arr), thisValue)

js有五个迭代方法，分别为：every、some、filter、map、forEach

用法：

​ 方法返回一个新数组，数组中的元素为原数组调用回调函数处理后的值。

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ thisValue：可选。对象作为该执行回调时使用，传递给回调函数，用作“this”值，没有值为undefined

返回值：

​ 回调函数操作后得到的新数组

案例：

var arr = [1,2,3];
var newArr=arr.map(function(elem,i,arr){
		return elem = elem*2;
	  })
console.log(newArr)   // [2, 4, 6]

注意： 不会对空数组进行操作

filter()

array.filter(function(elem,index,arr), thisValue)

js有五个迭代方法，分别为：every、some、filter、map、forEach

用法：

​ 方法创建一个新的数组，新数组中的元素是通过检查原数组中符合条件的所有元素

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ thisValue：可选。对象作为该执行回调时使用，传递给回调函数，用作“this”值，没有值为undefined

返回值：

​ 通过回调函数检查后过滤后得到的新数组

案例：

var arr = [1,2,3];
var newArr=arr.filter(function(elem,i,arr){
		return elem%2!=0;
	  })
console.log(newArr)   // [1,3]

注意： 不会对空数组进行操作

reduce()

javascript高级程序设计中称此方法为并归方法

array.reduce(function(prev，elem,index,arr), initialValue)

用法：

​ 接收一个函数作为累加器，数组中的每个值（从左到右）开始汇总，最终汇总为一个值

参数：

​ function(prev,elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ prev：没有默认值时第一项的值，或上次叠加操作的结果

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ initialValue：可选。传递给回调函数的初始值

返回值：

​ 返回计算的结果

案例：

var arr = [1,2,3];
var num=arr.reduce(function(prev,elem,i,arr){
    console.log("prev:"+prev+"---elem:"+elem+"---index:"+i)
	return prev+elem
})
console.log(num)
// prev:1---elem:2---index:1
// prev:3---elem:3---index:2
// 6

var arr = [1,2,3];
var num=arr.reduce(function(prev,elem,i,arr){
    console.log("prev:"+prev+"---elem:"+elem+"---index:"+i)
	return prev+elem
},10)
console.log(num)   
// prev:10---elem:1---index:0
// prev:11---elem:2---index:1
// prev:13---elem:3---index:2
// 16

由上边可看出，当没有设置默认值的时候，原数组arr的第一项就是默认值，循环会从第二个元素开始，设置了默认值循环就从第一项开始，而最后的汇总值其实就是return出来的prev。

注意： 不会对空数组进行操作

面试题：

如何知道一串字符串中每个字母出现的次数？

var str = 'zhenzhengdedashiyongyuanhuaizheyikexuetudexin';
str.split('').reduce(function(prev,elem,index,arr){
    prev[elem] ? prev[elem]++ : prev[elem] = 1;
    return prev;
},{}) 

利用reduce数组去重

var str = 'zhenzhengdedashiyongyuanhuaizheyikexuetudexin';
str.split('').reduce(function(prev,elem,index,arr){
    prev.indexOf(elem) != -1 ? console.log("已经存在改元素"+elem) : prev.push(elem)
    return prev;
},[]) 

求数组中最大项

var arr = [11,34,51,19,64];
arr.reduce(function(prev,elem){
    return prev<elem ? elem:prev
})

find()

array.find(function(elem,index,arr), initialValue)

用法：

​ 返回通过测试（回调函数内判断）的数组的第一个元素的值

​ 当数组中的元素在测试条件时返回true，find()返回符合条件的元素，函数运行结束。

​ 如果没有符合的元素返回undefined

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ initialValue：可选。传递给回调函数的初始值

返回值：

​ 返回通过测试的元素或者undefined

案例：

let friendArray = [
{"name":"Jenny","money":"1000"},
{"name":"Danny","money":"2000"},
{"name":"LiMing","money":"3000"},
];
let result = friendArray.find(function (item) {
    return item.money > 1000;
});
console.log(result); //{name: "Danny", money: "2000"}

findIndex()

array.findIndex(function(elem,index,arr), initialValue)

用法：

​ 返回通过测试（回调函数内判断）的数组的第一个元素的下标

​ 当数组中的元素在测试条件时返回true，find()返回符合条件的元素的下标，函数运行结束。

​ 如果没有符合的元素返回-1

参数：

​ function(elem,index,arr) ：必须，回调函数，每个元素都会执行这个函数

​ elem：必须，当前元素

​ index：可选，当前元素索引值

​ arr：可选，当前元素属于的数组对象

​ initialValue：可选。传递给回调函数的初始值

返回值：

​ 返回通过测试的元素的下标或者-1

案例：

let friendArray = [
{"name":"Jenny","money":"1000"},
{"name":"Danny","money":"2000"},
{"name":"LiMing","money":"3000"},
];
let result = friendArray.findIndex(function (item) {
    return item.name == "Danny";
});
console.log(result); // 1

includes()

 var result=arr.includes(searchElement, fromIndex)

用法：

​ 判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

参数：

​ searchElement（必须）：需要查找的元素值。

​ fromIndex（可选）：表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

返回值：

​ 如果找到匹配的字符串返回 true，否则返回 false。

案例：

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true -1：倒数的位置
[1, 2, NaN].includes(NaN); // true 不会对NaN误判

注意：

1. index内部使用严格的相等运算符（===）进行判断，会对NaN误判
2. includes使用的是不一样的判断算法，没有这个问题

flat()

ES10新增加数组降维方法。

array.flat(number);

用法：

​ 对多维数组进行降维。

参数：

​ number：可选。控制降维的层数，要去掉几层数组就传几，默认为1，不确定长度，可以用Infinity关键字作为参数。

返回值：

​ 返回降维后的数组。

注意：如果原数组有空位，flat()方法会跳过空位。

案例：

var arr = [1, 2, [3, 4, 5]].flat();
console.log(arr); //arr = [1, 2, 3, 4, 5]

var arr = [1, 2, [3, [4], 5]].flat(2);
console.log(arr); //arr = [1, 2, 3, 4, 5]

var arr = [1, [[2], [3, [4]], 5]].flat(Infinity);
console.log(arr); //arr = [1, 2, 3, 4, 5]

var arr = [1, [[2],, [3, ,[4,,]], 5]].flat(Infinity);
console.log(arr); //arr = [1, 2, 3, 4, 5]

flatMap()

用法：

​ 对原数组的每个成员执行一个map()函数，然后对返回值组成的数组执行flat()方法（只能展开一层数组）。该方法返回一个新数组，不改变原数组。

案例：

let array = [1, 2, 3, 4, 5]
array.map(x => [x, x * 2])
//转换
[Array(2), Array(2), Array(2)]
0: (2)[1, 2]
1: (2)[2, 4]
2: (2)[3, 6]
3: (2)[4, 8]
4: (2)[5, 10]
//继续
array.flatMap(v => [v, v * 2]) == array.flat(1) //1维flatMap效率高一点
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

三、Array的静态方法

Array.from()

用于将两类对象转化为真正的数组：类数组对象，和可遍历的对象（包括ES6新增加的数据结构Set和Map）

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际开发中，多数用于DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。