JavaScript之遍历

一.for循环

最常见的遍历方法，用来遍历数组，学过编程语言的基本都知道怎么用，如下：

var a = [1, 2, 3, 4, 5];
for (var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

上面这是最简单的用法，我在有些书里还经常看到这种用法，贴出来供参考：

var a = [1, 2, 3, 4, 5];
for (var i = 0, value; value = a[i++];) {
  console.log(value);
}

二.forEach，some和every

对于数组来说，有时候经常有遍历所有属性值的需求，javascript有三种数组的辅助迭代器，每种方法的参数都是一个回调函数，回调函数的参数便是数组每一个属性对应的值，下面一一说明：

• forEach(..)：会遍历数组中的所有值并忽略回调函数的返回值

var a = [1, 2, 3, 4, 5];
a.forEach(function (i) {
  console.log(i);//1 2 3 4 5
  // return true ,return false 或者不写返回值，结果都一样
});

• some(..):一直运行直到回调函数返回 true (或者“真”值).返回true时相当于在for循环里break,会提前终止循环

var a = [1, 2, 3, 4, 5];
a.some(function (i) {
  if (i === 3) {
    return true;
  }
  console.log(i); //1 2
  return false;//回调函数默认返回false，这里不写也可以
});

• every(..):一直运行直到回调函数返回 false (或者“假”值).返回false时相当于在for循环里break,会提前终止循环

var a = [1, 2, 3, 4, 5];
a.every(function (i) {
  if (i === 3) {
    return false;
  }
  console.log(i);//1 2
  return true;//回调函数默认返回false，这里return true必须要写，否则在遍历第一个属性值之后就会终止循环
});

三.for..in和for..of

• for..in循环会遍历对象中的所有可枚举属性

关于对象属性是否可枚举可以参考我的上一篇博客

var obj = {
  a: 1,
  b: "lian"
};
//给obj定义一个不可枚举的属性c
Object.defineProperty(obj, "c", {
  value: 2,
  emumerable: false,
  writable: true,
  configurable: true
});
//虽然属性c不可枚举，但是值依然存在
console.log(obj.c); //2
for (var i in obj) {
  //只会遍历可枚举属性
  console.log(obj[i]); //1 lian
}

for..in循环可遍历对象的所有可枚举属性，所以一般用来遍历对象而不是数组，否则如果数组对象包含其他可枚举属性，遍历结果就会和期望结果不同：

var a = [1,2,3];
a.ex = "ex";
//注意这里遍历的只是属性
for(var i in a){
  console.log(i); // 0 1 2 ex
}

• for..of :为了弥补for..in循环遍历数组的缺陷，ES6推出了for..of循环

var a = [1,2,3];
a.ex = "ex";
//而这里遍历的是属性的值
for(var i of a){
  console.log(i); // 1 2 3
}

由上面的测试可以看出for..in循环默认遍历的是可枚举属性列表，所以更适合遍历对象
而for..of循环默认遍历数组每一项的值，所以更适合遍历数组，
虽然数组也算是对象，但这里数组指的只是Array对象（因为Array对象内置了@@iterator，这里不讨论）而不包括伪数组对象（具有length属性且可以通过下标访问属性值），如执行下面的代码就会报错：

var a = {
  length:2,
  0:1,
  1:"lian"
}
for(var i of a){
  console.log(i); 
}

四.其他

我们在网页开发时经常会用到map方法，map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var a = [1,2,3];
var result = a.map(function (i) {
  return i*3;
});
console.log(result); //[ 3, 6, 9 ]

上面的代码就是每次取出a的每一个属性值，调用方法生成一个新的结果值，然后将结果值存入返回值的数组中，所以result是一个数组，每一项的值是a每一项的值乘以3的结果
map在网页开发中通常用来根据data值批量生成DOM节点，更多用法可以自己慢慢体会