zoukankan      html  css  js  c++  java
  • 深入理解 Object对象属性

    一.实例化Object对象

    1.字面量形式

    var person1 = {
        name: '张三'
    };

    2.Object构造器的形式
    var person2 = new Object();
    person2.name = '李四';

    二.对Object进行简单操作(增 删 改 查)
    var obj1 = {}
    obj1.name="张三" //增添属性
    delete obj1.name //删除属性
    obj1.name="李四" //修改属性
    console.log(obj1['name'])等价于 console.log(obj1.name) //查找name属性

    判断是否存在name属性 if_in

       if('name' in obj1){
        console.log('存在')
        }else{
        console.log('不存在')
        }

    
    

    三.遍历实例的属性

    默认情况下,我们添加到对象上的属性都是可枚举的,这样的话我们就可以使用for-in循环遍历它们

    1.遍历对象,获取到属性和其对应的值
    var obj = { name: '张三', age: 23, gender: '男', address: '武汉' }; var propertyName; for (propertyName in obj){
    console.log('属性名:' + propertyName); console.log('属性值:' + obj[propertyName]); }

    如果我们只是想获取一个对象中的所有属性名,可以使用Object.keys()方法。该方法会以数组的形式返回所有的属性名
    console.log(Object.keys(obj));     // ["name", "age", "gender", "address"]


    2.获取input中的值并生成对象

    <input type="text" name="name" value="李四"/>
    <input type="text" name="age" value="17"/>
    <input type="text" name="gander" value="男"/>

    var data ={}
         var inputs = document.querySelectorAll('input')
         for(var i=0;i<inputs.length;i++){
            data[inputs[i].name] = inputs[i].value
           // console.log(inputs[i].name)
         }
        // console.log(data)



    四.属性的分类

    属性的类型分两种:一种是数据属性,一个种是访问器属性

    数据属性用来存储一个值

    访问器属性不包含值,而是定义了一个getset函数,当读取属性时,调用get函数,当写属性时,调用set函数。

    使用字面量的形式定义访问器属性的语法:

    注意get 和set 的用法!

     var obj1 =  {      

           name: '周扒皮',

           age: 1001,
           __id: 564813245966,

           get id() {
             return this.__id;
           },
           set id(newId) {
             this.__id = newId;
           }
         }
       
       // console.log(obj1.id)
         obj1.id = 168287879900;
       // console.log(obj1.id)

    五.属性的内部特性

    共享的属性:

    Enumerable:true/false     //是否可遍历

    Configurable:true/false    //是否可配置

    改变属性的特性:

    Object.defineProperty(obj, 'name',{}) //改变单个属性

    
    

    var obj01 = {
        name:'张三丰',
        age:83,
        gander:'男'
       }

       Object.defineProperty(obj01,'name',{     

              enumerable:true,
              configurable:true,
              writable: false //是否可修改


       })
       
    // console.log(obj01.propertyIsEnumerable('name'));

    Object.defineProperties(obj, {}) //改变多个属性

       var stro1 = {}
       Object.defineProperties(stro1,{
       name:{
       value:'李三婆',
       enumerable:false,
       configurable: true,
       writable: true
      },
       age:{
       value:87,
       enumerable:true,
       configurable:true,
       writable: false
      },
      __address:{
         value:{},
         enumerable:true,
         configurable:true,
         writable:true
     },
      address:{
         get:function(){
         return this.__address
      },
      set:function(newAddress){
           this.__address = newAddress
       }
      }
    })

    
    

    stro1.address='郑州'
    // console.log(stro1.address)

    var descriptor = Object.getOwnPropertyDescriptor(stro1, 'address'); //获取单个属性内部的特性
    //console.log(descriptor)

    六.获取属性的内部特性

    1.获取单个
    Object.getOwnPropertyDescriptor()
    2.获取多个
    Object.getOwnPropertyDescriptors()









  • 相关阅读:
    最新Navicat Premium12 破解方法,亲测可用
    (转)Navicat_12安装与破解激活,注册机亲测可用
    使用ApiPost模拟发送get、post、delete、put等http请求
    模拟POST、Get 请求的工具----APIpost(中文版POSTMAN)
    推荐一款接口文档生成工具,apipost,好用
    作为后端开发者,如何更优雅、便捷的生成接口文档?
    使用apipost调试api接口并快速生成接口文档的一些小技巧,比postman更好用
    中文版postman——apipost,不试一下,你就不知道它有多香
    ApiPost如何在预执行脚本里添加请求参数?
    ApiPost的预执行脚本和后执行脚本
  • 原文地址:https://www.cnblogs.com/sw91092/p/7517533.html
Copyright © 2011-2022 走看看