for in 和for of的区别(遍历数组与对象方法的总结)、伪数组

1、遍历数组的方法

1.1 for(var i=0;i<arr.length;i++){}

1.2 Array.forEach()方法

var arr = ['Tony','July' ]
arr.forEach(function(item,index){
    console.log(index,item)
})
arr.forEach(function(item,index){
    console.log(index,item)
})
// 0 "Tony"
// 1 "July"

forEach无法使用break跳出循环，可以通过try…catch…扔出错误来实现跳出循环，例子如下：

var arr = [1,3,5,7,9];
try {
     arr.forEach(function (curItem, i) {
         if(curItem === 1) return;
         console.log(curItem)
         if (curItem === 7) {
             throw Error();         //满足条件，跳出循环
         }
     })
 } catch (e) {  }

1.3 for of 循环、for in循环
二者区别

• for of遍历的是数组元素值,
  for in 遍历的是数组的索引（即键名）
• for of遍历的只是数组内的元素，
  for in 不仅遍历当前对象，还包括原型链上的非Symbol的可枚举属性

for of 遍历

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[11,21,41,51,61,71]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}
//输出数组每项的值：11,21,41,51,61,71

for in 遍历

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[11,21,41,51,61,71]
myArray.name="数组";
for (var value in myArray) {
  console.log(value);
}
// 输出数据的下标以及新增属性和方法： 0,1,2,3,4,5,method,name

2、遍历对象的方法

2.1、 for in来遍历对象的键名，同时也会遍历到原型方法和属性，可以通过hasOwnPropery方法判断某属性是否是该对象的实例属性

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){    // hasOwnProperty() 可以把该对象的原型方法和属性过滤掉，即把method过滤掉
　　　　console.log(key);
　　}
}

2.2、Object.keys(对象)，返回一个给定对象的自身可枚举属性构成的数组

var myObject={
　　a:1,
　　b:2,
　　c:3,
　 [Symbol.iterator]: 4
}

Object.keys(myObject).forEach((item,index)=>{
      console.log(item);   // a  b  c  
})

2.2、Object.values(对象)，返回一个给定对象的自身可枚举属性值所构成的数组**
注意： Obejct.values() 不支持IE

var myObject={
　　a:1,
　　b:2,
　　c:3
}
Object.keys(myObject).forEach((item,index)=>{
      console.log(item);
})

3、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

• 伪数组（类数组）是什么
  1、有 length 属性
  2、通过下标可以获取到指定项
  3、但是不具备 Array.prototype上的方法，但仍可以用遍历数组的方法来遍历它们的数组，

  这类数组，称为伪数组。

• 伪数组有哪些
  1、函数的arguments参数
  2、像调用getElementsByTagName、document.childNodes之类的,它们都返回NodeList对象

• 如何将伪数组转化为真正的数组

  • 方法一、使用Array.from(伪数组)方法
    Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
    真正数组 = Array.from(伪数组)

    var domP = document.getElementsByTagName('p');
    console.log(Array.from(domP))
    

    方法二、使用 ... 展开运算符（ES6+）

    var domP = document.getElementsByTagName('p');
    console.log([...domP])
    

    方法三、使用Array.prototype.slice.call(伪数组) 方法

    Array.prototype.slice() 方法返回一个新的数组对象，本质上就是，利用了伪数组可通过下标访问这一特点。

    通过下标依次获取每一项，再将其添加到新的数组中

    slice方法，如果不传起始、结束点的话，默认就是从开始到结束的下标。
    真正数组 = Array.prototype.slice.call(伪数组)。

    其本质上也是循环遍历(注意：由于本质上是循环遍历，所以相应的伪类元素必须有对应的0~N下标才可使用此方法，因此，new Set()返回的值无法使用此方法)

    var domP = document.getElementsByTagName('p');
    console.log(Array.prototype.slice.call(domP))    //成功，返回去重后的数组
    
    var p = new Set([1,2,1])
    console.log( Array.prototype.slice.call(p) )      //失败，返回[]
    

    方法四、通过下标循环遍历，获取每一项