深入javascript对象语法及应用场景(一)

简介: 深入javascript对象语法及应用场景(一)

前言

       对象是javascript中的一个重要的概念,甚至有“JavaScript 中万物皆是对象”的说法,可以说对于熟悉javascript而言,精通对象的应用场景至关重要,那么到底什么是对象,对象在哪些地方又有怎样的用途呢,这一系列我将带大家深入javascript对象的语法及应用场景

正文

语法

       对象可以通过两种形式定义:声明(文字)形式和构造形式。这个没什么特别的大部分同学应该都知道,举个例子我们简单过一下

640.png


类型

       对象是 JavaScript 的基础。在 JavaScript 中一共有六种主要类型(术语是“语言类型”):String, string, number, boolean, null, undefined, object算上ES6中的symbol就是7种,简单基本类型(string、boolean、number、null 和 undefined)本身并不是对象。null 有时会被当作一种对象类型,但是这其实只是语言本身的一个 bug,即对 null 执行typeof null 时会返回字符串 “object”。1 实际上,null 本身是基本类型。


       所以,有一种常见的错误说法是“JavaScript 中万物皆是对象”,这显然是错误的。简单基本类型并不是对象


内置对象

       JavaScript 中还有一些对象子类型,通常被称为内置对象。有些内置对象的名字看起来和简单基础类型一样,不过实际上它们的关系更复杂:String, Number, Boolean, Object, Function, Array, Date, RegExp, Error。在 JavaScript 中,它们实际上只是一些内置函数。这些内置函数可以当作构造函数来使用,从而可以构造一个对应子类型的新对象。

       原始值 “I am a string” 并不是一个对象,它只是一个字面量,并且是一个不可变的值。如果要在这个字面量上执行一些操作,比如获取长度、访问其中某个字符等,那需要将其转换为 String 对象。在必要时语言会自动把字符串字面量转换成一个 String 对象,也就是说你并不需要显式创建一个对象,这也是为什么虽然是基本类型但是我们可以调用对应对象原型里的方法的原因

可计算属性名

       ES6 增加了可计算属性名,可以在文字形式中使用 [] 包裹一个表达式来当作属性名

640.png

       可计算属性名最常用的场景可能是 ES6 的符号(Symbol),它们是一种新的基础数据类型,包含一个不透明且无法预测的值(从技术角度来说就是一个字符串)。一般来说你不会用到符号的实际值(因为理论上来说在不同的 JavaScript 引擎中值是不同的),所以通常你接触到的是符号的名称,比如 Symbol.Something


数组

       数组也是一个特殊的对象,我们知道数组的属性是数字,有一个很有意思的点我觉得需要提一下,数组的length只与其中是数字的属性相关,也就是增加一个字符串的属性名,是不会影响length的,但是如果你试图向数组添加一个属性,但是属性名“看起来”像一个数字,那它会变成一个数值下标(因此会修改数组的内容而不是添加一个属性)


小结

       这一章我们介绍了对象的基础从正文选择知识,也知道了“js中并不是万物都是对象", 下一章我们将继续这一章节的内容,讲一些和对象有关的进阶知识

目录
相关文章
|
4月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
228 77
|
2月前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
60 11
|
2月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
125 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
4月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
180 62
|
2月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
56 8
|
2月前
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
|
4月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
94 31
|
4月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
46 1
JavaScript中对象的数据拷贝
|
3月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
61 3
|
4月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用

热门文章

最新文章