js中 find map foreach filter for in 循环的使用总结

find map foreach filter主要用来遍历数组，for in用于遍历对象。

1. find()：返回通过测试的数组的第一个元素的值

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
 

语法：

array.find(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。
 

示例：

 var arr = [1,2,3,4,5,6,7];
 var ar = arr.find(function(elem){
     return elem>5;
 });
 console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]

2. filter()：创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
 

语法：

array.filter(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回数组，包含了符合条件的所有元素，如果没有符合条件的则返回空数组
 

 示例：

 var arr = [1,2,3,4,5,6,7];
 var ar = arr.filter(function(elem){
     return elem>5;
 });
 console.log(ar);//[6,7]
console.log(arr);//[1,2,3,4,5,6,7]

3. map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素

map方法会给原数组中的每个元素都按顺序调用一次callback函数，callback每次执行后的返回值（包括undefined）组合起来形成一个新数组。callback函数只会在有值的索引上被调用，那些从来没被赋过值或者使用delete删除的索引则不会被调用。

使用map方法处理数组时，数组元素的范围是在callback方法第一次调用之前就已经确定了。在map方法执行的过程中，原数组中新增加的元素将不会被callback访问到，若已经存在的元素被改变或删除了，则他们传递到callback的值是map方法遍历到他们的那一刻的值，而被删除的元素将不会被访问到。
 

语法：

array.map(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
 

示例：

 var arr = [1,2,3,4,5,6,7];
 var ar = arr.map(function(elem){
    return elem*4;
 });
 console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]

 4. forEach()：用于调用数组每个元素，并将元素传递给回调函数（注意没有办法跳出或终止forEach语句，除非抛出异常）

forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

 语法：

array.forEach(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：undefined

示例：

 var arr = [1,2,3,4,5,6,7];
 var sum = 0;
 var ar = arr.forEach(function(elem){
    sum+=elem*4;
 });
 console.log(ar);//undefined
 console.log(arr);//[1,2,3,4,5,6,7]
 console.log(sum);//112

forEach()返回值为undefined，里面即便有return语句，返回值依然是undefined

5.for in 对对象的key值（键值）进行循环

示例：

let obj={
				a:'11',
				b:'dd',
				c:'name',
				d:'sex'
			}
			// delete obj.a
			for(i in obj){
				console.log(i);
				if(obj[i]=='dd'){
					delete obj[i]
				}
			}
			console.log(obj);
			// {
			// 	a:'11',
			// 	c:'name',
			// 	d:'sex'
			// }

总结：数组的四个循环方法都不会改变原数组，而且不会对空数组进行检测。

find()方法主要用来返回数组中符合条件的第一个元素（没有的话，返回undefined）

filter()方法主要用来筛选数组中符合条件的所有元素，并且放在一个新数组中，如果没有，返回一个空数组

map()方法主要用来对数组中的元素调用函数进行处理，并且把处理结果放在一个新数组中返回（如果没有返回值，新数组中的每一个元素都为undefined）

forEach()方法也是用于对数组中的每一个元素执行一次回调函数，但它没有返回值（或者说它的返回值为undefined，即便我们在回调函数中写了return语句，返回值依然为undefined）
 

for in方法用于对象的遍历，遍历对象的键值，并将键值作为类似数组下标的形式进行增删操作。