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}