[每日一題]面試官問：for in和for of 的區別和原理？

時間 2021-01-09

標籤 vue 面試算法數組數據結構異步學習 code 對象接口欄目快樂工作简体版

原文原文鏈接

關注「鬆寶寫代碼」，精選好文，每日一題vue

時間永遠是本身的面試

每分每秒也都是爲本身的未來鋪墊和增值算法

做者：saucxs ｜ songEagle數組

1、前言

2020.12.23 日剛立的 flag，每日一題，題目類型不限制，能夠是：算法題，面試題，闡述題等等。數據結構

本文是「每日一題」第 7 題：[每日一題]面試官問：for in和for of 的區別和原理？異步

往期「每日一題」：學習

2、for in和for of 的區別和原理？

這個題目自己不是特別難，只能說是做爲社招的基礎面試題，可是若是想回答好這道題也不是很容易。

不信接着往下看：

一、簡單回答

不少人會去問：for in 和for of的區別，

我說：for in是獲取屬性名，for of獲取屬性值。

二、看一些例子

首先咱們先看一個對象遍歷的例子

var obj = {name: 'saucxs',age: 21,sex: 1};
for(key in obj){
    console.log(key, obj[key]);
    // name saucxs
    // age 21
    // sex 1
}
for(key of obj){
    console.log(key, obj[key]);
    // typeError :obj is not iterable報錯
}

說明obj對象沒有iterable屬性報錯，使用不了for of。

咱們如今再看一個數組遍歷的例子

var array = ['a','b','c'];
for(var key in array){
    console.log(key, array[key]);
    // 0 a
    // 1 b
    // 2 c
}
for(var key of array){
    console.log(key, array[key]);
    // a undefined
    // b undefined
    // c undefined
}

這回沒有報錯，爲何呢？

咱們再看一個例子：

var array = ['a', 'b', 'c'];
array.name = 'saucxs'
for(key in array){
    console.log(key, array[key])
    // 0 a
    // 1 b
    // 2 c
    // name saucxs
}

三、for in的特色

for in 循環返回的值都是數據結構的鍵名。

遍歷對象返回的是對象的key值，遍歷數組返回的是數組的下標。

還會遍歷原型上的值和手動添加的值

總的來講：for in適合遍歷對象。

四、for of的特色

for of 循環獲取一對鍵值中的鍵值。

一個數據結構只要部署了Symbol.iterator屬性，就被視爲具備iterator接口，能夠使用for of。

for of不一樣於forEach，for of是能夠break，continue，return配合使用，for of 循環能夠隨時退出循環。

總的來講：for of遍歷全部數據結構的統一接口。

五、深刻探索

哪些數據結構部署了Symbol.iterator屬性？

如下數據結構的有iterator接口的：

數組Array
Map
Set
String
arguments對象
Nodelist對象，類數組
凡是部署了iterator接口的數據結構均可以使用數組的擴展運算符(...)，和解構賦值等操做。

若是我很是想讓對象用for of？

能夠使用Object.keys()獲取對象的key值集合，在用for of。

var obj = {name: 'saucxs',age: 18, sex: 1};
for(var key of Object.keys(obj)){
    console.log(key, obj[key]);
    // name saucxs
    // age 21
    // sex 1
}

這樣也能夠給一個對象部署Symbol.iterator屬性。