Javscript 之循环遍历，for，for...in，for...of，forEach 的使用说明

在进行javascript开发时，少不了需要访问列出一个数组的所有元素，枚举一个对象的所有成员，这在javascript里非常容易，下面列出常见的几种方法。本文介绍了for，for...in，for ...of，forEach 的使用说明

一、传统的for 循环，访问数组

for 循环语句是所有现代变成语言里常用的语句，js里的for语句与c/c++、java里的for语句语法规则非常相似，如下：

语法规则

for语句的语法写法：
for（开始条件；结束条件；更改条件）{
        ...
}

 示例代码

var a = [1, 2, 3, 'a', 'b', 'c', 's'];

for (var i = 0; i < a.length; i++) {
    //遍历数组

    console.log(a[i])
}

输出如下：
1
2
3
a
b
c
s

这个是最普通的代码，最容易记住的使用语法规则。

二、for...in 循环

语法规则

for（item in object）{

        ...

}

 示例代码：

// 一个对象定义
var student = { name: 'Jack', sex: 'male', age: 25 }

//循环遍历一个对象的所有属性，x 为属性名
for (var x in student) {
    console.log('student.' + x + ': ' + student[x])
}

var students = ['Tom', 'Jack', 'Bom', 'Kalise']
//循环遍历的所有成员，i 为数组元素索引
for (var i in students ) { 
    console.log('students[' + i + ']: ' + students[i])
}

输出如下：

student.name: Jack
student.sex: male
student.age: 25
students[0]: Tom
students[1]: Jack
students[2]: Bom
students[3]: Kalise

三、 for...of 遍历

语法规则：

for ( let i of obj ) {
        ...
} 

 for…of 语句可以对 Array，Map，Set，String 对象等等上创建一个迭代循环，为每个不同属性的值执行语句

示例代码

let someArray = [11, 22, 33, 44, 55, 66];

for (let value of someArray) {
    value += 1;
    console.log(value);
}

console.log(someArray)

输出：

12
23
34
45
56
67
[ 11, 22, 33, 44, 55, 66 ]

四、for…of与for…in的区别

for…in 语句以任意顺序迭代对象的可枚举属性，属性迭代。

for…of 语句遍历可迭代对象定义要迭代的数据，值迭代。

 示例说明

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [100, 200, 300];
iterable.foo = 'hello';

//能迭代 iterable 所有可枚举属性，包含原型， i 为对象的属性
for (let i in iterable) {
  console.log(i); // 输出的i为: 100, 200, 300, "foo", "arrCustom", "objCustom"
}
console.log("\n")
//能迭代 iterable 所有可枚举属性，包含原型， i 为对象的属性
for (let i in iterable) {
  //仅显示对象的属性
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 输出的i为: 0, 1, 2, "foo"
  }
}
console.log("\n")
//仅能迭代可迭代的 iterable， i 为值
for (let i of iterable) {
  console.log(i); // 输出的i为: 100, 200, 300
}

 输出：

0
1
2
foo
arrCustom
objCustom

0
1
2
foo

100
200
300

五、forEach 方法
 

forEach方法对数组的每个元素执行一次给定的回调函数，forEach仅为数组类型的一个方法，普通对象没有这个方法。 

语法规则：

someArray.forEach(function(value, index) {

        ...

});

示例代码：

const members = ['Bill', 'Jobs', 'Dell', 'Mike']

members.forEach((item, i) => {
  console.log(i, item)
})

输出：

0 Bill
1 Jobs
2 Dell
3 Mike