JavaScript第一周笔记-CSDN博客

本文链接：https://blog.csdn.net/yl101228/article/details/129660498

JavaScript第一周

1.JavaScript组成。

JavaScript由DOM BOM ECMAscript 三部分组成

1.DOM (Document Object Model): 文档对象模型

BOM (Browser Object Model): 浏览器对象模型

ECMAScript 语法:定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型

2.JS的三种书写方式

行内式

<input type="button" value="按钮" onclick="alert('hello world')" />

内嵌式

<body>
    <script>
        alert('hello world')
    </script>
</body>

外链式

<script src="main.js"></script>

3.js定义变量

### 什么是变量

变量相当于一个数据存储盒子，把数据数值放入变量里并命名，以后调用这个变量的时候直接

调用盒子名（变量名）就可以得到这个数值

为啥要定义变量：使用变量可以方便的获取或者修改内存中的数据

如何定义变量：

语法： var 变量名 =变量

变量赋值

变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了

变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做赋值号；书写时，等号 = 两侧习惯书写一个空格）==

// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;

使用变量

直接写变量名即可使用变量；变量在使用前，必须先有定义，如果没有定义，会出现引用错误

变量命名规范

变量的命名规则和命名规范

规则：必须遵守的，不遵守就是错

一个变量名称可以由数字、字母(a-zA-Z)、英文下划线（_）、美元符号（$）组成,如：userrAge, num01, _name
严格区分大小写 var qf; 和 var Qf;
不能由数字开头 18age 是错误的
不能是保留字或者关键字编辑器中高亮的部分
不要出现空格

规范：建议遵守的（开发者默认），不遵守不会报错

变量名尽量有意义（语义化） nl → age
遵循驼峰命名规则，由多个单词组成的时候
大驼峰 UserName 小驼峰 userNameKangbazi
不要使用中文

大小驼峰

数据类型（重点）

数据类型简介

（）

为什么需要数据类型

    在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
    js是一个工具,为了解决生活中各种各样的需求,需要不同的数据类型 姓名 年龄 薪资等 
    简单来说，数据类型就是数据的类别型号。

变量的数据类型

    变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

数据类型的分类

JS 把数据类型分为两类：

基本数据类型（Number,String,Boolean,Undefined,Null）也可以叫简单

复杂数据类型（object)

是指我们存储在内存中的数据的类型

我们通常分为两大类基本数据类型和复杂数据类型

基本数据类型

数值类型（number）

一切数字都是数值类型（包括二进制，十进制，十六进制等）

NaN（not a number），一个非数字

字符串类型（string）

被引号包裹的所有内容（可以是单引号也可以是双引号）

布尔类型（boolean）

只有两个（true 或者 false）

null类型（null）

只有一个，就是 null，表示空的意思

undefined类型（undefined）

只有一个，就是 undefined，表示没有值的意思

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8, 9, 10

字符串字面量：'千锋济南', "大前端"

布尔字面量：true，false

数字型 Number

JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。

var age = 21;       // 整数
var Age = 21.3747;  // 小数

数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

  // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

数字型范围

JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

最小值：Number.MIN_VALUE，这个值为：5e-32

数字型三个特殊值

Infinity ，代表无穷大，大于任何数值

-Infinity ，代表无穷小，小于任何数值

NaN ，Not a number，代表一个非数值

isNaN

用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);          // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一个非数字

字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
'	' 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

字符串长度

    字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

var strMsg = "我是来自北方的狼，来南方寻找心爱的花姑娘！";
alert(strMsg.length); // 显示 21

字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112

+ 号总结口诀：数值相加，字符相连

字符串拼接加强

经常会将字符串和变量来拼接，变量可以很方便地修改里面的值

变量是不能添加引号的，因为加引号的变量会变成字符串

如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

Undefined和 Null

一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

复杂数据类型

对象类型（object）

函数类型（function）

数组（arr）

