Js中for in 和for of的区别
for in的使用
- fon in 应用于数组中
Array.prototype.sayHello = function () {
console.log("我是数组原型的方法");
};
Array.prototype.str = "我是数组原型的字符串";
//定义一个数组
var arr = [1, 2, 3, 4];
console.log(arr); //当前打印的没有原型上的属性和方法 [1, 2, 3, 4]
//使用for in循环
for (let index in arr) {
console.log(index);
}
//输出结果为 0,1,2,3,4,name,str,sayHello
- for in 应用于对象中
Object.prototype.sayHello = function () {
console.log("Hello");
};
Object.prototype.str = "World";
var myObject = { name: "zhangsan", age: 100 };
console.log(myObject); //输出 { name: "zhangsan", age: 100 };
//使用for in循环对象
for (let index in myObject) {
console.log(index);
}
//输出结果 首先输出的是对象的属性名,再是对象原型中的属性和方法, name,age,str,sayHello
//如果不想让其输出原型中的属性和方法,可以使用hasOwnProperty方法进行过滤
for (let index in myObject) {
if (myObject.hasOwnProperty(index)) {
console.log(index);
}
}
//输出结果为name,age
//你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。
console.log("Object.keys(myObject)", Object.keys(myObject)); //["name", "age"]
结论:
1.for in 应用于数组循环时:返回的是数组的下标和数组的属性和原型上的方法和属性
2.for in 应用于对象时:循环返回的是对象的属性名和原型中的方法和属性。
for of的使用
- fon of 应用于数组中
//for of 应用在数组中
Array.prototype.sayHello = function () {
console.log("我是数组原型的方法");
};
Array.prototype.str = "我是数组原型的字符串";
//定义一个数组
var arr2 = [10, 20, 30, 40];
console.log(arr2); //当前打印的没有原型上的属性和方法 [10, 20, 30, 40]
//使用for of循环
for (let index of arr2) {
console.log("arr2--", index);
}
//输出结果为 10,20,30,40 遍历的是数组元素值,没有原型上的属性和方法
- fon of 应用于数组中
Object.prototype.sayHello2 = function () {
console.log("Hello");
};
var myObject2 = {
name: "zhangsan",
age: 10,
};
for (let key of myObject2) {
consoloe.log(key);
}
//报错Uncaught TypeError
结论:
1.for of 应用于数组循环时: 遍历的是数组元素值,没有原型上的属性和方法
for in 和for of的区别
for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。 所以for in更适合遍历对象,不要使用for in遍历数组。