浅显易懂----javascript对象全解析（一）

最新推荐文章于 2022-07-02 23:17:35 发布
最新推荐文章于 2022-07-02 23:17:35 发布
阅读量192 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript js对象赋值 js es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongyi_/article/details/111188639
版权

前言

我先先看一下javascript权威指南中对 object的定义：

对象是一种复合值：他将很多值（原始值或者其他对象）聚合在一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个键/值对（key/value）。
我们看到的大多数引用类型值都是 Object 类型的实例；而且，Object 也是
ECMAScript 中使用最多的一个类型。对象其实就是一组数据和功能的集合。

在 JavaScript 中一共有六种主要类型:

• string
• number
• boolean
• null
• undefined
• object

其中基本数据类型有五种：Undefined、Null、Boolean、Number和 String。还有 一种复杂数据类型，也就是对象-----Object。

null其实表示一个空对象的指针。这也是使用 typeof 操作符检测 null 值时会返回"object"的原因

console.log(typeof null);   //object

实际上，JavaScript 中还有许多特殊的对象子类型，可以称之为复杂基本类型。

内置对象

此外，JavaScript 中还有一些对象子类型，通常被称为内置对象。有些内置对象的名字看起来和简单基础类型一样，不过实际上它们的关系更复杂：

 • String
 • Number
 • Boolean
 • Object
 • Function
 • Array
 • Date 
 • RegExp 
 • Error

内置对象将在下篇文章继续讨论。

创建对象

1.1 对象字面量表示法

创建一个名为person的对象：

let person = { 
    name : "小黄瓜", 
    age : 22 
};

在使用对象字面量语法时，属性名也可以使用字符串:

let person = { 
    "name" : "小黄瓜", 
    "age" : 22, 
};

这里的数值属性名会自动转换为字符串。

使用对象字面量语法时，如果留空花括号，则可以定义只包含默认属性和方法的对象:

let person = {};    与 new Object()相同
person.name = "小黄瓜";
person.age = 22;
1.2 使用new操作符创建对象

new操作符创建并初始化一个新对象，操作符new后面跟一个构造函数Object。

let person = new Object(); 
person.name = "小黄瓜"; 
person.age = 22;
1.3 Object.create()方法
let person = Object.create({name : '小黄瓜'});
person.name   //小黄瓜

Object.create()实际上是创建了一个空对象，并将原型指针指向了传入的第一个参数。

Object.create = function(new){
    let NewObject = {};
    NewObject.prototype = new;
    return new NewObject();
}

属性的查询和设置

2.1 通过 . 的方式
let person = {
    name : '小黄瓜',
    age : 22
}
//查询值
console.log(person.name);   //小黄瓜
//设置值
person.name = 'guanguan';
console.log(person.name);    //guanguan
2.2 通过 [] 表示法
let person = {
    name : 'xiaohuanggua',
    age : 22
}
//查询值
console.log(person["name"]);  //xiaohuanggua
//设置值
person["name"] = 'guanguan';
console.log(person["name"]);  //guanguan

//但方括号语法的主要优点是可以通过变量来访问属性
let newName = "name";
console.log(person[newName]);     //guanguan
2.3 Object.keys()

返回一个数组中包含所有属性名(所有的key值)。

let person = {
    name : 'xiaohuanggua',
    age : 22
}
Object.keys(person);   //["name", "age"]
2.4 Object.values()

返回一个数组中包含所有属性值(所有的value值)。

let person = {
    name : 'xiaohuanggua',
    age : 22
}
Object.values(person);   //["xiaohuanggua", 22]

删除属性

delete运算符

可以删除对象的属性。

let person = {
    name : 'xiaohuanggua',
    age : 22
}
delete person.name;
console.log(person);   //{age: 22}

delete运算符只能删除自有属性，不可以删除继承属性(要删除继承属性必须从这个属性的原型对象上删除)。

delete运算符不能删除可配置项为false的属性。

检测属性

用于检测对象成员中的所属关系，判断某个属性是否存在于某个对象中。

3.1 in运算符

如果右侧对象的自有属性或者继承属性中包含左侧属性(字符串)，则返回true，否则返回false。

let person = {
    name : 'xiaohuanggua',
    age : 22
}
let test ="name" in person;
console.log(test);     //true

let test2 ="sex" in person;
console.log(test);     //false
3.2 hasOwnProperty()方法

用于判断属性是否为对象的自有属性，自有属性返回true，继承属性返回false。

