zoukankan      html  css  js  c++  java
  • JS枚举对象属性的方法及其区别

      愉快的中秋节要过去了,国庆倒计时两个周!!!

      闲话不多说,那今天我们来看一看JS中枚举对象属性的方法有哪些以及他们的区别

      首先在JS里面枚举对象属性一共有三种方法

        for in: 会遍历对象中所有的可枚举属性(包括自有属性和继承属性)

        Object.keys(): 会返回一个包括所有的可枚举的自有属性的名称组成的数组

        Object.getOwnPropertyNames(): 会返回自有属性的名称 (不管是不是可枚举的)

       下面我们一个一个的拆解开来看一下

      for in:

         会遍历对象中所有的可枚举属性(包括自有属性和继承属性)

      例:

            var obj = {
                itemA: 'itemA',
                itemB: 'itemB'
            }
            var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
            newObj.newItemA = 'newItemA'
            newObj.newItemB = 'newItemB'
            for(i in newObj){
                console.log(i)
            }
    

      输出结果为:

    newItemA
    newItemB
    itemA
    itemB
    

      现在我们将其中的一个属性变为不可枚举属性

            var obj = {
                itemA: 'itemA',
                itemB: 'itemB'
            }
            var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
            newObj.newItemA = 'newItemA'
            newObj.newItemB = 'newItemB'
            Object.defineProperty(newObj,'newItemA',{
                enumerable: false
            })
    
            for(i in newObj){
                console.log(i)
            }

      输出结果:

    newItemB
    itemA
    itemB

      Object.keys():

        会返回一个包括所有的可枚举的自有属性的名称组成的数组

        例:

            var obj = {
                itemA: 'itemA',
                itemB: 'itemB'
            }
            var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
            newObj.newItemA = 'newItemA'
            newObj.newItemB = 'newItemB'
            Object.defineProperty(newObj,'newItemA',{
                enumerable: false
            })
            var result = Object.keys(newObj)
            console.log(result)

        结果:

    ['newItemB']
    

      

       Object.getOwnPropertyNames():

        会返回自有属性的名称 (不管是不是可枚举的)

        例:

            var obj = {
                itemA: 'itemA',
                itemB: 'itemB'
            }
            var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
            newObj.newItemA = 'newItemA'
            newObj.newItemB = 'newItemB'
            Object.defineProperty(newObj,'newItemA',{
                enumerable: false
            })
            var result = Object.getOwnPropertyNames(newObj)
            console.log(result)

        结果:

    ['newItemA','newItemB']

     搞定收工,明天又要去上班喽,老铁们,得劲吗

  • 相关阅读:
    详解TCP三次握手
    Linux(Ubunt)使用日记------常用软件汇总(不定时更新)
    Linux(Ubuntu)使用日记------markdown文件与pdf,doc,docx文件的相互转化(pandoc使用)
    白板编程浅谈——Why, What, How
    深入理解Java 8 Lambda(语言篇——lambda,方法引用,目标类型和默认方法)
    我的算法学习之路
    redux的hook使用
    redux基础(添加中间件与异步)
    typescript书写规范
    用js手撕七种排序算法!!内附运行速度测试函数
  • 原文地址:https://www.cnblogs.com/suihang/p/11523664.html
Copyright © 2011-2022 走看看