zoukankan      html  css  js  c++  java
  • JS获取对象属性的各种方式和区别(自身/原型属性、可枚举/不可枚举)

    对象的属性有自身属性和原型属性之分,自身属性是对象自己的属性,原型属性是存在于原型链上的属性。

    可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性。(in操作符只可以判断对象是否有某个属性,不能判断是自身的,还是原型上的)

    对象属性也有可枚举和不可枚举之分,可枚举属性的属性描述符enumerable为true,不可枚举属性的为false。

    原生对象的大多数属性都是不可枚举的,比如数组和字符串的length,对象原型上的一些方法和属性,比如toString、constructor、hasOwnProperty等等

    下面看下都有哪些方式可以获取对象的属性

    Object.keys()

    返回自身的可枚举属性组成的数组 (不包含symbol)

    Object.getOwnPropertyNames()

    返回所有的自身属性 组成的数组 (不包含symbol)

    Object.getOwnPropertySymbols()

    返回自身所有的Symbol属性组成的数组

    for...in

    遍历对象的所有可枚举属性

    区别

    可枚举 可枚举和不可枚举
    仅自身属性 Object.keys Object.getOwnPropertyNames
    自身和原型属性 for...in

    没有原生的方法可以获取对象上所有的属性,包含自身和原型、可枚举和不可枚举,需要自己实现,示例如下:

    function getAllkeys (obj) {
      const keys = []
      let temp = obj
      while (temp) {
          keys.push.apply(keys, Object.getOwnPropertyNames(temp))
          keys.push.apply(keys, Object.getOwnPropertySymbols(temp))
          temp = Object.getPrototypeOf(temp)
      }
      return keys
    }
    
    

    for...of 和 for...in的区别

    for let i in obj 是以任意顺序遍历对象的可枚举属性,i是key

    for let value of iterable 是按顺序迭代一个可迭代对象,i是值

    iterable可迭代对象包括:Array、Map、Set、String、TypedArray、arguments

  • 相关阅读:
    如何使用Junit
    CSS简单动画效果
    编程类软件下载地址
    常用的工具包-下载地址
    连接数据库常用工具类(二)------C3P0Utils工具类
    连接数据库时常用的工具类(一)-------C3P0XmlUtils
    浏览器输入服务器端口号来访问html网页
    使用C/S结构实现客户端上传本地文件到服务器
    冒泡排序
    一个注册界面
  • 原文地址:https://www.cnblogs.com/nuannuan7362/p/15022094.html
Copyright © 2011-2022 走看看