js循环(for/for in/forEach/map/for of)详解

1. 基础循环 for

for (var i = 0; i < list.length; i++) {
        //循环体
}
复制代码

最基础的循环也有优化的空间：整个循环中数组的长度是不会改变的javascript

for (var i = 0, len = list.length; i < len; i++) {
        //循环体
}
复制代码

2. for in 循环 遍历对象的属性或数组索引

• for in 容许循环以不一样的顺序遍历对象的属性。若是算法依赖于遍历的顺序，最好不适用for in 仍是选择常规的for循环。

for (var key in obj) {
        //循环体
}
复制代码

3. ES5 forEach()方法

• forEach()参数函数包含三个参数(item,index,list) 数组元素 元素索引 和数组自己。
• 后两个参数可省略。
• 对数组进行值操做，会改变原来数组的值。
• forEach()在循环过程当中没法终止遍历，即没有break语句，可以使用try catch 抛出foreach.break异常提早终止。

var data = [1, 2, 3, 4, 5];
data.forEach((item, index, list) => {
    list[index] = item + 1;
})
console.log(data); // =>[2, 3, 4, 5, 6]
复制代码

4. ES5 map()方法

• map()将数组的每一个元素给指定的函数，并返回一个数组，须要有返回值。
• map()返回的是一个新的数组，不修改调用的数组。

var data = [1, 2, 3];
var b = data.map((item) => {
    return item * item;
})
console.log(b); // =>[1, 4, 9]
复制代码

5. ES6 for of循环

• for of循环能够使用的范围包括数组、Set 和 Map 结构、某些相似数组的对象（好比arguments对象、DOM NodeList 对象）。

1. 获取数组的值

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}
复制代码

2.获取数组的键 值 键值对。 keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。java

const arr =  ['a', 'b'];
for (let index of arr.keys()) {
  console.log(index); // 0 1
}

for (let elem of arr.values()) {
  console.log(elem); // 'a' 'b'
}

for (let [index, elem] of arr.entries()) {
  console.log(index, elem);  // 0 "a" 1 "b"
}
复制代码