1. 程式人生 > >10th week (1)

10th week (1)

//1、for in 迴圈
/=====================================/
//=>語法: for (variable in object) {...}
//for...in語句以任意順序遍歷一個物件的可列舉屬性。對於每個不同的屬性,語句都會被執行。
//=> variable (變數):每次迭代時,將不同的屬性名分配給變數
//=> object (物件) :被迭代列舉其屬性的物件

var obj = {a:'A',b:'B',1:'c',2:'d',}; //obj物件有兩個屬性是數字,分別為1和2,值分別為'c'和'd' for (var key in obj){ //key儲存的值為字串型別的 // console.log(typeof key); //=> string console.log(obj[key]); // = > c d A B } // 結果為 =>c d A B , 在 for in 迴圈遍歷的時候,把物件的數字屬性名排在前面 //並且排列的時候按照數字由小到大排列,非數字的屬性名按照之前編寫的順序排列 

//迴圈將遍歷物件本身的所有可列舉屬性,以及物件從其建構函式原型中繼承的屬性
//for...in 迴圈只遍歷可列舉屬性。像 Array和 Object使用內建建構函式所建立的物件都會繼承自Object.prototype和String.prototype的不可列舉屬性,例如 String 的 indexOf() 方法或 Object的toString()方法。迴圈將遍歷物件本身的所有可列舉屬性,以及物件從其建構函式原型中繼承的屬性

var oobj = {a: 1, b: 2, c: 3}; function Fn() { this.color = 'red'; } Fn.prototype = oobj; //Fn的原型指向oobj這個物件 var obj2 = new Fn(); //new一個Fn這個建構函式的例項 console.log(obj2.a); //obj2.a是obj2物件原型上的屬性 = > 1 //obj.propertyIsEnumerable(prop) 方法返回一個布林值,表示指定的屬性是否可列舉。 console.log(obj2.propertyIsEnumerable('a')); // => false 不可列舉,但是仍然可以遍歷到 console.log(obj2.propertyIsEnumerable('color')); // = > true 可列舉 console.log(obj2.hasOwnProperty('color')); // => true for (var prop in obj2) { console.log('obj2.' + prop + '=' + obj2[prop]); // => obj2.color=red obj2.a=1 obj2.b=2 obj2.c=3 //obj.hasOwnProperty(prop) 方法會返回一個布林值,指示物件自身屬性中是否具有指定的屬性 //可以通過這個方法可以做條件判斷,屬性是私有的還是公有的,輸出私有的屬性 if (obj2.hasOwnProperty(prop)) { console.log('obj2.' + prop + '=' + obj2[prop]); // obj2.color=red } } 

// for...in不應該用於迭代一個 Array,其中索引順序很重要
//陣列索引只是具有整數名稱的列舉屬性,並且與通用物件屬性相同。不能保證for ... in將以任何特定的順序返回索引。for ... in迴圈語句將返回所有可列舉屬性,包括非整數型別的名稱和繼承的那些。
//因為迭代的順序是依賴於執行環境的,所以陣列遍歷不一定按次序訪問元素。因此當迭代訪問順序很重要的陣列時,最好用整數索引去進行for迴圈(或者使用 Array.prototype.forEach() 或 for...of 迴圈)。
/=====================================/

//2、for of語句在可迭代物件(包括 Array,Map,Set,String,TypedArray,arguments物件等等)上建立一個迭代迴圈,呼叫自定義迭代鉤子,併為每個不同屬性的值執行語句

//語法: for (variable of object) {...} 相當於 for (let 值 of 陣列 ) {...}
//variable表示值,object是一個定義了迭代行為的物件,如:陣列

//遍歷陣列Array
let arr = [1, 2, 3]; for (let value of arr) { value += 1; console.log(value); // => 2 3 4 } //遍歷String let iterable = "abcd"; for (let value of iterable) { console.log(value); // => a b c d } //遍歷類陣列物件arguments (function() { for (let argument of arguments) { console.log(argument); // 1 2 3 } })(1, 2, 3); // 對於for...of的迴圈,可以由break, throw 或return終止 function* foo(){ yield 1; yield 2; yield 3; }; for (let o of foo()) { console.log(o); break; // closes iterator, triggers return } 

/=====================================/

//** 【 for...in 和 for...of 的區別】 **
//無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區別在於它們的迭代方式。

//for...in 語句以原始插入順序迭代物件的可列舉屬性。
//for...of 語句遍歷可迭代物件定義要迭代的資料。

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; let arryNum = [3, 5, 7]; arryNum.foo = 'hello'; for (let i in arryNum) { console.log(i); // => 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i in arryNum) { if (arryNum.hasOwnProperty(i)) { console.log(i); // => 0, 1, 2, "foo" } } for (let i of arryNum) { console.log(i); // => 3, 5, 7 } 

//3、Array.prototype.forEach() 對陣列的每個元素執行一次提供的函式,相當於遍歷陣列中的每一項,對每一項執行一次函式
//語法:
/* array.forEach(callback(currentValue, index, array){
* //do something
* }, this)
*
* array.forEach(callback[, thisArg])
* /

//回撥函式callback 為陣列中每個元素執行的函式,該函式接收三個引數
//currentValue -> 陣列中正在處理的當前元素。
//index可選 -> 陣列中正在處理的當前元素的索引
//array可選 ->forEach()方法正在操作的陣列。
//thisArg可選 ->可選引數。當執行回撥 函式時用作this的值(參考物件)。

// forEach 方法按升序為陣列中含有效值的每一項執行一次callback 函式,那些已刪除或者未初始化的項將被跳過(例如在稀疏陣列上)。
// callback 函式會被依次傳入三個引數:陣列當前項的值、陣列當前項的索引、陣列物件本身

參考資料:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach