for in 和 for of 的區別

　　前段時間在面試的過程當中被問到for in 和 for of 的區別，當時只記得for in 遍時取得值的key和index，for of 遍時取得值的value，面試結束回來就認真研究了一下異同，順帶學習了javaScript中遍歷的其餘方法，在講for in 和 for of 的區別以前先跟你們說說javaScript中其餘的方法。在Javascript中遍歷數組的方法一般使用的是for i 循環，但ES5增長了forEach方法，同時ES5具備遍歷數組的方法還有map、filter、some、every、reduce、reduceRight等，只不過他們的返回結果不一樣；可是使用forEach遍歷數組的時候，break不能中斷循環，return不能返回到外層函數。 

let arr = ['d', 's', 'r', 'c'];
arr.forEach(item => {
    if (item === 's') break;
    console.log(item);
})

　　使用break就會報錯，非法語句。

 

 　　1、map

　　map()方法定義在JavaScript的Array中，它返回一個新的數組，數組中的元素爲原始數組調用函數處理後的值。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.map(item => item === 's')
console.log(arr2);

　　結果：

 

 map會對數組的每一項進行處理，返回新數組，返回的新數組包含對以前每一項處理結果；

　　2、filter

　　filter() 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.filter(item => item === 's')
console.log(arr2);

　　結果：

 

 　　filter只會把符合條件的數值返回，造成一個新數組；

　　3、some

　　some() 方法用於檢測數組中的元素是否知足指定條件（函數提供）。some() 方法會依次執行數組的每一個元素：若是有一個元素知足條件，則表達式返回true , 剩餘的元素不會再執行檢測。若是沒有知足條件的元素，則返回false。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.some(item => item === 's')
console.log(arr2);

　　結果：

 

 　　some()會一直運行直到回調函數返回true;

　　4、every

　　every() 方法用於檢測數組全部元素是否都符合指定條件（經過函數提供）。every() 方法使用指定函數檢測數組中的全部元素：若是數組中檢測到有一個元素不知足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測。若是全部元素都知足條件，則返回 true。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.every(item => item === 's')
console.log(arr2);

　　結果：

 

 　　every()會一直運行直到回調函數返回false;

　　5、reduce

　　educe() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。reduce() 能夠做爲一個高階函數，用於函數的 compose。

　

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.reduce((total, item) => {
   return total + item
}, '')
console.log(arr2);

　　結果：

 

 　　由於是字符串，reduce就直接拼接了；

　　6、reduceRight() 方法的功能和 reduce()功能是同樣的，不一樣的是 reduceRight() 從數組的末尾向前將數組中的數組項作累加。

 

　　在講解完javaScript中其餘幾種遍歷數組的方法後，咱們來看一下for in 和for of的遍歷異同

　　首先第一點，

　　一、for in 循環闊以用來遍歷對象的可枚舉屬性列表（包括[[Prototype]]鏈）。使用for in遍歷對象沒法直接獲取到值，可是for of能取到值（前提對象自己定義了迭代器）

console.log('for...in');
let arr = ['d', 's', 'r', 'c'];
for (const key in arr) {
    if (arr.hasOwnProperty(key)) {
        console.log(key);
    }
}
console.log('for...of');
for (const iterator of arr) {
    console.log(iterator);
}

　　結果：

 

 　　

　　簡單總結就是，for in遍歷的是數組的索引（即鍵名），而for of遍歷的是數組元素值。

　　for-in老是獲得對象的key或數組、字符串的下標。

　　for-of老是獲得對象的value或數組、字符串的值，另外還能夠用於遍歷Map和Set。

原文出處：https://www.cnblogs.com/hexiaobao/p/12108572.html