JS基础之【对象详解 -- 对象的属性与方法、遍历对象与内置对象】

🚀 个人简介:某大型国企高级前端开发工程师,7年研发经验,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养🥰
📝 专    栏:JavaScript基础 🎉

🌈 创作不易,如果能帮助到带大家,欢迎 收藏+关注  💕

🌈🌈文章目录

一、对象的声明与访问

1.声明语法

2.属性和访问

3.方法和调用

4.null

5.遍历对象

二、内置对象

Math

属性

方法

一、对象的声明与访问

对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined等基本数据类型。对象数据类型可以被理解成是一种无序的数据集合。它由属性和方法两部分构成。

1.声明语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法</title>
</head>
<body><script>// 声明字符串类型变量let str = 'hello world!'// 声明数值类型变量let num = 199// 声明对象类型变量,使用一对花括号// user 便是一个对象了,目前它是一个空对象let user = {}</script>
</body>
</html>

2.属性和访问

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。

  1. 属性都是成对出现的,包括属性名和值,它们之间使用英文 : 分隔

  2. 多个属性之间使用英文 , 分隔

  3. 属性就是依附在对象上的变量

  4. 属性名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法</title>
</head>
<body><script>// 通过对象描述一个人的数据信息// person 是一个对象,它包含了一个属性 name// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别}</script>
</body>
</html>

声明对象,并添加了若干属性后,可以使用 .[] 获得对象中属性对应的值,我称之为属性访问

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法</title>
</head>
<body><script>// 通过对象描述一个人的数据信息// person 是一个对象,它包含了一个属性 name// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别};// 访问人的名字console.log(person.name) // 结果为 小明// 访问人性别console.log(person.gender) // 结果为 男// 访问人的身高console.log(person['stature']) // 结果为 185// 或者console.log(person.stature) // 结果同为 185</script>
</body>
</html>

扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法</title>
</head>
<body><script>// 声明一个空的对象(没有任何属性)let user = {}// 动态追加属性user.name = '小明'user['age'] = 18// 动态添加与直接定义是一样的,只是语法上更灵活</script>
</body>
</html>

3.方法和调用

数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔

  2. 多个属性之间使用英文 , 分隔

  3. 方法是依附在对象中的函数

  4. 方法名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象方法</title>
</head>
<body><script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔singing: function () {console.log('两只老虎,两只老虎,跑的快,跑的快...')},run: function () {console.log('我跑的非常快...')}}</script>
</body>
</html>

声明对象,并添加了若干方法后,可以使用  . 调用对象中函数,我称之为方法调用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象方法</title>
</head>
<body><script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔singing: function () {console.log('两只老虎,两只老虎,跑的快,跑的快...')},run: function () {console.log('我跑的非常快...')}}// 调用对象中 singing 方法person.singing()// 调用对象中的 run 方法person.run()</script>
</body>
</html>

扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象方法</title>
</head>
<body><script>// 声明一个空的对象(没有任何属性,也没有任何方法)let user = {}// 动态追加属性user.name = '小明'user.['age'] = 18// 动态添加方法user.move = function () {console.log('移动一点距离...')}</script>
</body>
</html>

:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。

4.null

null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object

5.遍历对象

let obj = {uname: 'pink'
}
for(let k in obj) {// k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'// obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组, 因为 k 字符串

二、内置对象

回想一下我们曾经使用过的 console.logconsole其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()

除了 console 对象外,JavaScritp 还有其它的内置的对象,诸如Array、Object、Date、Math等等,下面重点演示Math对象自带的属性和方法👇👇👇

Math

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

属性
  • Math.PI,获取圆周率

// 圆周率
console.log(Math.PI);
方法
  • Math.random,生成 0 到 1 间的随机数

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

Math.ceil,数字向上取整

// 舍弃小数部分,整数部分加1
Math.ceil(3.4)

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)

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

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家点点收藏+关注~💕 

  更多专栏订阅推荐:

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

 

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0916)

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835 接口根路径&#xff1a; http://big-event-vue-api-t.itheima.net 本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus http:/…

Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )

一&#xff1a;Linux 背景知识 1.1. Linux 是什么 Linux 是一个操作系统. 和 Windows 是 “并列” 的关系&#xff0c;经过这么多年的发展, Linux 已经成为世界第一大操作系统&#xff0c;安卓系统本质上就是 Linux. 1.2 Linux 发行版 Linux 严格意义来说只是一个 “操作系…

Parallels Desktop 20 搭载内置 AI 包正式发布

近期 Parallels 官方发布 Parallels Desktop 20 For Mac&#xff0c;这是一款流行的Mac虚拟化软件。 该版本引入了 Parallels AI 工具包&#xff0c;这将主要惠及需要新工具在 Mac 上使用人工智能的开发人员。 配合即将发布的 macOs sequoia 和 Windows 11 24H2&#xff0c;P…

Android源码集成 Google Play

1、 The Open GApps Project 下载 对应系统和平台的gms压缩包&#xff0c;压缩包文件如下&#xff1a; Core和Optional目录下为谷歌服务核心文件和应用&#xff0c;需要预置到源码中。解压Core 和 Optional 目录所有文件&#xff0c;得到如下文件夹&#xff1a; 其中 etc 和 li…

