JavaScript——遍历器

178 阅读3分钟
  1. for循环: for 循环是 Js 中最常用的一个循环工具, 经常用于数组的循环遍历。
    var arr = [1,2,3,4,5]
    for(var i = 0;i < arr.length;i++) {
    console.log(arr[i])
    }

image.png

2.   for in 循环: for in 循环主要用于遍历普通对象, i 代表对象的 key 值, arr[i] 代表对应的 value;使用for in 循环在某些情况下不适用,会出现数据错误;另外for in 循环的时候, 不仅遍历自身的属性, 还会找到 prototype 上去, 所以最好在循环体内加一个判断

var obj = {name:"xiaozhang",age:21}
for(var key in obj) {
console.log(obj[key])
}

image.png

3.    forEach循环: 循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度, 他有三个参数, 只有第一个是必需的, 代表当前下标下的 value。另外请注意, forEach 循环在所有元素调用完毕之前是不能停止的, 它没有break 语句, 如果你必须要停止, 可以尝试try-catch 语句, 就是在要强制退出的时候, 抛出一个 error 给catch 捕捉到, 然后在catch 里面return, 这样就能中止循环了。forEach只能用来遍历数组

var arr = [1,2,3,4]
var re = arr.forEach(function(el) {
console.log(el)
})

image.png

  1. while循环: 当条件满足时,才执行循环
var arr = [1,2,3,4]
var i = 0
while (arr[i]){
console.log(arr[i])
i++
}

image.png

5.  do-while循环: 和while循环类似,区别是while循环只有条件满足才执行,因此有可能不执行;而do-while循环至少也会执行一次,是先执行一次再判断条件是否满足

var arr = [1,2,3,4]
var i = 0
do {
    console.log(arr[i])
    i++
}while(arr[i])

image.png

6.  map() 方法  : map() 方法返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值。 注意: map 和 forEach 方法都是只能用来遍历数组, 不能用来遍历普通对象。

                        var arr = [1,2,3,4]
			var re = arr.map(function(n) {
				console.log(n)
				return n+1
			})
			console.log(re)

image.png

7.   filter() 方法 :  filter 方法是 Array 对象内置方法, 它会返回通过过滤的元素, 不改变原来的数组。

                        var arr = [1,2,3,4]
			var re = arr.filter(function(n) {
				console.log(n)
				return n > 2
			})
			console.log(re)

image.png

8.   some()方法:  some() 方法用于检测数组中的元素是否满足指定条件( 函数提供), 返回 boolean 值, 不改变原数组。只要有一个元素满足就返回true

                        var arr = [1,2,3,4]
			var re = arr.some(function(n) {
				return n > 2
			})
			console.log(re)

image.png

9.  every() 方法:   every() 方法用于检测数组所有元素是否都符合指定条件( 通过函数提供), 返回 boolean 值, 不改变原数组。

                        var arr = [1,2,3,4]
			var re = arr.every(function(n) {
				return n > 2
			})
			console.log(re)

image.png

10.   reduce() :  reduce() 方法接收一个函数作为累加器, 数组中的每个值( 从左到右) 开始缩减, 最终计算为一个值。

                        var arr = [1,2,3,4]
			var re = arr.reduce(function(n1,n2) {
				return n1 + n2
			})
			console.log(re)

image.png

11.  reduceRight() 方法: 作用和reduce() 方法一样,但是它是从数组的末尾处向前开始计算。

                        var arr = [1,2,3,4]
			var re = arr.reduceRight(function(n1,n2) {
				return n1 + n2
			})
			console.log(re)

image.png

12.  for of 循环 : for of 循环是 Es6 中新增的语句, 用来替代for in 和 forEach, 它允许你遍历 Arrays( 数组), Strings( 字符串), Maps( 映射), Sets( 集合) 等可迭代(Iterable data) 的数据结构, 注意它的兼容性。

                        var arr = [1,2,3,"xiaozhang"]
			for(var i of arr) {
				console.log(i)
			}

image.png