JS对象由浅入深

对象

对象(Object):JavaScript里的一种数据类型(引用类型),也是用于存储数据的

好处:可以用来详细的描述某个事物,是用键值对形式存储语义更明了

特点:对象数据是无序的,数组有序的

对象基本使用

对象由属性和方法组成

对象属性

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

  1. 属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 属性就是依附在对象上的变量(对象外是变量,对象内是属性)

1. 定义对象属性

<script>// 对象也是一种数据类型,保存数据同时可以更直观的描述事物// 1. 定义对象属性let pig = {sex: '男',age: 18,uname: '李白',}
</script>

2. 访问对象属性

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

<script>// 对象也是一种数据类型,保存数据同时可以更直观的描述事物// 1. 定义对象属性let pig = {sex: '男',age: 18,uname: '李白',}// 2. 访问对象属性  对象.属性console.log(pig.age)  // 18console.log(pig.uname)  // 李白
</script>
对象方法

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

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数(对象外是函数,对象内是方法)

1.定义对象方法

// let fn = function() {}
// 对象方法
// 1. 定义对象方法
let pig = {uname: '李白',sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')}
}
console.log(pig)

2.调用对象方法

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

// let fn = function() {}
// 对象方法
// 1. 定义对象方法
let pig = {uname: '李白',sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')},sum: function (x, y) {  // 2// console.log(x + y)return x + y}
}
console.log(pig)// 2. 调用对象方法
pig.sing() // 唱歌
pig.dance()  // 跳舞// 3. 方法可以传递参数也可以有返回值,跟函数使用基本类似
let re = pig.sum(1, 2) // 1 实参
console.log(re)

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

操作对象

对象本质是无序的数据集合, 操作对象数据无非就是 增 删 改 查

<script>// 操作对象:对数据 查、增、改、删let pig = {uname: '李白',sing: function () {console.log('唱歌')}}// 1. 查: 对象.属性 对象.方法
console.log(pig.uname)  // 得到属性值
pig.sing()// 2. 增:对象.新属性 = 新值   对象.新方法 = function(){}
pig.age = 4
pig.dance = function () {console.log('轻舟已过万重山')
}
console.log(pig)// 3. 改:对象.属性 = 新值  对象.方法 = 新匿名函数
pig.uname = '杜甫'
pig.sing = function () {console.log('一行白鹭上青天')
}
console.log(pig)// 4. 删: 了解,因为我们很少对对象里面的数据做删除操作  delete
delete pig.age
delete pig.dance
console.log(pig)
</script>
查找属性的另外写法

对于多词属性比如中横线分割的属性,点操作就不能用了

我们可以采取: 对象[‘属性’] 方式, 单引号和双引号都阔以,当然也可以用于其他正常属性

<script>// 查询属性的另外写法  对象['属性'] 这个属性必须加引号let pig = {'pig-name': '李白',age: 118}
// console.log(pig.pig - name)  // NaN
console.log(pig['pig-name']) // 李白
console.log(pig['age']) // 118    === pig.age 
</script>

总结:多词属性或者需要解析变量的时候使用 [] 语法,其余的直接使用点语法

遍历对象

for 遍历对象的问题:

  • 对象没有长度length,而且是无序的

所以我们要利用 for in 遍历对象

语法:

for (let 变量 in 对象) {console.log(变量) // 属性名console.log(对象[变量]) // 属性值
}

示例:

<script>// 遍历对象let pig = {sex: '男',age: 18,uname: '李白',}// for (let key in pig) {
//   console.log(key)  // key 是属性  
//   console.log(pig[key]) // 对象[变量] 是值
// }for (let key in pig) {console.log(key)  // key 是属性   对象.属性// console.log(pig.key)   // pig.key  undefined  因为key是个变量不是属性// key  'sex'  'age'    对象[key]  对象['sex']  对象['age']console.log(pig[key])
}// 注意:数组遍历用传统for, for in 主要用来遍历对象
let arr = ['red', 'green', 'pink']
for (let k in arr) {console.log(k)// 得到字符串类型的索引号
}
</script>
  1. for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
  2. 由于 k 是变量, 所以必须使用 [ ] 语法解析
  3. 一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值
  4. 一般不用这种方式遍历数组、主要是用来遍历对象

