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

BearyChat 发布于2019-08-26 12:16 / 1239人阅读

摘要：写在前面注这个系列是本人对知识的一些梳理，其中不少内容来自书籍高级程序设计第三版和权威指南第六版，感谢它们的作者和译者。打印和类似，只是它返回对象的所有自有属性的名称，包括不可枚举的。

写在前面

注：这个系列是本人对js知识的一些梳理，其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版，感谢它们的作者和译者。有发现什么问题的，欢迎留言指出。

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] + "
";
}

②继承相关的影响

原型链实现了属性的继承。简单说，如果给对象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

GPU云服务器云服务器 js中集合对象的属性 js包装对象中的属性 js操作tr属性 js_window对象属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108371.html

js知识梳理5：关于函数的要点梳理(1)

摘要：构造函数调用会使用新创建的对象作为调用上下文。函数的参数相关可选形参当传入的实参比函数声明时指定的形参数量要少，剩下的形参都将设置为值实参多则会自动省略。它们的第一个实参是要调用函数的母对象，它是调用上下文，函数体内通过引用它。写在前面注：这个系列是本人对js知识的一些梳理，其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版，感谢它们的...

付伦 2019-08-26 12:16 评论0 收藏0
js知识梳理1:理解对象的属性特性

摘要：对象直接量的默认值表示能否通过循环返回属性。同样密封对象操作是不可逆的。代表未冻结已冻结属性特性规则总结如果对象是不可拓展的，则可以编辑已有的自有属性，但不能给它添加新属性。写在前面注：这个系列是本人对js知识的一些梳理，其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版，感谢它们的作者和译者。有发现什么问题的，欢迎留言指出。 1.数据...

13651657101 2019-08-26 12:16 评论0 收藏0
JS核心知识点梳理——原型、继承（上）

摘要：同理，原型链也是实现继承的主要方式的只是语法糖。原型对象也可能拥有原型，并从中继承方法和属性，一层一层以此类推。利用构造函数小明张三张三小明缺点每次实例化都需要复制一遍函数到实例里面。寄生构造函数模式只有被类出来的才能用。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言最近又攀登了一下JS三座大山中的第二...

villainhr 2019-08-26 13:53 评论0 收藏0
JS核心知识点梳理——变量篇

摘要：核心知识点梳理数据篇看了一些资料，结合高程和对核心知识点进行了梳理。所以，一共有种声明变量的方法。凡是在声明之前就使用这些变量，就会报错。还是那句话，建议大家掌握核心知识点，细枝末节的东西就随意啦。 JS核心知识点梳理——数据篇 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 看了一些资料，结合ES6、高程和MD...

aristark 2019-08-23 15:32 评论0 收藏0
JS核心知识点梳理——原型、继承（下）

摘要：引言上篇文章介绍原型，这篇文章接着讲继承，呕心沥血之作，大哥们点个赞呀明确一点并不是真正的面向对象语言，没有真正的类，所以我们也没有类继承实现继承有且仅有两种方式，和原型链在介绍继承前我们先介绍下其他概念函数的三种角色一个函数，有三种角色。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言上篇文章介绍原型，...

joyqi 2019-08-26 13:53 评论0 收藏0