第十週（1For each for in for of的解釋和例子以及Constructor 和Arrow function 的restore）

注：引用自https://www.cnblogs.com/ruoqiang/p/6217929.html。 https://blog.csdn.net/zengyonglan/article/details/53465505 。 https://blog.csdn.net/qq_18663357/article/details/54928572

forEach遍歷數組

[].forEach(function(value, index, array) { // ... });

例子

var myArry =[1,2,3,4];
myArry.desc ='four';
myArry.forEach((value,index,arr)=>{
  console.log(value);
 
});
//1
//2
//3
//4

forEach遍歷數組，而不是遍歷對象哦，並且在遍歷的過程當中不能被終止,必須每個值遍歷一遍後才能停下來

注意其與jQuery的$.each相似，只不過參數正好是相反的

$.each([], function(index, value, array) { // ... });

$.each遍歷數組或者類數組

第1個和第2個參數正好是相反的，這裏要注意了，不要記錯了。

for in遍歷對象

循環遍歷對象的key，是鍵值對前面的那一個哦 

通常不推薦遍歷數組，由於for in遍歷後的不能保證順序，並且原型鏈上的屬性也會被遍歷到，所以通常經常使用來遍歷非數組的對象而且使用hasOwnProperty()方法去過濾掉原型鏈上的屬性

var myArry =[1,2,3,4];
myArry.desc ='four';
 for(var value in myArry){ //循環key
  console.log(value)
}

//"0"
//"1"
//"2"
//"3"
//"desc" 注意這裏添加上去的屬性也被遍歷出來了

 

for of遍歷對象

循環遍歷對象的值，是遍歷鍵值對後面的那一個value哦 ，與for in遍歷key相反

var myArry =[1,2,3,4];
myArry.desc ='four';
for(var value of myArry){
  console.log(value)
}
//1
//2
//3
//4

• 這是最簡潔、最直接的遍歷數組元素的語法
• 這個方法避開了for-in循環的全部缺陷
• 與forEach()不一樣的是，它能夠正確響應break、continue和return語句

 

在 Javascript 語言中，constructor 屬性是專門爲 function 而設計的，它存在於每個 function 的prototype 屬性中。這個 constructor 保存了指向 function 的一個引用。
在定義一個函數（代碼以下所示）時，

function F() {
// some code
}

 JavaScript 內部會執行以下幾個動做：

1.爲該函數添加一個原形（即 prototype）屬性
2. 爲 prototype 對象額外添加一個 constructor 屬性，而且該屬性保存指向函數F 的一個引用

這樣當咱們把函數 F 做爲自定義構造函數來建立對象的時候，對象實例內部會自動保存一個指向其構造函數（這裏就是咱們的自定義構造函數 F）的 prototype 對象的一個屬性proto，

因此咱們在每個對象實例中就能夠訪問構造函數的 prototype 全部擁有的所有屬性和方法，就好像它們是實例本身的同樣。固然該實例也有一個 constructor屬性了（從 prototype 那裏得到的），每個對象實例均可以經過 constrcutor 對象訪問它的構造函數，請看下面代碼：

var f = new F();
alert(f.constructor === F);// output true
alert(f.constructor === F.prototype.constructor);// output true

咱們能夠利用這個特性來完成下面的事情：
對象類型判斷，如

if(f.constructor === F) {
// do sth with F
}

其實 constructor 的出現本來就是用來進行對象類型判斷的，可是 constructor 屬性易變，不可信賴。

 

 

用arrow function寫function比原來的寫法要簡潔清晰不少:

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

簡直是簡單的不像話對吧…
若是方程比較複雜，則須要用{}把代碼包起來：

function(x, y) {
x++;
y--;
return x + y;
}
(x, y) => {x++; y--; return x+y}

除了看上去更簡潔之外，arrow function還有一項超級無敵的功能！
長期以來，JavaScript語言的this對象一直是一個使人頭痛的問題，在對象方法中使用this，必須很是當心。例如：

class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout(function(){
console.log(this.type + ' says ' + say)
}, 1000)
}
}

var animal = new Animal()
animal.says('hi') //undefined says hi

運行上面的代碼會報錯，這是由於setTimeout中的this指向的是全局對象。因此爲了讓它可以正確的運行，傳統的解決方法有兩種：

第一種是將this傳給self,再用self來指代this

says(say){
var self = this;
setTimeout(function(){
console.log(self.type + ' says ' + say)
}, 1000)

第二種方法是用bind(this),即

says(say){
setTimeout(function(){
console.log(self.type + ' says ' + say)
}.bind(this), 1000)

但如今咱們有了箭頭函數，就不須要這麼麻煩了：

class Animal { constructor(){ this.type = 'animal' } says(say){ setTimeout( () => { console.log(this.type + ' says ' + say) }, 1000) }} var animal = new Animal() animal.says('hi') //animal says hi當咱們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。 並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，它的this是繼承外面的，所以內部的this就是外層代碼塊的this。