一、转换方法
数组调用toString()时,会给每一项调用toString()然后拼接成字符串,
数组调用toLocaleString()时,会给每一项调用toLocaleString()然后拼接成字符串,
valueOf()方法返回依旧是数组,join()在IE7之前不传参数会以undefined作为分隔符
如果数组中每一项为 null 或者 undefined ,那么在调用 join() ,toString() ,.toLocaleString() ,valueOf() 方法返回结果会以空字符串表示
var colors = ['red', 'blue', 'green', 'OOO'];
colors.join() // ==> "red,blue,green,OOO"
colors.toString() // ==> "red,blue,green,OOO"
colors.toLocaleString() // ==> "red,blue,green,OOO"
colors.valueOf() // ==> ['red', 'blue', 'green', 'OOO']
二、栈方法、队列方法
push()
var colors = ['red', 'blue', 'green'];
var count = colors.push('ooo', 'ppp');
colors // ==> ['red', 'blue', 'green', 'ooo', 'ppp'];
count // ==> 5
pop()
var colors = ['red', 'blue', 'green'];
var item= colors.pop();
colors // ==> ['red', 'blue'];
item // ==> 'green'
unshift()
var colors = ['red', 'blue', 'green'];
var count = colors.unshift('ooo', 'ppp');
colors // ==> ['ooo', 'ppp', 'red', 'blue', 'green'];
count // ==> 5
shift()
var colors = ['red', 'blue', 'green'];
var item= colors.shift();
colors // ==> ['blue', 'green'];
item // ==> 'red'
三、重排序方法
reverse()
var arr= [1,2,3,4,5];
var result= arr.reverse();
arr // ==> [5, 4, 3, 2, 1]
result // ==> [5, 4, 3, 2, 1]
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) => {
return 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) => {
return Math.random() - 0.5;
});
arr // ==> [0, 5, 13, 14, 28];
result // ==> 随机打乱的数组
四、操作方法
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'] ];
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"];
splice()
实现数组增,删,改
参数1:开始删除的位置索引值
参数2:删除的个数(默认删除到最后)
参数3:需要添加的元素
返回删除的那些项组成的数组
原数组会发生变化
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"];
五、操作方法
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
六、迭代方法
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
filterArr // ==> true
filterArr // ==> [77, 88]
mapArr // ==> [32, 43, 54, 65, 76, 87]
七、缩小方法
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