JavaScript基础学习笔记

shenpkun

已于 2023-03-12 23:57:16 修改

阅读量131

点赞数

分类专栏：前端学习 JavaScript 文章标签： javascript 前端

于 2023-03-12 23:56:49 首次发布

本文链接：https://blog.csdn.net/shenpkun/article/details/129483210

版权

前端学习同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

JavaScript基础学习笔记

JavaScript基础笔记

JavaScript基础学习笔记
1. 初识JavaScript
- 1.1 JavaScript是什么
- 1.2 JS的作用
- 1.3 HTML/CSS/JS 的关系
- 1.4 浏览器执行 JS 简介
- 1.5 JS 的组成
- 1.6 JS 初体验
- 1.7 JS注释
- 1.8 JS 输入输出语句
2. 变量
- 2.1 导读
- 2.2 变量的使用
- 2.3 变量语法扩展
- 2.4 变量命名规范
3. 数组
- 3.1 数组的基本使用
- 3.2 添加数组元素
- - 3.2.1 arr.push（重点）
  - 3.2.2 arr.unshift
- 3.3 删除元素
4. 数据类型
- 4.1 基本数据类型--number数字类型
- 4.2 基本数据类型--string字符串类型
- 4.3 基本数据类型--boolean布尔型
- 4.4 基本数据类型--undefined未定义类型
- 4.5 基本数据类型--null空类型
- 4.6 检测数据类型
5. 类型转换
- 5.1 为什么需要类型转换
- 5.2 隐式转换
- 5.3 显示转换
6. 运算符
- 6.1 算术运算符
- 6.2 赋值运算符
- 6.3 一元运算符
- 6.4 比较运算符
- 6.5 逻辑运算符
- 6.6 运算符优先级
7. 语句
- 7.1 表达式和语句
- 7.2 分支语句
- 7.3 循环结构
- - 7.3.1 断点测试
  - 7.3.2 while循环
8. 循环-for
- 8.1 循环for-基本使用
- 8.2 循环退出
- 8.3 循环嵌套
9. 函数
- 9.1 为什么需要函数
- 9.2 函数使用
- 9.3 函数传参
- 9.4 函数返回值
- - 9.4.1 为什么要有返回值
  - 9.4.2 用return返回数据
- 9.5 作用域
- - 9.5.2 变量的作用域
  - 9.5.3 变量访问原则-作用域链
- 9.6 匿名函数
- - 9.6.1 匿名函数
  - 9.6.2 立即执行函数
10. 对象
- 10.1 对象的基本信息
- 10.2 对象使用
- 10.3 操作对象
- 10.4 遍历对象for in语句
- 10.5 内置对象
- 10.6 学成在线综合案例
11. 拓展- 基本数据类型和引用数据类型

1. 初识JavaScript

1.1 JavaScript是什么

● JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
● 脚本语言：不需要编译，运行过程中→js解释器（js 引擎）逐行来进行解释并执行
● 现在也可以基于Node.js 技术进行服务器端编程

1.2 JS的作用

● 表单动态检验（密码强度检测）（JS 产生的最初目的)
● 网页特效
● 服务端开发（Node.js）
● 桌面程序（Electron）
● APP（Cordova）
● 控制硬件-物联网（Ruff）
● 游戏开发（cocos2d-js）

1.3 HTML/CSS/JS 的关系

HTML/CSS 标记语言——描述类语言

● HTML 决定网页结构和内容（决定看到什么）
● CSS 决定网页呈现给用户的模样（决定好不好看）

JS脚本语言——编程类语言

● 实现业务逻辑和页面控制（决定功能），相当于人的各种动作

1.4 浏览器执行 JS 简介

浏览器分为两部分：渲染引擎和JS引擎

● 渲染引擎：用来解析HTML与CSS，俗称内核，比如 Chrome 浏览器的 blink ，老版本的 webkit
● JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript 代码，对其处理后运行，比如 Chrome 浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScrip语言归为脚本语言，会逐行解释执行。

1.5 JS 的组成

● ECMAScript （JavaScript 语法）
● DOM （页面文档对象模型）
● BOM（浏览器对象模型）

1.5.1 ECMAScrip

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript（网景公司）或 JScript（微软公司），但实际上后两者是ECMAScript 语言的实现和扩展。

