js常見類型變量的遍歷

各種數據結構的遍歷
1. for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上創建一個迭代循環。
對於for...of的循環，可以由 break, throw 或 return 終止。在這些情況下，迭代器關閉。
2. for...in語句以任意順序迭代一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。可以由 break, throw 或 return 終止。在這些情況下，迭代器關閉。
3. for，可以由 break, throw 或 return 終止。在這些情況下，迭代器關閉。
4. array/set/map的forEach，對數組的每個元素執行一次給定的函數，不會改變原數組，返回值 undefined，不能break/return

1.string 的遍歷

function strIterator() {
    let str = 'hello offer!';
    for (const element of str) {
        console.log(element);
    }

    for (const ele in str) {
        console.log(ele); // 0-11
    }


    for (let i = 0; i < str.length; i++) {
        console.log(i, str[i]);
    }

}

2.array 的遍歷

若你需要提前終止循環，你可以使用：

• 一個簡單的 for 循環
• for...of / for...in 循環
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

其他遍歷方式：

• map
• reduce
• reduceRight
• reduceLeft
• filter
• every
• some
• sort
• indexOf
• findIndex
• find

function arrIterator(){
    let arr = ['hello', 'offer', 'world'];

    for (const element of arr) {
        console.log(element); // 'hello', 'offer', 'world'
    }

    for (const ele in arr) {
        console.log(ele);// 0 1 2
    }

    for (let i = 0; i < arr.length; i++) {
        console.log(i, arr[i]);
    }
}

3. object 的遍歷

function objIterator() {
    let obj = {
        name: 'hello',
        age: '12',
    }

    // 不可以直接 for of，Error: obj is not iterable


    for (const [key, value] of Object.entries(obj)) {
        console.log(`${key}: ${value}`);
    }
    for (const [key, value] of Object.keys(obj)) {
        console.log(`${key}: ${value}`);
    }
    for (const [key, value] of Object.values(obj)) {
        console.log(`${key}: ${value}`);
    }
    const names = Object.getOwnPropertyNames(obj); // ['name', 'age']
    for(let index = 0; index < names.length; index++){
        let key =  names[index];
        let value = obj[key];
        console.log('key : ' + key + ' , value : ' + value); //key : name , value : hello;  key : age , value : 12

    }
    let keys = Reflect.ownKeys(obj);
    for(let index = 0; index < keys.length; index++){
        let key =  keys[index];
        let value = obj[key];
        typeof key === 'symbol' ? key = Symbol.prototype.toString.call(key) : '';
        console.log('key : ' + key + ' , value : ' + value);
    }

    for (const ele in obj) {
        console.log(ele); // name age
    }

    // 不可以for，沒有length
}

所有繼承了 Object 的對象都會繼承到 hasOwnProperty 方法。這個方法可以用來檢測一個對象是否含有特定的自身屬性；和 in 運算符不同，該方法會忽略掉那些從原型鏈上繼承到的屬性。

Object.getOwnPropertyNames()方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作爲名稱的屬性）組成的數組。

4.map 遍歷

function mapIterator(){
    let map = new Map([["a", 1], ["b", 2], ["c", 3]]);

    for (let [key, value] of map) {
        console.log(value);
    }

    // for-in 迭代值爲空

    map.forEach((value, key) => console.log(value, key));
    // > 1 "a"
    // > 2 "b"
    // > 3 "c"

}

 

5.set 遍歷

function setIterator(){
    let set = new Set([1, 1, 2, 2, 3, 3]);

    for (let value of set) {
        console.log(value);
    }

    // for-in 迭代值爲空

    set.forEach((value, key) => console.log(value, key));
    // > 1 1
    // > 2 2
    // > 3 3
}