内置对象

内置对象:JavaScript内部提供的对象,包含各种属性和方法给开发者调用

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

除了 console 对象外,JavaScritp 还有其它的内置的对象

Math

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

属性/方法作用说明
PI圆周率Math.PI 属性,返回圆周率
max找最大值Math.max(8, 3, 1) 方法,返回 8
min找最小值Math.min(8, 3, 1) 方法,返回 1
abs绝对值Math.abs(-1) 方法,返回 1
ceil向上取整Math.ceil(3.1) 方法,返回 4
floor向下取整Math.floor(3.8) 方法,返回 3
round四舍五入取整Math.round(3.8) 方法,返回 4, 遇到.5则舍入到相邻的在正无穷(+∞)方向上的整数
<script>// 内置对象Math // 1. PI 属性 圆周率console.log(Math.PI)// 2. max  方法 找最大值
console.log(Math.max(8, 4, 2)) // 8// 3. min  方法 找最小值
console.log(Math.min(8, 4, 2)) // 2// 4. abs 方法 取绝对值 
console.log(Math.abs(-1))  // 1// 5. ceil 方法 向上取整   ceil 天花板   往大了取
console.log(Math.ceil(1.1)) // 2
console.log(Math.ceil(1.5)) // 2
console.log(Math.ceil(1.8)) // 2
console.log(Math.ceil(-1.1)) //  -1
console.log(Math.ceil(-1.5)) //  -1
console.log(Math.ceil(-1.8)) //  -1// 6. floor 方法 向下取整  floor 地板  往小了取
console.log(Math.floor(1.1)) // 1
console.log(Math.floor(1.5)) // 1
console.log(Math.floor(1.8)) // 1
console.log(Math.floor(-1.1)) //  -2
console.log(Math.floor(-1.5)) //  -2
console.log(Math.floor(-1.8)) //  -2// 7. round 方法 四舍五入取整 
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.round(1.8)) // 2
console.log(Math.round(-1.1)) // -1
console.log(Math.round(-1.8)) // -2
console.log(Math.round(-1.5)) // -1
</script>

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

[Math 想了解更多的静态方法](Math - JavaScript | MDN (mozilla.org))

随机数 random

lMath.random() 随机数, 返回一个0 - 1之间,并且包括0不包括1的随机小数 [0, 1)

如何生成0-10的随机整数

Math.floor(Math.random() * (10 + 1))

如何生成5-15的随机整数

Math.floor(Math.random() * (10 + 1)) + 5

如何生成N-M之间的随机整数

Math.floor(Math.random() * (M - N + 1)) + N
Math.floor(Math.random() * (差值 + 1)) + 最小值
<script>// 1. Math随机数  Math.random() // 1.1 随机的小数 0 ~1 之间// 1.2 能取到0,但是取不到1 [0, 1)// console.log(Math.random())
​// 2. 取 0 ~ 10 之间的一个随机整数// Math.random() * (10 + 1)// (0 ~ 0.99999) * 11// 0 ~ 10.99999// Math.floor(Math.random() * (10 + 1))// console.log(Math.floor(Math.random() * (10 + 1)))
​// 3. 取 5 ~ 15 之间的一个随机整数// Math.floor(Math.random() * (10 + 1))  0 ~ 10 // Math.floor(Math.random() * (10 + 1)) + 5  5 ~ 15 // console.log(Math.floor(Math.random() * (10 + 1)) + 5)
​// 4. 取 n ~ m 之间的一个随机整数  4 ~ 12 // Math.floor(Math.random() * (差值 + 1)) + 最小值console.log(Math.floor(Math.random() * (8 + 1)) + 4)
</script>

数据存储

内存中堆栈空间分配区别:

栈: 优点访问速度快,基本数据类型存放到栈里面

