JavaScript 系列笔记——ECMAscript（壹）
JavaScript 学习系列指南
ECMAscript 目录
变量
1. 变量的概述
2. 变量的使用
3. 变量语法扩展
4. 变量命名规范
数据类型
1. 数据类型简介
2. 基本数据类型
3. 获取变量数据类型
4. 数据类型转换
运算符
1. 运算符
2. 算数运算符
3. 递增和递减运算符
4. 比较运算符
5. 逻辑运算符
6. 赋值运算符
7. 运算符优先级
流程控制
1. 流程控制
2. 顺序流程结构
3. 分支流程控制 if 语句
4. 三元表达式
5. 分支流程控制 switch 语句
流程控制-循环
1. 循环
2. for 循环
3. 双重 for 循环
4. wihile 循环
5. do wihile 循环
6. continue break
数组
1. 数组的概念
2. 创建数组
3. 获取数组中的元素
4. 遍历数组
5. 数组中新增元素
函数
1. 函数的概念
2. 函数的使用
3. 函数的参数
4. 函数的返回值
5. arguments 的使用
对象
1. 对象
2. 创建对象的三种方式
3. new 关键字
4. 遍历对象
小结
内置对象
1. 内置对象
2. Math 对象
3. 日期对象
4. 数组对象
5. 字符串对象
变量
1. 变量的概述
1.1 什么是变量
白话：变量就是一个装东西的盒子。
变量是用来存储数据的容器。我们能够利用变量名称来访问数据，并且这些数据是可以更改的。
1.2 变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间。
类似我们酒店的房间，一个房间就可以看做是一个变量。
2. 变量的使用
变量在使用是分为两步：1. 声明变量 2. 赋值
2.1 声明变量
JavaScript有三种声明方式。
var �················ declaration declaration declaration · declare declare declare declare declare declare declare declare declare declare declare declare declaration declaration declaration declaration declaration declaration declaration declared declared declared declared declared declared declared declared declared declared declared declared declared declared declared declaring declaring declaring declaring declaring declaring declaring declaring declaring declaring declaring · declare · · · · · · · · · · · · · · declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declarations declares declares declares declares declares declares declares declares declares declares declares declares declares declare declare declare declaredeclaredeclaredeclaredeclaredeclaredeclaredeclaredeclaredeclaredeclaredeclaredeclares declars declars declars declars declars declars declars declars declarsdeclaresdeclaresdeclaresdeclaresdeclaresdeclaresdeclaresdeclaresdeclared_declared_declared_declared_declared_declared_declared_declared_declared_declared_declared_declared_declared_declarers-declarers-declarers-declarers-declarers-declarers-declarers-declarers-declaring_declaring_declaring_declaring_declaring_declaring_declaring_declaring_declaring_declaring
let age // 声明一个名称为age 的变量- JS关键字 let 用于声明这些变量（variable 指代）；通过该关键字声明后, 计算机自动分配内存空间给这些 variable；无需手动管理。
- age 被定义为程序员命名的一个存储单元；我们可以通过这个名称访问存储在计算机中的数据。
2.2 赋值
age = 10 // 给age 这个变量赋值为 10- 运用于将右边计算得到的数值结果存储在左边标识符对应的内存位置中，在程序运行过程中此操作用于实现数据赋值的功能。
- 变量存储着程序员将它赋予的具体数值或表达式计算结果，在程序执行期间这些数值被系统自动处理以满足算法需求。
2.3 变量的初始化
let age = 18 // 声明变量同时赋值为 18声明一个变量并赋值， 我们称之为变量的初始化。
3. 变量语法扩展
3.1 更新变量
一个变量被重新赋值后, 它的原有数值会被最新的赋值所取代. 这个变量当前的数值将由最后一次赋予的数值决定.
let age = 18
age = 81 // 最后的结果就是81 因为 18被覆盖掉了3.2 同时声明多个变量
在声明多个变量时，通常只需使用一个let关键字，并用英文逗号分隔各个变量名
let age = 10, name = 'FH', sex = 2;3.3 声明变量特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| let age;console.log(age) | 只声明 不赋值 | undefined |
| console.log(age) | 不声明 不赋值 直接使用 | 报错 |
| age = 10;console.log(age) | 不声明 只赋值 | 10 |
4. 变量命名规范
- 包含英文字母（A-Z, a-z）、数字（0-9）、下划线（_）以及美元符号（$）。
- 区分大小写字母时需格外注意：var app和var App被视为不同的变量。
- 变量名称不得以数字开头。
- 不得使用关键字或保留字作为变量名称。
- 建议选择具有意义的变量名称。
- 遵循驼峰式命名法。
- 每个单词的第一个字母中第一个小写，其余大写的如MyFirstName。
数据类型
1. 数据类型简介
1.1 为什么需要数据类型
在现代计算机系统中，不同类型的数据各自具有独特的所占内存空间。为了解决如何将大量信息按其所需的内存容量划分以便于管理与处理的问题，必须开发相应的处理机制。从而形成了多种类型的数据结构。
简而言之，在数据分析中, 默认情况下的 default() 值是什么？
1.2 变量的数据类型
在编程中，变量是用于存储数据的位置，并且每个位置都有一个名称和指定的数据类型的标签。根据变量的数据类型，在计算机内存中决定了如何存储这些值对应的二进制位。JavaScript被称作弱类型的编程语言或者动态语言。这意味着在编程过程中无需预先声明变量的数据类型，在运行时系统会自动识别并分配相应的存储空间。
let age = 10 // 这是一个数字型
let areYouOK = '是的' // 这是一个字符串在代码运行时，在JS引擎中处理变量的数据显示类型时会依据右边的变量值的数据显示类型进行判断，在程序执行完毕后会固定该变量显示数据类型的结论
1.3 数据类型的分类
JS 把数据类型分为两类：
- 基本数据类型包括：Number、String、Boolean、Undefined和Null。
- 此外，我们引入了Data Types: object。
2. 基本数据类型
2.1 基本数据类型 2.2 数字型 Number
| 基本数据类型 | 说明 | 默认值 |
|---|---|---|
| 默认值 | 数字型，包含 整型值和浮点型值，如 21、0.21 | 0 |
| Boolean | 布尔值类型，如 true、false，等价于 1 和 0 | false |
| false | 字符串类型，如 '张三' 注意咱们js 里面，字符串都带引号 | "" |
| Undefined | var a; 声明了变量a 但是没有赋值，此时 a = undefined | undefined |
| Null | var a = null; 声明了变量a 为空值 | null |
JavaScript 数字类型既可以用来保存整数值，也可以保存小数（浮点数）。
let age = 21 // 整数
let Age = 21.3747 // 小数2.3 字符串类型 String
字符串型可以是引号中的任意文本，其语法为 双引号"" 和 单引号''
let strMsg = "你好" // 使用双引号表示字符串
let strMsg2 = '你也好' // 使用单引号表示字符串
// 常见错误
let strMsg3 = 你好 // 报错，没使用引号，会被认为是js代码，但js没有这些语法由于 HTML 标签内部的属性采用的是双引符号，在 JS 中我们建议改为使用单引号以避免混淆
2.4 布尔型 Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
console.log(true + 1) // 2 参与加法运算当1来看
console.log(false + 1) // 1 参与加法运算当0来看2.5 Undefined 和 Null
在声明后未赋值的变量会有默认值 undefined (当进行连接或相加操作时，请特别留意结果)
let variable
console.log(variable) // undefined
console.log('你好' + variable) // 你好undefined
console.log(11 + variable) // NaN
console.log(true + variable) // NaN一个声明变量给 null 值，里面存的值为空
let vari = null
console.log('你好' + vari) // 你好vari
console.log(11 + vari) // 11
console.log(true + vari) // 13. 获取变量数据类型
3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
let num = 18
console.log(typeof num) // 返回 number3.2 字面量
字面量作为源代码中固定值的表示法，在直观上讲就是字面量用来表达这一数值的方式。
- 数字字面量：8，9，10
- 字符串字面量：'程序员'，"大前端"
- 布尔字面量：true，false
4. 数据类型转换
4.1 什么是数据类型转换
通过表单或prompt获取的数据，默认为字符串类型因此无法直接进行加法运算 必须将变量转为另一种数据类型以便计算 简而言之 就是将一种数据类型的变量转换为另一种数据类型以便完成相应的计算操作
我们通常会实现3种方式的转换：
- 转换为字符串类型
- 转换为数字型
4.2 转换为字符串
toString()
let num = 1
alert(num.toString())String()强制转换
let num = 1
alert(String(num))加号拼接字符串
let num = 1
alert(num + '我是字符串')- toString() 和 String() 在不同情况下被采用。
- 在众多的字符串处理方法中偏好采用第三种基于字符串拼接运算符的方式进行操作，并将其称为隐式转换。
4.3 转换为数字型
parselnt(string)函数，将string类型转成整数数值型
parselnt('78')parseFloat(string)函数，将string类型转成浮点数值型
parseFloat('78.21')Number()强制转换函数，将string类型转成数值型
Number('12')js 隐式转换( - * / )，利用算术运算隐式转换为数值型
'12' - 0- 特别提醒：在使用parseInt和parseFloat函数时，请特别注意它们书写形式上的细微差别。
- 隐式转换指的是，在执行算术运算时，JavaScript会自动将数据类型转换。
4.4 转换为布尔型
Boolean()函数，其他类型转成布尔值
Boolean('true')这些特定的值（如空白字符串''、零0、非数字NaN、空对象null以及未定义undefined）将被映射为逻辑值false。
而所有其他类型的数值都会被解析并赋值给布尔表达式true。
console.log(Boolean('')) // false
console.log(Boolean(0)) // false
console.log(Boolean(NaN)) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(123)) // true
console.log(Boolean('你好吗')) // true
console.log(Boolean('我很好')) // true运算符
1. 运算符
Operators, also referred to as operators, are symbols used to perform tasks such as assigning values, comparing values, and conducting arithmetic operations.
JavaScript 中常用的运算符有：
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
2. 算数运算符
2.1 算数运算符概述
概念：算数运算使用的符号，用于执行两个变量或值的算术运算。
| 运算符 | 描述 | 实例 |
|---|---|---|
| + | 加 | 10 + 20 = 30 |
| - | 减 | 10 - 20 = -10 |
| * | 乘 | 10 * 20 = 200 |
| / | 除 | 10 / 20 = 0.5 |
| % | 取余数（取模） | 返回除法的余数 9 % 2 = 1 |
2.2 浮点数的精度问题
浮点型数值的最大有效位是16位二进制小数，在表示数值精度方面表现优异的同时，在进行算术计算时其精确度远低于整数。
console.log(0.1 + 0.2) // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100) // 结果不是 0.7，而是：7.000000000000001所以：不要直接判断两个浮点数是否相等！
2.3 表达式和返回值
数学表达式：由数字、运算符、变量等元素按照一定的顺序组合而成的方法所形成的集合。
简单理解：是由数字、运算法、变量等组成的式子
表达式最终都会有一个结果，返回给我们，我们称为返回值
3. 递增和递减运算符
3.1 递增和递减运算符概述
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（--）运算符完成。
无论是将递增（++）还是递减（--）运算符放置在变量之前还是之后，在编程逻辑中都具有特殊的意义。当它们位于变量之前时，则命名为前置递增（递减）运算符；而当它们位于变量之后时，则命名为后置递增（递减）运算符。
注意 ：递增和递减运算符必须和变量配合使用。
3.2 递增运算符
1. 前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1。
使用口诀：先自加，后返回原值
2. 后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1。
使用口诀：先返回原值，后自加
3.3 前置递增和后置递增小结
- 前置递增和后置递增运算符能显著简化代码编写过程，并使变量自增1的操作更加便捷
- 单独使用时的运行结果一致
- 与其他代码结合使用时的结果存在差异
- 在后置的情况下，则是先对当前值进行操作再进行自增（其中"先人后己"指的是在执行该操作前不更新当前变量的值）
- 在前置的情况下，则是先进行自增操作后再进行其他计算（其中"先已后人"表示完成自身增加后再处理其他相关操作）
4. 比较运算符
4.1 比较运算符概述
在概念层面上讲，比较运算符（也称为关系运算符）是用来对两个数据进行比较的运算符号。使用这些符号进行操作后会返回布尔值true或false作为结果。
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| < | 小于号 | 1 < 2 | true |
| > | 大于号 | 1 > 2 | false |
| >= | 大于等于号（大于或等于） | 2 >= 2 | true |
| <= | 小于等于号（小于或等于） | 3 <= 2 | false |
| == | 判等号（会转型） | 37 == 37 | true |
| != | 不等号 | 37 != 37 | false |
| === !== | 全等 要求值和 数据类型都一致 | 37 === '37' | false |
4.2 =小结
| 符号 | 作用 | 用法 |
|---|---|---|
| = | 赋值 | 把右边给左边 |
| == | 判断 | 判断两边值是否相等（注意此时有隐式转换） |
| === | 全等 | 判断两边的值和数据类型是否完全相同 |
console.log(18 == '18') // true
console.log(18 === '18') // false5. 逻辑运算符
5.1 逻辑运算符概况
定义：布尔操作符用于处理布尔值计算。其返回结果同样是布尔类型。在开发过程中常用于处理多条件查询。
定义：布尔操作符用于处理布尔值计算。其返回结果同样是布尔类型。在开发过程中常用于处理多条件查询。
| 说明 | 案例 | 用法 | ||||
|---|---|---|---|---|---|---|
| && | “逻辑与”，简称 “与” and | true && false | ||||
| “逻辑或”，简称 “或” or | true | false | ||||
| ! | “逻辑非”，简称 “非” not | ! true |
5.2 逻辑与 &&
两边都是 ture 才返回 true，否则返回 false
5.3 逻辑或||
两边都是 false 才返回 false，否则返回 true
5.4 逻辑非！
逻辑非运算（!）也被称作取反操作符。它被用来获取一个布尔值的相反结果。例如，在编程中使用时，true会被转换为false。
let isOk = !true
console.log(isOk) // false5.5 短路运算（逻辑中断）
短路运算的工作原理是这样的：在存在多个表达式的情况下，在左边表达式的值足以确定最终结果的时候，则不会继续计算右边的表达式的值。
1. 逻辑与
- 该逻辑采用表达式1 \&\& 表达式2作为基础运算。
- 若第一个条件满足，则执行第二个操作。
- 若初始条件不成立，则执行初始操作。
2. 逻辑或
- 语法规则：在语法规则上...的定义中包含两个子条件。
- 当第一个子条件...的计算结果为真时，则按照规定执行操作一。
- 当第一个子条件...的计算结果为假时，则按照规定执行操作二。
console.log(123 || 456) // 123
console.log(0 || 456) // 456
console.log(123 || 456 || 789) // 1236. 赋值运算符
概念：用来把数据赋值给变量的运算符
| 赋值运算符 | 说明 | 案例 |
|---|---|---|
| = | 直接赋值 | var usrName = '我是值' |
| +=、-= | 加、减一个 数 后再赋值 | var age = 10; age+=5; // 15 |
| *=、/=、%= | 乘、除、取模 后再赋值 | var age = 2; age*=5; // 10 |
let age = 10
age += 5 // 相当于 age = age + 5
age -= 5 // 相当于 age = age - 5
age *= 10 // 相当于 age = age7. 运算符优先级
| 优先级 | 运算符 | 顺序 | ||
|---|---|---|---|---|
| 1 | 小括号 | () | ||
| 2 | 一元运算符 | ++ -- ！ | ||
| 3 | 算数运算符 | 先 * / % 后 + - | ||
| 4 | 关系运算符 | > >= < <= | ||
| 5 | 相等运算符 | == != === !== | ||
| 6 | 逻辑运算符 | 先 && 后 | ||
| 7 | 赋值运算符 | = | ||
| 8 | 逗号运算符 | , |
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
流程控制
1. 流程控制
在一个程序运行过程中, 各个代码块的执行次序会对程序的结果产生直接的影响. 通常情况下, 为了实现预期的目标, 在编写程序时我们倾向于按照一定的逻辑顺序组织代码.
简单理解：流程控制就是控制我们的代码按照什么结构顺序来执行
流程控制主要包含有三种基本的结构类型。这些具体包括顺序结构、条件分支结构以及循环结构。这几种不同的基本类型分别对应着程序代码的不同执行路径。
2. 顺序流程结构
该程序代码没有固定的语法结构，在运行时将按照代码出现的先后顺序依次运行，在一般情况下，程序中的大部分代码都是这样运行的。
3. 分支流程控制 if 语句
3.1 分支结构
从上至下地执行代码的过程中，在每种情况下（即每条路径的执行过程中），基于不同的条件判断选择相应的路径代码进行运行操作（即每条路径的选项只有一个的情况），最终会导出不同的结果。
JS 语言中提供了两种分支结构语句
- if 语句
- switch 语句
3.2 if 语句
1. 语法结构
// 条件成立执行代码，否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}语句等同于行为。
循环与分支结构属于典型结构。
通常情况下, 程序包含大量独立的部分。
每个程序包含大量独立的部分.
2. 执行流程
3.3 if else 语句（双分支语句）
1. 语法结构
// 条件成立 执行 if 里面代码，否则执行else里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码语句
} else {
// [否则] 执行的代码
}2. 执行流程
3.4 if else if 语句（多分支语句）
1. 语法结构
// 适合于检查多种条件。
if (条件表达式1) {
语句1
} else if (条件表达式2) {
语句2
} else if (条件表达式3) {
语句3
...
} else {
// 上述条件都不成立执行此处代码
}2. 执行流程
4. 三元表达式
不仅能够执行一些简单的条件选择，并且在编程逻辑中也展现出一定的灵活性。被称为由三个运算符组成的表达式即为三元表达式。
语法结构
// 条件表达式 ? 表达式1 : 表达式2
// 如果条件表达式结果为真 则返回 表达式1的值 ，如果条件表达式结果为假，则返回 表达式2的值
let num = 10
let result = num >= 5 ? '是的' : '不是的' // 表达式是有返回值的 返回是的5. 分支流程控制 switch 语句
5.1 语法结构
它也是一种多路执行结构，在编程中根据不同的条件执行相应的代码块。当需要为变量赋一组预设的具体值时，则可以选择使用 switch。
switch (表达式) {
case value1:
// 表达式 等于 valur1 时要执行的代码
break
case value2:
// 表达式 等于 valur2 时要执行的代码
break
default:
// 表达式 不等于任何一个 value 时要执行的代码
}注意事项
1. 我们开发里面，表达式我们经常写成变量
该表达式的值在与case中的值进行匹配时属于全等的情况, 只有当数值类型完全一致时才成立
当在当前情况下的case中没有break指令时，则会依次执行下一个case中的代码。
5.2 switch 语句和 if else if 语句的区别
- 从功能上说,这两种语言表达方式可以从功能上实现互换使用
- switch语法主要用于处理case为确定值的情况,其表现形式相较于if-else而言更为高效,尤其适用于需要频繁根据固定数值切换不同操作路径的情形
- switch结构在执行完所有条件判断后会直接跳转至对应的case分支指令,从而避免多次重复的逻辑判断过程
- 在if-else语法框架下,如果存在多个独立的判断条件需要逐一验证,则必须依次完成所有的逻辑运算
- 如果程序中的条件分支较为复杂,建议优先考虑使用switch-case组合来组织代码结构
流程控制-循环
1. 循环
循环的目的：可以重复执行某些代码
在 JS 中，主要有三种类型的循环语句：
- for 循环
- while 循环
- do...while 循环
2. for 循环
在程序中，将一组会被反复执行的指令称为循环体。其是否能够继续反复执行则由循环终止条件决定。由上述所述构成的指令序列则被称为循环语句。
2.1 语法结构
用于处理特定类型的代码块的for循环主要用于执行若干次操作，并常与计数相关。其语法结构如下：
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
}
// 1. 初始化变量 就是用let 声明的一个普通变量，通常用于作为计数器使用
// 2. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 3. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
for (let i = 1; i <= 100; i++) {
console.log('你好')
}3. 双重 for 循环
3.1 双重 for 循环概述
在许多情况下，单层for循环无法满足需求。例如要绘制复杂图形或任意形状时，则需要采用多层循环结构以达到目的。
嵌套循环结构是指在一个循环语句内部被定义出另一个完整的循环语句的编程特征。具体来说就是一种具体的语法构造，在程序设计中可以通过层次化的嵌套实现复杂的控制逻辑需求。以for循环为例，在基础for语句的基础上再内部定义一个for控制流单元即可形成双重for循环体结构的形式特征。
3.2 语法结构
for (外层初始化变量; 外层条件表达式; 外层操作表达式) {
// 执行语句;
for (里层的初始化变量; 里层条件表达式; 里层操作表达式) {
// 执行语句;
}
// 1. 可以把里面的循环看做是外层循环的语句
// 2. 外层循环一次，里面的循环执行全部4. wihile 循环
当条件表达式被确定为真时，在此条件下会依次执行一段固定的代码；直到表达式的值不再为真时终止循环。
当条件表达式为true，则执行循环体，否则退出循环。
语法结构
while (条件表达式) {
// 循环体
}5. do wihile 循环
do...while 语句其实是 while 语句的一种变形版本。这种循环会首先执行代码块一次，并随后评估条件表达式来决定是否重复执行循环体。
语法结构
do {
// 循环体代码 —— 条件表达式为 true 时重复执行循环体代码
} while (条件表达式)请注意，在do...while循环语句中, 首先会在代码块内部执行循环体. 然后根据条件判断是否继续执行后续代码块内容.
6. continue break
6.1 continue 关键字
continue 关键字用于立即跳出本次循环，继续下一次循环。
代码实现：
// continue 关键字 退出本次（当前次数的循环） 继续执行剩余次数循环
for (let i = 1; i <= 5; i++) {
if (i == 3) {
continue // continue退出本次循环 直接跳到 i++
}
console.log(i) // 输出 1 2 4 5
}6.2 break 关键字
break 关键字用于立即跳出整个循环（循环结束）。
代码实现：
for (let i = 1; i <= 5; i++) {
if (i == 3) {
break // break 退出个循环
}
console.log(i) // 输出 1 2
}数组
1. 数组的概念
我们可以将多个数据归类为一个数组，并将其称为元素集合。这些数据中的每一个都会被称为一个元素。这些元素能够包含各种不同的类型。通过使用一个变量名就可以存储大量不同类型的元数据，在这种情况下它就被称为数组结构。
// 普通变量一次只能存储一个值
let num = 10
// 数组一次可以存储多个值
let arr = [1,2,3,4,5]2. 创建数组
2.1 数组的创建方式
JS 中创建数组有两种方式：
- 利用 new 创建数组
- 利用数组字面量创建数组
2.2 利用 new 创建数组
let 数组名 = new Array()
let arr = new Array() // 创建一个新的数组2.3 利用数组字面量创建数组
// 1. 使用数组字面量方式创建空的数组
let 数组名 = []
// 2. 使用数组字面量方式创建带初始值的数组
let 数组名 = ['小白', '小黑', '大黄']- 数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
2.4 数组元素的类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
let arrStus = ['小白', 12, true, 1.1]3. 获取数组中的元素
3.1 数组的索引
索引（下标）： 用来访问数组元素的序号（数组下标从0开始）。
let arr = ['小白', '小黑', '大黄'] // 对应着索引号：0，1，2数组可以通过索引进行访问、设置和修改相应的数组元素；我们可以采用'数组名[索引]'的形式来获取特定的元素
这里的访问就是获取得到的意思
// 定义数组
let arrStus = [1, 2, 3]
// 获取数组中第二个元素
alert(arrStus[1])4. 遍历数组
遍历： 即为依次查看数组中的每一个项目（类似于我们在处理数据时检查每条记录的过程）。
let arr = ['red', 'green', 'blue']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// i 是计数器，当索引号使用，arr[i] 是第 i 个数组元素5. 数组中新增元素
可以通过修改 length长度 以及 索引号 添加数组元素
5.1 通过修改 length 长度新增数组元素
- 可以通过修改 length 长度来实现数组扩容的目的
- length 属性是可读写的
let arr = ['red', 'green', 'blue']
arr.length = 5 // 把数组长度修改为5，里面应该有5个元素
console.log(arr)
console.log(arr[3])
console.log(arr[4])在索引号3和4的位置未赋值，默认情况下这些位置的变量会设为undefined
函数
1. 函数的概念
函数： 可以理解为封装了一段可被调用执行的代码块。通过这一段代码块不仅可以实现大量代码的重复使用还可以提高运行效率。
2. 函数的使用
函数在使用时分为两步：声明函数和调用函数。
2.1 声明函数
// 声明函数
function 函数名() {
// 函数体代码
}- function 是一个声明函数的关键字，并且必须保持小写。
- 为了实现特定功能而定义的函数通常会采用动词作为名称。例如，在编程中我们常常用getSum这种形式来表示获取总和的操作。
2.2 调用函数
// 调用函数
函数名() // 通过调用函数名来执行函数体代码- 调用的时候不要忘记添加小括号
- 口诀：函数不调用，自己不执行
提示： 在声明中的函数不会自动执行代码。只有在该函数被调用时才会运行其内部代码。
3. 函数的参数
3.1 形参和实参
当声明一个函数时，在其名称后的括号内可以增加某些参数；这些参数通常被称为形式参数，在调用该函数时也需要提供对应的实际参数。
| 参数 | 说明 |
|---|---|
| 形参 | 形式上的参数，函数定义的时候传递的参数，当前并不知道是什么 |
| 实参 | 实际上的参数，函数调用的时候传递的参数，实参是传递给形参的 |
参数的功能不仅限于固定数值，在函数体内某些数值无法固定；通过传递不同的参数到函数调用中可以让程序更具灵活性。
3.2 函数形参和实参个数不匹配问题
| 参数个数 | 说明 |
|---|---|
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数多于形参个数 | 只取到形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |
function getSum(num1, num2) {
console.log(num1 + num2)
}
getSum(1, 2) // 3 实参个数等于形参个数 正常输出结果
getSum(1, 2, 3) // 3 实参个数多于形参个数 会取到形参的个数
getSum(1) // NaN 实参个数小于形参个数 多余的形参定义为undefined 最终的结果就是 NaN注意： 在JavaScript中，形参的默认值是undefined。
4. 函数的返回值
4.1 return 语句
function 函数名() {
return 需要返回的结果
}
函数名()我们的函数只是完成某种功能任务，并将最终结果传递给被调用的函数名称（），这可以通过return语句来实现。一旦函数触发return指令，则会将后续计算得到的结果传递给调用该函数的程序模块（），具体实现方式为result = return 后面的结果。
4.2 return 终止函数
return 语句之后的代码不被执行。
function getSum(num1, num2) {
return num1 + num2 // return 后面的代码不执行
alert('不会执行')
}
console.log(getSum(1, 2))4.3 return 的返回值
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
function fn(num1, num2) {
return num1, num2
}
console.log(fn(1, 2)) // 24.4 函数没有 return 返回 undefined
函数都是有返回值的
- 如果存在return，则执行return后面的值。
- 如果不存在return，则执行完函数体后返回undefined。
5. arguments 的使用
当我们不清楚有多少个参数会被传递时，我们可以使用arguments来获取它们。在JavaScript中，在函数体内直接引用arguments变量时会被认为是在引用当前函数的一个内置对象。每个JavaScript函数都会预先创建一个arguments对象。该arguments对象包含了传递的所有实参。
arguments的展示形式被视为一个伪数组 ，从而实现对它的遍历操作。以下特点包括：
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push，pop 等方法
对象
1. 对象
1. 1 什么是对象？
现实生活中：世间万物皆可被视为客观实体。客观实体指的是存在于现实世界中、能够被感知并操作的具体事物。例如，在计算机领域中, 一个数据库, 一张网页, 或者与远程服务器建立连接的行为都可以被视为 '客观实体'（object）。
在 JavaScript 中，对象是一组无序的关联属性和方法的组合，并且每个事物都可以被视为一个对象。具体来说包括单值类型如字符串和数值以及复杂结构如数组和函数等。
对象是由属性和方法组成的
- 属性：事物的特性和指标，在对象体上通过属性这一标识符进行表征（常用名词）
- 方法：事物的行为和行动项，在目标体上采用特定的方法这一动作序列来进行表征（常用动词）
2. 创建对象的三种方式
在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：
- 利用字面量创建对象
- 利用 new Object 创建对象
- 利用构造函数创建对象
2.1 利用字面量创建对象
对象字面量： 指的是花括号 { } 内部所包含的具体事物（对象）的属性和方法的明确描述。
{ } 里面采取键值对 的形式表示
- 键：相当于属性名
- 值：相当于属性值，可以是任意类型的值
let obj = {
uname: '张三',
age: 18,
sex: '男',
sayHi: function() {
console.log('你好')
}
}对象的调用
在对象中遵循属性调用的方式包括：通过字段访问（如obj.属性名），其中该字段即相当于"的"。
在 obj 中进行属性访问时, 另一种常见的访问方式是通过数组索引 (如 obj[ '键' ]), 特别指出的是, 在这种情况下应确保使用引号符号.
定义明确地说明了, 在这种情况下需确保方法名称后面紧跟括号.
console.log(obj.uname) // 调用名字属性
console.log(obj['age']) // 调用名字属性
obj.sayHi() // 调用 sayHi 方法属性，后面必须加括号2.2 利用 new Object 创建对象
let obj = new Object()
obj.uname = '张三'
obj.age = 18
obj.sex = '男'
obj.sayHi = function() {
console.log('hi')
}
// 利号用等赋值的方法 添加对象的属性和方法2.3 利用构造函数创建对象
构造函数作为一种特殊的函数，在编程语言中被定义为用于实例化对象的机制；其主要功能在于为对象的成员变量分配初始值，并且通常与new运算符配合使用；我们通常会将对象中的公共属性及方法提取出来并将其封装到该构造函数中以便于管理与调用。
function 构造函数名() {
this.属性 = 值
this.方法 = function() {}
}
new 构造函数名()- 构造函数名字首字母大写：命名时应确保构造函数名称的首字母大写。
- 即使不使用 return 语句也能成功返回：构造函数不需要 return 就可以返回结果。
- 在调用构造函数时必须使用 new 关键字：调用构造函数必须使用 new。
- 在访问类中的属性或方法时，请确保在前面加上 this 关键字：属性和方法前面必须添加 this。
3. new 关键字
new 在执行时会做四件事情：
- 生成一个内存中的新空实体。
- 将 this 引用指向该新实体。
- 根据构造函数内部的指令为该实例增添属性与方法。
- 返回该实例而不必在构造函数内部调用 return 语句。
4. 遍历对象
for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象) {
// 代码块
}
for (let k in obj) {
console.log(k); // k 变量 得到是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值
}小结
- 对象有助于提升代码结构的清晰度。
- 对象表示复杂数据类型的符号表示为object。
- 本质上是无序的相关属性和方法组成的集合。
- 构造函数代表一类通用概念（例如苹果），无论是红色苹果还是绿色苹果均统称为苹果。
- 对象实例具体指的是某个特定的事物（例如这个苹果），如讲台上正在讲课的pink老师等实例。
- for...in语句用于遍历并获取对象的所有属性值。
内置对象
1. 内置对象
JavaScript中将对象划分为三种形式：自定义类型的对像、预定义类型的对像以及浏览器特定类型的对像。
前两种形式属于JavaScript的基础内容，并遵循ECMAScript标准；第三种则是JavaScript特有的开发形式。
预定的对象结构即是JavaScript语言所自带的具体实现方式。这些结构可为开发者提供便利，并提供了他们所需的各种基本且必要的属性与方法。
2. Math 对象
2.1 Math 概述
Math对象不具备构造函数属性,它拥有丰富的数学常数和标准函数作为其属性和方法.进行与数学相关的操作(如求绝对值,取整,计算最大值等)可以通过调用Math对象中的属性和方法来实现.
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max() / Math.min() // 求最大和最小值2.2 随机数方法 random()
Math.random()
// Math 对象随机数方法 random() 返回一个随机小数 0 =< x < 1
// 不跟参数
Math.random()
// 获得 1~10 整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min // 公式
}
let shu = getRandom(1, 10)3. 日期对象
3.1 Date 概述
- Date 实例与 Math 实例不同，并采用自动生成新实例的方法而非直接调用即可使用；因此，在使用时必须先创建实例。
- Date 实例专门用于管理日期和时间信息。
3.2 Date()方法的使用
1. 获取当前时间必须实例化
let now = new Date()
console.log(now)2. Date() 构造函数的参数
当括号内包含时间信息时, 该函数会返回对应的时间值. 例如, 在日期格式字符串中使用 '2021-7-15' 的情况下, 则可以通过 new Date('2021-7-15') 或者 new Date('2021/7-15') 来实现.
3.3 日期格式化
需要获取日期指定的部分，我们要手动得到这种格式
| 方法名 | 说明 | 代码 |
|---|---|---|
| getFullYear() | 获取当年 | dObj.getFullYear() |
| getMonth() | 获取当月（0-11） | dObj.getMonth() |
| getDate | 获取当天日期 | dObj.getDate() |
| getDay() | 获取星期几（周日0 到 周六6） | dObj.getDay() |
| getHours() | 获取当前小时 | dObj.getHours() |
| getMinutes() | 获取当前分钟 | dObj.getMinutes() |
| getSeconds() | 获取当前秒钟 | dObj.getSeconds() |
3.4 获取日期的总的毫秒形式
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数
// 获得Date总的毫秒数（时间戳） 不是当前的毫秒数 而是距离1970.1.1过了多少毫秒数
// 1. 通过 valueOf() getTime
let date = new Date()
console.log(date.valueOf()) // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime())
// 2. 简单的写法（常用的写法）
let date1 = +new Date() // +new Date() 返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());4. 数组对象
4.1 数组的创建方式
JS 中创建数组有两种方式：
- 利用 new 创建数组
- 利用数组字面量创建数组
4.2 检测是否为数组
两种方式：instanceof 和 Array.isArray
// 检测是否为数组
// (1) instanceof 运算符
let arr = []
let obj = {}
console.log(arr instanceof Array) // true
console.log(obj instanceof Array) // false
// (2) Array.isArray(参数)
console.log(Array.isArray(arr)) // true
console.log(Array.isArray(obj)) // false4.3 添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1...) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1 无参数、修改原数组 | 返回它删除的元素的值 |
| unshift(参数1...) | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1 无参数、修改原数组 | 并返回第一个元素的值 |
代码结构
let arr = [1, 2, 3]
arr.push(4, 'pink') // 5
console.log(arr) // [1,2.3,4,pink]4.4 数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序，无参数 | 会改变原来的数组 返回新数组 |
| sort() | 对数组的元素进行排序 | 会改变原来的数组 返回新数组 |
代码结构
// 变量名.方法名
// 1. 翻转数组
let arr = ['pink', 'red', 'blue']
arr.reverse()
console.log(arr) // ["blue", "red", "pink"]
// 2. 数组排序（冒泡排序）
let arr1 = [13, 3, 4, 99, 9, 7, 1]
arr1.sort(function(a, b) {
// return a - b // 升序的顺序排序
return b - a // 降序的顺序排序
})
console.log(arr1) // [99, 13, 9, 7, 4, 3, 1]4.5 数组索引号方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找该元素的第一个索引 | 如果存在返回索引号 如果不存在，则返回-1 |
| lastIndexOf() | 在数组中的最后一个索引 | 如果存在返回索引号 如果不存在，则返回-1 |
代码结构
// 变量名.方法名(数组元素)
// 只返回第一个满足条件的索引号
// 如果在该数组里面找不到元素，则返回-1
let arr = ['red', 'green', 'blue', 'blue']
console.log(arr.indexOf('blue')) // 2 从前面开始查找
console.log(arr.lastIndex('blue')) // 3 从后面开始查找4.6 数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join('分隔符') | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
代码结构
// 变量名.方法名
// 1. toString() 将数组转换为字符串
let arr = [1, 2, 3]
console.log(arr.toString()) // 1,2,3
// 2. join(分隔符)
let arr1 = ['green', 'blue', 'pink']
console.log(arr1.join()) // green,blue,pink
console.log(arr1.join('-')) // green-blue-pink5. 字符串对象
5.1 基本包装类型
基于数据的基本封装模式就是通过将基础数据封装为引入型数据的方式实现的；这使得基础数据类型获得了属性和方法。
由于...的基本数据类型的某些特性限制了它们的表现力与灵活性，在这种情况下不具备任何属性或方法；相比之下的对象类却能提供丰富多样的属性与操作方式。然而，在某些特定情况下（如上述代码所示），它们似乎无法直接运行。这是因为尽管上述代码看似无法执行；但由于JavaScript会将基本数据类型封装为复杂数据类型（如Number被包装为Number对象），其内部机制使得即使表面无明显关联的内容也能被系统识别并进行相应的操作处理。
// (1) 生成临时变量，把简单数据类型包装称复杂数据类型
let temp = new String('andy')
// (2) 把临时变量的值 给str
str = temp
// (3) 销毁这个临时变量
temp = null5.2 根据字符返回位置
任何方法都不会更改字符串本身（因为它们是不可变对象），操作完成后会返回一个新的字符串实例。
| 方法名 | 说明 |
|---|---|
| indexOf('要查找的字符'，开始的位置) | 返回指定内容在原字符串的位置，找不到就返回 -1，开始的位置是 index 索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
代码演示
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始的位置])
let str = '改革春风吹满地，春天来了'
console.log(str.indexOf('春')) // 2
console.log(str.indexOf('春', 3)) // 8 从索引号为3的位置往后查找5.3 根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符（index 字符串的索引号） | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码（index索引号） | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持 和charAt()等效 |
代码演示
// 1. charAt(index)
let str = 'andy'
console.log(str.charAt(3)) // 3
// 2. charCodeAt(index)
console.log(str.charCodeAt(0)) // 97
// 3. str[index]
console.log(str[0]) // a5.4 字符串操作方法
| 方法名 | 说明 |
|---|---|
| concat(str1, str2, str3...) | concat() 方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start, length) | 从start位置开始（索引号），length 取的个数 重点记住这个 |
| slice(start, end) | 从start位置开始，截取到end位置，end取不到（这俩都是索引号） |
| substring(start, end) | 从start位置开始，截取到end位置，end取不到 基本和slice相同 但不接收负值 |
代码演示
// 1. concat('字符串1','字符串2'...)
let str = 'andy'
console.log(str.concat('ruan')) // andyruan
// 2. substr('截取的起始位置','截取几个字符')
let str2 = '改革春风吹满地'
console.log(str2.substr(2, 2)) // 春风5.5 替换字符 与 字符转换为数组
// 1. 替换字符 replace('被替换的字符','替换为的字符') 只换替换第一个字符
let str = 'andyandy'
console.log(str.replace('a', 'b')) // bndyandy
// 2. 字符转换为数组 split('分隔符')
let str2 = 'red,pink,blue'
console.log(str2.split(',')) // [red,pink,blue]
let str3 = 'red&pink&blue'
console.log(str3.split('&')) // [red,pink,blue]