JS数组方法总结
一、转换方法
1. toString()
// 会给每一项调用toString()然后拼接成字符串
var arr = [1, 0, undefined, null, new Date('2020-01-01'), '1'];
var res = arr.toString();
res // ==> "1,0,,,Wed Jan 01 2020 08:00:00 GMT+0800 (中国标准时间),1"
2. toLocaleString()
// 会给每一项调用toLocaleString()然后拼接成字符串
var arr = [1, 0, undefined, null, new Date('2020-01-01'), '1'];
var res = arr.toLocaleString();
res // ==> "1,0,,,2020/1/1 上午8:00:00,1"
3. join()
// 会给每一项调用toString()，然后根据连接参数拼接成字符串
// 如果没有连接参数则以逗号作为连接参数
// 如果数组中有 null 或者 undefined 会转化为空字符串
var arr = [1, 0, undefined, null, new Date('2020-01-01'), '1'];
var res = arr.join();
res // ==> "1,0,,,Wed Jan 01 2020 08:00:00 GMT+0800 (中国标准时间),1"
二、栈方法、队列方法
1. push()
// 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
var colors = ['red', 'blue', 'green'];
var count = colors.push('ooo', 'ppp');
colors // ==> ['red', 'blue', 'green', 'ooo', 'ppp'];
count // ==> 5
// 在es6 中添加多个元素还可以这样
var arr = [1, 2];
var count = colors.push(...arr);
count // ["red", "blue", "green", 1, 2]
count // ==> 5
2. pop()
// 从数组中删除最后一个元素，并返回该元素的值。
var colors = ['red', 'blue', 'green'];
var item= colors.pop();
colors // ==> ['red', 'blue'];
item // ==> 'green'
3. unshift()
// 将一个或多个元素添加到数组的开头，并返回该数组的新长度。
var colors = ['red', 'blue', 'green'];
var count = colors.unshift('ooo', 'ppp');
colors // ==> ['ooo', 'ppp', 'red', 'blue', 'green'];
count // ==> 5
// 同样的，es6添加多个元素也可以使用 ... 运算符
var arr = [1, 2];
var count = colors.unshift(...arr);
count // [1, 2, "red", "blue", "green"]
count // ==> 5
4. shift()
// 从数组中删除第一个元素，并返回该元素的值。
var colors = ['red', 'blue', 'green'];
var item = colors.shift();
colors // ==> ['blue', 'green'];
item // ==> 'red'
三、排序方法
1. reverse()
// 将数组中元素的位置颠倒，并返回该数组。
// 数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
var arr = [1, 2, 3, 4, 5];
var result = arr.reverse();
arr // ==> [5, 4, 3, 2, 1]
result // ==> [5, 4, 3, 2, 1]
2. sort()
调用 sort() 方法时会调用每一项的 toString() 然后比较得到的字符串，即使每一项都是数字，也会转化成字符比较（即：字符串编码排序）
// 简单的字符排序
var arr = [0, 28, 13, 14, 5];
var result = arr.sort();
arr // ==> [0, 13, 14, 28, 5];
result // ==> [0, 13, 14, 28, 5];
// 数字排序
var arr = [0, 28, 13, 14, 5];
var result = arr.sort((a, b) => a - b);
arr // ==> [0, 5, 13, 14, 28];
result // ==> [0, 5, 13, 14, 28];
// 随机打乱数组
var arr= [0, 28, 13, 14, 5];
var result= arr.sort((a, b) => Math.random() - 0.5);
arr // ==> [0, 5, 13, 14, 28];
result // ==> 随机打乱的数组
四、操作方法
1. concat()
// 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('ooo', ['ppp', 'iii']);
colors // ==> ['red', 'blue', 'green'];
colors2 // ==> ["red", "blue", "green", "ooo", "ppp", "iii"]
------------------------------
var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('ooo', [ 'ppp', 'iii', [ 'ddd', 'fff' ] ]);
colors // ==> [ 'red', 'blue', 'green' ];
colors2 // ==> [ "red", "blue", "green", "ooo", "ppp", "iii", ['ddd', 'fff'] ];
2. slice()
截取数组方法，返回截取后的新数组，有两个参数（原数组不会变化） 参数 1：开始截取的位置索引值（支持负数） 参数 2：结束截取的位置索引值（不包含结束位置，默认到最后，支持负数）
var colors = ['red', 'blue', 'green', "ooo", "ppp"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);
// colors.slice(-2, -1); 等价于 colors.slice(3, 4);
colors // ==> ['red', 'blue', 'green', "ooo", "ppp"];
colors2 // ==> ["blue", "green", "ooo", "ppp"];
colors3 // ==> ["blue", "green", "ooo"];
3. splice()
数组增，删，改方法，删除的那些项组成的数组，有三个参数（原数组会发生变化） 参数 1：开始删除的位置索引值 参数 2：删除的个数（默认删除到最后） 参数 2：需要添加的元素
var colors = ['red', 'blue', 'green'];
var removeItems = colors.splice(0,2);
colors // ==> ["green"];
removeItems // ==> ["red", "blue"];
var colors = ['red', 'blue', 'green'];
var removeItems = colors.splice(1, 0, 'yellow', 'orange');
colors // ==> ["red", "yellow", "orange", "blue", "green"];
removeItems // ==> [];
var colors = ['red', 'blue', 'green'];
var removeItems = colors.splice(1, 2, 'yellow', 'orange');
colors // ==> ["red", "yellow", "orange"];
removeItems // ==> ["blue", "green"];
五、查询方法
1. indexOf() / lastIndexOf()
查找位置，查找均是以严格相等查找（===）, 有两个参数 参数 1：要查找的项 参数 2：要查找的起点位置
var arr = [1, 2, 4, 5, 7, '8', '10'];
arr.indexOf(8); // ==> -1
arr.lastIndexOf(8); // ==> -1
arr.indexOf(2); // ==> 1
arr.lastIndexOf(2); // ==> 1
arr.indexOf(5,3); // ==> 3
arr.lastIndexOf(5,3); // ==> 3
arr.indexOf(5,4); // ==> -1
arr.lastIndexOf(5,4); // ==> 3
六、迭代方法
1. every()、 filter()、 forEach()、 map()、 some()
每个方法都有两个参数 参数 1：在每一项运行的函数 参数 2：运行该函数的作用域对象 传入方法的函数接收三个参数
- 1，数组项的值
- 2，该项在数组的位置索引值
- 3，数组对象本身
// every() 对数组中每一项运行给定函数 只有数组中每一项都返回 true ，则返回 true
// some() 对数组中每一项运行给定函数 只要有其中一项返回 true 就直接返回 true
// filter() 对数组中每一项运行给定函数 返回该函数会返回 true 的项组成的数组
// map() 对数组中每一项运行给定函数 返回函数调用的结果组成的数组
// forEach() 对数组中每一项运行给定函数 无返回值
var arr = [33, 44, 55, 66, 77, 88];
arr.forEach(function(item, index, array){
// console.log(item, index, array);
});
var everyArr = arr.every(function(item, index, array){
// console.log(item, index, array);
return item > 70;
});
var someArr = arr.some(function(item, index, array){
// console.log(item, index, array);
return item > 70;
});
var filterArr = arr.filter(function(item, index, array){
// console.log(item, index, array);
return item > 70;
});
var mapArr = arr.map(function(item, index, array){
// console.log(item, index, array);
return item - 1;
});
everyArr // ==> false
someArr // ==> true
filterArr // ==> [77, 88]
mapArr // ==> [32, 43, 54, 65, 76, 87]
七、reduce 方法
1. reduce() / reduceRight()
两个方法都会迭代数组的每一项，然后构建最终返回值 reduce() 从第一项开始;reduceRight() 从最后一项开始 都接收两个参数 参数 1：每一项上调用的函数（传入的函数接收四个参数，1、前一个值，2、当前值，3、当前值的索引，4、数组对象），函数返回任何值都会作为第一个参数自动传给下一项 参数 2：（可选）作为缩小基础的初始值
var numArr = [ 1, 2, 3, 4, 5 ];
var sum = numArr.reduce(function(prev, cur, index, array){
console.log(prev, cur, index, array);
return prev + cur;
});
// 1 2 1 [1, 2, 3, 4, 5]
// 3 3 2 [1, 2, 3, 4, 5]
// 6 4 3 [1, 2, 3, 4, 5]
// 10 5 4 [1, 2, 3, 4, 5]
sum // ==> 15
var numArr = [ 1, 2, 3, 4, 5 ];
var sum = numArr.reduceRight(function(prev, cur, index, array){
console.log(prev, cur, index, array);
return prev + cur;
});
// 5 4 3 [1, 2, 3, 4, 5]
// 9 3 2 [1, 2, 3, 4, 5]
// 12 2 1 [1, 2, 3, 4, 5]
// 14 1 0 [1, 2, 3, 4, 5]
sum // ==> 15
八、ES6 新增方法
参考阮一峰: ECMAScript 6 入门 - 数组的扩展
