13.遍历数据的方法

编程思想、推荐使用

for 和 while

1. 可以 continue 和 break
2. 可以改变原数组

for...in 和 for...of

for in 一般用来遍历对象的 key、for of 一般用来遍历数组的 value 因为 for … in 语法是第一个能够迭代对象键的 JavaScript 语句，循环对象键（{}）与在数组（[]）上进行循环不同，引擎会执行一些额外的工作来跟踪已经迭代的属性。因此不建议使用 for...in 来遍历数组

• for...in
  1. 迭代可枚举属性
  2. 可以获取对象的原型方法
• for...of
  1. 遍历可迭代属性（可迭代对象,包括 Array，Map，Set，String，TypedArray，arguments 对象）
  2. for of 不可以遍历普通对象(xxx is not iterable)

以遍历 Array 作为例子

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";
for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";

foreach 和 map

• foreach
  1. 可以改变原数组
  2. 不能 continue 和 break
  3. 返回 undefined
• map
  1. 不可以改变原数组
  2. 不能 continue 和 break
  3. 返回一个新的数组

filter、every、some、reduce（类 foreach）

• filter：筛选，返回符合条件的数组列表
• every（some）：该方法测试一个数组内的所有（只要有）元素是否都能通过某个指定函数的测试，默认是 return false

reduce（类 map）

遍历方法性能对比

• for 循环遍历 < for...of 遍历、forEach 遍历 < for...in 遍历、map 遍历

原因：

1. map 要生成新数组，push 等操作。
2. for...in 要迭代原型链