数组基本方法

一、转换方法

数组调用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

你可能感兴趣的:(数组基本方法)