EMCAScript ：EMCAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一台JS语法工业标准。

1.5.2 DOM——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展的标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

1.5.3 BOM——浏览器对象模型

BOM（Brower Object Model，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.6 JS 初体验

JS 有3种书写体验，分别为行内、内嵌和外部。

● 行内式的js 直接写到元素的内部
● 内嵌和css相似，css写在里，js 写在

1.6.1 行内式

● 可以将单行或少量JS 代码写在HTML标签的事件属性中（以 on开头的属性），如：onclick
● 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
● 可读性差，在HTML中编写JS大量代码，不方便阅读
● 引号易错，引号多层嵌套匹配时，非常容易弄混
● 特殊情况下使用

1.6.2 内嵌JS

● 可以将多行 JS代码写到

1.6.3 外部 JS文件

● 利于HTML页面代码结构化，把大段 JS 代码独立到HTML页面之外，既美观，也方便文件级别的复用
● 引用外部 JS文件的script 标签中间不可以写代码
● 适合于JS代码量比较大的情况

1.7 JS注释

单行注释 // ctrl + /
多行注释 /* */ shift + alt + a

1.8 JS 输入输出语句

常用语句：
方法说明归属
alert(msg) 浏览器弹出警示框浏览器
console.log(msg) 浏览器控制台打印输出信息浏览器
prompt(info) 浏览器弹出输入框，用户可以输入浏览器

2. 变量

2.1 导读

● 什么是变量？

变量就是一个装东西的盒子

变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。

● 变量在内存中的存储

本质：变量是内存中申请的一块用来存放数据的空间

2.2 变量的使用

变量使用时分成两步：1. 声明变量 2. 赋值

1. 声明变量

//声明变量
var age; //声明一个名称为age的变量
let 变量名//let是后面ES的语法现在直接用着

● var 是一个JS 关键字，用来声明变量（variable 变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
● age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

var声明：

● 可以先使用再声明（不合理）
● var声明过的变量可以重复声明（不合理）
● 比如变量提升、全局变量、没有块级作用域

2. 赋值

age = 10; //给 age 这个变量赋值为10

● = 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
● 变量值是程序员保存到变量空间里的值

3. 变量的初始化

var age = 18; //声明变量同时赋值为18

声明一个变量并开始赋值，我们称之为变量的初始化

2.3 变量语法扩展

1. 更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次为准。

2. 同时声明多个变量

var age = 18,
address = ‘火影村’,
salary = 2000;

3. 声明变量特殊情况

情况	说明	结果
var age; console.log (age);	只声明不赋值	undefined 未定义的
console.log (age);	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

2.4 变量命名规范

● 由字母（A-Z a-z）、数字（0-9）、下划线、美元符号$组成，如：usrAge,num01,name
● 严格区分大小写。 var app 和var APP是两个变量
● 不能以数字开头。18age 是错误的
● 不能是关键字、保留字。例如：var, for ,while
● 变量名必须有意义。 MMD BBD nl
● 遵守驼峰命名法。首字母小写，后面单词的首字母需大写 myFirstName
● 推荐翻译网站有道爱词霸

name是特殊含义的不直接使用作为变量名

3. 数组

数组是一种顺序保存数据的

3.1 数组的基本使用

1. 声明语法

let 数组名 = [数据1，数据2，数据……]

数组可以存储任意类型的数据

2. 取值语法

[数组名]下标

3. 一些术语：

● 元素：数组中保存的每个数据都叫数组元素
● 下标：数组中数据的编号
● 长度：数组中数据的个数，通过数组的length属性获得

3.2 添加数组元素

3.2.1 arr.push（重点）

数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

arr.push(元素1，…，元素n)

3.2.2 arr.unshift

数组.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

3.3 删除元素

3.3.1 arr.pop()

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

语法：arr.pop()

3.3.2 arr.shif()

数组.pop()方法从数组中删除第一个元素，并返回该元素的值

语法：arr.shift()

3.3.3 arr.splice() 重点

arr.splice()删除指定元素

语法：

● arr.splice(start, deleteCount)
● start起始位置：
○ 指定修改的开始位置（从0开始计数）
● deleteCount：
○ 表示要移除的数组元素的个数
○ 可选的。如果省略则默认从指定的起始位置删除到最后

