zoukankan      html  css  js  c++  java
  • JS对象的可枚举属性和不可枚举属性

    昨天在写文章(转载)的时候发现了有些对象的方法是分可枚举性和不可枚举性的。
    简单的查了一下资料,今天来捋一捋啥是对象的可枚举啥是不可枚举。

    可枚举性:

    对象的每一个属性都有一个描述对象,用来描述和控制该属性的行为,用Object.getOwnPropertyDescriptor方法来获取该描述对象(用Object.defineProperty方法来设置)。

    然后这个Object.defineProperty的方法不是vue双向数据绑定的原理吗!!下次再说…
    描述对象的enumerable属性,称为”可枚举性“,如果该属性为false,就表示某些操作会忽略当前属性。

       let obj = { start: '123' };
        console.log(Object.getOwnPropertyDescriptor(obj, 'start'))
    
       // 输出内容:
         configurable: true
         enumerable: true
         value: "123"
         writable: true

    下面,我们分别介绍下对象属性的描述对象的4个属性:
    1.configurable:表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true

    2.enumerable: 表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true

    3.writable: 能否修改属性的值,如果直接使用字面量定义对象,默认值为true
    4.value: 该属性对应的值,默认为undefined

    经过以上的一些操作,我还是不是很真切的理解可枚举性。那就举一个例子

     let obj = {};
        Object.defineProperties(obj, {
            name: {
                value: '祖宗',
                enumerable: false,  //不可枚举
            },
            age: {
                value: 88,
                enumerable: true,   //可枚举
            }
        })
        for (let key in obj) {
            console.log("key:" + key + ',' + 'value:' + obj[key])
        }

    只有可枚举的内容被for in 循环出来了
    有没有感觉清晰了很多!!
    (在这里感谢大佬提点!)

    这就是个属性,如果false遍历就拿不到了,true遍历就能拿到了…(研究完了发现超简单诶。尴尬)

    目前,有四个操作会忽略enumerable为false的属性。
    for…in循环:只遍历对象自身的和继承的可枚举的属性。
    Object.keys():返回对象自身的所有可枚举的属性的键名。
    JSON.stringify():只串行化对象自身的可枚举的属性。
    Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。

    然后明儿写原生js实现vue中的双向数据绑定~~

  • 相关阅读:
    Raspberry Pi(树莓派2代B型新手初体验)
    Webview内存泄漏解决办法
    学习日记(二)——自定义来电界面,监听来电广播,悬浮窗
    学习日记(一)----BaseActivity的写法
    学习记录---- viewpager里嵌套listview中adapter的写法
    listView的流畅性优化
    git 命令学习(二)
    git 命令学习(一)
    软件项目管理结课小结
    软件测试结课小结
  • 原文地址:https://www.cnblogs.com/JiAyInNnNn/p/11457323.html
Copyright © 2011-2022 走看看