判断数据类型

既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据

使用 typeof 关键字来进行判断

获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

不同类型的返回值

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

数据类型转换

数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

其他数据类型转成数值

Number(变量)

可以把一个变量强制转换成数值类型
可以转换小数，会保留小数
可以转换布尔值
遇到不可转换的都会返回 NaN

parseInt(变量)

从第一位开始检查，是数字就转换，知道一个不是数字的内容
开头就不是数字，那么直接返回 NaN
不认识小数点，只能保留整数

parseFloat(变量)

从第一位开始检查，是数字就转换，知道一个不是数字的内容
开头就不是数字，那么直接返回 NaN
认识一次小数点

除了加法以外的数学运算

运算符两边都是可运算数字才行
如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN
加法不可以用

其他数据类型转成字符串

变量.toString()

有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

String(变量)

所有数据类型都可以

使用加法运算

在 JS 里面，+ 由两个含义
字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接
加法运算：只有 + 两边都是数字的时候，才会进行数学运算

其他数据类型转成布尔

Boolean(变量)

在 js 中，只有 ''、0、null、undefined、NaN，这些是 false
其余都是 true

运算符

就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式

数学运算符

只有符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型，就会进行字符串拼接

会执行减法运算
会自动把两边都转换成数字进行运算

会执行乘法运算
会自动把两边都转换成数字进行运算

会执行除法运算
会自动把两边都转换成数字进行运算

会执行取余运算
会自动把两边都转换成数字进行运算

浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

所以：不要直接判断两个浮点数是否相等 !

表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给开发者，称为返回值

赋值运算符

就是把 = 右边的赋值给等号左边的变量名
var num = 100
就是把 100 赋值给 num 变量
那么 num 变量的值就是 100

var a = 10; a += 10; console.log(a); //=> 20
a += 10 等价于 a = a + 10

var a = 10;
a -= 10; console.log(a); //=> 0
a -= 10 等价于 a = a - 10

var a = 10; a *= 10; console.log(a); //=> 100
a *= 10 等价于 a = a * 10

var a = 10; a /= 10; console.log(a); //=> 1
a /= 10 等价于 a = a / 10

var a = 10; a %= 10; console.log(a); //=> 0
a %= 10 等价于 a = a % 10

比较运算符

比较符号两边的值是否相等，不管数据类型

1 == '1'
两个的值是一样的，所以得到 true

比较符号两边的值和数据类型是否都相等

1 === '1'
两个值虽然一样，但是因为数据类型不一样，所以得到 false

比较符号两边的值是否不等

1 != '1'
因为两边的值是相等的，所以比较他们不等的时候得到 false

比较符号两边的数据类型和值是否不等

1 !== '1'
因为两边的数据类型确实不一样，所以得到 true

比较左边的值是否大于或等于右边的值

1 >= 1 结果是 true
1 >= 0 结果是 true
1 >= 2 结果是 false

比较左边的值是否小于或等于右边的值

1 <= 2 结果是 true
1 <= 1 结果是 true
1 <= 0 结果是 false

比较左边的值是否大于右边的值

1 > 0 结果是 true
1 > 1 结果是 false
1 > 2 结果是 false

比较左边的值是否小于右边的值

1 < 2 结果是 true
1 < 1 结果是 false
1 < 0 结果是 false

逻辑运算符

进行且的运算

符号左边必须为 true 并且右边也是 true，才会返回 true
只要有一边不是 true，那么就会返回 false
true && true 结果是 true
true && false 结果是 false
false && true 结果是 false
false && false 结果是 false

进行或的运算

符号的左边为 true 或者右边为 true，都会返回 true
只有两边都是 false 的时候才会返回 false
true || true 结果是 true
true || false 结果是 true
false || true 结果是 true
false || false 结果是 false

进行取反运算

本身是 true 的，会变成 false
本身是 false 的，会变成 true
!true 结果是 false
!false 结果是 true

