JavaScript:对象

JavaScript:对象

    • 对象是什么
      • 对象的定义
      • 对象的组成
    • 对象的使用
      • 对象声明
        • 利用函数声明
        • 直接声明
      • 访问对象
      • 对象方法的调用
      • 增加与改变对象属性
      • 删除对象属性
      • 遍历对象
    • 内置对象
      • Math对象
        • 属性
        • 方法


对象是什么

对象的定义

对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。
对象数据类型,有点类似于数组,它是多个数据的集合,不同的是,对象内部的数据,都是对这个对象的描述,先为大家展示一个对象:

let person = {name: "张三",age: 18,dance: function(){document.write("张三会跳舞");},cook: function(){document.write("张三会做饭");}}

这是一个名为person的对象,它内部有四个属性,分别是name,age,以及cook函数,dance函数。这四个属性都是对这个person对象的描述,代表其名字为张三,十八岁,会做饭,会跳舞。
其中,后两个函数,一般不称为属性,而称为方法。


对象的组成

对象由其内部的属性和方法组成,属性就是一些基础数据,而方法本质就是一些函数,当我们使用这个对象的时候,就可以执行它的某一个函数,比如我们在刚刚的对象中,可以调用它的函数dance,这样屏幕就会输出一句”张三会跳舞“。可以把输出这句话的功能,称之为这个对象的方法。


对象的使用

对象声明

那么我们要如何声明一个对象?我们有两种方式:直接声明和利用函数声明。

利用函数声明

语法:let 对象名 = new Object()
由于对象也是一个数据类型,和其它数据类型一样,需要使用let,var,const这种关键字。
这种函数方法其实不常用,以上语法会得到一个空对象,也就是其内部没有任何属性,不过后续有增加属性的方法,不必担心,在此不对此方法过多赘述了。

直接声明

语法:

let 对象名 = {属性1: 属性值1,属性2: 属性值2}

这种直接声明的方式,和数组十分类似,我们只需用一个大括号把对象的属性括起来,每两个属性之间用逗号隔开即可。这样我们就可以得到一个初始化过的对象,当然,你也可以一个属性值都不写,直接得到一个空对象。


访问对象

既然我们得到了一个对象,我们就需要访问这个对象的值,就好比得到了一个数组,我们也需要去访问数组的元素。
访问对象有两种方法:对象名.属性对象名['属性']
对象名.属性
示例:
在这里插入图片描述
我们在此访问person这个对象,获取它的name属性,通过对象名.属性,即person.name就可以得到张三这个值。

对象名['属性']
我们再利用另一个方法访问一下age这个属性:
在这里插入图片描述
可以发现我们一样访问到了属性的值,这里要十分注意[]内部的属性要加上引号,单引号或双引号都可以。

那么为什么需要两种方法呢?
我们为person这个对象在加一个属性:previous-name:"张四"来代表曾用名:
在这里插入图片描述
报错了,说明这个语法是有问题的,当我们的属性名字太长,需要使用特殊符号来区分的时候,需要为其加上引号:
在这里插入图片描述
加上引号后,这个报错就消失了,此时的previous-name:"张四"是合法的。
尝试以不同方式访问这个previous-name
在这里插入图片描述

这里一共用了四种方式访问,主要问题在于,访问时要不要加引号?用哪种方式访问?
首先person.'previous-name'已经报错,毫无疑问是不行的,删除后再执行一次:
在这里插入图片描述
运行后,程序报错了:第25行的previous没有定义,这里不加引号就已经违背基础语法了,报错是毫无疑问的。把它注释掉,再执行一次:
在这里插入图片描述
用一个点访问的方式全军覆没了,不论加不加引号,解析都会有问题。
最后得出结论,这种带有特殊字符,需要用引号引起的属性名,必须使用中括号的形式来访问
两种方法都有自己的应用面,都非常重要。


对象方法的调用

我们刚刚的访问,都是基于对象的属性,没有访问对象的后两个方法,因为方法的本质是函数,函数调用又是额外的语法:对象名.方法名(函数参数)对象名['方法名'](函数参数)
分析一下,其实不难发现,相比于访问对象的属性,调用对象的方法只是在访问完毕后,加上一个调用函数的小括号而已,而函数的传参是在小括号里面也不难理解。
示例:
在这里插入图片描述
最后函数都正常执行了,也就是方法成功调用了。


增加与改变对象属性

增加或改变对象的属性,语法是完全一致的,只需要直接赋值即可,当被赋值的属性在对象中存在,那么可以直接修改;如果被赋值的属性在对象中不存在,那么就会增加这个属性。
示例:
在这里插入图片描述
原先age是存在的,于是person.age = 20;就直接修改了age属性的值;
原先weight不存在,于是person.weight = "100kg";增加了该属性。


删除对象属性

删除对象的属性,需要用到关键字delete,语法:delete 对象名.属性名或者delete 对象名['属性名'],这样就能删除对应的对象。
示例:
在这里插入图片描述
最后,age属性和previous-name属性都被删掉了。


遍历对象

对象和数组很像,我们在遍历数组的时候,往往是利用下标来一个个访问,但是对象没有下标,该如何访问?
首先介绍一个for in语句,它可以遍历数组:
在这里插入图片描述
我们利用for in语句,可以在每一次循环时,为k一次赋值一个下标,那么我们遍历数组只需要arr[k]就可以了:
在这里插入图片描述
我们成功输出了这个数组的所有值。

这个for in语句对对象同样生效:
在这里插入图片描述
我们利用for in语句,让k每次循环,都得到一个属性名,但是,我们检测k的类型后,发现它是string类型。这说明,k并不直接等于属性名,而是属性名的字符串形式,也就是 k = “属性名” 。这十分重要,因为这意味着我们无法通过属性名.k的形式来获得对应的属性,因为自带一对引号。所以我们要使用属性名[k]的形式,由于k自带引号,无需在对k加引号。
示例:
在这里插入图片描述
这样我们就通过for in语句遍历了整个对象的所有属性。


