js数组常见的方法
ES5数组常见的方法
1. isArray()
作用:用于判断对象是否为数组
例子:
let arr1=[1,2,3];
let arr2={
name:'张三',
age:18,
};
arr3=10;
console.log(Array.isArray(arr1));//预计输出为 true
console.log(Array.isArray(arr2));//预计输出为 false
console.log(Array.isArray(arr3));//预计输出为 false
运行结果:
2. toString()
作用:在默认情况下都会以逗号分隔字符串的形式返回数组项
例子:
let arr=['张三','李四','王五'];
let str=arr.toString();
console.log(str);
console.log(arr);
运行结果:
3. join()
作用:使用指定的字符串用来分隔数组字符串
例子:
let arr=['张三','李四','王五'];
let str1=arr.join('-');
let str2=arr.join('&');
console.log(str1);
console.log(str2);
console.log(arr);
运行结果:
4. pop()
作用:移除数组中的最后一个项,并且返回移除的值项,同时将数组的长度-1
注意:返回移除的那一项
例子:
let arr=['张三','李四','王五'];
let res=arr.pop();
console.log(res);//res接收移除的项应该为 王五
console.log(arr);// 注意观察此时的arr
运行结果:
此时会发现不同于之前的join(),原数组arr被改变了,当然,肯定不止这一个,注意观察每一个arr的输出,我们在后面总结。
5. push()
作用:可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度
注意:返回数组长度
例子:
let arr=['张三','李四','王五'];
let res=arr.push('赵六','刘七');
console.log(res);//注意,是返回数组长度,所以应该是 5
console.log(arr);
运行结果:
6. shift()
作用:移除数组中的第一个项并且返回移除的项,同时将数组的长度-1
注意:返回移除的那一项
例子:
let arr=['张三','李四','王五'];
let res=arr.shift();
console.log(res);//返回第一项,所有应该是 张三
console.log(arr);
运行结果:
7. unshift()
作用:在数组的前面添加任意个项,并返回数组的长度
注意:返回数组长度
例子:
let arr=['张三','李四','王五'];
let res=arr.unshift('天一','孙二');
console.log(res);//返回的是数组长度,应该为 5
console.log(arr);
运行结果:
8. reverse()
作用:反转数组项的顺序
例子:
let arr=['张三','李四','王五'];
let res=arr.reverse();
console.log(res);
console.log(arr);
运行结果:
9. sort()
作用:数组排序,默认按照字符序列排序,该方法可以接受一个比较函数作为参数
例子一:默认排序
//默认排序,就是sort()里面不传参数
let arr1=[3,5,2,4,1,8,6,1];
let arr2=[3,1,18,22,6,45];
let res1=arr1.sort();
let res2=arr2.sort();
console.log(res1);
console.log(res2);
console.log(arr1);
console.log(arr2);
运行结果一:
例子二:自定义排序之从小到大排序
let arr2=[3,1,18,22,6,45];
let res2=arr2.sort((a,b)=>{
//从小到大排序
if(a>b){return 1;}
else if( a<b){return -1;}
else{return 0;}
})
console.log(res2);
console.log(arr2);
运行结果二:
例子三:自定义排序之从大到小排序
let arr2=[3,1,18,22,6,45];
let res2=arr2.sort((a,b)=>{
// 从大到小排序
if(a>b){return -1;}
else if( a<b){return 1;}
else{return 0;}
})
console.log(res2);
console.log(arr2);
运行结果三:
10. concat()
作用:数组拼接,先创建当前数组的一个副本,然后将接收到的参数拼接到这个副本的末尾,返回副本
例子:
let arr1=['天一','孙二'];
let arr2=['张三','李四','王五'];
let arr3=['赵六','刘七'];
//连接两个数组
let res1=arr1.concat(arr2)
console.log(res1);
console.log(arr1,arr2);
//连接多个数组
let res2=arr1.concat(arr2,arr3)
console.log(res2);
console.log(arr1,arr2,arr3);
运行结果:
连接两个数组
连接多个数组
11. slice()
作用:数组切割,返回通过截取得到的数组,可接受一个或者两个参数(返回项的起始位置,结束位置)。
接收一个参数表示从该参数开始到数组末尾的所有项;
当接受两个参数时表示从开始到结束的所有项。
注意:(1)返回截取得到的数组(2)不包括结束项
例子:
let arr=['张三','李四','王五','赵六']
let res1=arr.slice(2);//预测结果是截取从数组下标为2(也就是'王五')到结尾('赵六')的所以项,所以返回结果应该为['王五','赵六']
let res2=arr.slice(2,3);//预测结果是截取从数组下标为2(也就是'王五')到数组下标为3(也就是'赵六')的所以项,但是不包括结尾,所以结果应该为['王五']
console.log(res1);
console.log(res2);
console.log(arr);
运行结果:
12. splice()
作用:向数组的中部插入数据将始终返回一个数组,该数组中包含从原始数组中删除的项。
删除:指定两个参数(起始位置,要删除的项数)
插入:指定三个参数(起始位置,0,要插入的任意数量的项)
替换:指定三个参数(起始位置,要删除的项数,要插入的任意数量的项)
注意:(1)返回对原数组截取/删除/插入/替换后得到的数组(这点要与slice分开,slice是截取得到的数组,splice是剩下的)(2)第二个参数不是结束位置,是截取/删除/插入/替换的个数
例子:
let arr=['张三','李四','王五','赵六'];
let res_del=arr.splice(1,2);//预测结果是删除从数组下标为1开始的两项,所以结果应该为['李四','王五']
console.log(res_del);//返回删除的项
console.log(arr);//此时数组变为['张三','赵六']
let res_ser=arr.splice(0,0,'天一','孙二');//预测结果是在数组下标为0的位置插入'天一'和'王五'两项,所以数组变为['天一','孙二','张三','赵六']
console.log(res_ser);//返回删除的项
console.log(arr);
let res_rep=arr.splice(2,2,'刘七');//预测结果是在数组下标为2的位置先删除'张三'和'赵六'两项,然后在数组下标为二的位置插入'刘七',所以数组变为['天一','孙二','刘七']
console.log(res_rep);//返回删除的项
console.log(arr);
运行结果:
13. indexOf()
作用:从数组开头向后查找,返回数组下标,找不到该元素返回-1。第一个参数为要查找的项,第二个参数(可选)为索引开始位置
注意:只返回第一次找到的数组下标
例子:
let arr=['张三','李四','王五','赵六'];
let res=arr.indexOf('张三');
console.log(res);
console.log(arr);
//但是如果有两个或多个相同的项
let arr1=['张三','李四','王五','李四','赵六'];
let res1=arr1.indexOf('李四');
console.log(res1);//只会返回第一次找到的数组下标
console.log(arr1);
运行结果:
14. lastIndexOf()
作用:从数组末尾向前查找,返回数组下标,找不到该元素返回-1。第一个参数为要查找的项,第二个参数(可选)为索引开始位置
注意:只返回第一次找到的数组下标
例子:
let arr=['张三','李四','王五','赵六'];
let res=arr.lastIndexOf('张三');
console.log(res);
console.log(arr);
//但是如果有两个或多个相同的项,与indexOf()方法类似,只会返回最先找到的数组下标
let arr1=['张三','李四','王五','李四','赵六'];
let res1=arr1.lastIndexOf('李四');
console.log(res1);//只会返回第一次找到的数组下标
console.log(arr1);
运行结果:
15. every()
作用:对数组中的每一元素运行给定的函数,如果该函数对每一项都返回true,则该函数返回true
例子:
let age=[18,20,25,22];
// let res=age.every((item,index,arr)=>{//item代表数组的值,index代表数组下标,arr是数组名,其中第一个参数一定要传,其他参数可选写
// return item>18;
// });
// console.log(res);
//简写为 需要返回谁就传谁
let res1=age.every(item=>{
return item>20;
});
let res2=age.every(item=>{
return item>15;
});
console.log(res1);
console.log(res2);
console.log(age);
此处为箭头函数的简写形式,当只传一个参数时可以省略(),原本是(item)=>{}
也等价于:
// let res=age.every(function(item){
// return item>18;
// });
// console.log(res);
// console.log(age);
运行结果:
16. some()
作用:对数组中的每一运行给定的函数,如果该函数对某一项返回true,则返回true
例子:
let age=[18,20,25,22];
let res=age.some(i=>{//此处直接用简写,传的3个参数都可以自己定义,不是一定要用item,index,arr
return i>20;
});
console.log(res);
console.log(age);
运行结果:
17. filter()
作用:对数组中的每一项运行给定的函数,会返回满足该函数的项组成的数组
例子:
let age=[18,20,25,22];
let res=age.filter(i=>{//此处直接用简写
return i>20;
});
console.log(res);
console.log(age);
运行结果:
18. reduce()
作用:接收一个函数作为累加器,将数组的值累加,最终计算为一个值
例子:
let num=[1,2,3,4,5];
let res=num.reduce((prev,next,index,arr)=>{//其中prev为初始值或计算结果的返回值e,next是当前要计算的值,index和arr同样可以省略
return prev+next
})
console.log(res);
console.log(num);
运行结果:
19. map()
作用:对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组
例子:
let num=[1,2,3,4,5];
let res=num.map(v=>{//也是可以传3个参数
return v*v;
});
console.log(res);
console.log(num);
运行结果:
20. forEach()
作用:对数组中的每一元素运行给定的函数,没有返回值,常用来遍历元素
例子:
let num=[1,2,3,4,5];
let res=num.forEach(v=>{
console.log(v)
});
console.log(num);
运行结果:
总结:
改变原数组的方法:pop(),push(),shift(),unshift(),reverse(),sort(),splice()
不改变原数组的方法:toString(),join(),concat(),slice(),indexOf(),lastIndexOf(),every(),some(),
filter(),reduce(),map()
其中forEach()比较特殊,不过一般不推荐使用forEach()改变原数组