尚硅谷 JavaScript 基础课笔记

JayyyyW

已于 2022-06-07 22:03:04 修改

阅读量269

点赞数

文章标签： javascript 前端开发语言

于 2022-05-23 10:41:27 首次发布

本文链接：https://blog.csdn.net/weixin_43285205/article/details/124922939

版权

简介

JavaScript 包含三个部分：ECMAScript是JavaScript的标准、DOM用来操作网页、BOM用来操作浏览器。

JS 特点：

解释型语言
类似C和Java语法结构
动态语言
基于原型的面向对象

JS 编写位置：

在标签的 onclick 属性中。（前两种是卸载标签属性中，不推荐）
在超链接的 href 里。会用<a href="javascript:;">xx</a>来实现超链接只可以点击而不跳转。
在script标签里写，代码会立即执行
外部文件，这样引入：<script type="text/javascript" src="./xx/xx.js"></script>。这样可以在不同页面引用，也可以利用浏览器的缓存机制。注意不能在这个引入的script标签里写代码。

JS 基本语法：

js注释:
- 多行注释/* */
- 单行注释//
严格区分大小写。
每一条语句以分号结尾，如果不写分号浏览器会自动添加（消耗系统资源），而有的时候浏览器会加错分号，所以一定要写分号。
自动忽略多个空格和换行。

字面量、变量、标识符、转义字符

字面量：不可改变的值，比如12345，可以直接使用的，一般不使用。

变量：用来保存字面量，变量可以随意改变。

使用 var 关键字来声明变量

标识符：所有可以自主命名的都可以称为标识符，例如变量名、函数名、属性名，可以含有字母数字下划线和$，不能以数字开头，不可以是ES中的关键字和保留字。建议用驼峰命名法。

因为JS底层保存标识符用的是Unicode编码，所以所有的utf-8中的内容都可以作为标识符。

常用的转义字符：\'和\"表示引号，\n 换行，\t 制表符， \\表示\

数据类型

js有六种：String，Number，Boolean，Null，Undefined，Object

其中前5种是基本数据类型，Object是引用数据类型。使用 typeof 来检查变量类型。

String：

使用单双引号都可以，但别混着用。

Number：

包括整数、浮点数
最大值为 Number.MAX_VALUE，如果Number的数字超过了最大值，则系统会返回一个Infinity，即正无穷。
零以上的最小值为 Number.MIN_VALUE，注意这是一个小数，理解为无限正向接近 0。
正无穷 Infinity 是字面量，数据类型是Number。有-Infinity。
NaN 是一个特殊的数字，数据类型是Number，表示 Not a Number 不是数字。
如果使用 JS 进行浮点元素运算，可能会得到一个不精确的结果，例如0.1 + 0.2 可能算到 0.300000000000000000004，多一个小尾巴。这是大多数编程语言存在的通病，因此不要用JS去进行对精确度要求很高的计算！

Boolean：

布尔值有两个：true 和 false。用于逻辑判断。

Null：

只有一个值就是 null，表示一个空的对象。使用 typeof 判断 null 结果是 Object

Undefined：

只有一个值就是 Undefined，当给一个变量声明却不赋值时，值就是Undefined

强制类型转换：

其他转 String：
- 方法一：toString()，比如var a = 123; a = a.toString(); 除了 null 和 undefined 都可以转字符串。
- 方法二：调用 String() 函数，并将被转换的数据作为参数传递给函数，比如 var a = 123; a = String(a); null 和 undefined 也可以用这个方法转为字符串。对于 Number 和 Boolean 用 String() 实际上就是在调用 toString() ，而其他两个是直接转换为字符串。
其他转 Number：
- 方法一：调用 Number() 函数。
  - 字符串转数字。比如 var a = "123"; a = Number(a); 如果字符串不是纯数字，则转换为 NaN。如果是空字符串或则和都是空格的字符串，则转换为 0。
  - 布尔转数字。true 转 1，false 转 0。
  - 其他转数字。null 转 0，undefined 转 NaN。
- 方法二：专门对付字符串的方法，parseInt()、parseFloat()
  - parseInt “智能”提取整数，比如 var a = "123px"; a = parseInt(a); 结果 a = "123"。原理：parseInt 会把字符串中有效的整数内容取出来。
  - parseFloat 同理，可以 “智能”提取有效的浮点数内容，比如 var a = "123.456.789px"; a = parseInt(a); 结果 a = "123.456"。
  - 对于 null 和 undefined 使用这两个函数时，会被先转为字符串，然后返回 NaN。
