关于JavaScript 对象的理解

简介: 关于JavaScript 对象的理解

关于JavaScript 对象的理解

对象

理解对象

ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。
我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中的值可以是数据或函数。
每个对象都是基于一个引用类型创建的,即创建自定义对象的最简单方式就是创建一个Object的实例,然后再为它添加属性和方法

合并对象

它 是值 把源对象所有属性 复制到目标对象属性当中。
ES6 中提供了 Object.assign() 来合并对象。
这个方法接受一个目标对象和一个或多个源对象作为参数,然后将源对象的所有属性和自有属性 复制到目标对象当中。

合并对象除了使用**Object.assign**, 还可以使用 ... 对象扩展符 来简化合并对象
s
注意:
Object.assign() 是浅复制,如果多个源对象之间合并出现,重复属性时,会取最后一个属性的值。

// ...

var a = {
   
    title:'初级前端工程师'
}

var b = {
   
    address: '北京中关村'
}

var c = {
    ...a, ...b}
console.log(c) 
// { title: '初级前端工程师', address: '北京中关村' }





//Object.assign()
var job = {
   
    title:'高级前端工程师'
}

var salary = {
   
    wage: '22w'
}

var HaiJun = {
   }

console.log(Object.assign(HaiJun,a,job,salary)) 
//{ title: '高级前端工程师', wage: '22w' }

对象标识类型及相等判断

ES6 中提供 了 Object.is() 方法,它接受两个参数。

console.log(Object.is(1,"1")) //false

console.log(Object.is({
   },{
   })) //false

console.log(Object.is(+0, 0))   //true

var objA = {
   
    id:2
}

var objB = {
   
    id:2
}

console.log(Object.is(objA.id,objB.id)) //true

对象的属性

ECMA-262第5版在定义了只有内部才用的特性时,描述了属性的各种特征,这些特征是为了实现JavaScript引擎用的,因此在JavaScript中不能直接访问它们。
JavaScript 中,对象的属性类型 为: 数据属性访问器属性.

数据属性

定义: 数据属性包含一个数据值的位置,这个位置可以读取和写入值,可通过对象直接定义的属性。数据属性有四个描述其行为的特性。
它有 4 个特定行为来约束属性行为
按时
注意:
在调用 Object.defineProperty() 时,如果不指定 属性的默认行为的话,它的 3 个行为 都 为 false .
实际开发中,修改属性默认行为场景很少,但学习属性的行为 有助于 理解对象。

属性
[Configurable] 表示是否可以通过 delete 删除对象属性,默认为 true
[ Enumberable ] 表示 对象属性是否 可以 通过 for-in 来循环。默认为true
[ Writable] 表示 对象属性的值是否可以修改,默认为true
[Value ] 表示 对象属性的实际值。
如何修改对象属性默认行为

通过 Object.defineProperty() 来修改属性默认行为
参数为:
目标对象
要修改的对象属性
一个描述符对象 (这个对象是用来管理属性默认行为的)

该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

let obj = {
   
    code: 200,
    title: '前端自学社区',
}

Object.defineProperty(obj,"code",{
   
    writable: false  //禁止修改对象属性 code
})

obj.code = 201


console.log(obj)  // 返回{ code: 200, title: '前端自学社区' }

访问器属性

它 包含 一个 setter 函数 和 getter 函数,用来返回属性值和修改属性的值.
当属性被修改时,获取调用setter 函数。
当属性要获取值时,会调用getter 函数。

实际开发中,这个两个属性不是必须的,看自己业务需求
如果一个属性的值变化,影响到另一个属性的值的时候,就可以使用 settter getter 来实现。

let obj = {
   
    code: 200,
    title: '前端自学社区',
}

Object.defineProperty(obj,"mounth",{
   
    set(newValue){
   
        if(newValue >3) {
   
            this.code = 400
        }
    },
    get(){
   
        return this.code
    }
})
obj.mounth = 4
console.log(obj)  //{ code: 400, title: '前端自学社区' }

读取属性的行为

要读取属性的特性,必须使用ECMAScript5的:Object.getOwnPropertyDescriptor() 来获取对象属性的行为。
该函数接受两个参数:
目标对象
要获取的属性
该方法返回指定对象上一个自有属性对应的属性描述符。

let obj = {
   
    code: 200,
    title: '前端自学社区',
}

const des = Object.getOwnPropertyDescriptor(obj,'code')
console.log(des) 
//{ value: 200, writable: true, enumerable: true, configurable: true }
console.log(des.writable) //true
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
46 2
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
28天前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
18 1
JavaScript中对象的数据拷贝
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
45 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
49 1
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
21 2
|
2月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
33 2
|
2月前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
24 3