JS中对象几点需要注意的地方

willin 发布于2019-08-20 18:21 / 3402人阅读

摘要：如何判断对象中是否包含一个属性删除对象中一个属性列举对象中的属性和值此方法可以枚举自己和原型链中的内容还可以使用对象的方法，它返回一个数组，里面的内容就是由所有的对象的值构成的数组，但是不会包含原型链中的内容枚举如果某个属性的的设定为不可枚

如何判断对象中是否包含一个属性

    var Person = {
        name : "wenzhe",
        number : 91
    };
    
    // checks for both own properties and prototype properties
    console.log("number" in Person);  // true
    console.log("constructor" in Person);  // true
    
    //  only checks for own properties
    console.log(Person.hasOwnProperty("number"));  // true
    console.log(Person.hasOwnProperty("constructor"));  // false

删除对象中一个属性

    var Person = {
        name : "wenzhe",
        number : 91
    };
    
    delete Person.name;
    console.log("name" in Person) // false

列举对象中的属性和值

    var Person = {
        name : "wenzhe",
        number : "00"
    };
    
    for (pro in Person) {
        console.log(pro + " : " + Person[pro]);
    }
    
    // name : wenzhe
    // number : 00
    // 此方法可以枚举自己和原型链中的内容
    
    
    
    // 还可以使用对象的keys方法，它返回一个数组，里面的内容就是由所有
    // 的对象的key值构成的数组， 但是不会包含原型链中的内容
    
    var properties = Object.keys(Person);
    var i = 0, len = properties.length;
    for (var i = 0, len = properties.length; i < len; i++) {
        console.log(properties[i] + " : " + Person[properties[i]]);
    }

枚举
如果某个属性的的设定为不可枚举的，那么上面那两种方法都不能显示出那个属性，但是对于keys返回的那个数组，仍然包含不可被枚举的那个值

    //  properties是数组，每个数组都有自己的length属性
    console.log("length" in properties) // true;
    console.log(Person.propertyIsEnumerable("length"));  // false

Get & Set(accessor properties)

var Person2 = {
    name : "wenze";
    
    get name() {
        console.log("Reading name");
        return this.name;
    }
    
    set name(value) {
        console.log("Setting name");
        this.name = value;
    }
}

Person2.name = "Chen";

在对象外面为对象添加属性的方法

在对象外面添加一般的属性（Data Property)--Object.defineProperty

var person = {};
Object.defineProperty(person, "name", {
    value : "wz", // 该属性的值
    enumerable : true, // 是否可以被枚举
    configurable : true,  //name可以由Data pro <-> accessor property
    writable : false //  不能在被更改，同类型也不行
    })

在对象外面添加 get&set

var person1 = {name : 1};
Object.defineProperty(person1, "name", {
    get: function() {
        console.log("Reading name");
        return this._name;
    },
    set: function(value) {
        console.log("Setting name to %s", value);
        this._name = value;
    },
    enumerable: true,
    configurable: true
})

添加多个属性使用Object.defineProperty

var person1 = {};
Object.defineProperties(person1, {
   _name: {
       value: "Nicholas",
       enumerable: true,
       configurable: true,
       writable: true
    },
    name: {
           get: function() {
               console.log("Reading name");
               return this._name;
           },
           set: function(value) {
               console.log("Setting name to %s", value);
               this._name = value;
           },
           enumerable: true,
           configurable: true
   }
});

查看属性值的设置情况

var person1 = {
    name: "WZ"
};
var descriptor = Object.getOwnPropertyDescriptor(person1,       "name");
 
console.log(descriptor.enumerable);
console.log(descriptor.configurable);
console.log(descriptor.writable);
console.log(descriptor.value);
// true
// true
  // true
  // "WZ"

GPU云服务器云服务器 js包装对象中的属性 js，对象中增加数据的方法 js 获取对象中的数据类型 js中数据和对象的关系图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84386.html

JS总结篇--[总结]JS操作DOM常用API详解

摘要：文本整理了操作的一些常用的，根据其作用整理成为创建，修改，查询等多种类型的，主要用于复习基础知识，加深对原生的认识。方法主要是用于添加大量节点到文档中时会使用到。文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。基本概念在讲解操作DOM的api之前，首先我们来复习一下一些基...

malakashi 2019-08-20 16:52 评论0 收藏0
《编写可维护的 JavaScript》读书笔记

摘要：最近阅读了编写可维护的，在这里记录一下读书笔记。禁止使用，，，的字符串形式。避免使用级事件处理函数。让事件处理程序成为接触到对象的唯一函数。检测函数是检测检测函数的最佳选择。为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性检测。最近阅读了《编写可维护的 JavaScript》，在这里记录一下读书笔记。书中主要基于三个方向来讲解怎么增加代码的可维护性：编程风格、编程实践、自动化...

tuniutech 2019-08-23 16:25 评论0 收藏0
一篇包含了react所有基本点的文章

摘要：今年我要挑战自己，把它归纳为一篇文章。将忽略该函数并呈现常规的空按钮。这是中唯一的约束只有表达式。将，，和视为没有呈现任何内容的有效元素子元素。使用自己的对象将事件对象包装起来，以优化事件处理的性能。任何已挂载元件的状态可能会改变。去年，我写了一本关于学习React.js的小书，原来是大约100页。今年我要挑战自己，把它归纳为一篇文章。本文不会涵盖什么是React，或者为什么要学...

Chiclaim 2019-08-22 11:09 评论0 收藏0
js设计模式(一)-单例模式

摘要：虽然是弱类型的语言，但是也有构造函数和实例。也就是说，我们只在第一次调用构造函数时创建新对象，之后调用返回时返回该对象即可。而我不认为这是一个单例模式的原因如下我觉得既然两次调用同一个构造函数，返回的不是同一个对象，那不就不能成为单例模式。写在前面（度过一阵的繁忙期，又可以愉快的开始学习新知识了，一年来技术栈切来切去，却总觉得js都还没学完-_-）本文主要围绕js的设计模式进行展...

AlexTuan 2019-08-22 18:17 评论0 收藏0
Vert.x入坑须知（1）

摘要：轻量级，部署简单。此外，本文也不是入门文档，而是为了预防陷坑而给出的指导意见，故在阅读本文之前还请先仔细阅读的文档。可视作的一个最小部署和运行单元，简单的说，可类比为。，主，负责部署程序中其他的。严格来讲，之后，上述第一点并不完全正确。一直以来早有将这些年用Vert.x的经验整理一下的想法，奈何天生不是勤快人，直到最近扶墙老师问起，遂成此文。选择理由现在想想，我们应该算是国内用V...

Turbo 2019-08-14 17:35 评论0 收藏0