JS循环遍历方法总结

循环结构

在学习循环方法以前，先理解循环结构的执行步骤：

一、声明循环变量；

二、判断循环条件；

三、执行循环体操做；

四、更新循环变量；

五、循环执行2-4，直到条件不成立，跳出循环。

循环方法

一、for循环

var arr = [1, 2, 3, 4, 5];
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(`索引：${i}，元素：${arr[i]}`);
}
// 这里建议缓存数组长度，数组较大时对于性能有比较客观的提高。
// 使用了v8引擎的浏览器(有Loop-invariant code motion特性)会自动将length属性移到循环体外并缓存起来,
// 可是非v8浏览器（这里特指IE）仍是要缓存的，并且缓存起来总没坏处。
复制代码

在for循环中定义的新变量至关于在循环体外定义的变量，因此能够写成以下格式。

var i = 0, len = arr.length;
for (; i < len; i++) {
    console.log(`索引：${i}，元素：${arr[i]}`);
}
复制代码

每次循环执行结束都会对i进行增量操做（增量能够为负数），因此能够将更新变量写在代码块后面。而i++只是其中经常使用写法，也能够是i = i + 2等其余方式。

var i = 0, len = arr.length;
for (; i < len;) {
    console.log(`索引：${i}，元素：${arr[i]}`);
    i++;
}
复制代码

二、while循环

当指定条件为true时循环一段代码块。注意：必定要对条件中使用的变量进行递增，若是不进行递增，循环就不会结束，这将会致使浏览器崩溃。

var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
复制代码

三、do...while循环

do...while循环和while循环相似,区别在于do...while会先执行一次循环体，而后再判断循环条件，只要条件为true就会重复循环。

var i = 0;
do {
    console.log(i);
    i++;
}
while (i < 5);
复制代码

在while和do...while中使用continue要注意：continue不能放在更新变量以前使用，不然循环不会结束形成浏览器崩溃。

四、for...in循环

for...in可用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性，不建议用来遍历数组。

var obj = {a: 1, b: 2,};
for (let i in obj) { // i是对象的属性名
    console.log(`属性：${i}，值：${obj[i]}`);
}
Object.defineProperty(obj, "c", {value: 3,}); // 增长不可枚举的属性c
Object.prototype.d = 4;
for(var i in obj){
    console.log(`属性：${i}，值：${obj[i]}`);
}
复制代码

五、for...of循环

for...of是ES6新增的方法，主要用来遍历具备iterator接口的数据集合，读取数据集合的键值。一个数据结构只要部署了Symbol.iterator属性，就被视为具备iterator接口，就能够用for...of来遍历它的成员。因此for...of能够用来遍历数组、Set和Map结构、某些相似数组的对象（如arguments对象）和字符串等，由于这些数据结构原生部署了iterator接口。而普通对象不具有iterator接口，不能直接用来遍历普通对象。

var arr = [1, 2, 3];
for (let item of arr) { // item是数组每一项的值
    console.log(`元素：${item}`);
}
for (let item of arr.values()) {
    console.log(`元素：${item}`);
}
复制代码

想要获取数组的索引，能够用数组实例的keys()或者entries()方法

for (let index of arr.keys()) {
    console.log(`索引：${index}`);
}
for (let [index, item] of arr.entries()) {
    console.log(`索引：${index}，元素：${item}`);
}
复制代码

遍历字符串。

var str = "hello";
for (let item of str) {
    console.log(item); // h e l l o
}
复制代码

遍历Map对象

var myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);
for (let [key, value] of myMap) {
    console.log(`键名：${key}，键值：${value}`); // Map返回一个数组，分别是当前Map成员的键名和键值
}
// 获取键
for (let key of myMap.keys()) {
    console.log(`键名：${key}`);
}
// 获取值
for (let value of myMap.values()) {
    console.log(`键值：${value}`);
}
复制代码

遍历Set对象

var maSet = new Set(arr);
for (let value of maSet) {
    console.log(value); // Set返回的是一个值
}
// 遍历Map和Set对象的顺序是按照各个成员被添加进数据结构的顺序。
复制代码

遍历arguments对象

function printArguments() {
    for (let item of arguments) {
        console.log(item);
    }
}
printArguments('a', 'b'); // 'a' 'b'
复制代码

六、map()

map()方法返回一个新的数组，它对原数组的每个值做必定的处理后放到新的数组里面，而后返回新数组。

按照原始数组的元素顺序依次处理元素，不会对空数组进行检测，也不会改变原数组,不能使用break和continue语句。

var arr = [1, 2, 3];
var obj = {a: 2};
var newArr = arr.map(function(value, index, arr) {
    // value为当前元素
    // index为当前元素的索引值,可省略
    // arr为当前元素的数组对象,可省略
    console.log(this); // {a: 2}
    console.log(`索引：${index}，元素：${value}`);
    return value * this.a;
}, obj); // 方法能够接受第二个参数，回调函数内部的this对象会指向第二个参数，不传则为当前环境的this
console.log(newArr); // [2, 4, 6]
console.log(arr); // [1, 2, 3]
复制代码