短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

逻辑与

语法：表达式1 && 表达式2

- 如果第一个表达式的值为真，则返回表达式2

- 如果第一个表达式的值为假，则返回表达式1

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

逻辑或

语法：表达式1 || 表达式2

- 如果第一个表达式的值为真，则返回表达式1

- 如果第一个表达式的值为假，则返回表达式2

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

自增自减运算符（一元运算符）递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(--)运算符来完成。

在 JavaScript 中，递增(++)和递减(--)既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增(递减)运算符，放在变量后面时，我们可以称为后置递增(递减)运算符。

注意：递增和递减运算符必须和变量配合使用。

递增运算符

前置递增运算符

++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。

使用口诀：先自加，后返回值

var  num = 10;
alert(++num + 10);   // 21

后置递增运算符

num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。

使用口诀：先返回原值，后自加

var  num = 10;
alert(10 + num++);  // 20

递减运算符

前置递减运算符

--num 前置递减，就是自减1，类似于 num = num - 1，但是 --num 写起来更简单。

使用口诀：先自减，后返回值

var  num = 10;
alert(--num + 10);   // 19

后置递减运算符

num-- 后置递减，就是自减1，类似于 num = num - 1 ，但是 num-- 写起来更简单。

使用口诀：先返回原值，后自减

var  num = 10;
alert(10 + num--);  // 20

运算符优先级

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

分支语句

if语句

通过一个 if 语句来决定代码是否执行

语法： if (条件) { 要执行的代码 }

通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

// 条件为 true 的时候执行 {} 里面的代码
if (true) {
  alert('因为条件是 true，我会执行')
}

// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
	alert('因为条件是 false，我不会执行')    
}

else {

alert('因为条件是 true，我不会执行')

}

// 条件为 false 的时候，会执行 else 后面的 {}

if (false) {

alert('因为条件为 false，我不会执行')

} else {

alert('因为条件为 false，我会执行')

}




### if else if ... 语句

![](C:\gitbook\firstweek\images_2\图片16(1).png)

- 可以通过 `if` 和 `else if` 来设置多个条件进行判断

- 语法：`if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }`

- 会从头开始依次判断条件

- 如果第一个条件为 `true` 了，那么就会执行后面的 `{}` 里面的内容
- 如果第一个条件为 `false`，那么就会判断第二个条件，依次类推

- 多个 `{}` ，只会有一个被执行，一旦有一个条件为 `true` 了，后面的就不在判断了

