JS各种循环复习记录

JS各种循环复习记录

今天突然想重新复习一下有关js的循环方法，于是变上百度转了一圈，然后就想每次这样找好像也有点麻烦，干脆就收集一下记录下来，方便以后自己查阅，于是有了这篇文章。
1、for 循环
for 循环是我们平常用的最多的一个循环函数，经常用于数组的循环遍历。括号里面的三个条件语句都可以省略，但是两个‘ ; ’分号不可省。

let arr = ['ye','18'];
for (let i=0; i<arr.length; i++){
 	console.log(i,arr[i])
}
// 0 ye
// 1 18

2、for in 循环
for in 循环主要用于遍历普通对象，key代表对象的键名，obj[key] 代表对应的键值(value)。
也可以用它遍历数组，一般情况下也可以得到数组元素的下标(index)和元素值(value)，但是需要注意一点，此时的index是字符串类型(string)而不是数字(bumber),有些时候可能会带来一定的麻烦。

let obj = {name:'ye',age:'18'}
for(let key in obj){
 	console.log(key ,obj[key])
}
// name ye
// age 18

3、for of 循环
for of 循环是 Es6 中新增的语句,value是对应的键值，用来替代 for in 和 forEach，它允许遍历的范围包括： Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,不支持遍历普通对象(object)，注意它的兼容性。

let arr = ['ye','18'];
for(let value of arr){
 	console.log(value)
}
// ye
// 18

4、while 循环
同样的遍历同一个数组，先用 for 循环方法

let arr = ["ye","18"];
for (let i=0;arr[i];i++){
	console.log(cars[i])
};
// ye
// 18

然后是 while 循环方法

let arr = ["ye","18"];
var i=0;
while (arr[i])
{
	console.log(arr[i])
	i++;
};
// ye
// 18

可以看到，它们可以实现同样的效果，事实上它们底层的处理是一样的，不过 for 循环可以把定义、条件判断、自增自减操作放到一个条件里执行(也就是括号里面)，代码看起来方便一些而已。

5、do while 循环
do while 循环是 while 循环的一个变体，while 循环是先判断再执行，do while是先执行再判断，第一次一定会执行，然后才进行条件判断，是 true 的话再继续执行操作，是 false 的话循环结束。

let i = 3;
do{
 	console.log(i)
 	i--;
}
while(i>0)
// 3
// 2
// 1

6、Array forEach 循环
forEach循环，循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度,有三个参数(value,index,arr)，只有第一个是必需的，代表当前下标下的 value。只能用来遍历数组，不能用来遍历普通对象。

注意，forEach 循环在所有元素调用完毕之前是不能停止的，它没有 break 语句，如果你必须要停止，可以尝试 try catch 语句，就是在要强制退出的时候，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return，这样就能中止循环了，如果你经常用这个方法，最好自定义一个这样的 forEach 函数在你的库里。

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

7、Array map()方法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。跟forEach 一样，有三个参数(value,index,arr)，只有第一个是必需的，代表当前下标下的 value。
只能用来遍历数组，不能用来遍历普通对象。

let arr = [1,2,3];
let tt = arr.map(function(value){
	 console.log(value)
	 return value*2;
})
// [2,4,6]

8、Array filter() 方法
filter 方法是 Array 对象内置方法，会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。有三个参数(value,index,arr)，只有第一个是必需的，代表当前下标下的 value
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组

let arr = [1,2,3];
let arr1 = arr.filter(function(value){
 	return value>1;
})
// [2,3]

9、Array some() 方法
some() 方法用于检测数组中的元素是否满足指定条件（通过函数提供）,如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

let arr = [1,2,3];
let arr1 = arr.some(function(value,index){
 	return value>1;
})
// true

10、Array every() 方法
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测,如果所有元素都满足条件，则返回 true。

let arr = [1,2,3];
let tt = arr.some(function(value,index){
 	return value>1;
})
// 检测数组中元素是否都大于1
// false

11、Array reduce()方法，有两个参数callback(函数)，initialValu(作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。)
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reducer 函数接收4个参数:
1.Accumulator (acc) (累计器)，累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
2.Current Value (cur) (当前值)，数组中正在处理的元素
3.Current Index (idx) (当前索引)，数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
4.Source Array (src) (源数组)，调用reduce()的数组

//数组元素求和
let sum = [0, 1, 2, 3];
sum.reduce(function (acc, cur) {
  return acc+ cur;
}, 0);
// 6

//累加对象数组里的值
let initialValue = 0;
let obj = [{x: 1}, {x:2}, {x:3}]
let sum = obj.reduce(function (acc, cur) {
    return acc + cur.x;
},initialValue)
console.log(sum) // logs 6

//将二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let flattened =arr.reduce(
	function(a, b) {
		return a.concat(b);
	},
	[]
);
// flattened is [0, 1, 2, 3, 4, 5]

有关reduce()方法的更多实际应用场景请点击这里时空隧道
12、Array reduceRight()方法
reduceRight()方法,和 reduce() 功能是一样的，只不过它是从数组的最后一个元素开始往前计算。

let sum = [0, 1, 2, 3];
sum.reduce(function (acc, cur) {
  return acc+ cur;
}, 0);
// 6

本文仅是本人学习记录而已，若有错误指出，欢迎指出，敬请谅解！
参考网站：https://www.runoob.com/jsref/jsref-obj-array.html
https://www.jb51.net/article/141193.htm