七、forEach()

forEach()用于调用数组的每一个元素，并将元素传递给回调函数。

forEach()不返回值，只用来操做数据，不会对空数组执行回调函数，不能使用break和continue，可使用return。

var arr = [1, 2, 3];
var obj = {a: 2};
var sum = 0;
arr.forEach(function(value, index, arr) { // 参数同map()
    console.log(`索引：${index}，元素：${value}`);
    console.log(this); // {a: 2}
    sum += value;
}, obj); // 方法的第二个参数同map()
console.log(sum); // 6
复制代码

八、filter()

filter,过滤器，顾名思义，过滤掉指定数组不符合条件的元素，返回一个数组。若是没有符合条件的元素则返回一个空数组。

不会对空数组进行检测，也不会改变原数组，不能使用break和continue。

var arr = [1, 2, 3];
let newArr = arr.filter(function(value, index, arr){ // 参数同map()
    console.log(`索引：${index}，元素：${value}`);
    return value > 2;
});
console.log(newArr); // [3]
复制代码

九、some()

some()方法用于检测数组中是否有元素知足指定条件，返回一个布尔值。

依次执行数组的每一个元素：若是有一个元素知足条件，就返回true， 剩余的元素不会再检测；若是没有知足条件的元素，则返回false。

不会对空数组进行检测，不会改变原始数组，不能使用break和continue。

var arr = [1, 2, 3];
var result = arr.some(function(value, index, arr) {
    console.log(`索引：${index}，元素：${value}`);
    return value > 2;
});
console.log(result); // true
console.log(arr); // [1, 2, 3]
复制代码

十、every()

every()和some()相似，都是返回一个布尔值，可是要数组中的所有元素知足指定条件才会返回true,不然返回false。

var arr = [1, 2, 3];
var result = arr.every(function(value, index, arr) {
    console.log(`索引：${index}，元素：${value}`);
    return value > 2;
});
console.log(result); // false
console.log(arr); // [1, 2, 3]
复制代码

十一、reduce()、reduceRight()

reduce()方法接收一个函数做为累加器，数组中的每一个值按顺序缩减(reduce)，最终计算返回一个值。

reduceRight()，顾名思义，顺序是从右往左。

var arr = [1, 2, 3, 4];
var total = arr.reduce(function(total, value, index, arr) {
    // 相对于map()方法，多了一个total参数，这个是初始值, 或者计算结束后的返回值。前两个必填。
    return total + value;
})
console.log(total); // 10
复制代码

十二、find()、findIndex()

find()方法返回数组符合条件的第一个元素的值，没有符合的会返回undefined。 findIndex()方法返回返回数组符合条件的第一个元素的索引位置，若是没有符合条件的则返回 -1。

var arr = [1, 2, 3, 4];
var value = arr.find(function(value, index, arr) {
    return value > 2;
})
console.log(value); // 3
var index = arr.findIndex(function(value, index, arr) {
    return value > 2;
})
console.log(index); // 2
复制代码

1三、indexOf()

返回某个指定的字符串值在字符串中首次出现的位置,若是没有找到匹配的字符串则返回 -1。能够用来判断字符串中是否存在某个字符串。

有两个参数：第一个参数为须要检索的字符串值，必填；第二个是开始检索的位置，省略则从0开始检索。

var str = 'Hello world!';
var index = str.indexOf('w', 3); // 在第3个位置开始查找'w'第一次出现的位置
console.log(index); // 6
复制代码

1四、Object.keys()/Object.values()

Object.keys()/Object.values()都会返回一个数组,keys()返回的是给定对象的全部可枚举属性的字符串数组，values()返回的是对应值的数组。

var obj = { a: 1, b: 2,};
console.log(Object.keys(obj)); // ["a", "b"]
console.log(Object.values(obj)); // [1, 2]

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // ["0", "1", "2"]
console.log(Object.values(arr)); // ["a", "b", "c"]
复制代码

循环控制语句

一、return

使用return会终止函数的执行并返回函数的值，若是忽略，将返回undefined。

二、break

使用break语句会跳出当前循环，继续执行循环体后面的语句。若是有多层循环，break只能跳出一层循环。

三、continue

使用continue语句会跳过循环中的一个迭代，继续循环中的下一个迭代。

// return
function myReturn(){
    for (var i = 0; i < 5; i++) {
        if (i == 2) return i;
    }
}
console.log(myReturn());
// break
for (var i = 0; i < 5; i++) {
    if (i == 2) break;
    console.log(i); // 0,1
}
// continue
for (var i = 0; i < 5; i++) {
    if (i == 2) continue;
    console.log(i); // 0,1,3,4
}
复制代码