本文系统总结了JavaScript中遍历对象和数组的多种常用方法。针对对象,详细解析了Object.keys、for...in、Object.getOwnPropertyNames及Reflect.ownKeys的区别与适用场景;针对数组,对比了forEach、for...in以及for...of遍历器的特性,特别指出for...of对类数组对象和字符串的支持。通过代码示例帮助开发者根据实际需求选择最优遍历方案。
在日常开发中,频繁需要对JavaScript对象和数组进行遍历操作。为了便于后续查阅与使用,本文将常用且高效的遍历方法整理如下。
JavaScript 对象遍历方法汇总
1. 使用 Object.keys() 进行遍历
该方法返回一个数组,包含对象自身所有可枚举属性的键名(不包含 Symbol 类型的属性,也不包含继承属性)。
var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
console.log(key,obj[key]);
});
2. 使用 for...in 循环遍历
此循环会遍历对象自身以及继承链上所有可枚举的属性(同样不包含 Symbol 属性)。
var obj = {'0':'a','1':'b','2':'c'};
for(var i in obj) {
console.log(i,":",obj[i]);
}
3. 使用 Object.getOwnPropertyNames(obj) 遍历
该方法返回一个数组,包含对象自身的所有属性名(不包含 Symbol 属性,但包括不可枚举的属性)。
var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){
console.log(key,obj[key]);
});
4. 使用 Reflect.ownKeys(obj) 遍历
该方法返回一个数组,包含对象自身的所有属性键名。无论属性名是 Symbol 还是字符串,也无论属性是否可枚举,都会被包含在内。
var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){
console.log(key,obj[key]);
});
JavaScript 数组遍历方法汇总
1. 使用 forEach() 方法遍历
var arr=[1,2,3,4];
arr.forEach(function(val, index) {
console.log(val, index);
});
2. 使用 for...in 循环遍历
var arr=["张三","李四","王五","赵六"];
for (var i in arr){
console.log(i,":",arr[i]);
}
3. 使用 for...of 循环遍历
for...of 不仅支持标准数组,还支持大多数类数组对象(如 DOM NodeList)。
此外,它也能支持字符串遍历,此时会将字符串视为一系列 Unicode 字符序列进行迭代。
var arr=["张三","李四","王五","赵六"];
for (var value of arr){
console.log(value);
}
以上就是对 JavaScript 遍历对象和数组常用方法的总结,希望能对各位的学习和工作有所帮助。