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()都会跳过空位，不执行函数内的语句。

（第一部分暂时总结这么多，写个博客还是挺费时间的，不过收获也挺大的，要是哪有问题的话，也欢迎能在评论区之处）