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

你可能感兴趣的:(node.js,HTML5技术,nodejs,javscript,for,js,for...in,js,for...of,js,forEach)