内置对象

对象不仅可以我们自己创建,JavaScript还提供了丰富的内置对象,我们需要时可以直接调用。
回想一下我们曾经使用过的 console.logconsole其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()
除了 console 对象外,JavaScritp 还有其它的内置的对象
在此我介绍一个Math对象。

Math对象

Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。

属性
  • Math.PI,获取圆周率
console.log(Math.PI);

调用得到:3.141592653589793

方法
  • Math.random,生成 0 到 1 间的随机数
Math.random()

0 ~ 1 之间的随机数, 包含 0 不包含 1


  • Math.ceil,数字向上取整
Math.ceil(3.4)

舍弃小数部分,整数部分加1


  • Math.floor,数字向下取整
Math.floor(4.68)

舍弃小数部分,整数部分不变


  • Math.round,四舍五入取整
Math.round(5.46539)
Math.round(4.849)

取整,四舍五入原则


  • Math.max,在一组数中找出最大的
Math.max(10, 21, 7, 24, 13)

  • Math.min,在一组数中找出最小的
Math.min(24, 18, 6, 19, 21)

  • Math.pow,幂方法
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

求某个数的多少次方


  • Math.sqrt,平方根
Math.sqrt(16)

求某数的平方根


数学对象提供了比较多的方法,这里不要求强记,通过演示数学对象的使用,加深对对象的理解。

在此我们特地讲解一下生成指定随机数的方法:
随机数生成方法:
在调用random方法的时候,会得到一个[0,1)的随机数,如果我们对其乘以N,那么就能得到[0,N)的随机数,也就是Math.random() * N
但是这样的随机数是包括小数的,此时我们就需要对这个结果取整,得到[0,N)的随机整数,即Math.floor(Math.random() * N)
如果我们想得到[M,N]的整数,就是Math.floor(Math.random() * (N - M)) + N,在此不过多推算了。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/295029.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac电脑上soucetree账户更改

在开发公司项目的时候遇到一个问题。soucetree提示需要输入已离职员工-张三的密码。 问题:Mac电脑使用souetree,拉取仓库代码提示需要输入其他员工密码。 解决: Mac电脑 SourceTree去掉之前的账户 1、前往文件路径 /Library/Application Su…

【WPF.NET开发】创建模板

本文内容 何时创建 ControlTemplate先决条件创建 ControlTemplate使用模板添加触发器使用 VisualState 使用 Windows Presentation Foundation (WPF),可以使用自己的可重用模板自定义现有控件的可视结构和行为。 可以对应用程序、窗口和页面全局应用模板&#xff…

数据库学习日常案例20231221-oracle libray cache lock分析

1 问题概述: 阻塞的源头为两个ddl操作导致大量的libray cache lock 其中1133为gis sde的create table as语句。 其中697为alter index语句。

国图公考:公考常识题如何复习更高效?

公务员考试是许多人求职的首选之一,而公考常识题作为公务员考试的重要组成部分,对于考生来说具有很高的分值。在这一模块的复习中,有以下几点可以帮助考生提高学习效率,一起来看一下吧! 一、明确复习目标 了解自己在各个知识点上…

arkTS 基础知识

entry 主模块 Harmony工程模块 编译构建生成一个Hap包 程序主要入口 --src --main --ets:用于存放ets源码 --entryability:EntryAbility.ts 应用/服务的入口 --pages:Index.ets …

Liteos移植_STM32_HAL库

0 开发环境 STM32CubeMX(HAL库)keil 5正点原子探索者STM32F4ZET6LiteOS-develop分支 1 STM32CubeMX创建工程 如果有自己的工程,直接从LiteOS源码获取开始 关于STM32CubeMX的安装,看我另一篇博客STM32CubeMX安装 工程配置 创建新工程 选择芯片【STM32F…

SwiftUI 趣谈之:绝不可能(Never)的 View!

概览 SwiftUI 的出现极大的解放了秃头码农们的生产力。SwiftUI 中众多原生和自定义视图对于我们创建精彩撩人的 App 功不可没! 不过,倘若小伙伴们略微留意过 SwiftUI 框架头文件里的源代码,就会发现里面嵌有一些奇怪 Never 类型&#xff0c…

一文掌握分布式锁:Mysql/Redis/Zookeeper实现

目录 一、项目准备spring项目数据库 二、传统锁演示超卖现象使用JVM锁解决超卖解决方案JVM失效场景 使用一个SQL解决超卖使用mysql悲观锁解决超卖使用mysql乐观锁解决超卖四种锁比较Redis乐观锁集成Redis超卖现象redis乐观锁解决超卖 三、分布式锁概述四、Redis分布式锁实现方案…

PyQt6 利用Pyinstaller打包发布程序

锋哥原创的PyQt6视频教程: 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计53条视频,包括:2024版 PyQt6 Python桌面开发 视频教程(无废话版…

物联网产品设计,聊聊设备OTA的升级

物联网产品设计部分的OTA设备固件是一个非常重要的部分,能够实现升级用户服务、保障系统安全等功能。 在迅速变化和发展的物联网市场,新的产品需求不断涌现,因此对于智能硬件设备的更新需求就变得空前高涨,设备不再像传统设备一样…

数据分析基础之《numpy(5)—合并与分割》

了解即可,用panads 一、作用 实现数据的切分和合并,将数据进行切分合并处理 二、合并 1、numpy.hstack 水平拼接 # hstack 水平拼接 a np.array((1,2,3)) b np.array((2,3,4)) np.hstack((a, b))a np.array([[1], [2], [3]]) b np.array([[2], […