JavaScript 学习笔记（Day5）

「写在前面」

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：
1. JavaScript 学习笔记（Day1）
2. JavaScript 学习笔记（Day2）
3. JavaScript 学习笔记（Day3）
4. JavaScript 学习笔记（Day4）

目录

  • 1 对象
  • 2 综合案例
  • 3 拓展

1 对象

今日内容和实战安排：

P64：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=64

1.1 什么是对象

P65：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=65

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

1.2 对象使用

1. 对象声明语法
let 对象名 = {}

let 对象名 = new Object()

实际开发中，我们多用花括号。{} 是对象字面量

2. 对象有属性和方法组成
  • 属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
  • 方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏… 
let 对象名 = {
  属性名: 属性值,
  方法名: 函数
}
3. 属性
  • 属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
  • 多个属性之间使用英文 , 分隔
  • 属性就是依附在对象上的变量（外面是变量，对象内是属性）
  • 属性名可以使用 "" 或 ''， 一般情况下省略，除非名称遇到特殊符号如空格、中横线等 
let obj = {
  uname： 'pink老师',
  age: 18,
  gender: '女'
}

P66：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=66

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

alt

1. 属性-查

语法：对象名.属性

let person = {
  uname: 'pink老师',
  age: 18,
  gender: '女'
}
console.log(person.uname) // pink老师
console.log(person.age) // 18
console.log(person.gender) // 女

2. 属性-改

语法：对象名.属性 = 新值

let person = {
  uname: 'pink老师',
  age: 18,
  gender: '女'
}
person.gender = '男'
console.log(person.gender) // 男

3. 属性-增

语法：对象名.新属性 = 新值

let person = {
  uname: 'pink老师',
  age: 18,
  gender: '女'
}
person.address = '武汉黑马'
console.log(person) // {uname: 'pink老师', age: 18, gender: '女', address: '武汉黑马'}

4. 属性-删

语法：delete 对象名.属性

let person = {
  uname: 'pink老师',
  age: 18,
  gender: '女'
}
delete person.gender
console.log(person) // {uname: 'pink老师', age: 18}

属性-查的另外一种写法

P67：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=67

  • 对于多词属性或则 - 等属性，点操作就不能用了。
  • 我们可以采取： 对象 ['属性']方式， 单引号和双引号都可以 
let person = {
  'user-name': 'pink老师',
  age: 18,
  gender: '女'
}
console.log(person.user-name) // NaN
console.log(person['user-name']) // pink老师
4. 方法

P68：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=68

  • 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
  • 多个属性之间使用英文 , 分隔
  • 方法是依附在对象中的函数
  • 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等 
let obj = {
  uname: '刘德华',
  song: function (x, y) {
    console.log(x + y)
  }
}
// 调用方法
obj.song(1, 2) // 3

1.3 遍历对象

P69：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=69

  • 一般不用这种方式遍历数组、主要是用来遍历对象
  • for in 语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
  • 由于 k 是变量, 所以必须使用 [ ] 语法解析
  • 一定记住： k 是获得对象的 属性名， 对象名[k] 是获得 属性值 
// 数组，不推荐用 for in 遍历数组
let arr = ['pink', 'red', 'blue']
for (let k in arr) {
  console.log(k) // 输出数组的索引号 '0' '1' '2'，但是是字符串
  console.log(arr[k]) // 输出 'pink' 'red' 'blue'
}
// for in 遍历对象
let obj = {
  uname: 'pink老师',
  age: 18,
  gender: '男'
}
for (let k in obj) {
  console.log(k) // 输出属性名 'uname' 'age' 'gender'
  console.log(obj[k]) // 输出属性值 'pink老师' 18 '男'
}

P70：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=70

alt

1.4 内置对象

P71：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=71

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

内置对象-Math：

Math 对象是 JavaScript 提供的一个“数学”对象

Math 对象包含的方法有：

  • random：生成0-1之间的随机数（包含0不包括1）
  • ceil：向上取整
  • floor：向下取整
  • round：四舍五入
  • max：找最大数
  • min：找最小数
  • pow：幂运算
  • abs：绝对值 
console.log(Math.ceil(1.1)) // 2
console.log(Math.floor(1.1)) // 1
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.max(1,2,3)) // 3
console.log(Math.min(1,2,3)) // 1

P72：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=72

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

// 如何生成0-10的随机数呢？
Math.floor(Math.random() * (10 + 1))

// 如何生成5-10的随机数？
Math.floor(Math.random() * (5 + 1)) + 5

