10week :For ....+...

for...in语句:

以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。

   语法

for (变量 in 对象)
{                                   
    在此执行代码
}
for (variable in object) {...}
variable在每次迭代时,将不同的属性名分配给变量。 object被迭代枚举其属性的对象。
描述
for...in
 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototypeString.prototype的不可枚举属性,例如 String 的 indexOf()  方法

或 ObjecttoString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)
for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的
数组时,最好用整数索引去进行for循环(或者使用 Array.prototype.forEach() 或 for...of 循环)。
举例:
var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

For each:
语法:
for each (variable in object) {
  statement
}
variable
用来遍历属性值的变量,前面的var关键字是可选的.该变量是函数的局部变量而不是语句块的局部变量.
object
该对象的属性值会被遍历.
statement
遍历属性值时执行的语句. 如果想要执行多条语句, 请用({ ... }) 将多条语句括住.
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。
var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};

for each (var item in obj) {
  sum += item;
}

print(sum); // 输出"26",也就是5+13+8的值

For...of:
语句可迭代对象(包括 ArrayMapSetStringTypedArrayarguments 对象等等)
上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句
for (variable of iterable) {
    //statements
}
variable在每次迭代中,将不同属性的值分配给变量。iterable被迭代枚举其属性的对象。
举例:
let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

如果你不想修改语句块中的变量 , 也可以使用const代替let

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30
区别:

在开发过程中经常需要循环遍历数组或者对象,forEach、for in 、 for of这三种方法使用最多 但却一值傻傻分不清楚。。今天来一个大区分。。


for循环


其实除了这三种方法以外还有一种最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组


var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
console.log(arr[i])
}
1
2
3
4
forEach


从ES5开始 Javascript内置了forEach方法 用来遍历数组


let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, idx, arr) {
console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组
console.log(arr)
})
1
2
3
4
5
输出结果:


a, index = 0
(4) ["a", "b", "c", "d"]
b, index = 1
(4) ["a", "b", "c", "d"]
c, index = 2
(4) ["a", "b", "c", "d"]
d, index = 3
(4) ["a", "b", "c", "d"]
1
2
3
4
5
6
7
8
写法简单了很多,但是也存在一个局限 就是你不能中断循环(使用break语句或使用return语句)。


for…in


for-in循环实际是为循环”enumerable“对象而设计的


let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
console.log(obj[o]) //这个才是属性对应的值1,2,3,4
}
1
2
3
4
5
for - in 也可用来循环数组,但一般并不推荐


for…of


它是ES6中新增加的语法
循环一个数组


let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
}
1
2
3
4
但是它并不能循环一个普通对象


let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function
}
1
2
3
4
但是可以循环一个拥有enumerable属性的对象。
如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法


let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
console.log(o) // a,b,c,d
}
1
2
3
4
如果我们按对象所拥有的属性值进行循环,可使用内置的Object.values()方法


let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
console.log(o) // 1,2,3,4
}
1
2
3
4
循环一个字符串


let str = 'love'
for (let o of str) {
console.log(o) // l,o,v,e
}
1
2
3
4
循环一个Map


let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);


for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3


for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
循环一个Set


let iterable = new Set([1, 1, 2, 2, 3, 3]);


for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
1
2
3
4
5
6
7
8
循环一个类型化数组


let iterable = new Uint8Array([0x00, 0xff]);


for (let value of iterable) {
console.log(value);
}
// 0
// 255

 
 
 


posted on 2018-11-13 15:51  葛梦慧  阅读(140)  评论(0编辑  收藏  举报

导航