js Object的属性和方法

本篇主要介绍JS中常用Object的属性方法。

  • delete 操作
  说明:delete只能删除对象的自由属性,不能删除继承属性

  let o = { x:1 };
  delete o.x 
  console.log( o.x ) // => undefined :访问不存在的属性,返回undefined
  • in 运算符
  说明:判断对象是否包含某个属性,会从对象的实例属性、继承属性里进行检测。  返回值:boolean

  let o = { x:1 };
  o.prototype = { b:0 }
  console.log( ‘x’ in o ) // => true
  console.log( ‘b’ in o ) // => true
  • obj.hasOwnProperty( propertyName:string )
  说明:判断一个对象是否有用一个指定名称的实例属性,不会检查继承属性。  返回值:boolean

  var Student = function(name){ this.name = name }
  Student.prototype.age = 18;
  var st = new Student();
  console.log(st.hasOwnProperty('name')); // => true :调用构造函数时,通过this.name附加到实例对象上
  console.log(st.hasOwnProperty('age')); // => false :age属性为原型上的成员
  • obj.propertyIsEnumerable( propertyName:string )
  说明:用来检测属性是否属于某个对象的,规则为该属性是否为实例属性,并且是可枚举的(可用for/in循环枚举)  返回值:boolean

 var o = Object.create({}, {
    name: {
        value: 'tom',
        enumerable: true // 可枚举
    },
    age: {
        value: 22,
        enumerable: false // 不可枚举
    }
 });

  console.log(o.propertyIsEnumerable( 'name' )); // => true :name为实例属性并且可枚举
  console.log(o.propertyIsEnumerable( 'age' )); // => false :age为实例属性但不可枚举
  console.log(o.hasOwnProperty( 'age' )); // => true :hasOwnProperty()方法只判断属性是否为实例属性

  实例属性与原型属性的简单区分:
  function MyObject() { 
      this.name = "我是实例的属性"; 
  } 
  var obj = new MyObject(); 
  alert(obj.propertyIsEnumerable("name"));//true 
  MyObject.prototype.say = "我是原型的属性"; 
  alert(obj.propertyIsEnumerable("say")); //false 
  • 对象的遍历
  说明:即遍历对象的实例属性、继承属性。

  1. for / in 语句块
      遍历对象可枚举的实例属性和继承属性

  2.Object.keys( obj:实例对象 )    (ES5新增方法)
  说明:返回一个数组,包含对象可枚举的实例属性名称。
    var po = { px: 1, py: 2 };
    var o = { x: 1, y: 2 };
    o.__proto__ = po; // 设置o的原型为po
    var propertyArray = Object.keys(o); // => 返回一个包含了可枚举的实例属性名称的数组
    for (var i = 0, len = propertyArray.length; i < len; i++) {
        console.log(propertyArray[i]); // => 输出实例属性名称:x、y
    }

  3. Object.getOwnPropertyNames( obj:实例对象 ) 
  说名: 返回一个数组,包含对象的所有实例属性名称。包括可枚举和不可枚举的
  var po = { px: 1, py: 2 };
  var o = { x: 1, y: 2 };
  // 设置对象o的属性特性:属性x为可枚举,属性y为不可枚举
  Object.defineProperties(o, {
      x: {
          enumerable: true
      },
      y: {
          enumerable: false
      }
  });
  o.__proto__ = po; // 设置o的原型为po
   
  // 1.Object.keys():获取一个可枚举的实例属性名称的数组
  var propertyArray = Object.keys(o);
  for (var i = 0, len = propertyArray.length; i < len; i++) {
      console.log(propertyArray[i]); // => 输出实例属性名称:x
  }
 
  // 2.Object.getOwnPropertyNames():获取一个包含的实例属性名称的数组,不管实例属性是否可枚举
  propertyArray = Object.getOwnPropertyNames(o);
  for (var i = 0, len = propertyArray.length; i < len; i++) {
      console.log(propertyArray[i]); // => 输出实例属性名称:x、y
  }

  ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries ,作为遍历一个对象的补充手。
  Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
    var obj = { foo: 'bar', baz: 42 };
    Object.values(obj)
    // ["bar", 42]

  Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
    var obj = { foo: 'bar', baz: 42 };
    Object.entries(obj)
    // [ ["foo", "bar"], ["baz", 42] ]

  供for...of循环使用。
    let {keys, values, entries} = Object;
    let obj = { a: 1, b: 2, c: 3 };
    for (let key of keys(obj)) {
      console.log(key); // 'a', 'b', 'c'
    }
    for (let value of values(obj)) {
      console.log(value); // 1, 2, 3
    }
    for (let [key, value] of entries(obj)) {
      console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
    }
  • 对象的属性描述符
          分为数据属性和访问器属。
        两者可相互转换,若转换后未设置enumerable和configurable特性(两类属性描述符都包含这2个特性),将默认采用转换前的值

         数据属性:
        value                设置属性的值  默认值:undefined
        writable            是否可修改属性的值;true:可修改属性的值;false:不可修改属性的值  默认值:false
        enumerable      是否可枚举属性;true:可枚举,可通过for/in语句枚举属性;false:不可枚举  默认值:  false
        configurable     否可修改属性的特性;true:可修改属性的特性(如把writable从false改为true);false:不  可修改属性的特性  默认值:false
         默认值:
          1)在使用Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加数据属性,writable、enumerable和configurable默认值为false。
        2)使用对象直接量创建的属性,writable、enumerable和configurable特性默认为true。
       对象直接量;属性特性默认为true
       var o1 = {
           name: 'tom'
       };
        console.log(Object.getOwnPropertyDescriptor(o1, 'name')); // => Object {value: "tom", writable: true,     enumerable: true, configurable: true}
        // 2)通过Object.create创建,属性特性默认为false
        var o2 = Object.create(null, {
            name: {value:'tom'}
        });
        console.log(Object.getOwnPropertyDescriptor(o2, 'name')); // => Object {value: "tom", writable: false,     enumerable: false, configurable: false}   


    访问属性:
    get                 属性的返回值函数    undefined
    set                 属性的设置值函数;含有一个赋值参数   undefined
    enumerable  是否可枚举属性;true:可枚举,可通过for/in语句枚举属性;false:不可枚举 false
    configurable    是否可修改属性的特性;true:可修改属性的特性(如把writable从false改为true);false:不可修改属性的特性    false
    var obj = {};
 
    // 添加一个属性,并设置为访问器属性
    Object.defineProperty(obj, "name", {
        get: function () {
            return this._name; // get和set里的变量不要使用属性,如:属性为name,get和set用的是_name
        },
        set: function (x) {
            if (isNaN(x)) {
                this._name = x;
            } else {
                this._name = 'name不能为纯数字';
            }
        },
        enumerable: true,
        configurable: true
    });
 
    console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => Object {get: function, set: function,     enumerable: true, configurable: true}
    obj.name = '12';
    console.log(obj.name); // => name不能为纯数字

此文章属于学习篇,于个人学习中整理,相当于是学习笔录,若不完整大家请见谅。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容