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

Posted 2021-01-17 lqlm

注：引用自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。