使用场景：

随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
点击删除按钮，相关的数据会从商品数据中删除

后期课程我们会用到删除操作，特别是splice

4. 数据类型

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

4.1 基本数据类型–number数字类型

正数、负数、小数等统一称为数字类型。

注：JS是弱数据类型，变量到底属于哪种类型，只有赋值之后才能确认

JAVA是强数据类型例如int a = 3，必须是整数

4.2 基本数据类型–string字符串类型

通过单引号‘’ 双引号“” 或反引号 ``包裹的数据都叫字符串，单引号和反引号没有本质上的区别，推荐使用单引号。

注：

无论单引号或是双引号必须成对使用
单双引号可以互相嵌套，但是不能自己嵌套自己（口诀：外双内单，或者外单内双）
必要时可以使用转义字符\ ，输出单引号或双引号

模板字符串：

作用：
○ 拼接字符串和变量
○ document.write('hello'+name+',,');
符号：
○ ``
○ 在英文输入模式下按tab键上方那个键
○ 内容拼接变量时，用${}包住变量
○ document.write('hello,my name is ${name},');

4.3 基本数据类型–boolean布尔型

true真 false假

4.4 基本数据类型–undefined未定义类型

未定义是比较特殊的类型，只有一个值undefined。

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined。

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传送过来。

情况	说明	结果
let age;console.log(age)	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10;console.log(age)	不声明只赋值	10（不提倡）

4.5 基本数据类型–null空类型

null 表示值为空

null和undefined区别：

● undefined表示没有赋值
● null表示赋值了，但是内容为空

null开发中的使用场景：

官方解释：把null作为尚未创建的对象

通俗：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

4.6 检测数据类型

控制台输出语句

数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

通过 typeof 关键字检测数据类型

let age = 18
console.log(typeof age)//number

5. 类型转换

5.1 为什么需要类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

5.2 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

● + 号两边只要有一个是字符串，都会把另外一个转成字符串
● 除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点：

● 转换类型不明确，靠经验才能总结

小技巧：

● +号作为正号解析可以转换成Number

console.log(typeof ‘123’)//string
console.log(typeof +‘123’)//number
console.log(+‘11’ + 11)//22

5.3 显示转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。

为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

概念：自己写代码告诉系统该转成什么类型

转换为数字型
● Number(数据)
○ 转成数字类型
○ 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
○ NaN也是number类型的数据，代表非数字
● parseInt(数据)
○ 只保留整数
● parseFloat(数据)
○ 可以保留小数

转换为字符型:
● String(数据)
● 变量.toString(进制)

用户订单案例：利用document.write()打印表格，所用变量要${}

6. 运算符

6.1 算术运算符

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

● +：求和
● -：求差
● *：求积
● /：求商
● %：取模（取余数）
○ 开发中经常作为某个数字是否被整除

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

● 乘、除、取余优先级相同
● 加、减优先级相同
● 乘、除、取余优先级大于加、减
● 使用 () 可以提升优先级

总结：先乘除后加减，有括号先算括号里面的（和实际数学运算一样）

6.2 赋值运算符

● 赋值运算符：对变量进行赋值的运算符
○ 已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
○ 其他赋值运算符
■ +=
■ -=
■ *=
■ /=
■ %=
● 使用这些运算符可以在对变量赋值时进行快速操作

let num = 1;
num += 1;//num = num + 1
num += 3;//num = num + 3

6.3 一元运算符

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

● 二元运算符
○ 例：let num = 1+3
● 一元运算符
○ 例：正负号
● 自增++ 有前置自增++num 和后置自增num++
● 自减–
● 使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

自增运算符的用法：
● 前置自增和后置自增单独使用没有区别
● 如果参与运算的话有区别：
○ 前置自增：先自加再使用（记忆口诀：++在前先加）
○ 后置自增：先使用再自加（记忆口诀：++在后后加）

let i = 1;
console.log(++i + 2);//4  
console.log(i++ + 2);//3

● 一般开发中我们都是独立使用
● 后面 i++ 后置自增会使用相对较多

6.4 比较运算符