let person = {
    name : 'xiaohuanggua',
    age : 22
};
person.hasOwnProperty('name');    //true   person对象存在name属性
person.hasOwnProperty("sex");     //false  person对象并没有这个属性
person.hasOwnProperty("toString");   //false  这个属性是继承自Object对象
3.3 propertyIsEnumerable()方法

只有当属性是对象的自有属性，且属性的可枚举性为true是才为true，否则为false。

let person = {
    name : 'xiaohuanggua',
    age : 22
};
person.propertyIsEnumerable('name'); 
//true   person对象存在name属性且可枚举
person.propertyIsEnumerable('sex');   
//false  person对象不存在sex属性
person.propertyIsEnumerable('toString');  
//false person对象存在toString属性，但是toString不是person的自有属性，且不可枚举
3.4 !== 操作符

判断属性是否为undefined

let person = {
    name : 'xiaohuanggua',
    age : 22
};
person.name !== undefined;   //true
person.sex !== undefined;    //false
person.toString !== undefined;   //true

但是 !==操作符 不能区分不存在的属性和存在但是值为undefined的属性，而in可以很好地区分。

let person = {
    name : undefined,
};
// !==
person.name !== undefined;  //false  属性存在，但值为undefined
person.age !== undefined;   //false  属性不存在

// in
'name' in person;    //true 属性存在，但值为undefined
'age' in person;     //false  属性不存在

枚举属性

4.1 for…in
let person = {
    name : "xiaohuanggua",
    age : 22,
    sex : 'boy',
};
for(item in person){
    console.log(item);    //name,age,sex 
}

for in总是得到对象的key值。
4.2 Object.keys()

获得对象所有可见属性的属性名(key值)，不包括原型中定义属性。

let person = {
    name : "xiaohuanggua",
    age : 22,
    sex : 'boy',
};
Object.keys(person);   //["name", "age", "sex"]
4.3 Object.getOwnPropertyNames()

获得对象所有属性，不包括原型中定义属性。

let person = {
    name : "xiaohuanggua",
    age : 22,
    sex : 'boy',
};
Object.getOwnPropertyNames(person);   //["name", "age", "sex"]

属性get和set

Get：在读取属性时调用的函数。默认值为 undefined。

Set：在写入属性时调用的函数。默认值为 undefined。

let man = {
    name:'小黄瓜',
    weibo:'@xiaohuanggua',
    get age(){
        return new Date().getFullYear()-1997;
    },
    set age(val){
        console.log('我今年'+ val);
    }
}
console.log(man.age);     //22     读取的时候调用
man.age = 1000;      //我今年1000     设置的时候调用

属性类型

数据属性和访问器属性。

6.1 数据属性

数据属性包含一个数据值的位置，在这个位置可以读取和写入值。

数据属性特性：

  1. Configurable：表示能否修改属性的特性,能否通过 delete 删除属性重新重新定义属性，或者能否把属性修改为访问器属性,这个特性默认值为 true。

  2. Enumerable：表示能否通过循环返回属性(可枚举)，这个特性默认值为 true。

  3. Writable：表示是否可以修改属性的值。默认值为 true。

  4. Value：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，
    把新值保存在这个位置。这个特性的默认值为 undefined。

let person = { 
    name: "小黄瓜" ;
};

直接在对象上定义的属性，它们的Configurable、Enumerable和Writable都被设置为 true，而value特性被设置为指定的值。

上面的例子创建了一个名为 name 的属性，为它指定的值是"小黄瓜"。也就是说，value特性将
被设置为"小黄瓜"，而对这个值的任何修改都将反映在这个地方。

而如果要修改属性默认的特性，必须使用 Object.defineProperty()方法。

这个方法接收三个参数：
属性所在的对象、属性的名字和一个对象。

其中，对象的属性必须是：configurable、enumerable、writable 和 value。

let person = {}; 
Object.defineProperty(person, "name", { 
 writable: false, 
 value: "小黄瓜" 
}); 
alert(person.name); //"小黄瓜" 
person.name = "小绿瓜"; 
alert(person.name); //"小黄瓜"

我们创建了一个名为 name 的属性，它的值"小黄瓜"是只读的。这个属性的值是不可修改
的，如果尝试为它指定新值，那么赋值操作无效。

let person = {}; 
Object.defineProperty(person, "name", { 
 configurable: false, 
 value: "小黄瓜" 
}); 
alert(person.name); //"小黄瓜" 
delete person.name; 
alert(person.name); //"小黄瓜"

因为我们将 configurable 设置为 false，表示不能从对象中删除属性,所以删除操作无效。

