# js 中的遍历

笑看吳鉤
215 阅读1分钟

for循环

var arr = ['a', 'b', 'c'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

while

for循环在已知循环的初始和结束条件时非常有用。而上述忽略了条件的for循环容易让人看不清循环的逻辑，此时用while循环更佳。

while循环只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。比如我们要计算100以内所有奇数之和，可以用while循环实现：

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500
在循环内部变量n不断自减，直到变为-1时，不再满足while条件，循环退出。

do ... while

do { ... } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：

var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100

用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

1.forEach

forEach 方法从头至尾遍历数组，为每个元素调用指定的函数。传递的函数作为forEach（）的第一个参数。然后forEach（）使用三个参数调用该 函数：数组元素、元素的索引和数组本身。如果只关心数组元素的值，可以编写只有一个参数的函数——额外的参数将忽略：forEach（）无法在所有元素都传递给调用的函数之前终止遍历。也就是说，没有像for循环中使用的相应的break语句。如果要提前终止，必须把forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止：

function foreach（a,f,t）{
    try { a.forEach（f,t）; }
    catch（e）{
        if（e === foreach.break）return;
        else throw e;
    }
}
foreach.break = new Error（"StopIteration"）;

.for ... in

for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：

var obj = {
    name: '李银河',
    age: 18,
    city: 'Beijing'
};
for (var key in obj) {
    console.log(key); // 'name', 'age', 'city'
}

要过滤掉对象继承的属性，用hasOwnProperty()来实现：

var obj = {
    name: '李银河',
    age: 20,
    city: 'Beijing'
};
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引：

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

请注意，for ... in对Array的循环得到的是String而不是Number。

1.index索引为字符串型数字，不能直接进行几何运算 2.遍历顺序有可能不是按照实际数组的内部顺序 3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性 所以for in更适合遍历对象

for...of

var arr = [
    { name:'张三', age:18 },
    { name:'李四', age:24 },
    { name:'王五', age:26 },
    { name:'赵六', age:34 }
];
for(var item of arr){	
    console.log(item.name,item.age);
 //张三 18
 //李四 24
 //王五 26
 //赵六 34
}


 const obj = {a: 'x', b: 'y'};
  for (let i of Object.keys(obj)) {
    console.log(i) // a, b
  }

　　简单总结就是，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

　　for-in总是得到对象的key或数组、字符串的下标。

　　for-of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set。 for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名

一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。

例3这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报json is not iterable

for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。

只要有 iterator 接口的数据结构,都可以使用 for of循环。哪些数据结构部署了 Symbol.iteratoer属性了呢? 数组 Array Map Set String arguments对象 Nodelist对象, 就是获取的dom列表集合

filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let arr = ['a', 'b', 'c', 'd'];
let arr2 = arr.filter(item => item === 'a')
//['a']

map

由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果，数组中的元素为原始数组调用函数处理后的值。

function pow(x) {
    return x * x;
}
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.map(item => item === 's')
console.log(arr2);


var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

reduce

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

let arr = ['a', 'b', 'c', 'd'];
let arr2 = arr.reduce((total, item) => {
   return total + item
}, '')
//abcd


var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25
avatar
文章
阅读
粉丝