JavaScript中forEach、map和filter的用法区别？

forEach方法用于调用数组的每个元素，利用回调函数对数组进行操作，且无法break中途跳出循环，不可控、不支持return操作输出，return只用于控制循环是否跳出当前循环;

let arr = [1,2,3,4,5];
arr.forEach((value,index,arr)=>{
	console.log(value);//1,2,3,4,5
    console.log(index);//0,1,2,3,4
    console.log(arr);//[1,2,3,4,5] 
})

 

map()根据当前数组映射出一个新的数组，map有return返回值（map需return）且可以遍历对象，一般用来处理需要修改某一个数组的值。

1.数组中的每个元素乘于输入框指定的值，并返回新数组
let numbers = [65, 44, 12, 4];
let number = numbers.map((value,key,numbers) => {
    console.log(value)    // 65,44,12,4
    console.log(key)      // 0，1，2,3
    console.log(numbers)      //[65,44,12,4]  有若干个值 就会遍历若干个自身的数组 
    return value * 10;
})
console.log(number); //[650,440,120,40]
console.log(numbers);    //[65, 44, 12, 4]


2.map遍历对象
let people= [
			{ name: "胡歌", age: 30 },
			{ name: "唐嫣", age: 28 },
			{ name: "霍建华", age: 32 }
]
var newPeople= people.map(item => {
		return {
			// 改变循环的值 得到一个新的数组 
			name:"明星"+item.name,
			age: item.age-2
		};
});
console.log(newProducts)
/*
0: {name: "明星胡歌", age: 28}
1: {name: "明星唐嫣", age: 26}
2: {name: "明星霍建华", age: 30}
*/

filter()方法创建一个新的数组，新数组中的元素是通过过滤指定数组中符合条件的所有元素。它不会改变原始数组；

利用 filter 遍历出所有偶数:
let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0;
});
console.log(newArr)
// [56, 48]

filter() 去掉空字符串、undefined、null

let arr = ['','55','66',undefined,'小燕子',undefined]
let newArr = arr.filter(item => item)
console.log(newArr) //  arr=['55','66','小燕子']

filter数组去重的操作

var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
console.log(unique(arr))
// [1, "RUNOOB", true, 15]

filter筛选数组对象

let arr = [
	    {a:'苹果',b:'面包',c:'吃'},
	    {a:'香蕉',b:'面包',c:'不吃'},
	    {a:'香蕉',b:'苹果',c:'吃'},
	    {a:'苹果',b:'香蕉',c:'不吃'},
	  ]
console.log(arr.filter(item => item.a=== '苹果' ))
//[{a:'苹果',b:'面包',c:'吃'},{a:'苹果',b:'香蕉',c:'不吃'}]


如果是多个条件的筛选的话 可以在item后加上这样类型的判断
item => (a?item.a === a : true) && (b?item.b === b : true) && (c?item.c === c : true)
a和b和c 的值都是需要我们提前预设的