javascript中for..in、for..of和forEa
2019-08-24 本文已影响0人
菇凉别走
1、for..in
for..in可以将JavaScript中的对象的属性依次循环出来,当for..in作用于数组时得到的是该元素的下标,且该下标是一个String对象而不是一个Number对象。(注意:for..in实际上是历史遗留问题,其遍历的实际上是对象的属性,之所以能够遍历数组,是因为数组实际上是一个对象,而其属性就是下标,所以使用for..in遍历数组得到的下标是String类型)
for..in的问题在于,当我们为一个数组添加了一个不是数字下标的属性时,遍历数组时会将这个属性当做是下标遍历出来:
let a = ['A', 'B', 'C'];
a.name = 'Hello';
for (let x in a) {
console.log(x); // '0', '1', '2', 'name'
}
2、for..of
for..of就是为了遍历集合而专门设计的,它只遍历数组的元素:
let a = ['A', 'B', 'C'];
a.name = 'Hello';
for (let x of a) {
console.log(x); // 'A', 'B', 'C'
}
并且当for..of直接遍历对象时会报错:
let obj = {
name:'123123',
age:15
}
for (let cc of obj) {//Uncaught TypeError: obj is not iterable
console.log(cc)
}
for..of用于遍历对象需要使用Object.keys()才能正确遍历其属性(而Object.keys()方法实际上是将对象的属性键值以数组的对象返回了回来,实际上也是遍历数组。所以说for..of不能遍历对象其实也没有错):
let obj = {
name:'123123',
age:15
}
for (let cc of Object.keys(obj)) {
console.log(cc)//name,age
}
3、forEach
forEach是Iterable的内置方法,是一个高阶函数,其接受一个函数作为参数,每次迭代就回调该函数。是遍历Iterable(Array,Map,Set)最好的方式(但是相对于for..of有一个坏处就是不能通过break退出循环):
let arr = ['A', 'B', 'C'];
arr.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index);
});
let set = new Set(['A', 'B', 'C']);
set.forEach(function (element, sameElement, set) {
//Set没有索引,因此回调函数的前两个参数都是元素本身
console.log(element);
});
let map = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
map.forEach(function (value, key, map) {
//map接受的参数为值,键和其自身
console.log(value);
});