一旦把属性定义为不可配置的，就不能再把它变回可配置了。那么再调用Object.defineProperty()方法修改除 writable 之外的特性，都会导致错误：

let person = {}; 
Object.defineProperty(person, "name", { 
 configurable: false, 
 value: "小黄瓜" 
}); 
//报错！！
Object.defineProperty(person, "name", { 
 configurable: true, 
 value: "小黄瓜" 
});
6.2 访问器属性

访问器属性 getter 和 setter 函数（这两个函数都不是必需的）。
在读取访问器属性时，会调用 getter函数，这个函数负责返回有效的值；在写入访问器属性时，会调用
setter 函数并传入新值，这个函数负责如何处理数据。

有如下 四 个特性:

  1. Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特
    性，直接在对象上定义的属性，这个特性的默认值为true。
  2. Enumerable：表示能否通过循环返回属性。对于直接在对象上定义的属性，这个特性的默认值为 true。
  3. Get：在读取属性时调用的函数。默认值为 undefined。
  4. Set：在写入属性时调用的函数。默认值为 undefined。
let person = { 
    name: '小黄瓜', 
    edition: 1 
}; 
Object.defineProperty(person, "year", { 
    get: function(){ 
        return this.name; 
    }, 
    set: function(newValue){ 
        if (newValue > 2019) { 
            this.edition = 2;
        } 
    } 
}); 

person.year = 2020; 
alert(person.edition); //2

不一定非要同时指定 getter 和 setter。只指定 getter 意味着属性是不可写，写入属性会被忽略。

6.3 定义多个属性

Object.defineProperties()方法。利用这个方法可以一次定义多个属性。

这个方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

例如：

let person = {}; 
Object.defineProperties(person, { 
    name: { 
        value: '小黄瓜' 
    }, 
 
    edition: { 
        value: 1 
    }, 
    year: { 
        get: function(){ 
            return this.name; 
        }, 
        set: function(newValue){ 
            if (newValue > 2004) { 
               this.edition = 1;
            } 
        } 
    } 
});

在 person 对象上定义了两个数据属性（name 和 edition）和一个访问器属性（year）。
最终的对象与之前中定义的对象相同。唯一的区别是这里的属性都是在同一时间创建的。

6.4 读取属性的特性

Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述。

这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果
是访问器属性，这个对象的属性有 configurable、enumerable、get 和 set；如果是数据属性，这个对象的属性有 configurable、enumerable、writable 和 value。

let person = {}; 
Object.defineProperties(person, { 
    name: { 
        value: '小黄瓜' 
    }, 
 
    edition: { 
        value: 1 
    }, 
    year: { 
        get: function(){ 
            return this.name; 
        }, 
        set: function(newValue){ 
            if (newValue > 2004) { 
               this.edition = 1;
            } 
        } 
    } 
}); 

let descriptor = Object.getOwnPropertyDescriptor(person, "name"); 
alert(descriptor.value); //小黄瓜 
alert(descriptor.configurable); //false 
alert(typeof descriptor.get); //"undefined"

let descriptor = Object.getOwnPropertyDescriptor(person, "year"); 
alert(descriptor.value); //undefined 
alert(descriptor.enumerable); //false 
alert(typeof descriptor.get); //"function"

序列化对象

对象有两个方法：stringify()和 parse()。这两个方法分别用于把 JavaScript 对象序列化为 JSON 字符串和把 JSON 字符串解析为原生 JavaScript 值。

//对象转字符串
let obj = {x:1,y:true,z:[1,2,3],nullVal:null};
JSON.stringify(obj);     //"{"x":1,"y":true,"z":[1,2,3],"nullVal":null}"

//如果存在undefined,则不会出现序列化中
let obj = {val:undefined,a:NaN,b:Infinity,c:new Date()};
JSON.stringify(obj);       //"{'a':null,'b':null,'c':2019-06-20T10:32:34}"

//字符串转对象
let obj = JSON.parse('{"x":1}');
obj.x;     //1

对象的属性

每一个对象都有与之相关的原型(proto)、类(class)、可扩展性(extensible)。这就是对象的三个属性。

原型属性

通过对象字面量的方式创建的对象使用Object.prototype作为它们的原型；

通过new创建的对象使用构造函数的prototype属性来作为它们的原型；

通过Object.create()来创建的对象使用第一个参数作为它们的原型。

    //想要检测一个对象是否是另一个对象的原型（或者处于原型链中），使用isPrototypeOf()方法。
    let person = {x:1,y:2};
    let newPerson = Object.create(person);
    person.isPrototypeOf(newPerson);//true
    Object.prototype.isPrototypeOf(newPerson);//true

