JavaScript: for in / for of 循环遍历对象的属性JavaScript: for in / for of 循环遍历对象的属性JavaScript: for in / for of 循环遍历对象的属性JavaScript: for in / for of 循环遍历对象的属性
  • 首页
  • 博客
  • 文件
  • 书签
  • 分析
  • 登录
Search
Generic filters

JavaScript: for in / for of 循环遍历对象的属性

Published by admin at 2022年8月10日
Categories
  • JavaScript
Tags

一、for in 循环

1.使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问:
Object.prototype.say="cgl";   // 修改Object.prototype  
    var person ={ age: 18 };
    for (var key in person) {
        console.log(key, person[key]);//这里用person.key得不到对象key的值,用person[key] 或者 eval("person."+key);
    }   //结果: age 18 
                say cgl

2.只遍历对象自身的属性,而不遍历继承于原型链上的属性,使用hasOwnProperty 方法过滤一下。

Object.prototype.say="cgl";
    var person ={
        age: 18
    };
    for (var key in person) {
        if(person.hasOwnProperty(key)){
            console.log(key, eval("person."+key));
        }
    }

二.Object.keys()

ES6之前,循环对象常见做法是使用:for…in。但是for…in循环的问题在于它会遍历原型链中的属性,所以需要使用hasOwnProperty执行检查属性是否属于该对象。
ES6之后,我们对于对象的循环有了更好的办法:Object.keys,Object.values,Object.entriesObject.keys :创建一个包含对象所有属性的数组

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
var keys = Object.keys(fruits);
console.log(keys);  //["appple", "pear", "orange"]
小技巧:object对象没有length属性,可以通过Object.keys(fruits).length,来获取fruits的长度了。

Object.values:创建一个数组,其中包含对象中每个属性的值

const fruits ={
    appple:22,
    pear:34,
    orange:88
}

var values =Object.values(fruits);
console.log(values); //[22, 34, 88]

Object.entries:创建了一个二维数组,每个内部数组都有2个元素,第一个元素是属性名,第二个属性值

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
var entries = Object.entries(fruits);
console.log(entries);

在这里插入图片描述
使用Object.entries的时候,需要将其内部数组解构为其键和属性值

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
for (const [fruit,num] of entries) {
    console.log(`we have ${num} ${fruit}`);  //we have 22 appple ...
}

三、for-in和for-of的区别

for-in实例:

    let arr = [1, 2, 3, 4, 5]
    Array.prototype.id = 123
    arr.name = 'Jessica'
    for (let index in arr) {
       if (index == 2) {
       // break;//0,1
       // continue;//0,1,3,4
       // return;//0,1
       }
       console.log(index, arr[index]);//遍历[1,2,3,4,5,Jessica,123]
    }

for-of实例:

    let arr = [1, 2, 3, 4, 5]
    Array.prototype.id = 321
    arr.name = 'Mars'
    for (let value of arr) {
       console.log(value);//只能拿到[1,2,3,4,5]
    }

两者区别:
    1.for-in只是获取数组的索引;而for-of会获取数组的值
    2.for-in会遍历对象的整个原型链,性能差;而for-of只遍历当前对象,不会遍历原型链
    3.对于数组的遍历,for-in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性);for-of只返回数组的下标对应的属性值
    4.for-of适用遍历数组/字符串/map/set等有迭代器对象的集合,但是不能遍历普通对象(obj is not iterable)

补充说明for-of只遍历当前有迭代器对象的集合,不会遍历原型链:

    let obj = {
       name: 'han',
       sex: 'female'
    }
    console.log(Object.keys(obj));//返回索引值数组 => ['name','female']
    obj.dance = function () {
       console.log('dance');
    }
    Object.prototype.say = function () {
       console.log('say');
    }
    for (let value of Object.keys(obj)) {
       console.log(value);//name;sex;dance
    }

发表回复 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Categories

  • 猫
  • Python
  • MySQL
  • Django
  • Html/CSS
  • JavaScript
  • Vue
  • RegExp
  • php
  • Practice
  • Virtualization
  • Linux
  • Windows
  • Android
  • NAS
  • Software
  • Hardware
  • Network
  • Router
  • Office
  • WordPress
  • SEO
  • English
  • Games
  • Recipes
  • living
  • Memorandum
  • Essays
  • 未分类

归档

©2015-2022 Alaica Blog support@alaica.com