C++ | Leetcode C++题解之第412题Fizz Buzz

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<string> fizzBuzz(int n) {vector<string> answer;for (int i 1; i < n; i) {string curr;if (i % 3 0) {curr  "Fizz";}if (i % 5 0) {curr "Buzz";}if (curr.si…

Django学习实战篇五(适合略有基础的新手小白学习)(从0开发项目)

前言&#xff1a; 本章中&#xff0c;我们开始引入前端框架Bootstrap 来美化界面。在前面的章节中&#xff0c;我们通过编写后端代码来处理数据。数据之于网站&#xff0c;就相当于灵魂之于人类。而网站的前端就相当于人的形体外貌。其中HTML是骨架&#xff0c;而CSS是皮肤&…

创造增强叙事的互动:Allison Crank的沉浸式体验设计理念

在沉浸式技术日新月异的今天,如何通过用户交互增强叙事,而非分散注意力,成为了设计师们共同面临的挑战。作为用户体验设计师和研究员,Allison Crank以其独特的视角和丰富的经验,为我们揭示了这一领域的核心原则与实践方法。 叙事与互动的和谐共生 Allison Crank强调,互…

STM32使用ESP-01S连接WiFi通过云平台与手机APP联动

ESP-01S测试 我们买回来ESP-01S模块之后&#xff0c;首先要对模块的好坏进行测试&#xff0c;是否能正常通过串口通信&#xff0c;是否能正常连接手机热点或WiFi&#xff0c;一般模块买回来默认出厂烧录了AT固件&#xff0c;如果我们需要使用一些特殊的协议&#xff08;如MQTT协…

【云岚到家-即刻体检】-day07-2-项目介绍及准备

【云岚到家-即刻体检】-day07-2-项目介绍及准备 1 项目介绍1&#xff09;项目简介2&#xff09;界面原型3&#xff09;实战目标 2 搭建实战环境1&#xff09;服务端2&#xff09;管理端前端工程3&#xff09;用户端前端工程4&#xff09;测试 3 熟悉项目代码1&#xff09;接口文…

《程序猿之设计模式实战 · 观察者模式》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

【混淆矩阵】Confusion Matrix!定量评价的基础!如何计算全面、准确的定量指标去衡量模型分类的好坏??

【混淆矩阵】Confusion Matrix&#xff01;定量评价的基础&#xff01; 如何计算全面、准确的定量指标去衡量模型分类的好坏&#xff1f;&#xff1f; 文章目录 【混淆矩阵】Confusion Matrix&#xff01;定量评价的基础&#xff01;1. 混淆矩阵2.评价指标3.混淆矩阵及评价指标…

【AI大模型】Transformer模型:Postion Embedding概述、应用场景和实现方式的详细介绍。

一、位置嵌入概述 \1. 什么是位置嵌入&#xff1f; 位置嵌入是一种用于编码序列中元素位置信息的技术。在Transformer模型中&#xff0c;输入序列中的每个元素都会被映射到一个高维空间中的向量表示。然而&#xff0c;传统的自注意力机制并不包含位置信息&#xff0c;因此需要…

强化学习Reinforcement Learning|Q-Learning|SARSA|DQN以及改进算法

一、强化学习RL 强化学习是机器学习的一个重要的分支&#xff0c;是一种有效的工具&#xff0c;在文献中被广泛用于解决MDP问题。在一个强化学习过程中&#xff0c;一个智能体只能通过和它所处的环境互动学习最优策略。特别地&#xff0c;智能体首先观察自己当前的状态&#xf…

CRE62539 不同尾缀功率不同

CRE62539MSQ 是一款内置高压 MOS 功率开关管的高性能多模式原边控制的12W开关电源芯片。CRE62539MSQ以较少的外围元器件、较低的系统成本设计出高性能的交直流转换开关电源。CRE62539MSQ 提供了极为全面和性能优异的智能化保护功能&#xff0c;包括逐周期过流保护、软启动、芯片…

Linux:RPM软件包管理以及Yum软件包仓库

挂载光驱设备 RPM软件包管理 RPM软件包简介 区分软件名和软件包名 软件名&#xff1a;firefox 软件包名&#xff1a;firefox-52.7.0-1.el7.centos.x86_64.rpm 查询软件信息 查询软件&#xff08;参数为软件名&#xff09; ]# rpm -qa #当前系统中所有已安装的软件包 ]# r…

Elment-plus组件失效(没有样式)(0916)

在学习Vue3时&#xff0c;使用Element-plus组件库开发登录页面&#xff0c;发现无法显示反馈组件的样式 然后查找相关博客后&#xff0c;发现原来是因为我使用按需导入&#xff0c;然后又在登录页面导入&#xff0c;导致组件样式失效 删除导入语句后&#xff0c;成功显示反馈组…

大数据处理技术:HBase的安装与基本操作

目录 1 实验名称 2 实验目的 3 实验内容 4 实验原理 5 实验过程或源代码 5.1 Hbase数据库的安装 5.2 创建表 5.3 添加数据、删除数据、删除表 5.4 使用Java操作HBase 6 实验结果 6.1 Hbase数据库的安装 6.2 创建表 6.3 添加数据、删除数据、删除表 6.4 使用Java操…

Linux进阶 修改文件权限

linux文件权限 查看文件权限 用 ls -l 查看当前目录下文件权限 各部分对应的内容: 第一个字符代表这个文件类型[d]:目录[-] :文件[l]:连结档(link file);[b]:装置文件里面的可供储存的接口设备(可随机存取装置)[c]:装置文件里面的串行端口设备,例如键盘、鼠标(一次性…

Linux常用目录结构

一、Linux常用目录结构 目录名 目录作用 /bin/ 存放系统命令的目录,普通用户和超级用户都可以执行。 是/usr/bin/目录的软链接 /sbin/ 存放系统命令的目录,只有超级用户才可以执行。是/ usr/ sbin/目录的软链接 /usr/bin/ 存放系统命令的目录,普通用户和超级用户都可以…

在麒麟操作系统中查看进程运行时间

在麒麟操作系统中查看进程运行时间 1、使用ps命令查看进程运行时间1.1 基本命令结构1.2 示例&#xff1a;查看sshd进程的运行时间 2、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Linux操作系统中&#xff0c;包括麒麟&#xff08…