数组的方法总结

数组方法

数组原型方法主要有以下这些：

join()：用指定的分隔符将数组每一项拼接为字符串
push()：向数组的末尾添加新元素
pop()：删除数组的最后一项
unshift()：向数组首位添加新元素
shift()：删除数组的第一项
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
filter()：过滤功能
concat()：用于连接两个或多个数组
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
every()：判断数组中每一项都是否满足条件
some()：判断数组中是否存在满足条件的项
includes()：判断一个数组是否包含一个指定的值
sort()：对数组的元素进行排序
reverse()：对数组进行倒序
forEach()：es5及以下循环遍历数组每一项
map()：es6循环遍历数组每一项
find()：返回匹配的项
findIndex()：返回匹配位置的索引
reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值
reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值
toLocaleString()、toString()：将数组转换为字符串
entries()、keys()、values()：遍历数组

各个方法的基本功能详解

1、join()
join()方法用于把数组中的所有元素转换一个字符串，默认使用逗号作为分隔符

var arr1 = [1,2,3];
console.log(arr1.join()); // 1,2,3
console.log(arr.join(‘-’)); // 1-2-3
console.log(arr); // 1,2,3

2、push()和pop()

push()方法从数组末尾向数组添加元素，可以添加一个或多个元素,并返回新的长度
pop()方法用于删除数组的最后一个元素并返回删除的元素

var arr1 = [‘lily’,‘lucy’,‘Tom’];
var count = arr1.push(‘Jack’,‘Sean’);
console.log(count); // 5
console.log(arr1); // [‘lily’,‘lucy’,‘Tom’,‘Jack’,‘Sean’]

var item = arr1.pop();
console.log(item); // Sean
console.log(arr1); // [‘lily’,‘lucy’,‘Tom’,‘Jack’]

3、unshift()和shift()

unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度
shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

var arr1 = [‘lily’,‘lucy’,‘Tom’];
var count = arr1.unshift(‘Jack’,‘Sean’);
console.log(count); // 5
console.log(arr1); // [‘Jack’,‘Sean’,‘lily’,‘lucy’,‘Tom’]

var item = arr1.shift();
console.log(item); // Jack
console.log(arr1); // ['‘Sean’,‘lily’,‘lucy’,‘Tom’]

4、sort()
用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序，默认排序顺序为按字母升序

var arr1 = [‘a’,‘d’,‘c’,‘b’];
console.log(arr1.sort()); // [‘a’,‘b’,‘c’,‘d’]

function compare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}

var arr2 = [13,24,51,3];
console.log(arr2.sort(compare)); // [3,13,24,51]

// 如果需要通过比较函数产生降序排序的结果，只要交后比较函数返回的值即可

5、reverse()
用于颠倒数组中元素的顺序，原数组改变

var arr1 = [13,24,51,3];
console.log(arr1.reverse()); // [3,51,24,13]
console.log(arr1); // 3,51,24,13

6、concat()
用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

var arr1 = [1,3,5,7];
var arrCopy = arr1.concat(9,[11,13]);
console.log(arrCopy); // [1,3,5,7,9,11,13]
console.log(arr1); // 1,3,5,7

7、slice()
返回从原数组中指定开始下标到结束下标之间的项组成的新数组，可以接受一或两个参数，即要返回项的起始和结束位置(不包括结束位置的项)

用法：array.slice(start,end)
解释：该方法是对数组进行部分截取，并返回一个数组副本；参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）

var arr1 = [1,3,5,7,9,11];
var arrCopy = arr1.slice(1);
var arrCopy2 = arr1.slice(1,4);
var arrCopy3 = arr1.slice(1,-2); // 相当于arr1.slice(1,4);
var arrCopy4 = arr1.slice(-4,-1); // 相当于arr1.slice(2,5);
console.log(arr1); // 1,3,5,7,9,11
console.log(arrCopy); // [3,5,7,9,11]
console.log(arrCopy2); // [3,5,7]
console.log(arrCopy3); // [3,5,7]
console.log(arrCopy4); // [5,7,9]

//如果不传入参数二，那么将从参数一的索引位置开始截取，一直到数组尾
var a=[1,2,3,4,5,6];
var b=a.slice(0,3); //[1,2,3]
var c=a.slice(3); //[4,5,6]

//如果两个参数中的任何一个是负数，array.length会和它们相加，试图让它们成为非负数，举例说明：
//当只传入一个参数，且是负数时，length会与参数相加，然后再截取
var a=[1,2,3,4,5,6];
var b=a.slice(-1); //[6]

