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定义一个不可枚举的属性cObject.defineProperty(obj, "c", {  value: 2,  emumerable: false,  writable: true,  configurable: true});//虽然属性c不可枚举，但是值依然存在console.log(obj.c); //2for (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节点，更多用法可以自己慢慢体会

原文地址