本篇文章介绍在ECMAScript语法中,关于对象迭代的几种方法
for-in循环是在学习对象的语法知识时最常用到的,其作用也是用于遍历数组和对象的属性。
var obj = {
name:"vv",
age:12,
gender:"male",
telephone:123456
}
//遍历并打印对象所有属性值
for (var key in obj) {
console.log(obj[key]);
}
//结果输出以下值
// vv
// 12
// male
// 123456
Object.keys()方法 : 返回一个对象自身所有可遍历属性的键名组成的数组。
Object.values()方法 : 返回一个对象自身所有可遍历属性值组成的数组
Object.entries()方法 : 返回一个对象自身所有可遍历的属性的键值对(属性名-属性值)
一般这三中方法与for-of循环配套使用
var obj = {
name:"vv",
age:12,
gender:"male",
telephone:123456
}
//遍历并打印对象所有属性名
for (var key of Object.keys(obj)) {
console.log(key);
}
//输出结果
// name
// age
// gender
// telephone
var obj = {
name:"vv",
age:12,
gender:"male",
telephone:123456
}
//遍历并打印对象所有属性值
for (var val of Object.values(obj)) {
console.log(val);
}
//结果输出以下值
// vv
// 12
// male
// 123456
var obj = {
name:"vv",
age:12,
gender:"male",
telephone:123456
}
//遍历并打印对象所有属性键值对
for (var [key, value] of Object.entries(obj)) {
console.log([key, value]);
}
//输出结果
//[ "name", "vv" ]
//[ "age", 12 ]
//[ "gender", "male" ]
//[ "telephone", 123456 ]
Array.from()方法是将类数组对象转换为数组
所有这个方法仅适用于类数组对象
类数组对象 : 对象中必须存在length属性,且属性名是数值(从0开始的数值)
var obj = {
"0":"vv",
"1":12,
"2":"male",
"3":123456,
length:4
}
//遍历并打印对象所有属性值
for (var key of Array.from(obj)) {
console.log(key);
}
//结果输出以下值
// vv
// 12
// male
// 123456
遍历器(Iterator,也可叫迭代器)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。
Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for…of循环,Iterator 接口主要供for…of消费。 ——摘自阮一峰《ECMAScript 6 入门》
var obj = {
"0":"vv",
"1":12,
"2":"male",
"3":123456,
length:4
}
//给类数组对象添加迭代器
obj[Symbol.iterator] = Array.prototype[Symbol.iterator];
//遍历并打印对象所有属性值
for (var val of obj) {
console.log(val);
}
//结果输出以下值
// vv
// 12
// male
// 123456
这个方法组合使用了Generator函数
var obj = {
name:"vv",
age:12,
gender:"male",
tel:123456
}
obj[Symbol.iterator] = function* (){
for(let key in obj){
let val = obj[key];
yield [key,val];
}
}
//遍历并打印对象所有属性键值对
for (var val of obj) {
console.log(val);
}
//输出结果
// [ "name", "vv" ]
// [ "age", 12 ]
// [ "gender", "male" ]
// [ "tel", 123456 ]
此文章为作者本人原创,仅限于作者本人的学习总结记录,若有错误之处请留言提出。
此后若有更简便的方法会继续更新。