// 如何生成N-M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N

案例：

P73：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=73

alt

P74：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=74

alt

P75：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=75

alt

2 综合案例

P76：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76

alt

3 拓展

P77：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=77

3.1 术语解释

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

3.2 基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

  • 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
    • string ，number，boolean，undefined，null
  • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
    • 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈空间分配区别：

  1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面

简单类型
简单类型
复杂类型
复杂类型 
// 简单类型
let num = 10
let num2 = num
num = 20
console.log(num2) // 20

// 复杂类型
let obj1 = {
  age: 18
}
let obj2 = obj1
obj1.age = 20
console.log(obj2) // 20

「结束」
alt

本文由 mdnice 多平台发布

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

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

相关文章

数据结构奇妙旅程之二叉树初阶

数据结构奇妙旅程之二叉树初阶

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好，我是xiaoxie.希望你看完之后,有不足之处请多多谅解，让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …
阅读更多...
IDEA无法解析jdk自带的类的解决办法

IDEA无法解析jdk自带的类的解决办法

1.问题 IDEA在有些时候，会出现这个错误，就是jdk自带的java类找不到而报错。 例如下面的就是Object找不到，我们知道jdk自带的类是不用import包的，这里报错了，IDEA会提示你去导入类，其实这个提示也不是真正…
阅读更多...
Ubuntu 22.04 基础环境搭建

Ubuntu 22.04 基础环境搭建

这是Ubuntu软件安装系列的第一篇，我们来聊聊基础环境搭建。 这个专栏主要讲一些常见服务端软件的安装和配置，当然也包括对软件架构和作用的分析，以及使用的场景的介绍。 注意我们这里使用的Ubuntu的版本是22.04，基本上大厂的云服…
阅读更多...
Go语言热重载和优雅地关闭程序

Go语言热重载和优雅地关闭程序

Go语言热重载和优雅地关闭程序 我们有时会因不同的目的去关闭服务，一种关闭服务是终止操作系统，一种关闭服务是用来更新配置。 我们希望优雅地关闭服务和通过热重载重新加载配置，而这两种方式可以通过信号包来完成。 1、代码实现 package…
阅读更多...
产品经理与产品运营的区别和联系

产品经理与产品运营的区别和联系

一、两者的职责区别 产品经理的目的：是创造有价值的产品 产品运营的目的：是让产品能有效的发挥出它应有的价值 二、两者的工作内容区别产品经理的工作内容 产品的经理的目的是创造有价值的产品，因此产品经理的所有工作都是围绕着&#xf…
阅读更多...
CentOS安装maxwell

CentOS安装maxwell

CentOs安装maxwell 一、简介二、准备工作三、安装1、下载安装包2、解压3、编写配置文件4、启动maxwell5、验证6、停止maxwell 四、说明1、更新数据2、插入数据3、删除数据 五、遇到问题 一、简介 maxwell是由美国Zendesk公司开源，它通过读取mysql的binlog日志&#…
阅读更多...
vscode mysql cmake windows 常见问题和推荐文章

vscode mysql cmake windows 常见问题和推荐文章

1.在windows中安装mingw64和cmake（可查一下网上的安装教程），配置环境变量 2.在vscode中用CMake构建项目的时候，可能会出现这样的问题:“The C compiler identification is unknownn...”,可参考这篇博客 在windows下使用Vscode用…
阅读更多...
面试题之ElasticSearch

面试题之ElasticSearch

面试题之ElasticSearch 1.es的基础知识2. es的集群、节点、分片、副本分片的定义？3. es为什么快？4. 倒排索引的原理是什么？5. es的segment是什么？6. es的分段存储和分段索引的概念及区别？7. 索引相关的问题&#xff1f…
阅读更多...
uni-app基础详解（组件、弹窗、数据缓存、页面跳转）

uni-app基础详解（组件、弹窗、数据缓存、页面跳转）

uni-app基础详解（组件、弹窗、数据缓存、页面跳转） uni-app组件scroll-viewswipertext 文本button 按钮input 输入框radio 单选checkbox 多选picker 选择器slider 滑块textarea 文本域 弹窗提示框 uni.showLoading提示弹窗 uni.showToast确定取消框 uni.…
阅读更多...
Flutter系列：Flutter常见问答（可用于面试）

Flutter系列：Flutter常见问答（可用于面试）