类属性

用于表示信息对象类型。
只能通过toString()这种方法查询对象的类信息。该方法返回如下格式的字符串：
[object class]。接着提取字符串的第八个到倒数第二个位置之间的字符得到类信息。

  1. 通过内置构造函数创建的对象，其类属性与构造函数的名称相匹配。

  2. 通过对象字面量和Object.create创建的对象的类属性是 Object。

  3. 自定义构造函数创建的对象的类属性也是Object。

可扩展属性

用以表示是否可以向对象添加新属性。

（详情见属性类型）

对象方法

9.1 toString()方法

toString() 方法可用于将当前对象转换为字符串形式，并返回结果。

//Object
    let person = {name:'小黄瓜',age:1000};
    console.log(person.toString()); //[object Object]
//Array
    let array = ["小黄瓜", true, 12, -5];
    console.log(array.toString()); //小黄瓜,true,12,-5
9.2 toLocaleString() 方法

toLocaleString() 方法返回一个表示这个对象的本地化字符串。可根据本地时间把 Date 对象转换为字符串，并返回结果。

let date = new Date();
console.log(date.toLocaleString()); //2019/8/11 下午11:51:09
9.3 valueOf() 方法

valueOf() 方法用于返回指定对象的原始值。

// Array：返回数组对象本身
let array = ["小黄瓜", true, 12, -5];
console.log(array.valueOf());  //["小黄瓜", true, 12, -5]
console.log(array.valueOf() === array ); // true

// Object：返回对象本身
let person = {name: "小黄瓜", age: 18};
console.log(person.valueOf()); //{name: "小黄瓜", age: 18}
console.log(person.valueOf() === person ); // true
9.4 toJSON()方法

toJSON()方法返回其自身的 JSON 数据格式。

//原生 Date 对象 toJSON()方法
let d=new Date();
let n=d.toJSON();
console.log(n);  //2019-08-11T16:19:52.681Z

//任何对象添加 toJSON()方法
 let book = { 
    "title": "Professional JavaScript", 
     "authors": [ 
        "Nicholas C. Zakas" 
    ], 
    edition: 3, 
    year: 2011, 
    toJSON: function(){ 
        return this.title; 
    } 
 }; 
 
let jsonText = JSON.stringify(book); 
console.log(jsonText);  //"Professional JavaScript"

toJSON()可以作为函数过滤器的补充。假设把一个对象传入JSON.stringify()，序列化该对象的顺序如下:

1. 如果存在 toJSON()方法而且能通过它取得有效的值，则调用该方法。否则，返回对象本身。
2. 如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第一步返回的值。
3. 对第二步返回的每个值进行相应的序列化。
4. 如果提供了第三个参数，执行相应的格式化。

关于对象的上半部分已经完结，下一篇还会远吗…

本文参考：

Javascript高级程序设计(第三版)

Javascript权威指南(第六版)

