总结 —— 遍历

原生 js 中 for 语句

可使用 continue 跳出当前循环， break 跳出整个循环

如果 for 语句在函数中，使用 return 可以结束 for 循环，同时也会结束函数后续代码的执行

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

原生 js 中数组的 forEach 方法

遍历数组

不能用 break continue 语句跳出整个循环
不支持 return 操作输出，return 只用于跳出当前循环

arr.forEach(function(item, index, arr) {
  console.log(item)
  console.log(this)
})
// 返回值: undefined

原生 js 中 for…in 语句

遍历对象

支持 break, continue 跳出循环

会枚举原型链中的属性

for (var key in obj) {
  console.log(key) // 键
  console.log(obj[key]) // 值
}

如果使用 for in 遍历数组，会产生一些问题

var arr = ['a', 'b', 'c']
a.name = 'd'
for (var index in arr) {
  console.log(index) // '0', '1', '2', 'name'
}

1. 数组的索引值 index 是 String 类型
2. 会将 expando 属性也遍历出来
3. 在某些情况下，在遍历数组元素时顺序是任意的

es6 for…of 方法

遍历类数组集合(Array, Map, Set, String, Arguments)

支持 break, continue 和 throw

let arr = [1, 2, 3, 4]
for (const item of arr) {
  console.log(item)
}

for…of 与 for…in 的区别

参考 MDN

无论是 for…in 还是 for…of 语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for…in 语句以任意顺序迭代对象的可枚举属性。

for…of 语句遍历可迭代对象定义要迭代的数据。

jquery 中的 each 方法

遍历 jQuery 对象集合，为每个匹配的元素执行一个函数

$(selector).each(function(index, element) {
  // index 表示当前元素在所有匹配元素中的索引号
  // element 表示当前元素 dom 对象
  // this 在函数内部，this指向了element
})

$('li').each(function(index, ele) {
  // $(ele).css("backgroundColor", arr[index])
  $(this).css('backgroundColor', arr[index])
})

php 中 foreach 语句

用来遍历数组(关联数组和索引数组均可)。

foreach($arr as $key => $value) {
  // $arr: 要遍历的数组
  // $key: 键，可以是任意变量名
  // $value: 值，可以是任意变量名
}
foreach($arr as $value) {

}

// 遍历关联数组
$arr = array(
  "name"=>"zs",
  "age"=>18,
  "sex"=>20
);
foreach($arr as $k => $v) {
  echo $k . "=" . $v . "<br>";
}