Flutter系列 Flutter常见问答 作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263 邮箱 ：291148484163.com 本文地址：https://blog.csdn.net/qq_28550263/article/details/135604801 【简介】&#…
阅读更多...
服务器感染了.DevicData-P-XXXXXXXX勒索病毒，如何确保数据文件完整恢复？

服务器感染了.DevicData-P-XXXXXXXX勒索病毒，如何确保数据文件完整恢复？

引言： 在当今数字化时代，勒索病毒已成为网络安全威胁的一个严峻问题。其中，.DevicData-P-XXXXXXXX 勒索病毒以其恶意加密文件的手段引起了广泛关注。本文将介绍该病毒的特点、数据恢复方法以及如何预防遭受其攻击。 如不幸感染这个勒索病毒&…
阅读更多...
【Java数据结构】03-二叉树，树和森林

【Java数据结构】03-二叉树，树和森林

4 二叉树、树和森林 重点章节，在选择，填空，综合中都有考察到。 4.1 掌握二叉树、树和森林的定义以及它们之间的异同点 1. 二叉树（Binary Tree） 定义： 二叉树是一种特殊的树结构，其中每个节点…
阅读更多...
入门clickhouse的坑

入门clickhouse的坑

常规的关系数据库已经不能满足现有业务需求，于是，装了一个ck玩玩，结果，妥妥的跳坑！ 安装，首页就是一行语句，curl就可以安装了，确实很简单。 写了一个小工具，把整个sqls…
阅读更多...
Python（wordcloud）：根据词频信息（xlsx、csv文件）绘制词云图

Python（wordcloud）：根据词频信息（xlsx、csv文件）绘制词云图

一、前言 本文将介绍如何用python根据词频信息（xlsx、csv文件）绘制词云图，除了绘制常规形状的词云图（比如长方形），还可以指定词云图的形状。 二、安装并引入相关的库 1、安装相关的库 pip install jieb…
阅读更多...
Oracle/DM序列基本使用

Oracle/DM序列基本使用

序列(SEQUENCE)是序列号生成器，可以为表中的行自动生成序列号，产生一组等间隔的数值(类型为数字)。其主要的用途是生成表的主键值，可以在插入语句中引用，也可以通过查询检查当前值，或使序列增至下一个值。序列是一个计…
阅读更多...
MinIO上传

MinIO上传

简介 MinIO是一个开源的对象存储服务器，兼容Amazon S3 API。它提供了可扩展、高性能和高可用性的存储解决方案，适用于大规模数据存储和分发。 MinIO的设计目标是简单易用、轻量级和高度可定制。它可以在企业内部部署，也可以在公有云上使用。…
阅读更多...
深度学习笔记（八）——构建网络的常用辅助增强方法：数据增强扩充、断点续训、可视化和部署预测

深度学习笔记（八）——构建网络的常用辅助增强方法：数据增强扩充、断点续训、可视化和部署预测

文中程序以Tensorflow-2.6.0为例 部分概念包含笔者个人理解，如有遗漏或错误，欢迎评论或私信指正。 截图和程序部分引用自北京大学机器学习公开课 要构建一个完善可用的神经网络，除了设计网络结构以外，还需要添加一些辅助代码来增强…
阅读更多...
【Spring】—— AOP切入点表达式（*和..使用）

【Spring】—— AOP切入点表达式（*和..使用）

切入点表达式是对要进行增强的方法的描述方式。 标准格式： 动作关键字（访问修饰符 返回值 包名.类/接口名.方法名（参数）） execution(void com.spring.dao.BookDao.update()) *和..的使用 可以使用通配符描述切入点&…
阅读更多...
【Macos系统】安装VOSviewer及使用VOSviewer教程！！以ESN网络的研究进行案例分析

【Macos系统】安装VOSviewer及使用VOSviewer教程！！以ESN网络的研究进行案例分析

【Macos系统】安装VOSviewer及使用VOSviewer教程 以ESN网络的研究进行案例分析 本文介绍如何安装和使用VOSviewer软件，并以ESN（Echo State Network）网络的研究为案例进行分析。利用VOSviewer对相关文献进行可视化分析，并深入了解…
阅读更多...
Linux之引导和服务篇

Linux之引导和服务篇

系统引导是操作系统运行的开始，在用户能够正常登录之前，Linux的引导过程完成了一系列的初始化任务，并加载必要的程序和命令终端，为用户登录做好准备。 一. 引导过程 开机自检--->MBR引导--->GRUB菜单--->加载Linux内核-…
阅读更多...
最新文章

Copyright @ 2022~2023