小黄瓜没有刺
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
12-10
这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言，从入门到精通到放弃一直会被对象这个问题围绕。 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨，终于忍不住要写一篇基础概念类的文章了。 本文探讨以下问题，在座的朋友各取所需，欢迎批评指正: 1、创建对象 2、__proto__与prototype 3、继承与原型链 4、对象的深度克隆 5、一些Object的方法与需要注意的点 6、ES6新增特性 下面反复提到实例对象和原型对象，通过构造函数 new 出来的本文称作 实例对象，构造函数的原型属性本文称作 原型对象。 创建对象 字面量的方式: va
交换篇-VLAN文档（浅显易懂）
05-21
在IT网络领域，VLAN（Virtual Local Area Network，虚拟局域网）是一种重要的网络管理技术，用于分割广播域，提高网络效率并增强安全性。VLAN划分后，同一VLAN内的用户可以进行二层通信，但不同VLAN之间的通信则需要...
JavaScript - 对象篇
qq_52499703的博客
07-02 373
为了成功地生活，少年人必须学习自立，铲除埋伏各处的障碍，在家庭要教养他，使他具有为人所认可的独立人格
javascript 的对象详解
qq_46462137的博客
12-21 4929
javascript 的 对象详解 1.书写格式： 关键字 标识符 赋值符号 大括号 分号 let obj = {} ; 2.举个例子 手机的 在真实生活中，手机是一个对象。 手机有诸如品牌和颜色等属性，也有诸如看电视和打游戏的方法功能： let phone = { name: "apple", //牌子 size: 6.0, //尺寸 price: 9999, //价格...
JavaScript对象详解
wangjie_blog的博客
04-12 249
对象（object）是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。JavaScript中创建对象最基础的方法如下：var obj=new Object();//创建对象 obj.name="Jack";//添加属性 box.age=100; box.run=function() { return this.name+this.age;//...
Qt教程及软件(超级浅显易懂-非常适合初学者).pdf
09-21
Qt教程及软件(超级浅显易懂-非常适合初学者).pdf
rt-thread物联网操作系统-其他
06-12
RT-Thread主要采用 C 语言编写，浅显易懂，且具有方便移植的特性（可快速移植到多种主流 MCU 及模组芯片上）。RT-Thread把面向对象的设计方法应用到实时系统设计中，使得代码风格优雅、架构清晰、系统模块化并且可...
卷积神经网络--浅显易懂的理解.pdf
10-16
卷积神经网络浅显易懂的理解 卷积神经网络是人工神经网络中的一种，主要应用在图像识别领域。它不同于传统的神经网络，具有卷积、池化和非线性激活函数映射等操作。卷积神经网络可以直接接受多维向量，实现图像识别...
设计模式之追MM---浅显易懂
10-13
### 设计模式之追MM——浅显易懂 #### 1. Factory（工厂模式） **概念解释：** 工厂模式是一种创建型设计模式，其目的是为了将客户端与具体的产品类解耦。在这种模式下，客户端无需了解产品的具体创建细节，只...
2021-2022年收藏的精品资料浅显的谈谈证券公司的信息化.doc
12-17
证券公司信息化浅显谈 在当今信息化的时代，证券公司的信息化已然成为一个不可或缺的组成部分。证券公司的信息化不仅可以提高业务效率、降低成本、提高客户体验，还可以帮助证券公司更好地应对市场变化、管理风险和...
MI-NANO_3.4.3.9-099.zip
12-11
小米路由器mini传统的固件虽然有界面浅显易懂，操作简单快接的特点，对于不会设置路由器和无线知识匮乏的用户来说是一大福音，可对于无线知识经验丰富，喜欢折腾又有特殊需求的用户来说就太小儿科和鸡肋了，因为这些...
RT-Thread Studio-v2.2.6-setup-x86-64-202305191040
最新发布
06-19
RT-Thread 主要采用 C 语言编写，浅显易懂，方便移植。它把面向对象的设计方法应用到实时系统设计中，使得代码风格优雅、架构清晰、系统模块化并且可裁剪性非常好。针对资源受限的微控制器（MCU）系统，可通过方便...
Java字符编辑器-仿Notepad记事本.rar
07-10
Java字符编辑器-仿Notepad记事本，似乎一提到字符编辑，大家就想到了记事本之类的，不管是VB/VC或是delphi初学者，在开始的时候，都会仿写记事本，从中可学习到不少字符处理的相关技巧...浅显易懂，分享给Java初学者。
PCA--浅显易懂
07-13
对于一个包含 \( d \) 个特征的样本集，协方差矩阵是一个 \( d \times d \) 的矩阵，其中对角线元素表示每个特征自身的方差，非对角线元素表示不同特征之间的协方差。 2. **特征值分解**：为了实现 PCA，我们需要...
【JS系列】对象详解
weixin_34321977的博客
04-19 104
前言 学习面向对象时我们常说“万物皆对象”，当然在JavaScript中也不例外。不夸张地说：没有理解对象，就无法理解JavaScript。本文将向你展现对象的详细内容，希望对你有帮助。 1. 对象的定义 1.1 “万物皆对象”一探究竟 1.1.1 都是对象 布尔类型通过new Boolean()创建时是对象 数字类型通过new Number()创建时是对象 字符串类型通过new ...
Javascript 对象一（对象详解）
qq_41913971的博客
05-08 304
JS创建对象的几种方法 1. Object 构造函数 创建 2. 对象字面量表示法 创建 3. 使用工厂模式创建对象 在 Car 函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式 4. 使用构造函数创建对象 构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。 构造函数与工程模式相比： 没有显示地创建对象...
JavaScript 对象详解
huangjianfeng21的博客
06-10 215
JavaScript对象的概述 什么是对象，代表现实中的某个事物, 是该事物在编程中的抽象，多个数据的集合体(封装体)，用于保存多个数据的容器 为什么要用对象，便于对多个数据进行统一管理 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。而对象的值就是引用类型的实例。 在javaScript 中引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称做为类，但 ja...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值