超详细的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;indexof能用于数组吗
}
}
var arr2 = [13,24,51,3];
console.log(arr2.sort(compare));  // [3,13,24,51]
// 如果需要通过⽐较函数产⽣降序排序的结果，只要交后⽐较函数返回的值即可
5、reverse()：⽤于颠倒数组中元素的顺序
var arr1 = [13,24,51,3];
console.verse());  // [3,51,24,13]
console.log(arr1);  // [3,51,24,13](原数组改变)
6、concat()：⽤于连接两个或多个数组，该⽅法不会改变现有的数组，⽽仅仅会返回被连接数组的⼀个副本
var arr1 = [1,3,5,7];
var arrCopy = at(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 = duce((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 = LocaleString();
var str2 = String();
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()--⽤于遍历数组。它们都返回⼀个遍历器对象，可以⽤f循环进⾏遍历
区别是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'
如果不使⽤f循环，可以⼿动调⽤遍历器对象的next⽅法，进⾏遍历
let arr1 = [a,b,c];
let entries = ies();
console.().value);  // [0,a]
console.().value);  // [1,b]
console.().value);  // [2,c]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。