js中数组的常用方法
前言
在学习前端过程中,我们会经常跟对象,数组打交道,所以我们要熟练掌握数组与对象的一些常用的方法。我就把平常一些零散的东西整理一下,跟大家一起分享一下。
操作数组
数组中有很多种方法,下面我们一起看一下这些方法怎么使用
(1)map方法
数组的map方法在平常我们是经常使用的,此方法是将数组的每一个元素遍历一遍,然后返回一个新的数组,注意,这里并没有改变原来数组。
例子1:
let arr=[1,2,3,4,5,6,7,8]
var arr1=arr.map(function(item){
return item*2
})
console.log(arr1);
打印可得
上面是一个简单案例 在函数里面就直接返回每一个元素的两倍
下面我们看另外一个案例
例子2:
function map(arr,cb){
var newArr=[]
for(var i=0 ;i < arr.length; i++){
newArr.push(
cb(arr[i])
)
}
return newArr
}
var arr=[1,2,3,4,5,6,7,8]
console.log(map(arr,function(num){
return num+10
}));
在这里我们可以看到函数里面放了两个参数 ,一个是数组 ,一个是一个回调函数cb ,我们可以看到函数里面进行一个操作定义一个新数组newArr用来存放每一项元素加10后的结果 , 再返回出去。
(2)forEach方法
例子1:
var arr = [1, 2, 3, 4, 5];
var num = 3;
arr.forEach(function (v) {
if (v == num) {
break;
}
console.log(v);
});
这里有几点东西是特别要注意一下的,第一forEach方法是没有返回值的,第二,forEach方法是不能中断的,所以在里面break跟return都是没啥卵用的。第三,不需要知道循环的次数
你会得到一段报错的信息了
例子2:
var arr = [1, 2, 3, 4, 5];
var num = 3;
arr.forEach(function (v) {
if (v == num) {
return;
}
console.log(v);
});
你可以看到,是不能中断的
(3)slice方法
例子1
var arr = [1,2,3,4,5];
var res=arr.slice(2)
console.log(arr,res);
在这我们可以看到arr还是原数组不变,res是截取索引到之后的数组,这里的2是索引的意思
例子2
var arr = [1,2,3,4,5];
var res=arr.slice(2,3)
console.log(arr,res);
在这里我们可以看到arr依然是数组本身,res则是所以从2开始到3不包括索引为3的数组
例子3
var arr = [1,2,3,4,5];
var res=arr.slice(-2,-1)
console.log(arr,res);
我们会惊奇的发现,里面的参数也可以为负数,热搜是倒数第2到倒数第1(不包括倒数第1)的数组。
(4)filter方法
var arr = [10, 20, 30, 40, 50];
var res = arr.filter(function (items, index, arr) {
return items >= 30;
})
console.log(res);
返回值:根据你的条件过滤出的数据组成的数组
(5)some方法
var arr = [1, 2, 3, 4, 5];
var num = 3;
arr.every(function (v) {
if (v == num) {
return false;
} else {
console.log(v);
return true;
}
});
满足条件就会中断,就只会打印1 2 两个元素
(6)push方法
var arr=[1,2,3,4,5,6,7,8]
var res = arr.push(50)
console.log(res,arr);
打印我们可以看到res返回的不是一个数组 而是一个数字9 这个9代表新数组的长度
再看看原来的数组 arr后面添加了一个50
这样我们就可以得出结论:
arr.push(值) 向数组的最后一个位置追加一个元素
语法:arr.push()
返回值:改变之后的数组的长度
改变原数组
(7)pop方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.pop()
console.log(res,arr);
打印可得 返回的res是个数字8 这个8是删除的那一个元素8 arr则是进行删除后的到的数组
我们又可以总结出:
arr.pop() 删除数组中的最后一个元素
语法:arr.pop()
返回值:以字符串的形式被删掉的那个元素
改变原数组
(8)unshift方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.unshift(50)
console.log(res,arr);
打印可得 返回的res是个数字9 这个9是返回数组的长度 arr则是进行添加后的到的数组
我们可以总结出:
arr.unshift(值) 在数组的最前面添加一个元素
返回值: 改变之后数组的长度
改变原数组
(9)shift方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.shift(50)
console.log(res,arr);
打印可得 返回的res是个数字1 这个1是删除的个数 arr则是进行删除后的到的数组
我们可以总结出:
arr.shift() 删除数组中的第一个元素
返回值:以字符串的形式被删掉的那个元素
改变原数组
(10)splice方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.splice(5,2)
console.log(res,arr);
打印可得 返回的res是个数组 这个数组是删除的元素组成的 arr则是进行删除后的到的数组
在这基础上我们在进行扩展:
var arr=[1,2,3,4,5,6,7,8]
var res=arr.splice(5,1,20)
console.log(res,arr);
打印可得 返回的res是个数组 这个数组是被替换的元素组成的 arr则是进行替换后的到的数组
我们可以总结出:
arr.splice(idx,num) 从指定位置开始 删除数组的元素
idx:指定位置的索引
num:删除的个数
arr.splice(idx,num,value)
value:用来替换删除掉的元素
返回值:以数组的形式返回 删除的元素
改变原数组
(11)reverse方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.reverse()
console.log(res,arr);
打印可得 返回的res是个数组 这个数组是反转后的 arr也是一样
我们可以得到结论:
reverse() 反转数组
返回值: 跟反转数组一样
改变原数组
(12)concat方法
var arr=[1,2,3,4,5,6,7,8]
var arr2=[3,5,7,9]
var arr3=["b",5,7,9]
var res=arr.concat(arr2,arr3)
console.log(res,arr);
打印可得 返回的res是个数组 这个数组是合并arr2, arr3后组成的 arr则是原来数组
我们可以总结:
concat() 合并数组
语法:arr.concat(合并的数组)
返回值:合并后的数组
不改变原数组
(13)indexOf方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.indexOf (5)
console.log(res,arr);
打印可得 返回的res是个数字4 这个4代表的是索引 下标 (要记住这里的索引是从0开始所以是4) arr则是原来数组
我们可以总结:
indexOf 判断数组中是否存在某个元素
语法:arr.indexOf(要查询的元素)
返回值:如果元素存在就返回元素所在的索引位置,元素不存在返回 -1
(14)join方法
var arr=[1,2,3,4,5,6,7,8]
var res=arr.join (",")
console.log(res,arr);
打印可得 返回的res是个字符串由,隔开 arr则是原来数组
我们可以总结:
arr.join(‘拼接符’) 把数组转化为字符串,默认用逗号拼接
返回值:拼接好的字符串
不改变原始数组
(15)sort方法
var arr=[5,6,8,100,0,4,3,6,7,5];
arr.sort(function(a,b){
return a-b
})
console.log(arr);
打印可得 arr是排序好的数组(从小到大)升序 那么有升序就有降序 降序就是把里面return的a-b变成b-a即可就不演示了
我们可以总结:
sort() 排序
原理:利用递归和冒泡排序的方式进行排序的 了解更多可以点击这里
如果sort方法没有参数,那么会按照ASCII 值进行排序,不会按照数值的大小排序
如果要按照数值的大小排序,那么必须 给sort方法传递参数
这个参数是一个 函数,并且这个个函数又有两个参数
还有一个返回值: a-b 得到是从小到大排序 或者 b-a 得到的适合于从大到小排序
sort(function(a,b){
return a -b
})
(16)reduce方法
var arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function (prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
这里有四个参数:
prev: 第一项的值或上一次叠加的结果值
cur: 当前会参与叠加的项
index: 当前值的索引
arr: 数组本身
了解完后再看函数就不难理解了