for.. in 与for..of循环 遍历

1. for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

//遍历数组
let arr = [1,2,3,4];
for (let key in arr) {
    console.log(arr[key])    //1,2,3,4
}

let arr1 = [[1,2,3,4],{name:'A',age:'18',sex:'女'}];
for (let key in arr1) {
    console.log(arr1[key])     // [1,2,3,4],{name:'A',age:'18',sex:'女'}
}


//遍历object
let obj = {0:1,1:2,2:3,3:4};
for (let key in obj) {
    console.log(obj[key])    //1,2,3,4
}

let obj1 = {name:'A',age:'18',sex:'女'};
for (let key in obj1) {
    console.log(obj1[key])    //A,18,女
}

let obj2 = {1:[1,2,3,4],2:{name:'A',age:'18',sex:'女'}};
for (let key in obj2) {
    console.log(obj2[key])    // [1,2,3,4],{name:'A',age:'18',sex:'女'}
}

//与return,break,continue搭配
let obj3 = {name:'A',age:'18',sex:'女'};
for (let key in obj3) {
    if(key==='age'){
        return
    }
    console.log(obj3[key])    //报错 Uncaught SyntaxError: Illegal return statement
}


function test(){
	let obj3 = {name:'A',age:'18',sex:'女'};
    for (let key in obj3) {
        if(key==='age'){
            return
        }
        console.log(obj3[key])
    }

}
test();   //A


let obj4 = {name:'A',age:'18',sex:'女'};
for (let key in obj4) {
    if(key==='age'){
        break
    }
    console.log(obj4[key])    //A
}

let obj5 = {name:'A',age:'18',sex:'女'};
for (let key in obj5) {
    if(key==='age'){
       continue
    }
    console.log(obj5[key])    //A,女
}

  * 为什么一般不使用for...in遍历数组?

2.for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

参考实例： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of

//遍历数组
let arr = [1,2,3,4];
for (let val of arr) {
    console.log(val)    //1,2,3,4
}

let arr1 = [{name:'A'},{age:'18'},{sex:'女'}];
for (let val of arr1) {
    console.log(val)    //{name:'A'},{age:'18'},{sex:'女'}
}


//与return,break,continue搭配
let arr = [1,2,3,4];
for (let val of arr) {
    if(val===3){
        return
    }
    console.log(val)    //报错 Uncaught SyntaxError: Illegal return statement
}

function test(){
	let arr = [1,2,3,4];
	for (let val of arr) {
		if(val===3){
			return
		}
		console.log(val)    
	}
}
test(); //1,2

let arr = [1,2,3,4];
for (let val of arr) {
    if(val===3){
        break
    }
    console.log(val)    //1,2
}

let arr = [1,2,3,4];
for (let val of arr) {
    if(val===3){
        continue
    }
    console.log(val)    //1,2,4
}



let arr = [1,2,3,4];
for (let index of arr.keys()) {
    console.log(index)    //0,1,2,3
}

let arr = [1,2,3,4];
for (let val of arr.values()) {
    console.log(val)    //1,2,3,4
}


//如果不使用for...of循环，可以手动调用迭代器对象的next方法，进行遍历。
let arr = [1,2,3,4];
for (let [index,val] of arr.entries()) {
    console.log(index)    //0,1,2,3
    console.log(val)    //1,2,3,4
}

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']


let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next()); // {done: false, [0, 'a']}
console.log(entries.next()); // {done: false, [1, 'b']}
console.log(entries.next()); // {done: false, [2, 'c']}
console.log(entries.next()); // {done: true, undefined}