js对象5-对象属性的操作

属性是否存在（自有属性？继承属性）

检查对象上的某个属性是否存在可以通过运算符in、方法hasOwnPreperty()、propertyIsEnumerable()以及简单的比较（属性的值和undefined比较【!==】）来实现。但细节上有差别。

1. in

var point = Object.create({
    type: "point"
}, {
    x: {
        value: 10.1212,
        writable: true,
        configurable: true,
        enumerable: true
    },
    y: {
        value: 123.121,
        writable: true,
        configurable: true,
        enumerable: true
    }
});

// in 
console.log("x" in point); //return true
console.log("type" in point); //return true

原理：

如果对象的自有属性或继承属性包含这个属性，返回true。

2. hasOwnProperty()

// point 如上定义


//hasOwnProperty()
console.log(point.hasOwnProperty("x")); //true
console.log(point.hasOwnProperty("type")); //false

原理：

如果对象的自有属性含有该属性才返回true。

3. propertyIsEnumerable（）

var point = Object.create({
    type: "point"
}, {
    x: {
        value: 10.1212,
        writable: true,
        configurable: true,
        enumerable: true
    },
    y: {
        value: 123.121,
        writable: true,
        configurable: true,
        enumerable: true
    },
    z: {
        value: 123.121,
        writable: true,
        configurable: true,
        enumerable: false
    }
});


//propertyIsEnumerable()
console.log(point.propertyIsEnumerable("x")); //true
console.log(point.propertyIsEnumerable("z")); //false
console.log(point.propertyIsEnumerable("type")); //false

原理：

hasOwnProperty()的增强版，如果对象的自有属性含有该属性且可枚举才返回true。

4. !==

通过查询属性的值与undefined进行比较，可以判断是否存在某属性。

有缺陷：1.不区分自有属性和继承属性；2.无法区分有该属性，但是值为undefined。

//1==
var point2={
    name:undefined
}
console.log(point.name!==undefined); //false
console.log(point.x!==undefined); //true
console.log(point.type!==undefined); //true
console.log(point2.name!==undefined); //false

 

获取属性的值

可以通过点（.）或方括号（[]）运算符来获取属性的值。

var book = {
    "main title": "JavaScript",
    "sub-title": "The Difinitive Guide",
    "for": "all audiences",
    author: {
        firstname: "David",
        surname: "Flanagn"
    }
}
var author = book.author;//获取book的“author”属性
var name = author.surname;//获取book的“surname”属性
var title=book["main title"];//获取book的“main title”属性

添加、设置属性

设置属性的值，和查询写法一样，只不过是将其放在赋值表达式的左侧

 

var book = {
    "main title": "JavaScript",
    "sub-title": "The Difinitive Guide",
    "for": "all audiences",
    author: {
        firstname: "David",
        surname: "Flanagn"
    }
}
book.edition=6 ;//为book添加“edition”属性
book["main title"]="ECMScript";//设置book的“main title”属性

 

删除属性

通过运算符delete进行删除。

delete book.edition;

原理：

该运算符只能删除自有属性（own properies）而无法删除继承属性(inherited properies)(如果要删除继承属性，必须从原型对象上进行删除但这会影响到从该原型继承的对象 )。

delete只是断开属性与宿主对象的关系，而不会去操作属性中的属性（这可能将造成内存泄漏）。

delete不能删除可配置性为false的属性。

当delete表达式删除成功或没有任何副作用（比如删除不存在的属性）时，它返回true。

 

枚举属性

枚举属性的关键为获取所有的键值。

枚举属性的3种方法：

1. for/in
2. Object.keys()
3. Object.getOwnPropertyNames()

1. for/in

for/in 将对象的可枚举属性名（包括自有和继承属性）赋值给循环变量，在循环体中遍历所有可枚举的属性。

2.Object.keys()

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

3.Object.getOwnPropertyNames()

返回一个数组，数组中为对象的自有属性的名称组成。

var point = Object.create({
    type: "point"
}, {
    x: {
        value: 10.1212,
        writable: true,
        configurable: true,
        enumerable: true
    },
    y: {
        value: 123.121,
        writable: true,
        configurable: true,
        enumerable: true
    },
    z: {
        value: 123.121,
        writable: true,
        configurable: true,
        enumerable: false
    },
});

//for in
console.log("for in ......");
for (var item in point) {
    console.log(point[item]);
}

//Object.keys
var keys = Object.keys(point);
console.log("keys......");
keys.forEach((item) => {
    console.log(point[item]);
});

//Object.getOwnPropertyNames()
var ownKeys = Object.getOwnPropertyNames(point);
console.log("getOwnPropertyNames() ......");
ownKeys.forEach((item) => {
    console.log(point[item])
});