JavaScript 数组的常用方法(一)
前言
本人是21届非科班应届生,意向从事前端行业,博客主要是记录巩固自己的前端知识,以及分享自己在求职路上遇到的一些题目。这是我的第一篇博客,希望能给大家带来帮助,共同进步。
1.Array.map()
此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,不会改变原本数组。
//array.map(function(currentValue,index,arr), thisValue)
//currentValue:当前元素的值 (必须)
//index:当前元素下标 (可选)
//arr:当前元素属于的数组对象 (可选)
//thisValue:对象作为该执行回调时使用,传递给函数,用作 "this" 的值。(可选)
let arr = [1,2,3,4];
let arrMap = arr.map(function(val,index) {
return val = val + index; //!!函数记得return
})
/*let arrMap = arr.map((val,index)=>{
return val = val + index;
})*/
console.log(arr) //[1, 2, 3, 4]
console.log(arrMap) //[1, 3, 5, 7]
拓展:
对空白的处理:跳过空位,但会保留这个值。
let arr = [,2,,4];
let arrMap = arr.map((val,index)=>{
return val = val + index;
})
console.log(arrMap) //[, 3, , 7]
2.Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数,若数组元素为原始类型,则不会改变原有数组,且没有返回值,注意和map方法区分。
//array.forEach(function(currentValue,index,arr), thisValue)
let arr = [1,2,3,4];
let arrEach = arr.forEach((val,index)=>{
val = val + index;
console.log(val); //1,3,5,7
})
console.log(arr) //[1,2,3,4]
console.log(arrEach) //undefined
拓展:
1、对空白的处理:跳过空位。
let arr = [,2,,4];
let arrEach = arr.forEach((val,index)=>{
val = val + index;
console.log(val); //3,7
})
2、当数组元素为引用对象时,会改变对象的值。
(地址未发生改变,内部的值重写了)
let arr1 = [1,2,3,4];
let arr2 = [{a:1},{a:2},{a:3}];
arr1.forEach(val =>{
val = val * 2;
});
arr2.forEach(val =>{
val.a = val.a * 2;
});
console.log(arr1); // [1,2,3,4]
console.log(arr2); // [{a:2},{a:4},{a:6}]
3.Array.filter()
此方法是将所有元素进行判断,数组过滤,将满足条件的元素作为一个新的数组返回。
//array.filter(function(currentValue,index,arr), thisValue)
let arr = [1,2,3,4];
let arrFilter = arr.filter(val => {
console.log(val); //1,2,3,4
return val%2==0;
})
console.log(arr); //[1,2,3,4]
console.log(arrFilter); //[2,4]
拓展:
对空白的处理:跳过空位。
let arr = [1,,,4];
let arrFilter = arr.filter(val => {
console.log(val); //1,4
return val%2==0;
})
console.log(arr); //[1,,,4]
console.log(arrFilter); //[4]
4.Array.every()
此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则返回false。
//array.every(function(currentValue,index,arr), thisValue)
let arr = [1,2,3,4];
let result = arr.every(val => {
console.log(val); //1,2,3,4
return val>=1;
})
console.log(arr); //[1,2,3,4]
console.log(result); //true
拓展:
对空白的处理:跳过空位。
let arr = [,2,,4];
let result = arr.every(val => {
console.log(val); //2,4
return val>=1;
})
console.log(result); //true
5.Array.some()
此方法是将所有元素进行判断返回一个布尔值,如果存在一个或以上元素满足判断条件,则返回true,否则返回false。
let arr = [1,2,3,4];
let result = arr.some(val => {
console.log(val); //1,2,3,4
return val>=4;
})
console.log(arr); //[1,2,3,4]
console.log(result); //true
拓展:
对空白的处理:跳过空位。
let arr = [,2,,4];
let result = arr.some(val => {
console.log(val); //2,4
return val>=4;
})
console.log(result); //true
6.Array.reduce()
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值
let arr = [1,2,3,4];
let sum = arr.reduce((total,val) => {
console.log(val) //!!注意这里从2开始输出 2,3,4
return total + val
})
console.log(sum); //10
当initialValue即初始值为空时,reduce方法第一步执行initialValue = arr[0],函数从数组arr[1]开始执行,所以上例不会输出1,2,3,4。
当设置initialValue有值时,则会正常输出1,2,3,4。
let arr = [1,2,3,4];
let sum = arr.reduce((total,val) => {
console.log(val) //1,2,3,4
return total + val
},0)
console.log(sum); //10
拓展:
1.对空白的处理:跳过空位。
let arr = [1,,3,];
let sum = arr.reduce((total,val) => {
console.log(val) //只输出3
return total + val
})
console.log(sum); //4
2.用reduce方法实现map方法。
let arr1 = [1,2,3,4];
let arrMap = arr1.map(val=>val*2);
var myMap = function(arr,func) {
let arrReduce = arr.reduce(function(acc,val) {
val = func(val);
acc.push(val);
return acc;
},[]) //将acc初始值设为[]
return arrReduce;
}
console.log(arrMap); //[2,4,6,8]
console.log(myMap(arr1,val => val*2)) //[2,4,6,8]
总结
对空白的处理:
1、map()会跳过空位,但会保留这个值。
2、forEach(), filter(), reduce(), every() 和some()都会跳过空位,不执行函数内的语句。
(第一部分暂时总结这么多,写个博客还是挺费时间的,不过收获也挺大的,要是哪有问题的话,也欢迎能在评论区之处)