1. 程式人生 > >for in、for of、forEach的區別

for in、for of、forEach的區別

forEach

forEach()是陣列的一個方法,用於遍歷陣列的每一項,並對每一項執行一個callback函式。
forEach()沒有返回值,返回值總是undefined。

let a = ["a","b","c"];
a.forEach(function(item,index,array){
    console.log(item); 
})
// a
// b
// c

for…of

ES6提出的語句,在可迭代物件(Array,Map,Set,String,TypedArray,arguments)上建立一個迭代迴圈。

  • 遍歷陣列
let array = [10,20,30];
for
(let val of array){ console.log(val); } // 10 // 20 // 30
  • 遍歷String
let str = "boo";
for(let val of str){
    console.log(val);
}
// "b"
// "o"
// "o"
  • 遍歷Map
let map = new Map([["a", 1], ["b", 2], ["c", 3]]);
for(let entry of map){
    console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for(let [key,value
] of map){ console.log(value); } // 1 // 2 // 3
  • 遍歷Set
let set = new Set([1,1,2,2,3,3]);
for(let value of set){
    console.log(value);
}
// 1
// 2
// 3
  • 遍歷DOM集合
let divs = document.querySelectorAll("div");
for(let div of divs){
    div.className = "red";
}
  • 遍歷生成器
function* fibonacci(){
    let
[prev,curr] = [0,1]; for(;;){ [prev,curr] = [curr,curr+prev]; yield curr; } } for(let n of fibonacci()){ if(n>1000) break; console.log(n); }

for…in

for…in 語句以任意順序遍歷一個物件的可列舉屬性的屬性名

for (variable in object) {...}
var obj = {a:1, b:2, c:3};
for(var prop in obj){
    console.log(prop);
}
//a
//b
//c

for(var prop in obj){
    console.log(obj[prop]);
}
//1
//2
//3

但是for-in會遍歷物件本身的所有可列舉屬性和從它原型繼承而來的可列舉屬性,因此如果想要僅迭代物件本身的屬性,要結合hasOwnProperty()來使用:

var triangle = {a:1, b:2, c:3};

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
    console.log("o." + prop + " = " + obj[prop]);
}

//原型上的可列舉資料也被迭代出來
//o.color = red
//o.a = 1
//o.b = 2
//o.c = 3

//使用hasOwnProperty()

for (var prop in obj) {
  if( obj.hasOwnProperty( prop ) ) {
    console.log("o." + prop + " = " + obj[prop]);
  } 
}
//o.color = red

for…of與for…in的區別

  • for…in迴圈會遍歷一個object所有的可列舉屬性。
  • for…of只能應用於可迭代物件,即擁有[Symbol.iterator] 屬性的collection物件,並不適用於所有的object.

下面的例子演示了for…of 迴圈和 for…in 迴圈的區別。

  • for…in 遍歷(當前物件及其原型上的)每一個屬性名稱
  • for…of遍歷(當前物件上的)每一個屬性值:
Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7