堆: 优点存储容量大,引用数据类型存放到堆里面

在这里插入图片描述

总结:有了变量先给const,如果发现它后面是要被修改的,再改为let

常用术语
术语解释举例
关键字在JavaScript中有特殊意义的词汇let、var、function、if、else、switch、case、break
保留字在目前的JavaScript中没意义,但未来可能会具有特殊意义的词汇int、short、long、char
标识(标识符)变量名、函数名的另一种叫法
表达式可以被求值的代码,一般配合运算符出现10 + 3、age >= 18
语句一段可执行的代码if () for()

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

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

相关文章

模型 FABE(特性 优势 好处 证据)法则

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。特性、优势、好处、证据&#xff0c;一气呵成。 1 FABE法则的应用 1.1 FABE法则营销商用跑步机 一家高端健身器材公司的销售代表正在向一家新开的健身房推销他们的商用跑步机。以下…

【数据分享】中国电力年鉴(2004-2022)

大家好&#xff01;今天我要向大家介绍一份重要的中国电力统计数据资源——《中国电力年鉴》。这份年鉴涵盖了从2004年到2022年中国电力统计全面数据&#xff0c;并提供限时免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 自1993年首次出版以来&#xf…

【数据结构】链表与顺序表的比较

不同点&#xff1a; 顺序表和链表是两种常见的数据结构&#xff0c;他们的不同点在于存储方式和插入、删除操作、随机访问、cpu缓存利用率等方面。 一、存储方式不同: 顺序表&#xff1a; 顺序表的存储方式是顺序存储&#xff0c;在内存中申请一块连续的空间&#xff0c;通…

Java运算符及程序逻辑控制

&#x1f389;welcome to my blog 请留下你宝贵的足迹吧(点赞&#x1f44d;评论&#x1f4dd;收藏⭐&#xff09; &#x1f493;期待你的一键三连&#xff0c;你的鼓励是我创作的动力之源&#x1f493; &#x1f423;目录 &#x1f340;运算符&#x1f4da;1.算术运算符&#x…

python判断文件是否存在

