js中的数组方法
js中的数组方法
数组是js中最常用到的数据集合，其内置的方法也很多，熟练掌握这些方法，可以有效的提高我们的工作效率，也对我们的代码质量有很大影响。
一、创建数组
1、使用数组字面量方法
var arr1 = []; // 创建一个数组 var arr2 = [20]; // 创建一个包含1项数据为20的数组 var arr3 = ['lily','lucy','Tom']; // 创建一个包含3个字符串的数组
2、使用Array构造函数
无参构造
var arr1 = new Array(); // 创建一个空数组
带参构造
如果只传一个数值参数，则表示创建一个初始长度为指定数组的空数组
var arr2 = new Array(10); // 创建一个包含10项的数组
如果传入一个非数值的参数或者参数大于1，则表示创建一个包含指定元素的数组
var arr3 = new Array('lily','lucy','Tom'); // 创建一个包含3个字符串的数组
3、Array.of方法创建数组(es6新增)
Array.of()方法会创建一个包含所有传入参数的数组，而不管参数的数量与类型
let arr1 = Array.of(1,2); console.log(arr1.length); // 2 let arr2 = Array.of(3); console.log(arr2.length); // 1 console.log(arr2[0]); // 3
4、Array.from方法创建数组(es6新增)
在js中将非数组对象转换为真正的数组是非常麻烦的。在es6中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组
function arga(...args){ // ...args剩余参数数组，由传递给函数的实际参数提供
let arg = Array.from(args);
console.log(arg);
}
arga(arr1,26,from); // [arr1,26,from]
二、数组方法
数组原型方法主要有以下这些：
- 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()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组，可以接受一或两个参数，即要返回项的起始和结束位置(不包括结束位置的项)
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]
8、splice()：可以实现删除、插入和替换
8-1、删除元素，并返回删除的元素，2个参数：起始位置和要删除的项数
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]
8-2、向指定索引处添加或替换元素，3个参数：起始位置、0(要删除的项数)和要插入的项
// 添加元素 var arr1 = [22,3,31,12]; arr1.splice(1,0,12,35); console.log(arr1); // [22,12,35,3,31,12] // 替换元素 var arr2 = [22,3,8,58]; arr2.splice(1,1,6); // [3] console.log(arr2); // [22,6,8,58]
9、forEach()：3个参数：遍历的数组的项，索引、数组本身
10、map()：返回一个新数组，会按照原始数组元素顺序依次处理元素
11、every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
var arr1 = [1,2,3,4,5];
var arr2 = arr1.every.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()方法返回匹配位置的索引
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]
