js知识梳理2:对象属性的操作

1.属性的查询和设置

①基本语法

这个简单，可以通过点（.）或方括号（[]）运算来获取属性的值，注意点运算符后的标识符不能是保留字，方括号内的表达式必须返回字符串或返回一个可以转换成字符串的值。

var person = {
    name:'jaychou',
    height:172,
    sayName:function () {
        console.log(this.name);
    }
};
console.log(person['name']);
console.log(person.height);
复制代码

往往有一些场景使用方括号比点语法更灵活：

var addr = "";
for(var i=0;i<4;i++){
    //读取customer对象的address0,address1,address2,address3属性
    addr += customer["address"+i] + '\n';
}
复制代码

②继承相关的影响

原型链实现了属性的继承。简单说，如果给对象o的属性x赋值，如果o中已经有属性x（自有属性，不是继承来的），那就会改变这个已有属性x的值。如果o中不存在属性x，那么赋值操作给o添加一个新属性x。如果之前o继承了属性x，那么这个继承的属性就创建的同名属性覆盖了。当然，如果属性的writable是false，就会抛出错误。

但是如果这个继承来的属性是具有setter方法的存取器属性，这时会调用setter方法而不是给o创建一个属性x。继承来的属性是只读的，才会在o上创建属性。

③属性访问错误

查询一个不存在的属性不会报错，返回undefined。但如果尝试查询这个不存在的对象它的属性就会报错。

给null和undefined设置属性会报类型错误，严格模式下，设置属性操作只要失败都会抛出类型错误异常。

2.删除属性

delete运算符可以删除对象的属性，注意的是delete只是断开属性和宿主对象的联系，而不会去操作属性中的属性，而且为了避免内存泄漏，在销毁对象的时候，要遍历属性中的属性，依次删除。

delete运算符只能删除自有属性（这是肯定的，否则就影响了整个原型链的对象）。

3.检测属性

判断某个属性是否存在于某个对象中即为检测属性，常用方法：in运算符、hasOwnProperty()、propertyIsEnumerable()，或者之前提及的属性查询也可以。

//in运算符：如果对象的自有属性或继承属性中包含这个属性则返回true:
var o = {x:1};
console.log("x" in o);//true:
console.log("y" in o);//false
console.log("toString" in o);//true:
//hasOwnProperty:检测是否是对象的自有属性
console.log(o.hasOwnProperty("x"));//true
console.log(o.hasOwnProperty("y"));//false
console.log(o.hasOwnProperty("toString"));//false
//propertyIsEnumerable:hasOwnProperty的增强版，是自有属性且可枚举
console.log(o.propertyIsEnumerable("x"));//true
console.log(Object.prototype.propertyIsEnumerable("toString"));//false:不可枚举
复制代码

其他小办法：!==判断一个属性是否是undefined（缺陷：!==无法区分不存在的属性和存在但值为undefined的属性）

console.log(o.x !== undefined);//true
console.log(o.y !== undefined);
console.log(o.toString !== undefined);//true
复制代码

4.枚举属性

常用的遍历对象属性的方法（未包括ES6）：for-in循环、Object.keys()、Object.getOwnPropertyNames()。

①for-in循环

for-in循环可以遍历对象中所有可枚举的属性（包括自有属性和继承属性）:

var o1 = {x:1,y:1,_z:111};
Object.defineProperty(o1,'sayX',{
    value:function () {
        console.log(this.x);
    },
    enumerable:false
});
Object.defineProperty(o1,'z',{
    get:function () { return this._z; },
    set:function (v) { this._z = v; },
    enumerable:false
})
//打印x,y,_z，不会打印sayX和z，因为其enumerable为false
for(var p in o1) console.log(p);
复制代码

②Object.keys()

返回一个数组，这个数组由对象中可枚举的自有属性的名称组成。

//打印["x", "y", "_z"]
console.log(Object.keys(o1));
复制代码

③Object.getOwnPropertyNames()

和Object.keys()类似，只是它返回对象的所有自有属性的名称，包括不可枚举的。

//打印["x", "y", "_z", "sayX", "z"]
console.log(Object.getOwnPropertyNames(o1));
//打印["constructor", "__defineGetter__", "__defineSetter__", 
// "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", 
// "isPrototypeOf", "propertyIsEnumerable", "toString", 
// "valueOf", "__proto__", "toLocaleString"]
console.log(Object.getOwnPropertyNames(Object.prototype));
复制代码

④小拓展

给Object.prototype添加一个不可枚举的extend()方法，这个方法将作为参数传入的对象的所有自有属性（包括不可枚举的）一一复制，除了值，也复制属性的所有特性，除非在目标对象中存在同名的属性。

Object.defineProperty(Object.prototype,'extend',{
   configurable:true,
   enumerable:false,//不可枚举
   writable:true,
   value:function (o) {
       //先获取o的全部自有属性（包括不可枚举的）
       var names = Object.getOwnPropertyNames(o);
       for(var i=0,len=names.length;i<len;i++){
           //如果属性已经存在，跳过
           if(names[i] in this) continue;
           //获取属性的描述符
           var desc = Object.getOwnPropertyDescriptor(o,names[i]);
           //创建属性到this
           Object.defineProperty(this,names[i],desc);
       }
    }
});

使用：
var emptyO = {_z:10};
//除了已有的属性_z，其他o1的所有属性描述符都复制过去了
emptyO.extend(o1);
console.log(emptyO);
复制代码

转载于:https://juejin.im/post/5b77fda36fb9a019ba682e78