第十周（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。