其他转 Boolean：
- 使用 Boolean() 函数。
  - 数字转布尔。除了 0 和 NaN 转出来是 false 之外，其他任何数字（包括最大值、无穷、负数、浮点数等）转出来都是 true。
  - 字符串转布尔。除了空字符串是 false，其余（包括只有空格的字符串）都是 true。
  - null 和 undefined 转布尔，结果都是 false。
  - 对象转布尔，结果是 true。

隐式类型转换：

任意数据类型转字符串：任意数据类型 + 空字符串（即""）。比如 123 + "" = "123"，true + "" = "true"。原理：任意数据类型和字符串相加，会先自动转换为字符串再相加。本质：浏览器自动调用了 String() 方法。
任意数据类型转数字（利用算术运算符）：任意数据类型 - 0 或 *1 或 /1。比如 "123" - 0 = 123，"123" * 1 = 123，"123" / 1 = 123。原理：除了加法之外，其他运算规律下，其它数据类型会自动转为数字再运算。本质：浏览器自动调用了 Number() 方法。
任意数据类型转数字（利用一元运算符，更简单常用）：+任意数据类型。比如 a = "123"; a = +a; 结果 a = 123。本质也是调用了 Number() 方法。
任意数据类型转布尔（利用逻辑运算符!）：!!任意数据类型。比如 a = 10; a = !!a; 结果 a = true。
坑点注意：1 + "2" + 3 = "123"、1 + +"2" + 3 = 6 。后者是有个一元运算符+把字符串隐式转换了。

其他进制的数字：

16 进制用 0X 开头，比如 a = 0x10; console.log(a); 结果是16（在输出时会自动变为十进制数字）。
8 进制用 0 开头。
2 进制用 0b 开头，并不是所有浏览器都支持二进制，比如 ie 就不支持。
注意：像 '070' 这种字符串，在使用强转数字时，不同浏览器可能会识别为不同的进制，有的会当做八进制，有的当作十进制。解决方法：可以在 parseInt 中传递第二个参数，指定数字的进制，比如 a = parseInt(a,10); 就是指定 a 为十进制。

运算符

运算符也叫操作符，通过运算符可以对一个或多个值进行运算，并获取运算结果，比如 typeof 就是运算符，获得一个值的类型，并以字符串的形式返回。

算术运算符 +、-、*、/、%：

当对非 Number 类型运算时，会自动转换。比如 true + false + 1 = 2，2 + null = 2。
任何值和 NaN 做运算，结果都为NaN。比如 123 + NaN = NaN。
两个字符串相加会拼接，比如 "123" + "hello“ = ”123hello“
任何值和字符串相加，会先转为字符串，再拼接，比如 123 + "1“ = ”1231“，true + "hello“ = ”truehello“。（这也是隐式转换的原理）
除了加法之外，其他运算规律下，其它数据类型会自动转为数字。比如 100 - '1' = 99, 100 - true = 99， 2 * ”8“ = 16，2 * undefined = NaN（undefined 先转为数字 NaN），2 * null = 0。（这也是隐式转换的原理）
% 取模，即取余数。

一元运算符：

正号 +。不会对数字产生任何影响，比如 a = 123; a = +a; 结果 a = 123。
负号 -。对数字进行取反，比如 a = 123; a = -a; 结果 a = -123。
对于非 Number 值，正负号会先转换为 Number 再运算。可以利用这个特性，对其它类型使用+，将其转换为数字。

自增和自减：

++a 和 a++的区别：a++在函数括号里先取值（先使用a），再计算，后者先计算再取值。
来一个坑：d = 20; result = d++ + ++d + d; console.log(result); 求问结果？结果是64。分析：事实上是20+22+22=64，第一个d是20，console.log函数里先取值再计算的原则所以第一个数是20，第二个和第三个d都是自增了两次，所以是22。
再来一个坑：d = 20; d = d++; console.log(d); 求问结果？结果是20。分析：d=d++ 相当于给d赋值了两次，第一次是21，第二次是根据先取值的原理，d = 20。

逻辑运算符：

