比较forfor..infor...offorEach
Posted 橘猫吃不胖~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了比较forfor..infor...offorEach相关的知识,希望对你有一定的参考价值。
比较for、for..in、for...of、forEach
1 for…in…的作用
1.1 可枚举对象
const person = {
name: 'Lydia',
age: 21,
};
for (const item in person) {
console.log(item);
}
输出结果是: name age
对于这个结果可以简单理解为,对于对象object,使用for…in…循环是对对象的key值进行循环。
但是使用for…of…结果就不相同
const person = {
name: 'Lydia',
age: 21,
};
for (const item of person) {
console.log(item);
}
输出结果TypeError: person is not iterable
这个结果可以看出for…of…不能对对象进行循环
再看看forEach能怎么样?
const person = {
name: 'Lydia',
age: 21,
}
person.forEach((i) => {
console.log(i)
})
输出结果TypeError: person.forEach is not a function
这个结果可以看出forEach不能对对象进行遍历
1.2 可枚举数组
const arr = ['a','b','c']
for (const item in arr) {
console.log(item);
console.log(arr[item]);
}
输出结果为 0 ‘a’ 1 ‘b’ 2 ‘c’
这个结果看出使用for…in…是输出索引值,通过索引值能拿到数组数据
但是使用for…of…结果就不相同
const arr = ['a','b','c']
for (const item of arr) {
console.log(item);
}
输出结果为 ‘a’ ‘b’ ‘c’
这个结果看出使用for…of…是输出数组值
1.3 可枚举数组的原型对象
Array.prototype.sayHello = function(){
console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,3];
myArray.name='数组';
for(let index in myArray){
console.log(index);
}
输出结果是: 0 1 2 name sayHello str
这个结果看出for in 不仅返回的是数组的下标,而且将数组的原型对象以及数组对象本身属性值都会返回。但是这也存在一个问题,在实际工作开发中,这些对象很可能是不需要的,全部列举出来可能会产生新的问题。
为了解决原型对象这个问题,可以使用hasOwnProperty
Array.prototype.sayHello = function(){
console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,3];
myArray.name='数组';
for(let index in myArray){
if(myArray.hasOwnProperty(index)) {
console.log(index);
}
}
输出的结果是 0 1 2 name
但是这个结果能看出来,虽然使用hasOwnProperty,但是数组本身的属性还是会输出
2 forEach的作用
2.1 可遍历数组
Array.prototype.sayHello = function(){
console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = ['a','b','c'];
myArray.name='数组';
myArray.forEach((value,i) => {
console.log(value)
console.log(i)
})
输出的结果是 ‘a’ 0 ‘b’ 1 ‘c’ 2
使用forEach可以输出索引值和数组值,而且不会输出数组的原型对象。
2.2 无法break
forEach有个问题就是不能中断执行
var arr = [3, 5, 7];
arr.forEach(function (value) {
console.log(value);
if (value === 5) {
return false;
}
});
输出的结果是 3 5 7
从结果可以看出,return false没有执行,他会一直运行到底
for in 也同样存在这个问题:
var arr = [3, 5, 7];
for (let value in arr) {
console.log(arr[value]);
if (value == 5) {
break;
}
}
输出的结果是 3 5 7
从结果可以看出,break没有执行,他会一直运行到底
3 for…of…的作用
3.1可遍历数组
Array.prototype.sayHello = function(){
console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = ['a','b','c'];
myArray.name='数组';
for(let index of myArray) {
console.log(index)
}
输出结果是 a b c
使用for of无法输出索引值,但也不会输出数组的原型对象。
3.2 可中断
var arr = [3, 5, 7];
for (let value of arr) {
console.log(value);
if (value == 5) {
break;
}
}
输出结果是 3 5
结果可以看出,break执行了,可以中断循环
3.3 可迭代字符串
let str = 'hello';
for (let value of str) {
console.log(value);
}
输出结果是 ‘h’ ‘e’ ‘l’ ‘l’ ‘o’
3.4可迭代arguments类数组对象
(function() {
for (let argument of arguments) {
console.log(argument);
}
})(1, 2, 3);
输出结果是 1 2 3
3.5 可迭代map和set
let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of mapData) {
console.log(value);
}
let setData = new Set([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of setData) {
console.log(value);
}
输出结果都是 1 2 3
4 总结
for in 适用于纯对象的遍历,并且只能输出可枚举属性
forEach适用于需要知道索引值的数组遍历,但是不能中断
for of适用于无需知道索引值的数组遍历,因为可以中断。另外对于其他字符串,类数组,类型数组的迭代,for of也更适用
以上是关于比较forfor..infor...offorEach的主要内容,如果未能解决你的问题,请参考以下文章
java中Comparable和Comparator两种比较器的区别