```javascript
// 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
if (true) {
  	alert('我是代码段1')
} else if (false) {
	alert('我是代码段2')           
}

// 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了，就不会继续判断了
if (true) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 false，最终什么也不会发生
// 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
}

if else if … else 语句

和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
} else {
  	alert('我是代码段3')
}

SWITCH 条件分支结构（重点）

switch 语句也是多分支语句(条件判断语句)，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch

是对于某一个变量的判断

语法：

switch (要判断的变量) {
  case 情况1:
    情况1要执行的代码
    break
  case 情况2:
    情况2要执行的代码
    break
  case 情况3:
    情况3要执行的代码
    break
  default:
    上述情况都不满足的时候执行的代码
}

要判断某一个变量等于某一个值得时候使用

例子🌰：根据变量给出的数字显示是星期几

var week = 1
switch (week) {
  case 1:
    alert('星期一')
    break
  case 2:
    alert('星期二')
    break
  case 3:
    alert('星期三')
    break
  case 4:
    alert('星期四')
    break
  case 5:
    alert('星期五')
    break
  case 6:
    alert('星期六')
    break
  case 7:
    alert('星期日')
    break
  default:
    alert('请输入一个 1 ～ 7 之间的数字')
}

switch ：开关转换， case ：小例子选项

关键字 switch 后面括号内可以是表达式或值，通常是一个变量

关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号

switch 表达式的值会与结构中的 case 的值做比较

如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

switch 语句和 if else if 语句的区别

一般情况下，它们两个语句可以相互替换

switch...case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)

switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。

当分支比较少时，if… else语句的执行效率比 switch语句高。

当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

三元运算（扩展）

三元运算，就是用两个符号组成一个语句

三元运算只是对 if else 语句的一个简写形式

语法：条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')

函数

函数的概念

对于 js 来说，函数就是把任意一段代码放在一个盒子里面

在我想要让这段代码执行的时候，直接执行这个盒子里面的代码就行

函数定义阶段

定义阶段就是我们把代码放在盒子里面

我们就要学习怎么放进去，也就是书写一个函数

我们有两种定义方式声明式和赋值式

声明式

使用 function 这个关键字来声明一个函数

语法：

function fn() {
  // 一段代码
}
// function: 声明函数的关键字，表示接下来是一个函数了
// fn: 函数的名字，我们自己定义的（遵循变量名的命名规则和命名规范）
// (): 必须写，是用来放参数的位置（一会我们再聊）
// {}: 就是我们用来放一段代码的位置（也就是我们刚才说的 “盒子”）

赋值式

其实就是和我们使用 var 关键字是一个道理了

首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量就可以了

语法：

var fn = function () {
  // 一段代码
}
// 不需要在 function 后面书写函数的名字了，因为在前面已经有了

函数的参数（重点）

我们在定义函数和调用函数的时候都出现过 ()

现在我们就来说一下这个 () 的作用

就是用来放参数的位置

参数分为两种行参和实参

// 声明式
function fn(行参写在这里) {
  // 一段代码
}

fn(实参写在这里)

// 赋值式函数
var fn = function (行参写在这里) {
  // 一段代码
}
fn(实参写在这里)

行参和实参的作用

行参

就是在函数内部可以使用的变量，在函数外部不能使用

每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）

多个单词之间以 , 分隔

// 书写一个参数
function fn(num) {
  // 在函数内部就可以使用 num 这个变量
}

var fn1 = function (num) {
	// 在函数内部就可以使用 num 这个变量
}

// 书写两个参数
function fun(num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

var fun1 = function (num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是 undefined

行参的值是在函数调用的时候由实参决定的

实参

在函数调用的时候给行参赋值的

也就是说，在调用的时候是给一个实际的内容的

function fn(num) {
  // 函数内部可以使用 num 
}

// 这个函数的本次调用，书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100) 

// 这个函数的本次调用，书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)

函数内部的行参的值，由函数调用的时候传递的实参决定

多个参数的时候，是按照顺序一一对应的

function fn(num1, num2) {
  // 函数内部可以使用 num1 和 num2
}

// 函数本次调用的时候，书写的参数是 100 和 200
// 那么本次调用的时候，函数内部的 num1 就是 100，num2 就是 200
fn(100, 200)

参数个数的关系

行参比实参少

因为是按照顺序一一对应的

行参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值

function fn(num1, num2) {
  // 函数内部可以使用 num1 和 num2
}

// 本次调用的时候，传递了两个实参，100 200 和 300
// 100 对应了 num1，200 对应了 num2，300 没有对应的变量
// 所以在函数内部就没有办法依靠变量来使用 300 这个值
fn(100, 200, 300)

行参比实参多

因为是按照顺序一一对应的

所以多出来的行参就是没有值的，就是 undefined

function fn(num1, num2, num3) {
  // 函数内部可以使用 num1 num2 和 num3
}

// 本次调用的时候，传递了两个实参，100 和 200
// 就分别对应了 num1 和 num2
// 而 num3 没有实参和其对应，那么 num3 的值就是 undefined
fn(100, 200)

函数的return

return 返回的意思，其实就是给函数一个返回值和终断函数

终断函数

当我开始执行函数以后，函数内部的代码就会从上到下的依次执行

必须要等到函数内的代码执行完毕

而 return 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行

function fn() {
  console.log(1)
  console.log(2)
  console.log(3)
  
  // 写了 return 以后，后面的 4 和 5 就不会继续执行了
  return
  console.log(4)
  console.log(5)
}

// 函数调用
fn()

返回值

函数调用本身也是一个表达式，表达式就应该有一个值出现

现在的函数执行完毕之后，是不会有结果出现的

// 比如 1 + 2 是一个表达式，那么 这个表达式的结果就是 3
console.log(1 + 2) // 3

function fn() {
  // 执行代码
}

// fn() 也是一个表达式，这个表达式就没有结果出现
console.log(fn()) // undefined

return 关键字就是可以给函数执行完毕一个结果

function fn() {
  // 执行代码
  return 100
}

// 此时，fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

函数的优点

函数就是对一段代码的封装，在我们想调用的时候调用

函数的几个优点

封装代码，使代码更加简洁

复用，在重复功能的时候直接调用就好

代码执行时机，随时可以在我们想要执行的时候执行

预解析（重点）

预解析其实就是聊聊 js 代码的编译和执行

js 是一个解释型语言，就是在代码执行之前，先对代码进行通读和解释，然后在执行代码

也就是说，我们的 js 代码在运行的时候，会经历两个环节解释代码和执行代码

解释代码

因为是在所有代码执行之前进行解释，所以叫做预解析（预解释）

需要解释的内容有两个

声明式函数

在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数

var 关键字

在内存中先声明有一个变量名

看下面一段代码

fn()
console.log(num)

function fn() {
  console.log('我是 fn 函数')
}

var num = 100

经过预解析之后可以变形为

function fn() {
  console.log('我是 fn 函数')
}
var num

fn()
console.log(num)
num = 100

赋值式函数会按照 var 关键字的规则进行预解析

作用域（重点）

什么是作用域，就是一个变量可以生效的范围

变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域

全局作用域

全局作用域是最大的作用域

在全局作用域中定义的变量可以在任何地方使用

页面打开的时候，浏览器会自动给我们生成一个全局作用域 window

这个作用域会一直存在，直到页面关闭就销毁了

// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的
var num = 100
var num2 = 200

局部作用域

局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域

在局部作用域中定义的变量只能在这个局部作用域内部使用

在 JS 中只有函数能生成一个局部作用域，别的都不行

每一个函数，都是一个局部作用域

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100

function fn() {
  // 下面这个变量就是一个 fn 局部作用域内部的变量
  // 只能在 fn 函数内部使用
  var num2 = 200
}

fn()

变量使用规则（重点）

有了作用域以后，变量就有了使用范围，也就有了使用规则

变量使用规则分为两种，访问规则和赋值规则

作用域链访问规则

当我想获取一个变量的值的时候，我们管这个行为叫做访问

获取变量的规则：

首先，在自己的作用域内部查找，如果有，就直接拿来使用

如果没有，就去上一级作用域查找，如果有，就拿来使用

如果没有，就继续去上一级作用域查找，依次类推

如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量 is not defined）

var num = 100

function fn() {
  var num2 = 200
  
  function fun() {
    var num3 = 300
    
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
  }
  
  fun()
}

fn()

变量的访问规则也叫做作用域的查找机制

作用域的查找机制只能是向上找，不能向下找

function fn() {
  var num = 100
}
fn()

console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

赋值规则

当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值

变量赋值规则：

先在自己作用域内部查找，有就直接赋值

没有就去上一级作用域内部查找，有就直接赋值

还没有再去上一级作用域查找，有就直接赋值

如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值

function fn() {
  num = 100
}
fn()

// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100

递归函数

什么是递归函数

在编程世界里面，递归就是一个自己调用自己的手段

递归函数：一个函数内部，调用了自己，循环往复

// 下面这个代码就是一个最简单的递归函数
// 在函数内部调用了自己，函数一执行，就调用自己一次，在调用再执行，循环往复，没有止尽
function fn() {
  fn()
}
fn()

其实递归函数和循环很类似

需要有初始化，自增，执行代码，条件判断的，不然就是一个没有尽头的递归函数，我们叫做死递归

简单实现一个递归

我们先在用递归函数简单实现一个效果

需求：求 1 至 5 的和

先算 1 + 2 得 3

再算 3 + 3 得 6

再算 6 + 4 得 10

再算 10 + 5 得 15

结束

开始书写，写递归函数先要写结束条件（为了避免出现 “死递归”）

function add(n) {
  // 传递进来的是 1
  // 当 n === 5 的时候要结束
  if (n === 5) {
    return 5
  }
}

add(1)

再写不满足条件的时候我们的递归处理

function add(n) {
  // 传递进来的是 1
  // 当 n === 5 的时候要结束
  if (n === 5) {
    return 5
  } else {
    // 不满足条件的时候，就是当前数字 + 比自己大 1 的数字
    return n + add(n + 1)
  }
}
add(1)

对象

简单了解对象

对象是一个复杂数据类型

其实说是复杂，但是没有很复杂，只不过是存储了一些基本数据类型的一个集合

var obj = {
  num: 100,
  str: 'hello world',
  boo: true
}

这里的 {} 和函数中的 {} 不一样

函数里面的是写代码的，而对象里面是写一些数据的

对象就是一个键值对的集合

{} 里面的每一个键都是一个成员

也就是说，我们可以把一些数据放在一个对象里面，那么他们就互不干扰了

其实就是我们准备一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据

创建一个对象

字面量的方式创建一个对象

// 创建一个空对象
var obj = {}

// 像对象中添加成员
obj.name = 'Jack'
obj.age = 18

内置构造函数的方式创建对象

// 创建一个空对象
var obj = new Object()

// 向对象中添加成员
obj.name = 'Rose'
obj.age = 20

Object 是 js 内置给我们的构造函数，用于创建一个对象使用的

对象的基本操作

点语法

对象.属性名 =对应的属性值
  var obj ={
            name :'ikun',
            100:'两年半',
            '@':'123'
         }
         console.log(obj)
    增：obj.age =18
    删：delete.obj.name
    改：obj.age='80'
    查：consloe.log(obj.name)

中括号语法


对象['属性名']
    var obj={
            name :'ikun',
        }
        console.log('源对象',obj)
        obj.age=18
        console.log('现对象',obj)

    增：obj[age] =18
    删：delete.obj[name]
    改：obj[age]='80'
    查：consloe.log(obj[name])

区别

两种语法的差别

如果对象的属性名是符合变量的命名规范的话 ,那么这两种语法没有任何差异

如果操作一些不符合变量的命名规范的属性名的时候, 更多的场景需要使用中括号语法

如果你要用的是变量 , 那么也需要使用中括号语法

for in 循环遍历对象

       // 循环遍历对象
       // for in
       var obj ={
           name:'1530',
           age:'sex',
           str:'qwe',
       }
       // for( var k in obj){
       //     console.log(k,obj[k]);
       // }
       console.log(obj.age)
       console.log(obj["str"])

  //  对象的基本操作
        //  
        // 前置：对象对于 key/属性名/键的要求
        // 1.推荐书写属性名参考变量的命名规范
        // 2.可以使用纯数字当成属性名
        // 3.可以使用特殊符号#@ 但是需要使用 引号包裹


        //  var obj ={
        //     name :'ikun',
        //     100:'两年半',
        //     '@':'123'
        //  }
        //  console.log(obj)
        
        // 基本操作：增删改查
        //   分为两种语法
        // 1.点语法
        // 2.中括号语法（数组语法）
        // 1.点语法
        var obj={
            name :'ikun',
        }
        console.log('源对象',obj)
        obj.age=18
        console.log('现对象',obj)
        // 增 ：  对象.属性名=对应的属性值

        // obj.age =18
        // 删   delete.obj.name    要删除的属性名
        // 改   对象.要修改的属性名 =新的属性值
        // obj.name ='新属性值'
        // // 查 对象.要查的属性名
        // consloe.log(obj.name)
        // console.log(obj)



    //  2.中括号语法
    //  obj['属性名']
    // 增 => 对象['新属性名'] =对应的属性值
    // obj ['age']=18
    // 删 => delete 对象[要删除的属性名]
    // delete obj['属性名']
    // 改 = > 对象[要修改的属性名] =新的属性值
    // obj['要修改的属性名'] ='新的属性值'
    // 查 => 对象[要查询的属性名]
    // consloe.log(obj['name'])


    // 两种语法的差别
    // 如果对象的属性名 是符合变量的命名规范的话 ,那么这两种语法没有任何差异
    //  如果操作一些 不符合变量的命名规范的属性名的时候, 更多的场景需要使用 中括号语法

    //  如果你要 用的是 变量 , 那么也需要使用中括号语法
    



    
    console.log(obj.str)
        /**
         *  对象的 点语法 后续跟的内容, 会自动转换为 一个 字符串
         * 
         *      也就是说, obj.str   他不会将 str 当成一个变量, 而是一个 字符串
         *      所以会去对象 obj 中寻找一个 属性名 位 str 的键值对
         *      但是当前对象中没有这个属性, 所以返回一个 undefined
        */

        console.log(obj[str])
        /**
         *  对象的 中括号语法内可以书写变量
         * 
         *  在查找的时候, 会先将 str 转换为 对应的值, 也就是一个 字符串类型 name
         * 
         *  所以会去这个对象中, 查找一个 属性名位 name 的键值对
         * 
         *      因为对象中有一个 属性名位 name 的键值对, 对应的属性值为 'QF001'
        */

数组

什么是数组？

字面理解就是数字的组合

其实不太准确，准确的来说数组是一个数据的集合

也就是我们把一些数据放在一个盒子里面，按照顺序排好

[1, 2, 3, 'hello', true, false]

这个东西就是一个数组，存储着一些数据的集合

数据类型分类

number / string / boolean / undefined / null / object / function / array / ...

数组也是数据类型中的一种

我们简单的把所有数据类型分为两个大类基本数据类型和复杂数据类型

基本数据类型： number / string / boolean / undefined / null

复杂数据类型： object / function / array / ...

创建一个数组

数组就是一个 []

在 [] 里面存储着各种各样的数据，按照顺序依次排好

字面量创建一个数组

直接使用 [] 的方式创建一个数组

// 创建一个空数组
var arr1 = []

// 创建一个有内容的数组
var arr2 = [1, 2, 3]

内置构造函数创建数组

使用 js 的内置构造函数 Array 创建一个数组

// 创建一个空数组
var arr1 = new Array()

// 创建一个长度为 10 的数组
var arr2 = new Array(10)

// 创建一个有内容的数组
var arr3 = new Array(1, 2, 3)

数组的 length

length: 长度的意思

length 就是表示数组的长度，数组里面有多少个成员，length 就是多少

// 创建一个数组
var arr = [1, 2, 3]

console.log(arr.length) // 3

数组的索引

索引，也叫做下标，是指一个数据在数组里面排在第几个的位置

注意：在所有的语言里面，索引都是从 0 开始的

在 js 里面也一样，数组的索引从 0 开始

// 创建一个数组
var arr = ['hello', 'world']

上面这个数组中，第 0 个数据就是字符串 hello，第 1 个数据就是字符串 world

想获取数组中的第几个就使用数组[索引] 来获取

var arr = ['hello', 'world']

console.log(arr[0]) // hello
console.log(arr[1]) // world

循环遍历数组

  // 遍历数组
        var arr = [100,200,300,400,500]
        for(var k in arr){
            console.log(k,arr[k])
        }