作用：
- 比较两个数据大小是否相等
使用：
- > ：左边是否大于右边
- <：左边是否小于右边
- =：左边是否大于或等于右边
- <=：左边是否小于或等于右边
- ==：左右两边是否相等
- ===：左右两边是否类型和值都相等
- !==：左右两边是否不全等
- 比较结果为boolean类型，即只会得到true或false
细节：
- 字符串比较，是比较的字符对应的ASCII码
  - 从左往右依次比较
  - 如果第一位一样再比较第二位，以此类推
  - 比较的少，了解即可
- NaN不等于任何值，包括它本身
- 尽量不要比较小数，因为小数有精度问题
- 不同类型之间比较会发生隐式转换
  - 最终把数据隐式转换转成number类型再比较
  - 所以开发中，如果进行准确的比较我们**更喜欢 === **或者 !
总结：
- = 和 == 和 === 的区别？
  - = 是赋值
  - == 是判断只要求值相等，不要求数据类型一样即可返回true
  - === 是全等要求值和数据类型都一样返回的才是true
  - 开发中，请使用 ===

6.5 逻辑运算符

使用：

符号	名称	特点	口诀
&&	逻辑与	符号两边都为true结果才为true	一假则假
\|\|	逻辑或	符号两边有一个true就为true	一真则真
!	逻辑非	true变false	真变假，假变真

逻辑运算符的短路：

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
- && 左边为false就短路
- || 左边为true就短路
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

6.6 运算符优先级

7. 语句

7.1 表达式和语句

表达式：
- 表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果
语句：
- js 整句或命令，js 语句是以分号结束（可以省略）
- 比如： if语句 for 循环语句
区别：
- 表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

7.2 分支语句

1. 程序三大流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

2. 分支语句

分支语句可以让我们有选择性的执行想要的代码

分支语句包含：

If分支语句
三元运算符
switch 语句

7.2.1 if分支语句

if语句有三种使用：单分支、双分支、多分支

1. 单分支使用语法：
在这里插入图片描述

双分支语句if else
多分支 if else if ……

7.2.3 三元运算符