import os test_path "/Users/yxk/Desktop/test/GrayScale.tif" if(os.path.exists(test_path)):print(文件存在&#xff01;&#xff01;&#xff01;&#xff01;) else:print("文件不存在&#xff01;&#xff01;&#xff01;&#xff01;")结果如下 …

RabbitMQ(四)事务消息,惰性队列,优先队列

文章目录 事务消息概念配置 惰性队列概念应用场景 优先队列概念配置 事务消息 仅在生产者端有效&#xff0c;消费端无效 概念 总结&#xff1a; 在生产者端使用事务消息和消费端没有关系在生产者端使用事务消息仅仅是控制事务内的消息是否发送提交事务就把事务内所有消息都发送…

Java面试——专业技能

优质博文&#xff1a;IT-BLOG-CN 一、简单讲下 Java 的跨平台原理 由于各个操作系统&#xff08;Windows&#xff0c;Linux等&#xff09;支持的指令集不是完全一致的。就会让我们程序在不同的操作系统上要执行不同的程序代码。Java 开发了适用于不同操作系统及位数的 Java 虚拟…

【教程】自监督 对比学习,代码,爽学一波

from&#xff1a; https://docs.lightly.ai/self-supervised-learning/examples/simclr.html

代码随想录第22天|回溯part2 组合总和III电话号码的字母组合

216.组合总和III 当组合的数量为k就判断和&#xff0c;并且返回。 在枚举的时候可以进行剪枝&#xff0c;如果总和已经超过了n&#xff0c;那么就没必要继续递归下去了 class Solution { public:vector<int> path;vector<vector<int>> res;void backTrackin…

Java版本家政上门系统源码,自主研发、安全可控,支持任意二次开发

家政上门系统源码&#xff0c;Java版本&#xff0c;自主研发、安全可控。支持任意二次开发、有丰富合作案例。多端管理&#xff1a;管理端、用户端、服务端。 技术参数&#xff1a; 技术架构&#xff1a;springboot、mysql 、Thymeleaf 开发语言&#xff1a;java1.8、vue 开…

软件开发步骤详解

一、引言 随着信息技术的迅猛发展&#xff0c;软件已成为现代社会不可或缺的一部分。无论是企业运营、个人生活还是科学研究&#xff0c;都离不开各种软件的支持。因此&#xff0c;掌握软件开发的步骤和技巧对于IT从业者来说至关重要。本文旨在详细介绍软件开发的整个流程&…

计算机网络期末复习(1)计算机网络在信息时代对的作用 计算机网络的定义和分类 三种交换方法

计算机网络在信息时代扮演着至关重要的角色&#xff0c;它极大地改变了我们生活、工作和学习的方式。 计算机网络在信息时代的作用 信息共享与传播&#xff1a;计算机网络使全球范围内的信息快速共享成为可能&#xff0c;无论是新闻、学术研究还是娱乐内容&#xff0c;都可以…

初识 JavaScript

目录 1. 什么是 JavaScript2. JS 引入方式2.1 内部引入方式2.2 外部引入方式 3. JS 中的注释4. JS 中的结束符5. 输入和输出5.1 输出5.2 输入 6. 变量与常量6.1 变量的声明6.2 变量的赋值6.3 常量 7. JS 中的数据类型8. JS 中的类型转换8.1 隐式转换8.2 显式转换 正文开始 1. …

钣金件设计规范

(一&#xff09; 钣金 1、钣金的概念 钣金&#xff08;sheet metal&#xff09;是针对金属薄板&#xff08;厚度通常在6mm以下&#xff09;的 一种综合冷加工工艺&#xff0c;包括冲裁、折弯、拉深、成形、锻压、铆合等&#xff0c; 其显著的特征是同一零件厚度一致。 2、钣…

精通推荐算法8:Embedding表征学习 -- 总体架构

1 Embedding表征学习的总体架构 目前&#xff0c;推荐算法精排模型大多基于Embedding MLP范式&#xff0c;模型底层是Embedding层&#xff0c;作用是将高维稀疏的输入特征转换为低维稠密的特征向量&#xff0c;并实现一定的模糊查找能力。模型上层是MLP层&#xff0c;作用是对…

在鲲鹏服务器上安装nginx

华为鲲鹏服务器采用华为自研cpu ARMv8架构,提供 Windows 和多个Linux 系统 常使用 CentOS 7.6 64bit with ARM Nginx 和 Apache 一样都是一种 Web 服务器。是基于 REST 架构风格&#xff0c;以统一资源描述符URI 或者统一资源定位符URL 作为沟通依据&#xff0c;通过 HTTP 协议…

【C++进阶】深入STL之string:掌握高效字符串处理的关键

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C模板入门 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STL之string &#x1f4d2;1. STL基本…

大模型学习资料整理:如何从0到1学习大模型,搭建个人或企业RAG系统,如何评估与优化(更新中...)

通过本文您可以了解到&#xff1a; 学习&#xff1a;从小白如何入手&#xff0c;从0到1开始学习大模型。RAG系统&#xff1a;我想搭建属于自己或者企业的RAG系统&#xff0c;我该怎么去做&#xff1f;评估&#xff1a;微调后的模型或者RAG系统&#xff0c;如何评估自己的模型和…

windows配置dns访问git , 加快访问速度保姆级教程

设置 DNS 访问 Git 需要修改电脑的 DNS 配置。下面是具体的操作流程&#xff1a; 第一步&#xff1a;打开命令提示符或终端窗口 在 Windows 系统中&#xff0c;可以按下 Win R 组合键&#xff0c;然后输入 “cmd”&#xff0c;按下 Enter 键打开命令提示符窗口。在 macOS 或 …

【活动】GPT-4O:AI语言生成技术的新里程碑

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 GPT-4O&#xff1a;AI语言生成技术的新里程碑引言GPT系列简史回顾GPT-1: 初露锋…