使用[Symbol.iterator]實現迭代

備註：此處的操作，由於使用的方法是Object.keys(object)的方式獲取到物件的屬性。
所以遍歷所使用的 鍵（keys()），值(values())，和鍵值對(entries())方法，均採用Symbol屬性。

/**
 * 方法名採用Symbol作為屬性唯一識別符號
 * @type {symbol}
 */
let keys = Symbol("keys");
let values = Symbol('values');
let entries = Symbol('entries');
/**
 * 示例操作物件
 * @type
 
 {{name: string, gender: string, age: number, email: string, mobile: string, job: string, skills: string}}
 */
const person = {
    name: '張三',
    gender: '男',
    age: 23,
    email: '[email protected]',
    mobile: '13398754613',
    job: 'IT',
    skills: 'piano'
}
/**
 * 獲取鍵值
 * @returns {*}
 */
 

person[keys] = function () {
    return {
        self: this,
        [Symbol.iterator]() {
            let index = 0;
            let self = this.self;
            return {
                //為迭代器必須函式
                next() {
                    let keys = Object.keys(self);
                    return
 
 index < keys.length ? {
                        value: keys[index++], done: false
                    } : {value: undefined, done: true}

                }
            }
        }
    }
}
/**
 * 獲取值
 * @returns {*}
 */
person[values] = function () {
    return {
        self: this,
        [Symbol.iterator]() {
            let index = 0;
            let self = this.self;
            return {
                next() {
                    let keys = Object.keys(self);
                    return index < keys.length ? {
                        value: self[keys[index++]], done: false
                    } : {value: undefined, done: true}

                }
            }
        }
    }
}
/**
 * 鍵值對獲取方式
 * @returns {*}
 */
person[entries] = function () {
    return {
        self: this,
        [Symbol.iterator]() {
            let index = 0;
            let self = this.self;
            return {
                next() {
                    let keys = Object.keys(self);
                    return index < keys.length ? {
                        value: [keys[index++], self[keys[index - 1]]], done: false
                    } : {value: undefined, done: true}

                }
            }
        }
    }
}
**驗證程式碼**

//物件屬性遍歷，其實這個可以用更簡單的方式遍歷出來,採用for...in
for (let key of person[keys]()) {
    console.log(key); // name gender age email mobile job skills
}
//for-in 遍歷屬性
for (let key in person) {
    console.log(key);  // name gender age email mobile job skills
}
//物件屬性值遍歷,同理可以採用for-in
for (let value of person[values]()) {
    console.log(value); //張三 男 23 [email protected] 13398754613 IT piano
}
//採用for-in遍歷同理
for (let key in person) {
    console.log(person[key]); //張三 男 23 [email protected] 13398754613 IT piano
}
//物件屬性鍵值對遍歷
for (let [key, value] of person[entries]()) {
    console.log([key, value]);
    // ['name', '張三']
    // ['gender', '男']
    // ['age', 23]
    // ['email', '[email protected]']
    // ['mobile', '13398754613']
    // ['job', 'IT']
    // ['skills', 'piano']
}

說明：關於兩者的區別，具體應該跟順序有關係，本身物件是無序的，在使用不同瀏覽器執行出來的效果可能順序是不一致的（for-in），這一點在之前接觸的專案中有接觸過。至於for-of 通過迭代器是具有一定順序的遍歷。所以兩者如果是在順序上有嚴格的要求的，建議採用for-of的方式進行遍歷。也就是實現[Symbol.iterator]**

採用Generator實現物件的遍歷
此處採用的示例操作物件依舊是一方式中的person

/**
 * 鍵值對獲取方式
 * @param obj 此處的物件為字面性物件
 */
function* entries(obj) {
    for (let key of Object.keys(obj)) {
        yield [key, obj[key]];
    }
}
/**
 * 鍵獲取方式
 * @param obj 此處的物件為字面性物件
 */

function* keys(obj) {
    for (let key of Object.keys(obj)) {
        yield key;
    }
}
/**
 * 鍵值獲取方式
 * @param obj 此處的物件為字面性物件
 */
function* values(obj) {
    for (let key of Object.keys(obj)) {
        yield obj[key];
    }
}
**測試程式碼**
//鍵值
 for (let [key, value] of entries(person)) {
    console.log([key, value]);
}
//鍵
for (let key of keys(person)) {
    console.log(key);
}
//鍵值
for (let value of values(person)) {
    console.log(value);
}

今日學習成果就展示到這了。如果有志同道合的，有更好的程式碼，歡迎指點與分享。