for ...of 與 for... in

時間 2021-02-13

標籤 javascript java 數組瀏覽器數據結構函數 prototype 指針 code 對象欄目 JavaScript 简体版

原文原文鏈接

for...in遍歷對象的屬性或數組索引（ES5）

eg1:遍歷數組javascript

var arr=['a','b','c','d'];
        for(let index in arr){
            console.log(index);// 0 1 2 3
            console.log(arr[index]);// a b c d
        }

eg2:遍歷對象java

var obj={
            name:"Jin",
            age:11,
            [Symbol()]:123,
        }
        for(let index in obj){
            console.log(index);//name age 
            console.log(obj[index]);//Jin  11
        }

eg3:遍歷對象的順序數組

var obj={
            "49":"A",
            "a":"tt",
            "5":false,
            "1":"ss",
        }
        for(let index in obj){
            console.log(index);//1 5 49 a
            console.log(obj[index])//ss false A tt
        }

for...in的要點：

-不支持IE瀏覽器（IE9如下的）

-遍歷的順序可能不是實際的內部順序(先遍歷出整數屬性，按照升序)，而後其餘屬性按照建立時的順序遍歷出來

-for in會遍歷數組全部的可枚舉屬性，包括原型中存在的屬性（object.prototype添加的屬性）

-for in通常用於遍歷對象屬性

-for in無返回值

-Symbol 做爲屬性名，該屬性不會出如今for...in、循環中

for...of可遍歷數組，Set,Map,類數組對象(eg:arguments,DOM NodeList對象，字符串)（ES6）不能遍歷對象

eg1:遍歷數組瀏覽器

var arr=['a','b','c','d'];
         for(let key of arr){
            console.log(key);// a b c d
            console.log(arr[key]); //undefined undefined undefined undefined
        }

eg2:遍歷對象數據結構

var obj={
            "49":"A",
            "a":"tt",
            "5":false,
            "1":"ss",
        }
        for(let key of obj){//報錯
            console.log(index);
        }

eg3:for of與Object.keys()遍歷對象函數

var obj={
            name:"Jin",
            age:11,
        }
        for(let value of Object.keys(obj)){
            console.log(value);//name age
            console.log(obj[value]);//Jin 11
        }

eg4:for of與Object.keys()遍歷數組索引prototype

var arr=['a','b','c'];
       for(let value of Object.keys(arr)){
           console.log(value);//0 1 2
           console.log(arr[value]);// a b c
       }

eg4:for of與Object.entries()遍歷索引和值指針

var arr=['a','b','c'];
        for(let [index,value] of Object.entries(arr)){
            console.log(index);//0 1 2
            console.log(value);//a b c
            console.log(arr[index]);//a b c
        }

eg5:for of與Object.values()遍歷屬性值code

var arr=['a','b','c'];
        for(let [index,value] of Object.values(arr)){
            console.log(index);//a b c
            console.log(value);//undefined undefined undefined
            console.log(arr[index]);//undefined undefined undefined
        }

for...of的要點：對象

-for of其實遍歷的是對象的Symbol.iterator屬性，而對象沒有該屬性

-不會遍歷到對象屬性和原型屬性

-若是要遍歷對象，可與Object.keys()配合使用

-配合Object.entries() 輸出數組索引和元素值/對象的屬性和屬性值，但Symbol()屬性會忽略

-配合Object.values() 輸出數組元素值/對象屬性值，

-通常用於遍歷數組或者僞數組

-無返回值

-Symbol 做爲屬性名，該屬性不會出如今for...in、for...of循環中，也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回

Iterator(遍歷器)與for...of
遍歷器（Iterator） 它是一種接口，爲各類不一樣的數據結構（Array,Object,Set,Map）提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就能夠完成遍歷操做（即依次處理該數據結構的全部成員）。
Iterator 的做用

一是爲各類數據結構，提供訪問接口；二是使得數據結構的成員可以按某種次序排列；三是 ES6 創造了一種新的遍歷命令for...of循環，當使用for...of循環遍歷某種數據結構時，該循環會自動去尋找 Iterator 接口。

Iterator 的遍歷過程

建立一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。
第一次調用指針對象的next方法，能夠將指針指向數據結構的第一個成員。
第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。
不斷調用指針對象的next方法，直到它指向數據結構的結束位置。每一次調用next方法，都會返回數據結構的當前成員的信息。具體來講，就是返回一個包含value和done兩個屬性的對象。其中，value屬性是當前成員的值，done屬性是一個布爾值，表示遍歷是否結束。

ES6 規定，默認的 Iterator 接口部署在數據結構的Symbol.iterator屬性，或者說，一個數據結構只要具備Symbol.iterator屬性，就能夠認爲是「可遍歷的」Symbol.iterator屬性自己是一個函數，就是當前數據結構默認的遍歷器生成函數。執行這個函數，就會返回一個遍歷器。
原生具有 Iterator 接口的數據結構