网站首页 » 前端开发 » JavaScript » 对象(Object)的遍历方法整理
上一篇:
下一篇:

对象(Object)的遍历方法整理

前言

对象的遍历与我们形影不离,不管是数组还是一个形如{ key:value} 的对象,很多时候我们都得遍历一个对象。为此有必要把遍历对象的方法整理成章,以备必时之需。

数组遍历

for 循环

for 循环可以说是最原始的遍历方法,常常被用来遍历数组。

let arr = [1,2,3,4,5,6,7];
for(var i=0;i<arr.length;i++){
    console.log(i,arr[i]);
}

forEach()

forEach() 方法是用来遍历数组的,它可以接受一个回调函数作为参数。回调函数有两个参数分别是 item (值)和 index (下标)。

let arr = [1,2,3,4,5,6,7];
arr.forEach(function(value,index){
    console.log(value,index);
})

map()

map 方法用于数组的遍历,接受一个函数作为参数,返回一个新的数组。

let arr = [1,2,3,4,5,6,7];
let newArr = arr.map(function(value, index, array){
    return value*index
});
console.log(newArr);

对象遍历

这里所说的对象遍历包含但不限于数组的遍历方法。

for…in

for…in 方法循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

const obj = {
    name:'云库网',
    domain:'http://yunkus.com',
    age:'2年9月4日',
};
for(key in obj){
    console.log(key,obj[key]);
}

Object.keys()

ES5 方法。Object.keys 方法返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)。

const obj = {
    name:'云库网',
    domain:'http://yunkus.com',
    age:'2年9月4日',
};
for(let key of Object.keys(obj)){
    console.log(key,obj[key]);
}

Object.values()

ES6 方法。Object.values() 方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值。

const obj = {
    name:'云库网',
    domain:'http://yunkus.com',
    age:'2年9月4日',
};
for(let value of Object.values(obj)){
    console.log(value);
}

Object.entries()

ES6 方法。Object.entries() 方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值对数组。

const obj = {
    name:'云库网',
    domain:'http://yunkus.com',
    age:'2年9月4日',
};
for(let [key,value] of Object.entries(obj)){
    console.log(key,value);
}

Reflect.ownKeys()

ES6 方法。Reflect.ownKeys() 方法返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 还是字符串,也不管是否可枚举。

const obj = {
    name:'云库网',
    domain:'http://yunkus.com',
    age:'2年9月4日',
};
for(let key of Reflect.ownKeys(obj)){
    console.log(key,obj[key]);
}

for…of

ES6 方法。for…of 循环可以遍历数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、Generator 对象,以及字符串。可以 for…of 循环真的是无所不能,但说是这么说,它还是要有个前提的,那就是 一个数组结构只要部署了 Symbol.iterator 属性,也就是说只要有 iterator 接口的,就可以被 for…of 循环遍历。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/object-traversal-method/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END