【前端】JavaScript学习笔记（Part1）

前言

• 该笔记是学习 黑马Pink老师的JavaScript基础课程所记录的，纯手码~若对您有帮助，请给个赞，谢谢！
• 相关视频：黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门
• 课程相关代码已上传到个人Github，如有需要请自取：Github版JavaScript笔记和代码

各章节笔记对应链接：

【前端】JavaScript学习笔记（Part1）

【前端】JavaScript学习笔记（Part2）

JavaScipt笔记

1 数据类型

1. JS的变量数据类型，是在程序运行时，根据等号右边的值确定的

2. JS是动态语言，变量数据类型可以变化

简单数据类型：Number,String,Boolean,Undefined,Null

复杂数据类型：object

1.1 数字型

1. 八进制前是0
2. 十六进制前是0x
3. js中数字型的最大和最小值

alert(*Number*.MAX_VALUE);
alert(*Number*.MIN_VALUE);

4. Infinity - 无穷大， -Infinity - 无穷小

console.log(*Number*.MAX_VALUE * 2);
console.log(-*Number*.MAX_VALUE * 2);

5. NaN - 代表非数值，如：console.log(x - 10);

6. isNaN() —— 用来判断一个变量是否为非数字的类型，不是数字类型返回 true、是数字返回 false

1.2 字符串型string

1. 建议使用单引号
2. 引号嵌套规则（内单外双、内双外单）
3. 转义字符（要写到引号中），如下：

4. 字符串长度 .length;

5. 字符串拼接：字符串 + 任何类型 = 拼接之后的新字符串

1.3 布尔型Boolean

true 的值为 1 ，false 的值为 0

1.4 Undefined 和 Null

Undefined —— 未定义数据类型

• 直接输出为Undefined
• 可与字符串相连
• 与数字相加，输出NaN

null ——空值

• 可与字符串相连
• 与数字相加，null当0

1.5 获取数据类型

typeof num，如下：

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

注：null是object类型，对象的时候再学

1.6数据类型转换

prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

• 转换为字符串

  1. toString() ：num.toString();
  2. String() 强制转换： String(num);
  3. 加号拼接字符串

• 转换为数值型（1、2为重点）

  1. parseInt(string) ——将string类型 转换为 整型
     • 可自动去除单位，如 parseInt('120px')=120
     • 若是数字前的字母则不行
  2. parseFloat(string) ——将string类型 转换为 浮点型
  3. Number(string) —— 将string型转换为数值型
  4. js 隐式转换（- * /） —— 加法没有隐式转换
     • 如 '12' - 0 = 12 （数值型）

• 转换为布尔型：Boolean() 函数

  • 代表空、否定的值会被转换为 false ，如 ‘’0、NaN、null、undefined
  • 其余值都会被转换为 true

2 运算符

2.1 浮点数精度问题

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

注意：尽量不使用浮点数进行直接计算，不能直接拿浮点数判断相等

2.2 比较运算符

== 会默认转换数据类型，会把字符串型转换为数字型

=== —— 全等于（值 和 数据类型 都一致）

!== —— 不全等

2.3 逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

&& —— 与， | | —— 或， ！—— 非

2.3.1 短路运算（逻辑中断）

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

1. 逻辑与
   • 语法： 表达式1 && 表达式2
   • 如果第一个表达式的值为真，则返回表达式2
   • 如果第一个表达式的值为假，则返回表达式1
2. 逻辑或
   • 语法： 表达式1 || 表达式2
   • 如果第一个表达式的值为真，则返回表达式1
   • 如果第一个表达式的值为假，则返回表达式2

注意：逻辑中断很重要

3 流程控制

3.1 分支流程控制

1. switch语句

2. if / if- else / if - else if -else 语句

3. 三元表达式： 表达式1 ? 表达式2 : 表达式3;

3.2 循环结构

1. for 循环
2. while 循环
3. do...while 循环

注意：

• continue ——跳出本次循环
• break —— 跳出当前循环体

断点调试：

1. 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，
2. 出错的话，调试到出错的代码行即显示错误，停下。
3. 断点调试可以帮我们观察程序的运行过程
4. 浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
5. Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
6. F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

4 命名规范

1.变量、函数的命名必须要有意义

• 变量的名称一般用名词
• 函数的名称一般用动词

5 数组

JS 中创建数组有两种方式：

1. 利用 new 创建数组
   • var 数组名 = new Array() ;
   • 注意A大写，学完对象再看
2. 利用数组字面量创建数组
   • var 数组名 = [];
   • var 数组名 = ['小白','小黑','大黄','瑞奇'];
3. 数组的字面量是方括号 [ ]
   声明数组并赋值称为数组的初始化

注：数组中可以存放任意类型的数据，如字符串，数字，布尔值等（不限制同一种）

如：var arrStus = ['小白',12,true,28.9];

4. 使用数组名.length可以访问数组元素的数量（数组长度）

5.1 数组新增元素

1.通过修改 length 长度新增数组元素（length 属性是可读写的）

• 新空间没有给值，就是声明变量未给值，默认值就是 undefined

2.通过修改数组索引新增数组元素（常用），如：

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

6 函数

1.声明函数（函数名一般为动词）

//语法:
function 函数名()  {
	//函数体代码
}

2.形参：不用声明的变量

//语法:
function getSum(num1, num2) {
	console.log(num1 + num2);
}

注意：

• 在JavaScript中，形参的默认值是undefined（若传入实参个数少于形参，多的形参定义为undefined，结果为NaN）

• 形参的个数可以和实参个数不匹配，但是结果不可预计，使用时尽量要匹配

3.return 语句返回值（若函数没有 return ，返回的值是 undefined）

• return 只能返回一个值，如果用逗号隔开多个值，以最后一个为准；

4.arguments的使用（当我们不确定有多少个参数传递的时候，可以用 arguments 来获取；所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。）

arguments展示形式是一个伪数组：

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法

自定义函数（命名函数）- 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

5.函数表达式方式（匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function() {...};
// 调用的方式，函数调用必须写到函数体下面
fn();

• 因为函数没有名字，所以也被称为匿名函数
• 这个 fn 里面存储的是一个函数
• 函数表达式方式原理跟声明变量方式是一致的
• 函数调用的代码必须写到函数体后面

6.1 作用域

1.全局作用域 —— script中或整个JS文件

2.局部作用域（函数作用域）—— 函数内

3.JS 没有块级作用域

6.2变量作用域

1.在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下 var 声明的变量 是全局变量
• 特殊情况下，在函数内不使用 var 声明、直接赋值的变量也是全局变量（不建议使用）

2.在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

6.3 预解析

JS 代码是由浏览器中的 JS 解析器来执行的。JS 解析器在运行 JS 代码的时候分为两步：预解析和代码执行。

1. 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
2. 代码执行： 从上到下执行JS语句。

预解析只会发生在通过 var 定义的变量和 function 上。

6.3.1 变量预解析（变量提升）

变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

6.3.2 函数预解析（函数提升）

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数