JavaScript高级数据类型之对象

简介: 入关于JavaScript到底是不是面向对象的编程语言,目前其实争议还挺大。许多保守的人会说JavaScript是一种基于对象的语言,而不说是面向对象的语言。但不管怎么样,对于前端开发者、工程师而言,可能没必要区分得如此清楚,对这类重视工程能力的语言“使用者”而言,只需要知道——


引入


关于JavaScript到底是不是面向对象的编程语言,目前其实争议还挺大。许多保守的人会说JavaScript是一种基于对象的语言,而不说是面向对象的语言。

但不管怎么样,对于前端开发者、工程师而言,可能没必要区分得如此清楚,对这类重视工程能力的语言“使用者”而言,只需要知道——

JavaScript拥有对象这一数据类型,

没有类却可以用构造器做出类能做的事

今天我们就来了解一下JS的对象数据类型,包括

描述

访问

修改

检查


1. 描述对象


JavaScript的对象其实可以理解成是一种无序的集合数据类型,有键值对:

var juejin = {
    name: '掘金酱',
    ifgood: True,
    birth: 2020,
    height: 1.70,
    weight: 55,
    score: null
};

如上代码块。JavaScript用一个{}括住一个个键值对,以此来表示一个对象。

键值对以xxx: xxx形式申明,用,隔开。

注意:

键不需要加“”,键很像是一个变量名,值则要区分数据类型,是字符串的话少不了加“”

最后一个键值对不需要在末尾加,,如果加了,有的低版本浏览器将报错。


2. 访问


上面代码块描述了一个juejin对象,申明了一个name属性,值是'掘金酱'ifgood属性是布尔值True,birth属性,值是2020,以及其他一些属性。(掘金仿真人总得有身高体重吧)。

最后,把这个对象赋值给变量juejin后,就可以通过变量juejin来获取小明的属性了:

juejin.name; // '掘金酱'
juejin.birth; // 2020

Question:之前提到的“键(即我们的属性名)像是变量名”,且此处访问属性也是采用.+属性名来完成的。那这个属性名的命名规则一定要按照变量名命名规则来吗?


Answer:当然不是,你只需要给属性名加上引号就行了:


var juejin = {
    name: '掘金酱',
    'good?': 'yes!'
};


但是访问的时候也不能用.来访问,需要用中括号来访问:


xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'

我们发现正常的变量名做属性时也可以用[]来访问。


3. 修改


JavaScript的对象是动态类型,我们可以自由地给一个对象添加或删除属性:

var zhangwei = {
    name: '张伟'
};
zhangwei.age; // undefined
zhangwei.age = 18; // 新增一个age属性
zhangwei.age; // 18
delete zhangwei.age; // 删除age属性
zhangwei.age; // undefined
delete zhangwei['name']; // 删除name属性
zhangwei.name; // undefined
delete zhangwei.school; // 删除一个不存在的school属性也不会报错


4. 检查


如果我们要检测zhangwei是否拥有某一属性,可以用in操作来获取结果:

'name' in zhangwei; // true
'homeland' in zhangwei; // false


值得注意的是,如果in判断出一个属性存在,有可能这个属性是对象继承得到的:


'toString' in zhangwei; // true


toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以xiaoming也拥有toString属性。

因此如果我们需要判断一个属性是否是对象自身拥有的,就可以使用hasOwnProperty()方法(这个名字可谓非常形象了)


var zhangwei = {
    name: '张伟'
};
zhangwei.hasOwnProperty('name'); // true
zhangwei.hasOwnProperty('toString'); // false



相关文章
|
8天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
12天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
12天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
29天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
67 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
37 4
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
24 2
|
30天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
18 0
|
30天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
15 0