！非
- 对一个布尔值进行取反操作。
- 对非布尔值进行取反，则会先转换为布尔值再取反。
- 进行两次取反，就负负得正了。利用这一点进行隐式转换。
&& 与
- 只要有一个 false，结果就是 false。
- js 的与运算是会“短路的”：如果第一个值为 false，系统不会取判断第二个值。
|| 或
- 只要有一个 true，结果就是 true。
- js 的或运算是会“短路的”：如果第一个值为 true，系统不会取判断第二个值。
对非布尔值进行与或运算，会先转换为布尔值再运算，最后返回原值。
- 与运算中
  - （罗嗦一点的规则）如果两个值都是 true 则返回第二个，比如 1 && 2 = 2，2 && 1 = 1。如果两个值有一个是false 则返回 false 的值。如果两个值都是 false 则返回第一个，比如 0 && NaN = 0，NaN && 0 = NaN。
  - （简单一点的规则）如果第一个值是 true 则返回第二个，如果第一个值是 false 则返回第一个。
- 或运算中
  - 如果第一个值是 true 则返回第一个，如果第一个值是 false 则返回第二个。

赋值运算符：=、 +=、 -=、 *=、 /=。

关系运算符：

对于数值来说，> < >= <= 就不用多说了，返回一个布尔值。
对于非数值，会将非数值转换成数字再比较，比如（结果都是 true） 1 >= true, 1 > "0", 10 > null, true > false。
特殊的，
- 任何值和 NaN 比较都是 false，比如（结果都是 false）10 > NaN, 10 > "hello"。
- 如果比较双方都是字符串时，不会转成数字再比，而是分别比较字符串中字符的Unicode编码，具体规则是一位一位进行比较，如果两位一样就比较下一位。比如 "a" < "b" 是 true，"bac" < "bb" 是 true（因为先比第一位，比不出来就比第二位），"11" < "5" 是 true（咋一看好像11比5大，然而字符串要一位一位比，所以1和5比5的Unicode编码更大）。ps：
  - 可以利用此特性来对英文进行排序，比如 "abc" < "bcd"。
  - 在比较两个字符串型数字时，一定一定要先转型！比如 "11" 和 "5" 比较时，可以这样： "11" < +"5" 是true。

相等运算符（属于关系运算符）：

对于非数值，会将非数值转换成数字再比较。
null == undefined 是 true，因为undefined 是 null 衍生出来的。
NaN 和谁比都是 false，包括自己，即 NaN == NaN 是 false。因此判断是否为NaN，只能用函数 isNaN()。
=== 全等，!==全不等。不做类型转换，直接判断，比如"123" == 123 是对的，"123" === 123 是不对的， null === undefined 是不对的。

条件运算符（也叫三元运算符）。语法：条件语句?语句1:语句2;

语句

代码块：{}中的几个语句成为一个~，~中的语句要么一起起作用，要么一起不起作用。~只起到分组的作用，其他没有用途，{}外面也是可以访问到{}里面的代码的。

语句分类

条件判断语句 if
条件分支语句 switch
- 语法。switch(条件表达式){case 表达式:...;break;...;case 表达式:...;break;default:...;break;}
- 注意，switch 轮流对 case 后的表达式和条件表达式进行的是全等比较。
循环语句 while、do while、for
break 用于退出 switch 或跳过当前整个循环。
- 一般来说是结束最近的循环
- 可以用创建 label（标识，不一定要写label，写啥字母都行）的方式来结束指定的循环。语法是 label:循环语句，并在 break 后加上 label。例如：
```
outer:
for(var i = 0; i<5; i++){
    for(var j = 0; j<5; j++){
        break outer;
    }
}
```
  这样一来，循环就会 break 在最外层。
continue 用于跳过当次循环（默认也是最近的循环）。

对象 Object

为什么需要对象？---对象是JS中的引用数据类型，而 Number String Boolean Null Undefined 是基本数据类型。基本数据类型都是单一的值，比如"hello"、123、true等，值和值之间没有任何联系。而对象是一种复合的数据类型，可以保存多个不同数据类型的属性。

对象的分类：

内建对象
- 由ES标准中定义的对象，在任何ES的实现中都可以使用
- 比如 Math String Number Boolean Function Object......
宿主对象
- 由JS的运行环境提供的对象，目前来讲主要指的是浏览器提供的对象
- 比如 BOM DOM
自定义对象（最重要）
- 由开发人员自己创建的对象

对象的基本操作：

创建对象
- 使用 new 关键字调用的函数是构造函数，构造函数时专门用来创建对象的函数
```
var obj = new Object();
```
- 保存的值是属性
```
obj.name = "Jay";
obj.age = 16;
```
- 如果读取对象中没有的属性，不会保存而是返回 undefined
删除属性
```
delete obj.name
```