JavaScript 对象 Object 属性的增删改查

目录

1、定义（增）属性

2、访问（读）属性

3、增加/赋值（写）属性

4、删除（删）属性

---

1、定义（增）属性

1.1、使用冒号可以为对象定义属性：

var obj = {name:'erha',age:18};    //冒号左侧是属性名，右侧是属性值。属性与属性之间通过逗号运算符进行分隔

1.2、可以通过 点运算符 在结构体外定义属性：

var obj = {name:'erha',age:18};
obj.gender = 2;      //定义对象的属性
console.log(obj);    //{name:'erha',age:18,gender:2}

1.3、通过 Object.defineProperty() 方法定义对象属性：

先创建一个对象直接量 obj，然后使用 Object.defineProperty() 函数将数据属性添加到用户定义的 obj 对象中。定义属性 newDataProperty，值为101，可写，可枚举，可修改特性。

var obj = {};
Object.defineProperty(obj,"newDataproperty",{
    value：101,
    writable:true,
    enumexable:true,
    configurable:true
});
obj.newDataProperty = 102;
document.write(obj.newDataProperty);    //102

1.2、通过 Object.defineProperties() 方法定义对象的多个属性：

使用 Object.defineProperties() 函数将数据属性和访问器属性添加到用户定义的对象 obj 上。使用对象文本创建具有 newDataProperty 和 newAccessorProperty 描述符对象的 descriptors 对象。

var obj = {};
Object.defineProperties (obj,{
    newDataProperty:{
        value:101,
        writable: true,
        enumerable: true,
        configurable: true
    },
    newAccessorProperty:{
        set: function (x){
            this.newaccpropvalue = x;
        },
        get: function ){
            return this.newaccpropvalue;
        },
        enumerable; true,
        configurable; true
    }
});
obj.newAccessorProperty = 10;
document.write(obj.nexAccessorProperty);    //10

2、访问（读）属性

2.1、通过 点运算符 可以访问对象属性：

var obj = {name:'erha',age:18};
console.log(obj.name);        //erha
console.log(obj.['name']);    //erha

let name = 'age';
console.log(obj.[name]);      //18    因为此时name是变量，它的值是 'age'

console.log(obj.__proto__);    //{constructor:...,toString:...}

注意：obj.name 等价于 obj['name']，而 obj.name 不等价于 obj[name]。因为点运算符后的 name 是字符串，而不是变量。

2.2、通过 Object.keys() 方法可访问对象的 私有属性：

var obj = {name:'erha',age:18};
console.log(Object.keys(obj));       //{'name','age'}
console.log(Object.values(obj));     //{'erha',18}
console.log(Object.entries(obj));    //{[name,'erha'],[age,18]}

console.dir(obj);    //查看所有属性：{name:'erha',age:18,__proto__:......}

2.3、可以通过 obj.hasOwnProperty() 判断一个属性是否为对象的私有属性：

var obj = {name:'erha',age:18};
console.log(obj.hasOwnProperty('toString'));    //false，说明toString属性并不是obj的私有属性
console.log('toString' in obj);    //true，这种 in 运算符不能分清属性是对象的私有属性还是原型上的属性

2.4、可以通过 Object.getPrototypeOf() 返回指定对象的原型

function Pasta(grain,width){
    this.grain = grain;
    this.width = width;
}
var spaghetti = new Pasta("wheat",0.2);    //实例化一个Pasta函数对象，此时spaghetti的__proto__指向Pasta函数的原型
var proto = Object.getPrototypeOf(spaghetti);
document.write(proto === Pasta.prototype);    //true    只有函数对象有prototype属性

3、增加/赋值（写）属性

3.1、使用 点运算符 和 数组运算操作 直接赋值：

var obj = {name:'erha',age:18};
obj.name = hashiqi;      //设置对象的新值，将覆盖原来的值
obj['age'] = 100;        //设置对象的新值，将覆盖原来的值

let key = 'age';
console.log(obj[key]);    //100

3.2、可以通过 Object.assign() 方法进行批量赋值：（ 改方法是 ES6 新增的 API ）

var obj = {name:'erha',age:18};
Object.assign(obj,{name:'keji',age:22,gender:1});

console.log(obj);    //{name:'keji,age:'22',gender:1}

3.3、无法通过修改自身属性影响原型上的属性：

var obj = {name:'erha',age:18};
obj.toString = 123;    //这种方式只会修改自身属性，并不会影响obj原型上的toString属性

//如果一定要修改或增加原型上的属性，可以通过如下方式
obj.proto.toString='xxx';        //不推荐用__proto__
Object.prototype.toString='xxx'; //一般不要修改原型，会引起很多问题

3.4、可以通过 Object.create() 方法直接指定对象的原型：（ 改方法是 ES6 新增的 API ）

let common = {country:China,color:yellow};

let person = {};
person.__proto__ = common;    //不推荐

let person = Object.create(common);    //这种方式会直接将person的原型指向到common
person.name = 'lixiaolong';    //对person进行赋值
person.age = '18';             //可以在create方法中对person直接赋值，但是value书写比较麻烦

4、删除（删）属性

4.1、将对象的某个属性值赋值为 undefined：

var obj = {name:'erha',age:18};
obj.name = undefined;      //将obj对象的name属性赋值为undefined
console.log(obj);          //打印结果:{name:undefined,age:18}
console.log('name' in obj);  //true，表示obj对象中仍然含有name属性，只是属性值为undefined
console.log(obj.hasOwnProperty('name'));    //false    表示此时的obj不含有私有属性name

console.log(obj.name);     //undefined    注：不能通过这种方式判断obj是否含有name属性

4.2、使用 delete 运算符删除对象的某个属性：（delete  操作符不能直接删对象）

var obj = {name:'erha',age:18};
delete obj.name;       //删除obj对象的name属性，也可写成:delete obj['name']
console.log(obj);      //打印结果:{age:18}
console.log('name' in obj);  //false，表示obj对象中没有name属性
console.log(obj.hasOwnProperty('name'));    //false    表示此时的obj不含有私有属性name

console.log(obj.name);     //undefined    注：不能通过这种方式判断obj是否含有name属性

以上两种删除方式的区别是：当通过 delete 删除对象的属性之后，不是将该属性值设置为 undefined，而是从对象中彻底清除属性。注意：obj.name === undefined 不能断定 name 是否为 obj 的属性，可以通过：'name' in obj && obj.name === undefined；判断 name 是否为 obj 的属性。