//当只传入一个参数，是负数时,并且参数的绝对值大于数组length时，会截取整个数组
var a=[1,2,3,4,5,6];
var b=a.slice(-6); //[1,2,3,4,5,6]
var c=a.slice(-8); //[1,2,3,4,5,6]

//当传入两个参数一正一负时，length也会先于负数相加后，再截取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3); //[3]

//当传入一个参数，大于length时，将返回一个空数组
var a=[1,2,3,4,5,6];
var b=a.slice(6);　　//[]

8、splice()
可以实现删除、插入和替换

用法：array.splice(start,deleteCount,item…)
解释：splice方法从array中移除一个或多个数组，并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。

如果有额外的参数，那么item会插入到被移除元素的位置上。它返回一个包含被移除元素的数组。

//替换
var a=[‘a’,‘b’,‘c’];
var b=a.splice(1,1,‘e’,‘f’); //a=[‘a’,‘e’,‘f’,‘c’],b=[‘b’]

//删除
var arr1 = [1,3,5,7,9,11];
var arrRemoved = arr1.splice(0,2);
console.log(arr1); // [5,7,9,11]
console.log(arrRemoved); // [1,3]

// 添加元素
var arr1 = [22,3,31,12];
arr1.splice(1,0,12,35);
console.log(arr1); // [22,12,35,3,31,12]

9、forEach()

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容，
第二个参数是对应的数组索引，
第三个参数是数组本身

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

10、map()
返回一个新数组，会按照原始数组元素顺序依次处理元素

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
return item * item;
})

console.log(newArray) // [1, 4, 9, 16, 25]

11、every()
判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

var arr1 = [1,2,3,4,5];
var arr2 = arr1.every(x => {
return x < 10;
});
console.log(arr2); // true

var arr3 = arr1.every(x => {
return x < 3;
});
console.log(arr3); // false

12、some()
判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

var arr1 = [1,2,3,4,5];
var arr2 = arr1.some(x => {
return x < 3;
});
console.log(arr2); // true

var arr3 = arr1.some(x => {
return x < 1;
});
console.log(arr3); // false

13、includes()
es7新增，用来判断一个数组、字符串是否包含一个指定的值，使用===运算符来进行值比较，如果是返回true，否则false，参数有两个，第一个是(必填)需要查找的元素值，第二个是(可选)开始查找元素的位置

var arr1 = [22,3,31,12,58];
var includes = arr1.includes(31);
console.log(includes); // true

var includes2 = arr1.includes(31,3); // 从索引3开始查找31是否存在
console.log(includes2); // false

14、reduce()和reduceRight()
都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值

reduce()方法从数组的第一项开始，逐个遍历到最后

reduceRight()方法从数组的最后一项开始。向前遍历到第一项

4个参数：前一个值、当前值、项的索引和数组对象

var arr1 = [1,2,3,4,5];
var sum = arr1.reduce((prev,cur,index,array) => {
return prev + cur;
},10); // 数组一开始加了一个初始值10，可以不设默认0
console.log(sum); // 25

15、toLocaleString()和toString()
都是将数组转换为字符串

var arr1 = [22,3,31,12];
let str = arr1.toLocaleString();
var str2 = arr1.toString();

console.log(str); // 22,3,31,12
console.log(str2); // 22,3,31,12

16、find()和findIndex()

都接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数：数组的某个元素、该元素对应的索引位置、数组本身，在回调函数第一次返回true时停止查找。

二者的区别是：find()方法返回匹配的值，而findIndex()方法返回匹配位置的索引

let arr = [1,2,3,4,5];
let num = arr.find(item => item > 1);
console.log(num) // 2

let arr = [1,2,3,4,5];
let num = arr.findIndex(item => item > 1);
console.log(num) // 1

17、entries()、keys()和values()

es6新增
entries()、keys()和values()–用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历

for(let index of [a,b].keys()){
console.log(index);
}
// 0
// 1

for(let elem of [a,b].values()){
console.log(elem);
}
// a
// b

for(let [index,elem] of [a,b].entries()){
console.log(index,elem);
}
// 0 ‘a’
// 1 ‘b’

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历

let arr1 = [a,b,c];
let entries = arrr1.entries();
console.log(entries.next().value); // [0,a]
console.log(entries.next().value); // [1,b]
console.log(entries.next().value); // [2,c]

18、indexOf()
indexof方法可以在字符串和数组上使用。
indexOf() 方法可返回某个指定的字符串值在字符串、数组中首次出现的位置。
arr = [‘mfg’, ‘2017’, ‘2016’];
console.log(arr.indexOf(‘mfg’)); // 0
console.log(arr.indexOf(‘m’)); // -1
console.log(arr.indexOf(‘2017’));// 1
console.log(arr.indexOf(2017)); // -1，这里不会做隐式类型转换