JavaScript 对象

本文内容学习于：后盾人 (houdunren.com)

一、基础理解

1.对象和方法的属性可以动态的添加或删除。

const hd = {

name:"后盾人"

};

hd.age = "10";

hd.show= function() {

return `${this.name}已经${this.age}岁了`;

};

console.log(hd.show(());

console.log(hd);

delete hd.show;

delete hd.age;

console.log(hd);

console.log(hd.age);//undefined

2.对象的比较是对内存地址的比较所以使用 ==或===样

let hd = {};

let xj = hd;

let cms = {};

console.log(hd == xi); //true

console.log(hd ==xj);//true

console.log(hd ===cms);//false

3.对象做为函数参数使用时也不会产生完全赋值，内外共用一个对象

let user = { age: 22 };

function hd(user) {

user.age += 10;

hd(user);

}

console.log(user.age); //32

4.展开语法，使用...可以展示对象的结构，下面是实现对象合并的示例

let hd ={ name:"后盾人"，web: "houdurnen.com"};

let info ={ ...hd, site: "hdcms" };

console.log(info);

// 函数参数合并示例

function upload(params) {

let config = {

type: "*.jpeg,*.png",

size: 10000

};

params ={ ...config, ...params };

console.log(params);

}

upload({ size: 999 });

5.解构赋值

建议使用var/let/const声明

//对象使用

let info = {name:'后盾人',url:'houdunren.com'};

let {name:n,url:u} = info ;

console.log(n);// 后盾人

//如果属性名与变量相同可以省略属性定义

let {name,url} = {name:'后盾人'url:'houdunren.com'};

console.log(name); // 后盾人

//函数返回值直接解构到变量

function hd() {

return {

name:'后盾人'，

url:'houdunren.com'

};

}

let {name: n,url: u} = hd();

console.log(n);

//函数传参

"use strict";

function hd({ name, age }) {

console.log(name， age);//向军大叔 18

}

hd({ name: "向军"，age:18 });

6.严格模式

//非严格模式可以不使用声明指令，严格模式下必须使用声明。所以建议使用 let 等声明。

// "use strict";

({name,url} ={name:'后盾人',url:'houdunren.com'});

console.log(name, url);

7.简洁定义

//只赋值部分变量

let [,url]=['后盾人''houdunren.com'];

console.log(url);//houdunren.com

let {name}= {name:'后盾人',url:'houdunren.com'};

console.log(name);//后盾人

//如果属性名与赋值的变量名相同可以更简洁(直接使用变量赋值对象属性)

let name = "后盾人",url = "houdunren.com";

//标准写法如下

let hd = { name: name, url: url };

console.log(hd); //{name:"后盾人"，url:"houdunren.com"}

//如果属性和值变量同名可以写成以下简写形式

let opt = { name, url };

console.log(opt);//{name:"后盾人"，url:"houdunren.com"}

8.默认值

//为变量设置默认值

let [name, site = 'hdcms'] = ['后盾人'];

console.log(site);//hdcms

let {name,url,user='向军大叔’}= {name:'后盾人',url:'houdunren.com'};

console.log(name,user);//向军大叔

9.函数参数

//数组参数的使用

function hd([a,b]) {

console.log(a,b);

}

hd(['后盾人'，"hdcms']);

//对象参数使用方法

function hd({name,url,user='向军大叔"}){

console.log(name,url,user);

}

hd({name:"后盾人','url':'houdunren.com'});//后盾人 houdunren.com 向军大叔

//对象解构传参

function user(name,{ sex,age }= {}) {

console.log(name, sex, age);//向军大叔 男 18

}

user("向军大叔"，{sex:"男"，age:18 });

二、属性管理

1.添加属性

// 可以为对象添加属性

let obj = {name:"后盾人"};

obj.site = "houdunren.com";

console.log(obj);

2.删除属性

// 使用delete 可以删除属性

let obj ={ name:"后盾人"};

delete obj.name;

console.log(obj.name);//undefined

3.检测属性

1)hasOwnProperty 检测对象自身是否包含指定的属性，不检测原型链上继承的属性。

let obj ={ name:'后盾人'};

console.log(obj.hasOwnProperty('name'));//true

2)使用 in 可以在原型对象上检测

let obj = {name:"后盾人"};

let hd = {

web: "houdunren.com"

};

//设置nd为obj的新原型

Object.setPrototypeof(obj, hd) ;

console.log(obj);

console.log("web" in obj);//true

console.log(obj.hasOwnProperty("web"));//false

4.获取属性名

使用 Object.getOwnPropertyNames 可以获取对象的属性名集合

let hd ={ name: '后盾人'，year: 2010 }

const names =Object.getOwnPropertyNames(hd);

console.log(names)// ["name", "year"]

5.assign

以往我们使用类似jQuery.extend 等方法设置属性，现在可以使用Object.assign 静态方法

//从一个或多个对象复制属性"use strict";

let hd = { a: 1, b: 2 };

hd = Object.assign(hd,{ f:1 }，{ m: 9 });

console.log(hd); //{a: l，b:2，f:1，m: 9}

三、遍历对象

Object.keys();获取key，得到全部key

Object.value();获取值，得到全部值

Obiect.entries();同时获取 key,值，[key,值]

// 以上三个方法返回的都是迭代对象

1.获取内容

//使用系统提供的 API 可以方便获取对象属性与值

const hd = {name:"后盾人",age:10};

console.log(Object.keys(hd)); // ["name","age"]

console.log(0bject.values(hd));//["后盾人"，10]

console.table(Object.entries(hd)); //[["name","后盾人"],["age",10]]

2.for/in

// 使用for/in遍历对象属性

const hd = {name:"后盾人", age:10};

for (let key in hd) {

console.log(key, hd[key]);

}

3.for/of

for/of用于遍历 迭代对象 ，不能直接操作对象。但object对象的keys方法返回的是迭代对象。

const hd = {name:"后盾人", age:10};

for (const key of 0bject.keys(hd)) {

console.log(key);

}

*四、对象拷贝

// 对象赋值时复制的内存地址，所以一个对象的改变直接影响另一个

1.浅拷贝

1)使用for/in执行对象拷贝

let obj ={name:"后盾人"};

let hd = {};

for (const key in obi) {

hd[key] = obj[key];

}

hd.name = "hdcms";

console.log(hd);

console.log(obj);

2)Object.assign 函数可简单的实现浅拷贝，它是将两个对象的属性叠加后面对象属性会覆盖前面对象同名属性。

let user = {name:"后盾人};

let hd = {stu: Object.assign({}，user)};

hd.stu.name='hdcms';

console.log(user.name);//后盾人

3)使用展示语法也可以实现浅拷贝

let obj = {name:"后盾人"};

let hd ={ ...obj };

hd.name = "hdcms":

console.log(hd);

console.log(obj);

2.深拷贝

1)浅拷贝不会将深层的数据复制

let obj = {name:'后盾人'， user:{name:'hdcms'}}

let a = obj;//浅

let b = obj;//浅

//深拷贝

function copy(object) {

let obj = {}

for (const key in object) {

obj [key] = object[key];

return obj;

}

}

let new0bj = copy(obj);

newObj.name ='hdcms';

newObj.user.name ='houdunren.com';

console.log(newObj);

console.log(obj);

2)深拷贝是完全的复制一个对象，两个对象是完全独立的对象

let obj = {name:"后盾人"， user:{name: "hdcms"}，data: []};

//深拷贝方法

function copy(object) {

let obj = object instanceof Array?[] :{};

for (const [k, v] of Object.entries(object)){

obj [k] = typeof  v == "object" ? copy(v) : v;

}

return obj;

}

let hd = copy(obj);

hd.data.push("向军");

console.log(Json.stringify(hd,null,2));

console.log(Json.stringify(obj, null,2));

五、构建函数

1.工厂函数

在函数中返回对象的函数称为工厂函数，工厂函数有以下优点

·减少重复创建相同类型对象的代码

.修改工厂函数的方法影响所有同类对象

function stu(name) {

return {

name,

show() {

console.log(this.name);

}

};

}

const lisi = stu("李四");

lisi.show();

const xj = stu("向军");

xj.show();

2.构造函数

和工厂函数相似构造函数也用于创建对象，它的上下文为新的对象实例。

.构造函数名每个单词首字母大写即pascal 命名规范

.this指当前创建的对象

.不需要返回this系统会自动完成

.需要使用new关键词生成对象

function Student(name){

this.name =name;

this.show= function() {

console.log(this.name);

};

}

//不需要返回，系统会自动返回// return this;

const lisi = new Student("李四");

lisi.show();

const xj = new Student("向军");

xj.show();

3.严格模式

在严格模式下方法中的this值为 undefined，这是为了防止无意的修改 window 对象

4.内置构造

字面量创建的对象，内部也是调用了object构造函数

const hd = {name:"后盾人"};

console.log(hd.constructor); //? Object() { [native code] }

//下面是使用构造函数创建对象

const hdcms =new object();

hdcms.title = "开源内容管理系统";

console.log(hdcms);

// constructor 称为构造函数，因为它的作用是用于new的实例对象指回构造函数本身

5.对象函数

在Js中函数也是一个对象，可调用  .tostring()  .length()

函数是由系统内置的 Function 构造函数创建的

六、属性特征

1.查看特征

使用 object.getOwnPropertyDescriptor查看对象属性的描述。

使用object.getOwnPropertyDescriptors查看对象所有属性的描述

《属性包括以下四种特性》

特性                      说明	默认值
configurable        能否使用 delete、能否需改属性特性、或能否修改访问器属性	true
enumerable        对象属性是否可通过 for-in 循环，或 object.keys()读取	true
writable              对象属性是否可修改	True
value                  对象属性的默认值	undefined

2.设置特征

使用object.defineProperty 方法修改属性特性，通过下面的设置属性 name 将不能被遍历、删除、修改。

使用 Obiect.defineProperties 可以一次设置多个属性，具体参数和上面介绍的一样。

3.禁止添加

Object.preventExtensions 禁止向对象添加属性

Object.isExtensible 判断是否能向对象中添加属性

"use strict";

const user = { name:"向军"};

Object.preventExtensions(user);

user.age =18; //Error

console.log(Object.isExtensible(user));//false

4.封闭对象

Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为configurable:false

Object.isSealed 如果对象是密封的则返回 true，属性都具有 configurable: false.

5.冻结对象

Object.freeze 冻结对象后不允许添加、删除、修改属性，writable、confiqurable 都标记为false

Object.isFrozen()方法判断一个对象是否被冻结

七、属性访问器

getter 方法用于获得属性值，

setter 方法用于设置属性，

这是 Js 提供的存取器特性即使用函数来管理属性。