JavaScript 学习笔记（JS进阶 Day2）

news2024/11/16 7:21:52

「写在前面」

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

目录

  • 1 深入对象
  • 2 内置构造函数
  • 3 综合案例

1 深入对象

1.1 创建对象三种方式

P164：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=164

1. 利用对象字面量创建对象

const o = {
  name: '佩奇'
}

2. 利用 new Object 创建对象

const o = new Object({ name: '佩奇' })
console.log(o) // {name: '佩奇'}

3. 利用构造函数创建对象

1.2 构造函数

P165：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=165

构造函数在技术上是常规函数。

不过有两个约定：

  1. 它们的命名以大写字母开头。
  2. 它们只能由 "new" 操作符来执行。 
function Pig(name, age, gender) {
  this.name = name
  this.age = age
  this.gener = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇', 6, '女')
// 创建乔治对象
const George = new Pig('乔治', 3, '男')
// 创建猪妈妈对象
const Mum = new Pig('猪妈妈', 30, '女')
// 创建猪爸爸对象
const Dad = new Pig('猪爸爸', 32, '男')
console.log(Peppa）// {name: '佩奇', age: 6, gener: '女'}

说明：

  1. 使用 new 关键字调用函数的行为被称为实例化
  2. 实例化构造函数时没有参数时可以省略 ()
  3. 构造函数内部无需写return，返回值即为新创建的对象
  4. 构造函数内部的 return 返回的值无效，所以不要写return
  5. new Object（） new Date（） 也是实例化构造函数

实例化执行过程

P166：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=166

说明：

  1. 创建新对象
  2. 构造函数this指向新对象
  3. 执行构造函数代码，修改this，添加新的属性
  4. 返回新对象

1.3 实例成员&静态成员

P167：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=167

实例成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。

说明：

  1. 实例对象的属性和方法即为 实例成员
  2. 为构造函数传入参数，动态创建结构相同但值不同的对象
  3. 构造函数创建的实例对象彼此独立互不影响。 
// 构造函数
function Person() {
  // 构造函数内部的 this 就是实例对象
  // 实例对象中动态添加属性
  this.name = '小明'
  // 实例对象动态添加方法
  this.sayHi = function () {
    console.log('大家好~')
  }
}

// 实例化，p1 是实例对象
// p1 实际就是构造函数内部的 this
const p1 = new Person()
console.log(p1)
console.log(p1.name) // 访问实例属性
p1.sayHi() // 调用实例方法

静态成员

说明：

  1. 构造函数的属性和方法被称为 静态成员
  2. 一般公共特征的属性或方法静态成员设置为静态成员
  3. 静态成员方法中的 this 指向构造函数本身 
// 构造函数
function Person(name, age) {
  // 省略实例成员
}
// 静态属性
Person.eyes = 2
Person.arms = 2
// 静态方法
Person.walk = function () {
  console.log( '^_^人都会走路...")
  // this 指向 Person
  console.log(this.eyes)
}

2 内置构造函数

P168：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=168

在 JavaScript 中最主要的数据类型有 6 种：

基本数据类型：

  • 字符串、数值、布尔、undefined、null

引用类型:

  • 对象

但是，我们会发现有些特殊情况：

// 普通字符串
const str = 'andy'
console.log(str.length)  // 4

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。

JS中几乎所有的数据都可以基于构造函数创建。

引用类型

  • Object，Array，RegExp，Date 等

包装类型

  • String，Number，Boolean 等

2.1 Object

P169：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=169

Object 是内置的构造函数，用于创建普通对象。

// 通过构造函数创建普通对象
const user = new object({name: '小明', age: 15})

推荐使用字面量方式声明对象，而不是 Object 构造函数

学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）:

  • Object.keys: 获取对象中所有属性（键）
  • Object.values: 获取对象中所有属性值
  • Object.assign: 用于对象拷贝 
const o = { uname: 'pink', age: 18 }
// 1.获得所有的属性名
console.log(0bject.keys(o)) // 返回数组 ['uname', 'age']
// 2．获得所有的属性值
console.log(0bject.values(o)) // ['pink', 18]
// 3．对象的拷贝
const oo = {}
Object.assign(oo, o)
console.log(oo) // { uname: 'pink', age: 18 }
Object.assign(o, { gender: '女' })
console.log(o) // { uname: 'pink', age: 18, gender: '女' }

2.2 Array

P170：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=170

Array 是内置的构造函数，用于创建数组

const arr = new Array(3, 5)
console.log(arr) // [3,5]

创建数组建议使用字面量创建，不用 Array 构造函数创建

1. 数组常见实例方法-核心方法

方法作用说明
forEach遍历数组不返回，用于不改变值，经常用于查找打印输出值
filter过滤数组筛选数组元素，并生成新数组
map迭代数组返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce累计器返回函数累计处理的结果，经常用于求和等

reduce

reduce 返回函数累计处理的结果，经常用于求和等

语法：

arr.reduce(function(累计值, 当前元素 [,索引号][,源数组]){}, 起始值)

累计值参数：

  1. 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
  2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
  3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）

例：

const arr = [1, 5, 8]

// 1．没有初始值
const total = arr.reduce(function (prev, current) {
  return prev + current
})
console.log(total) // 14

// 2．有初始值
const total = arr.reduce(function (prev, current) {
  return prev + current
}, 10)
console.log(total) // 24

// 3. 箭头函数的写法
const total = arr.reduce((prev,current) => prev + current, 10)
console.log(total) // 24

2. 数组常见方法-其他方法

P171：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=171

  1. 实例方法 join数组元素拼接为字符串，返回字符串(重点)
  2. 实例方法 find查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined(重点)
  3. 实例方法 every检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回true，否则返回fallse(重点)
  4. 实例方法 some检测数组中的元素是否满足指定条件如果数组中有元素满足条件返回true，否则返回false
  5. 实例方法 concat合并两个数组，返回生成新数组
  6. 实例方法 sort对原数组单元值排序
  7. 实例方法 splice删除或替换原数组单元
  8. 实例方法 reverse反转数组
  9. 实例方法 findIndex查找元素的索引值

2.3 String

P172：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=172

1. String 常见实例方法

  1. 实例属性 length用来获取字符串的度长(重点)
  2. 实例方法 split('分隔符')用来将字符串拆分成数组(重点)
  3. 实例方法 substring(需要截取的第一个字符的索引[,结束的索引号])用于字符串截取(重点)
  4. 实例方法 startswith(检测字符串[，检测位置索引号])检测是否以某字符开头(重点)
  5. 实例方法 includes(搜索的字符串[，检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回true或 false(重点)
  6. 实例方法 toUppercase用于将字母转换成大写
  7. 实例方法 toLowerCase用于将字母转换成小写
  8. 实例方法 indexof检测是否包含某字符
  9. 实例方法 endsWith检测是否以某字符结尾
  10. 实例方法 replace用于替换字符串，支持正则匹配
  11. 实例方法 match用于查找字符串，支持正则匹配

渲染赠品案例：

P173：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=173

2.4 Number

P174：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=174

Number 是内置的构造函数，用于创建数值

常用方法：

toFixed() 设置保留小数位的长度

// 数值类型
const price = 12.345
// 保留两位小数 四舍五入
console.log(price.toFixed(2)) // 12.35

3 综合案例

购物车展示:

P175：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=175

P176：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=176


「结束」
alt

本文由 mdnice 多平台发布

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

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

相关文章

【c语言】扫雷

【c语言】扫雷

前言： 扫雷是一款经典的单人益智游戏，它的目标是在一个方格矩阵中找出所有的地雷，而不触碰到任何一颗地雷。在计算机编程领域，扫雷也是一个非常受欢迎的项目，因为它涉及到许多重要的编程概念，如数组、循环…
阅读更多...
HNU-编译原理-甘晴void学习感悟

HNU-编译原理-甘晴void学习感悟

前言 熬过煎熬的考试周、复习以及更加煎熬的等成绩，查到成绩的那一刻，心里还是挺开心的。 虽然我没有完全学懂这门课程，但我还是兢兢业业地通过了课程的考试，拿到了这门课程的认可。 记录一下自己对编译原理的学习感悟&#xf…
阅读更多...
虹科分享丨汽车技术的未来：Netropy如何测试和确保汽车以太网的性能

虹科分享丨汽车技术的未来：Netropy如何测试和确保汽车以太网的性能

来源：艾特保IT 虹科分享丨汽车技术的未来：Netropy如何测试和确保汽车以太网的性能 原文链接：https://mp.weixin.qq.com/s/G8wihrzqpJJOx5i0o63fkA 欢迎关注虹科，为您提供最新资讯！ #汽车以太网 #车载网络 #Netropy …
阅读更多...
【格密码基础】基于LWE问题的密码系统

【格密码基础】基于LWE问题的密码系统

目录 一. 介绍 二. LWE密码方案简单介绍 三. LWE经典归约 四. LWE性质 五. LWE的鲁棒性 一. 介绍 在2005年，Regev基于LWE问题提出了一个新的公钥密码方案。该方案可实现语义安全（semantic security），其中误差率（…
阅读更多...
2023年我国民用无人机产业规模超过1200亿元，低空经济时代来临

2023年我国民用无人机产业规模超过1200亿元，低空经济时代来临

2023年我国民用无人机产业规模超过1200亿元，低空经济时代来临 根据最新数据显示，2023年中国的民用无人机产业规模已经超过了1200亿元，稳居全球榜首。预计到2025年，这个数字将突破2000亿元，届时低空经济对国民经济的综…
阅读更多...
SpringBoot 自定义Filter 提前返回 CORS 错误 处理前后端分离跨域配置无效问题解析

SpringBoot 自定义Filter 提前返回 CORS 错误 处理前后端分离跨域配置无效问题解析

前言 浏览器有跨域限制，非同源策略 (协议、主机名或端口不同) 被视为跨域请求，解决跨域有跨域资源共享(CORS)、反向代理和 JSONP的方式。本篇通过 SpringBoot 的资源共享配置 (CORS) 来解决前后端分离项目的跨域，以及从原理上去解决跨域配置…
阅读更多...
docker指令存档

docker指令存档

目录 Docker 1、概念 2、架构图 3、安装 4、Docker怎么工作的？ 5、Docker常用命令 帮助命令 镜像命令 1、查看镜像 2、帮助命令 3、搜索镜像 4、拉取镜像 5、删除镜像 容器命令 1、启动 2、查看运行的容器 3、删除容器 4、启动&停止 其他命令…
阅读更多...
开始学习Vue2（axios和Vuex）

开始学习Vue2（axios和Vuex）

一、Axios 1、Axios 简介 Axios 是一个基于 promise 网络请求库 ，作用于node.j s 和浏 览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器 和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在 客户端 (浏览端) 则使用 XMLHttpRequests。 …
阅读更多...
滴滴开源小程序框架 Mpx 新特性：局部运行时能力增强

滴滴开源小程序框架 Mpx 新特性：局部运行时能力增强

Mpx 是滴滴开源的一款增强型跨端小程序框架，自 2018 年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在滴滴内…
阅读更多...
C语言实现插入排序算法（附带源代码）

C语言实现插入排序算法（附带源代码）

插入排序 插入排序（英语：Insertion Sort）是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常…
阅读更多...
【Vue3】计算属性computed和监听属性watch

【Vue3】计算属性computed和监听属性watch

目录 👉 computed 👈 🐌只读取不修改 ☃️既读取又修改 👉 watch 👈 1、监听 ref 基本类型 数据 2、监听 ref 对象类型 数据 3、监听 reactive 对象类型 数据 4、监听对象类型的某个属性 5、监视以上多个数据…
阅读更多...
小程序 样式 WXSS

小程序 样式 WXSS

文章目录 样式 WXSS尺⼨单位样式导⼊选择器⼩程序中使⽤less 样式 WXSS WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。 与 CSS 相⽐，WXSS 扩展的特性有： 响应式⻓度单位 rpx样式导⼊ 尺⼨单位 rpx （…
阅读更多...
08.Elasticsearch应用（八）

08.Elasticsearch应用（八）

Elasticsearch应用（八） 1.为什么需要相关性算分 我们在文档搜索的时候，匹配程度越高的相关性算分越高，算分越高的越靠前，但是有时候我们不需要算分越高越靠前我们可能需要手动影响算分来控制顺序比如广告&#xff08…
阅读更多...
数学建模学习笔记||一文了解美赛论文如何写作

数学建模学习笔记||一文了解美赛论文如何写作

目录 ​编辑 Title/标题 要求 形式 Summary Sheet/摘要 要求 三要素 书写特点 内容 开头段 中间段 格式 内容 结尾段 关键词 Contents/目录 Introduction/引言 Problem Background/问题背景 Restatement of the Problem/问题重述 Literature Review/文献综…
阅读更多...
有向图的拓扑序列——拓扑排序

有向图的拓扑序列——拓扑排序

问题描述 什么是拓扑序列 若一个由图中所有点构成的序列 A 满足：对于图中的每条边 (x,y)，x 在 A 中都出现在 y 之前，则称 A 是该图的一个拓扑序列。图中不能有环图中至少存在一个点的入度为0 如何求拓扑序列？ 计算出每个节点的…
阅读更多...
将Python打包为exe+inno setup将exe程序封装成向导安装程序

将Python打包为exe+inno setup将exe程序封装成向导安装程序

为什么要打包？ Python脚本不能在没有安装Python的机器上运行。如果写了一个脚本，想分享给其他人使用，可她电脑又没有装Python。如果将脚本打包成exe文件，即使她的电脑上没有安装Python解释器，这个exe程序也能在上面运行…
阅读更多...
数据结构实验八：排序的应用

数据结构实验八：排序的应用

目录 一、实验目的 二、实验原理 1.直接插入排序 2.快速排序 三、实验内容 实验1 代码 截图 实验2 代码 截图 一、实验目的 1、掌握排序的基本概念； 2．掌握并实现以下排序算法：直接插入排序、快速排序。 二、实验原理 1.直接插…
阅读更多...
RK3399ProD开发板的固件烧录实战

RK3399ProD开发板的固件烧录实战

参考 Toybrick-开源社区-TB-RK3399ProD-RK3399ProD开发板的固件烧录教程 https://download.csdn.net/download/quantum7/88769396 环境 主机：win10 开发板：TB-RK3399ProD 烧录工具：FlashTool_CN\Windows\AndroidTool.exe 串口驱动&#xf…
阅读更多...
14.5 Flash查询和添加数据库数据

14.5 Flash查询和添加数据库数据

14.5 Flash查询和添加数据库数据 在Flash与数据库通讯的实际应用中，如何实现用户的登录与注册是经常遇到的一个问题。登录实际上就是ASP根据Flash提供的数据查询数据库的过程，而注册则是ASP将Flash提供的数据写入数据库的过程。 1.启动Access2003&…
阅读更多...
linux 查找文件或查找内容 （find grep）

linux 查找文件或查找内容 （find grep）

一 linux 查找包含指定内容的文件： 在linux 有时我们只我知道内容但不知道文件在哪，可以使用find 与grep查找 例1 要查找指定目录（默认包含子目录）文件内容包含 xxx 的文件 find /etc/ -type f -exec grep -l "mysql"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023