其实是比 if 双分支更简单的写法，有时候也叫做三元表达式
符号：? 与 : 配合使用
语法：`条件?满足条件执行的代码: 不满足条件执行的代码
一般用来取值

7.2.3 switch语句

在这里插入图片描述

7.3 循环结构

7.3.1 断点测试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面
- 按F12打开开发者工具
- 点到sources一栏
- 选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

7.3.2 while循环

1.语法：

while(条件){
	满足条件则执行代码
}

释义：

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

2.注意事项

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

所以，循环需要具备三要素：

变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）

continue和break的区别：

循环结束：
- continue：结束本次循环，继续下次循环
- break：跳出所在的循环

8. 循环-for

8.1 循环for-基本使用

1.for循环语法

重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for(声明记录循环次数的变量；循环条件；变化值){
	循环体
}

8.2 循环退出

循环结束：

continue：结束本次循环，继续下次循环
break：跳出所在的循环

8.3 循环嵌套

for循环里面嵌套for循环

9. 函数

9.1 为什么需要函数

函数：

function，是被设计为执行特定任务的代码块

说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

9.2 函数使用

函数的声明语法：function函数名（）{函数体}
函数名命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定

动词	含义
can	判断是否可执行某个动作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

函数的调用语法：函数名（）

注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数；函数一次声明可以多次调用，每一次函数调用，函数体里面的代码会重新执行一次

函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才

会被执行。函数的功能代码都要写在函数体当中。

9.3 函数传参

9.3.1 有参数的函数声明和调用

声明语法：
- function 函数名(参数1，参数2，…){}
调用语法：
- 函数名(参数1，参数2，…)

9.3.2 形参和实参

在这里插入图片描述

●- 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参

9.3.3 案例

在这里插入图片描述

undefined + 任何都是NaN，除了+字符串，这个有隐式转换，会将undefined拼接字符串
undefined || 0 时，undefined当false看
当假看，0 undefined null ’‘ false NaN

9.4 函数返回值

9.4.1 为什么要有返回值

函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）
对执行结果的扩展性更高,可以让其他的程序使用这个结果

9.4.2 用return返回数据

细节：

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有 return，这种情况函数默认返回值为 undefined
return能立即结束当前函数, 所以 return 后面的数据不要换行写

断点测试：
在这里插入图片描述
F12键控制台，然后到source，点一下断点，如果点第二个按钮或者按F10键不会进入函数内部，直接获取了数据下一句代码；如果按第三个按钮或者按F11键会进入函数内部

9.5 作用域

9.5.1 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域：
- 全局有效
- 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js文件
局部作用域
- 局部有效
- 作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
块级作用域
- {}内有效
- 块作用域由 { } 包括,if语句和for语句里面的{ }等

9.5.2 变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为

全局变量
- 函数外部let 的变量
- 全局变量在任何区域都可以访问和修改
局部变量
- 函数内部let的变量
- 局部变量只能在当前函数内部访问和修改
块级变量
- {} 内部的let变量
- let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

变量有一个特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

思考：
在这里插入图片描述

执行20的，执行fn函数时先从自己的作用域开始查找，有就用，没有就到上一级作用域查找，以此类推，找到最后如果没有就是undefined未定义

9.5.3 变量访问原则-作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
作用域链：采取就近原则的方式来查找变量最终的值

9.6 匿名函数

函数可分为具名函数和匿名函数

具名函数：
- 声明：function fn() {}
  
  调用：fn()
匿名函数：
- function() {}

9.6.1 匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

语法：let fn = function(){//函数体}

调用：fn（）//函数名（）

其中函数的形参和实参使用和具名函数一致

使用场景：后期web API会使用

9.6.2 立即执行函数

场景介绍: 避免全局变量之间的污染

语法：注意后面括号的位置

//方式1
(function(){console.log(11)})();

//方式2
(function(){console.log(11)}());

注意：多个立即执行函数要用分号；隔开，要不然会报错

10. 对象

10.1 对象的基本信息

对象是一种数据类型，也是一种无序数据的集合，可以详细地描述某个事物

10.2 对象使用

1.对象声明语法

let 对象名 = {}

2. 对象有属性和方法组成

let 对象名 = {属性名：属性值，方法名：函数}

3. 属性

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

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量（外面是变量，对象内是属性）
属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

4. 属性访问

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

简单理解就是获得对象里面的属性值。

声明：let person = {name: ‘Andy’, age: 18}

访问：person.name 或者**[‘name’]**

注意：点后面的属性名一定不要加引号；[] 里面的属性名一定加引号；后期不同使用场景会用到不同的写法

5. 对象中的方法

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

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

6. 对象中的方法访问

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

声明：let person = {name: ‘Andy’, age: 18, sayHi: function(){document.write(:hi~~~~)} }

调用：person.sayHi() **后面的括号不可以省略 ** 对象名.方法名（）

10.3 操作对象

增删改查操作

查询对象
- 对象.属性
- 对象[‘属性’]
- 对象.方法
重新赋值
- 对象.属性 = 值
- 对象.方法 = function(){}
对象添加新的数据
- 对象名.新属性名 = 新值
- 对象名.新方法名 = function(){}
删除对象中的属性
- delete 对象名.属性名

也就是说，对象如果有这个属性相当于重新赋值，对象如果没有这个属性相当于动态添加一个属性（方法同理）

10.4 遍历对象for in语句

对象没有像数组一样的length属性,所以无法确定长度

对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

使用for in语句

let person = {name: 'ANdy', age: 18}
for(let k in person){
    
	console.log(k);//打印属性名
	console.log(person[k]);//打印属性值
}

一般不用这种方式遍历数组、主要是用来遍历对象
理解：k === ‘name’ === ‘age’，所以person.[‘name’] 就是 person.[k]
如果这里是person.k是undefined，因为对象中没有属性k
一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

10.5 内置对象

10.5.1 什么是内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用
思考：我们之前用过内置对象吗？
- document.write()
- console.log()

10.5.2 内置对象Math

●- Math对象是JavaScript提供的一个“数学高手”对象

提供了一系列做数学运算的方法
方法有：
- random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整 Math.ceil(1.1)//2 1.1向上取整就是2
- floor：向下取整 Math.floor(1.1)—1 Math.floor(1.5)—1 Math.floor(1.9)—1
- max：找最大数 Math.max(1,45,20,99)//99
- min：找最小数
- pow：幂运算
- abs：绝对值
- round：就近取整（.5往大取整） Math.round(1.5)—2 Math.round(-1.5)— -1