javascript中 for in 、for 、forEach 、for of 、Object.keys().

时间：2020-11-30 21:47:05

一 、for ..in 循环

　　使用for..in循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。这里需要注意的是使用for-in返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序。（实例+原型中的可枚举属性）

1、遍历数组

　　虽然for..in主要用于遍历对象的属性，但同样也可以用来遍历数组元素。

2：for..in和for遍历数组时下标类型不一样
var colors = ['red', 'green', 'blue'];

for (var i in colors) {

  typeof i; // string

}

for (var j = 0; j < colors.length; j++) {

  typoef i; // number

}

二、JavaScript forEach() 方法

列出数组的每个元素：

<button onclick="numbers.forEach(myFunction)">点我</button>

<p id="demo"></p>

<script>

demoP = document.getElementById("demo");

var numbers = [4, 9, 16, 25];

function myFunction(item, index) {

    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";

}
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

</script>

三、for...of  方法

1、for..of为ES6新增的方法，主要来遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取对象的属性值，而for..in主要获取对象的属性名。

  • for of支持遍历数组、类对象（例如DOM NodeList对象）、字符串、Map对象、Set对象；
  • for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历；（见示例二）
  • for of遍历后的输出结果为数组元素的值；
var colors = ['red', 'green', 'blue'];

colors.length = 5;

colors.push('yellow');

for (var i in colors) {

  console.log(colors[i]); // red green blue yellow

}

for (var j of colors) {

  console.log(j); // red green blue undefined undefined yellow

}

可以看到使用for..of可以输出包括数组中不存在的值在内的所有值。

2、其实除了使用for..of直接获取属性值外，我们也可以利用Array.prototype.forEach()来达到同样的目的。

var colors = ['red', 'green', 'blue'];

colors.foo = 'hello';

console.log(Object.keys(colors));//["0", "1", "2", "foo"]

Object.keys(colors).forEach(function(elem, index) {

  console.log(elem);//0 1 2 foo

  console.log(colors[elem]); // red green blue hello

  console.log(colors[index]); // red green blue undefined

});

colors.forEach(function(elem, index) {

  console.log(elem); // red green blue

  console.log(index); // 0 1 2

})

四、Object.keys（） 方法

  • 遍历结果为由对象自身可枚举属性组成的数组，数组中的属性名排列顺序与使用for in循环遍历该对象时返回的顺序一致；
  • 与for in区别在于不能遍历出原型链上的属性；
// 遍历数组

var colors = ['red', 'green', 'blue'];

colors.length = 10;

colors.push('yellow');

Array.prototype.demo = function () {};

Object.keys(colors); // ["0", "1", "2", "10"]

// 遍历对象

function Person(name, age) {

  this.name = name;

  this.age = age;

}

Person.prototype.demo = function() {};

var jenemy = new Person('jenemy', 25);

Object.keys(jenemy); // ["name", "age"]

五、总结

一、1、for in循环。遍历实例+原型中可枚举的属性
　　2、for in不适合遍历数组
　　7、for in遍历数组的下标类型不一样 ：for in为String，for为Number
　　8、对不存在项的处理：for in不存在的项不被枚举出来；for全部枚举出
　　9、index in array特性可以判断某个索引是否存在对应元素
二、Object.keys()，遍历实例可枚举属性，返回属性名组成的数组。
三、for of输出数组中包括不存在的值在内的所有值

相关文章