js中数组方法总结—详细
文章目录
前言
数组在javascript中是比较基础的,但是在后期的实际开发和模块项目中,不可或缺,十分重要,今天来对数组的所有方法进行总结。
一、数组的创建方法?
JavaScript中创建数组有两种方式
(一)使用 Array 构造函数:
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组
(二)使用数组字面量表示法:
var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组
二、数组的常规操作方法
1.数组遍历
1,普通for循环,经常用的数组遍历
var arr = [1,2,0,3,9];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}
2,forEach,数组自带的循环,主要功能是遍历数组
arr.forEach(function(value,i){
console.log('forEach遍历:'+i+'--'+value);
})
forEach这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
3,map遍历,map即是 “映射”的意思 用法与 forEach 相似
arr.map(function(value,index){
console.log('map遍历:'+index+'--'+value);
});
map遍历支持使用return语句,支持return返回值
4,for…of为ES6新增的方法,主要来遍历可迭代的对象(包括Array, Map, Set, arguments等),它主要用来获取对象的属性值,而for…in主要获取对象的属性名。
var arr1 = [1, 2, 3]
for (let i of arr1){
console.log(i)
}
// 遍历普通对象报错
var obj2 = {fname:1, name2:22}
for(let val of obj2){
console.log(val)
}
2.数组的增删查改
一、增
1、push()
可接收任意数量的参数,把它们逐个添加至数组末尾,并返回修改后数组的长度。例如:
var arr = [];
var len = arr.push(1);
console.log(arr); // [1]
console.log(len); // 1
len = arr.push(2,3);
console.log(arr); // [1,2,3]
console.log(len); // 3
2、unshift()
该方法与push()类似,也可接收任意数量的参数,只不过是将参数逐个添加至数组前端而已,同样返回新数组长度。
var len = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4
len = arr.unshift(-2,-1);
console.log(arr); // [-2, -1, 0, 1, 2, 3]
console.log(len); // 6
3、concat()
该方法与push()方法有点类似,同样是将元素添加至数组末尾,只不过这个数组已经不是原来的那个数组了,而是其副本,所以concat()操作数组后会返回一个新的数组。具体用法如下:
① 不传参数,返回当前数组副本
② 传递一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中
③ 传递非数组参数,这些参数就会被直接添加到结果数组的末尾
var arr1 = arr.concat(4,[5,6]);
console.log(arr); // [-2, -1, 0, 1, 2, 3]
console.log(arr1); // [-2, -1, 0, 1, 2, 3, 4, 5, 6]
4、splice()
前面的三个方法都具有很大局限性,因为不是添加到数组前就是数组后,而splice()就不一样了,它非常灵活和强大。灵活是因为它可以添加元素到数组的任意位置,强大是因为它除了可以添加元素之外还具有删除和替换元素的功能(这个后面会陆续讲到)。
splice()可以向数组指定位置添加任意数量的元素,需要传入至少3个参数: 起始位置、0(要删除的元素个数)和要添加的元素。
arr.splice(3,0,0.2,0.4,0.6,0.8);
console.log(arr); // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]
二、删
1、pop()
与push()方法配合使用可以构成后进先出的栈,该方法可从数组末尾删除最后一项并返回该项。
var item = arr.pop();
console.log(item); // 3
console.log(arr); // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
2、shift()
与push()方法配合使用可以构成先进先出的队列,该方法可删除数组第一项并返回该项。
var item = arr.shift();
console.log(item); // -2
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
3、slice()
该方法同concat()一样是返回一个新数组,不会影响原数组,只不过slice()是用来裁剪数组的,返回裁剪下来的数组,具体用法如下:
var arr2 = arr.slice(2,6);
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
console.log(arr2); // [0.2, 0.4, 0.6, 0.8]
4、splice()
arr.splice(2,4);
console.log(arr); // [-1, 0, 1, 2]
三、改
接使用splice()向指定位置插入任意数量的元素,且同时删除任意数量的元素。
arr.splice(2,1,0.5,1,1.5);
console.log(arr); // [-1, 0, 0.5, 1, 1.5, 2]
四、查
indexOf()和lastIndexOf()
var index = arr.indexOf(0);
console.log(index); // 1
index = arr.indexOf(3,0);
console.log(index); // -1
二、使用循环等原理实现数组的方法
1,遍历数组
这里只列举最常规的,方法有很多种,不一一列举
1,for(){}遍历数组
<script type="text/javascript">
<!--
var arr = new Array(13.5,3,4,5,6);
for(var i=0;i<arr.length;i++){
arr[i] = arr[i]/2.0;
}
alert(arr);
//-->
</script>
2,,for in循环遍历数组
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
2,数组排序
方法也有非常多
1,冒泡排序(从后向前) 是数组排序的原理
var array = [1,4,-8,-3,6,12,9,8];
function sort(arr){
for(var j=0;j<arr.length-1;j++){
//两两比较,如果前一个比后一个大,则交换位置。
for(var i=0;i<arr.length-1-j;i++){
if(arr[i]>arr[i+1]){
var temp = arr[i];
arr[i] = arr[i+1];
arr[i+1] = temp;
}
}
}
}
sort(array);
document.write(array);
2,JavaScript的sort()方法 简单无脑
var array = [1,4,-8,-3,6,12,9,8];
function compare(val1,val2){
return val1-val2;
};
array.sort(compare);
document.write(array);
3, 快速排序:递归思想,两边快速的排序,冒泡排序的改进
var array = [1,4,-8,-3,6,12,9,8];
function quickSort(arr){
//如果数组长度小于等于1,则返回数组本身
if(arr.length<=1){
return arr;
}
//定义中间值的索引
var index = Math.floor(arr.length/2);
//取到中间值
var temp = arr.splice(index,1);
//定义左右部分数组
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
//如果元素比中间值小,那么放在左边,否则放右边
if(arr[i]<temp){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat(temp,quickSort(right));
}
document.write(quickSort(array));
4,原生JS排序
function order(arr){
var len=arr.length;
var max=0; // 定义一个变量max,用于保存数组中的最大值。
var num=0; // 定义一个变量num,用于保存数组中最大值的位置。
var mid=0; // 定义一个变量mid,用于交换最大值和最后一个值。
for(var i=len-1;i>0;i--){
max=arr[0];
for(var j=0;j<=i;j++){
if(max<=arr[j]){
max=arr[j]; // 获取数组中最大值
num=j;
}
}
mid=arr[i]; // 将数组最后一个元素的值赋给中间变量;
arr[num]=mid; // 将中间变量赋给最大值的元素;
arr[i]=max; // 将最大值赋给数组最后一个元素;
}
return arr;
3,数组翻转
1,js用for循环模拟数组翻转
var arr=[1,2,3,4,5,6];
var arr1=[];
//console.log(arr.reverse());
方法一:取最后一个元素放到arr1中
for(var i=0;i<arr.length;i++){
//元素下标的长度=长度-1-i
arr1[i]=arr[arr.length-1-i];
}
console.log(arr1);
方法二:
for(var i=arr.length-1;i>=0;i--){
arr1[arr1.length]=arr[i];
}
4,数组去重
1、简单的去重方法
* */
function uniq(array){
var temp = []; //一个新的临时数组
for(var i = 0; i < array.length; i++){
if(temp.indexOf(array[i]) == -1){
temp.push(array[i]);
}
}
return temp;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
第二种:
<script type="text/javascript">
function quit(arr) {
var arr1 = [];
for (var i = 0;i <= arr.length - 1;i++) {
if(arr1.indexOf(arr[i]) === -1) {
arr1.push(arr[i]);
}
}
return arr1;
}
var demo = quit([2,6,8,1,9,2,1,8,9,4,7,4,3,7]);
console.log(demo);
</script>
第三种:
<script type="text/javascript">
var arr = [2,9,6,1,3,2,8,7,11,22,35];
var arr1 = [];
var j = 0;
for (var i = 0;i < arr.length;i++) {
if (arr[i] > 5) {
arr1[j] = arr[i]; // arr1[arr1.length] = arr[i];
j++;
}
}
console.log(arr1);
// 数组的去重
var arr2 = [0,2,3,5,7,9,1,6];
var arr3 = [];
for (var i = 0;i < arr2.length;i++) {
if (arr[i] != 0) {
arr3[arr3.length] = arr[i];
}
}
console.log(arr3);
</script>
4,第四种
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重
4,查找数组中重复项以及下标
let arr= [1,2,3,4,5,1,2];
let rep = [];
arr.forEach((item,index)=>{
if(arr.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
let obj = {};
obj.key = (arr.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标
obj.value = item;
rep.push(obj);
}
});
console.log(rep);
二、数组原有方法和ES5新增方法
1、join()
join(separator): 将数组的元素组起一个字符串
var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3](原数组不变)
2、push()和pop()
push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]
3、shift() 和 unshift()
shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头,并返回数组的长度 。
var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]
4、sort()
sort():按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。
var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)
5、reverse()
reverse():反转数组项的顺序。
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)
6、concat()
concat() :将参数添加到原数组中。
var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)
7、slice()
slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。
var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[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()
splice():很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。
功能非常强大
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]
9、indexOf()和 lastIndexOf()
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1
10、forEach()
forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
11、map()
map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
12、filter()
filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
还有许多其他方法,不经常使用,会查手册即可。