1.JavaScript基础-基本概念
1.1、什么是JavaScript？
JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)。
解释型语言：程序执行之前，不需要编译就可以直接运行, 运行时再边解析边执行的语言
编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件。（C、JAVA、C++）
为什么JS不需要编译就可以直接执行？同浏览器的工作原理有关，浏览器中有”JS解析器“模块。
1.2、JavaScript作用和组成
（1）javascript作用
HTML 提供网页上显示的内容（结构——车架）
CSS 美化网页（样式——车样式）
JavaScript 控制网页行为（行为——发动机）
（2）javascript发展史
JavaScript起源于Netscape（网景）公司的LiveScript语言
- 1994年网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
- 1995年为了解决表单有效性验证就要与服务器进行多次地往返交互问题，网景公司录用Brendan Eich(布兰登·艾奇)，他在 10 天内开发出 LiveScript 语言
- 在 Netscape Navigator 2.0 即将正式发布前，为了推广LiveScript 语言，Netscape 将LiveScript 更名为 JavaScript， 目的是为了蹭Java的热度。
- 所以Java和 JavaScript之间的关系就像老婆和老婆饼一样
（3）javascript组成
a 、ECMAScript：JavaScript的语法标准
- ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会
- ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容（常量、循环等）
- JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
b、DOM(Document Object Model)：JavaScript操作网页上的元素(标签)的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
c、BOM(Browser Object Model)：JavaScript操作浏览器的部分功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
1.3、javascript书写格式
和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
JavaScript书写格式
1.行内样式：写在标签内部
<div onclick="alert('666')">woshidiv</div>
2.内嵌样式（内联样式）：写在一对head标签中
<head>
<script>
alert('777');
</script>
</head>
HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
3.外链样式：写在一个单独的.js文件中，再导入进来
<script src="01.JavaScript书写格式.js"></script>
和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离
1.4、Javascript书写格式注意点
1.不推荐直接将JavaScript代码书写到标签的内部
2.默认情况下，浏览器会从上至下的解析网页，所以如果将JavaScript写到一对head标签中，并且需要通过JavaScript代码操作界面上的元素，那么就不能直接书写JavaScript代码，否则无效。
- 2.1、如果想将JavaScript写到一对head标签中，并且需要在JavaScript代码中操作界面上的元素，那么必须加上window.onload = function () { 操作界面元素的JavaScript }（不推荐）
- 2.2、window.onload含义：等到界面上所有的内容加载完毕再执行大括号中的代码。
- 2.3、由于默认情况下浏览器会从上至下的解析网页，所以如果想通过JavaScript操作界面上的元素只需要等到元素被加载解析之后操作就可以了，所以我们还可以将JavaScript代码写到body结束标签的前面
3.如果通过外链式导入.js文件，并且需要在.js文件中操作界面上的元素，那么如果是在head标签中导入的，必须在.JS文件中加上window.onload 。如果是在body结束标签前面导入的那么就不用添加window.onload 。
4.如果需要在一对script标签中编写JavaScript代码，那么就不能同时通过此script标签再导入其它的.js文件，否则书写的JavaScript代码无效
<script type="text/javascript" src="01-js书写格式.js"> alert("hello world"); // 不会被执行 </script>
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度
1.5、JS中的常见输出方式
1.通过弹窗的形式来输出
alert(需要输出的内容);一个确认按钮
confirm(需要输出的内容);一个确认按钮和一个取消按钮
prompt(需要输出的内容)
注意点：prompt返回值的类型是字符串类型
注意点：
- 如果需要输出的内容不是数字，那么就必须通过单引号或者双引号括起来。
- 在javascript是严格区分大小写的，alert()和ALERT()不是一回事。
- 在编写javascript代码的时候，一定要记住每一句代码后面都需要添加一个分号，并且这个分号必须是英文符号。（输入法可以设置中文时使用英文的标点符号）。
- 我们会发现，有时候不写分号程序也会运行，这里并不是因为不需要分号，而是浏览器自动帮助我们添加了分号，浏览器自动添加会消耗一定的性能，并且有可能会添加错误。
2.通过网页内容区域的方式来输出
document.write(需要输出的内容);
注意点：
- 如果需要输出的内容不是数字，那么就必须通过单引号或者双引号括起来。
3.通过开发者工具控制台的形式来输出
console.log(需要输出的内容);//普通输出
console.warn(需要输出的内容);//警告输出
console.error(需要输出的内容);//错误输出
注意点：
- 如果需要输出的内容不是数字，那么就必须通过单引号或者双引号括起来。
2.JavaScript基础-常量同变量（ECMAScript）
2.1、JavaScript常量
1.什么是常量
常量表示一些固定不变的数据。
现实生活中人的性别其实就可以看作是常量，生下来是男孩一辈子都是男孩。
2.JavaScript中常量的分类
2.1、整型常量
整型常量其实就是正数，在JavaScript中随便写一个整数都是整型常量。
666、0b1001等各种进制整数
2.2、实型常量
实型常量其实就是小数，在JavaScript中随便写一个小数都是实型常量。
3.14、6.66等所有小数
2.3、布尔常量
布尔常量就是真或假，在JavaScript中通过true和false来表达。
在JavaScript中布尔常量只有两个取值true、false。
2.4、字符串常量
字符串常量就是用单引号或者双引号括起来的内容，我们就称之为字符串常量。
‘a’、"lnj"等使用单引号(')或双引号(")括起来的一个或几个字符
注意点：无论用单引号或者双引号括起来了多少个字符，在JavaScript中都是字符串常量。
2.5、自定义常量：（ 在ES6中新增的 ）
const 常量名称 = 常量取值;
自定义常量在定义的时候取值事什么，它一辈子的取值就是什么。
2.2、JavaScript变量
1.什么是变量？
变量表示可以被修改的数据。在现实生活中超时的储物格就是变量，在不同的时间段中，储物格中村存储的数据也不一样。
2.如何定义一个变量
在JavaScript中可以通过定义变量的方式来生成储物格，也就是告诉浏览器，我们需要一块内存空间。和C语言一样, 需要先定义后使用。
JavaScript中定义变量的格式:
var 变量名称;
var num;
注意:
和C语言不同的是, C语言再定义变量时需要通过数据类型指定变量的类型
而JavaScript在定义变量时不需要通过数据类型指定变量的类型
变量的类型会在赋值时自动确定
3.如何使用变量
使用变量就是往申请的那块内存空间存储数据，和获取存储的数据。
3.1、如何存储数据
变量名称 = 需要存储的数据;
可以将等号右边需要存储的数据放到等号左边申请的那块存储空间中。
3.2、如何获取存储在变量中的数据
变量名称
var num;//定义一个变量
num = 123;//往变量中存储数据
console.log(num);//从变量中获取数据
4.如何修改变量中存储的数据。
在JavaScript中想要修改变量中存储的数据，只需要再次给变量直接赋值即可。
var num;//定义一个变量
num = 123;//往变量中存储数据
console.log(num);//从变量中获取数据 打印123
num = 444;
console.log(num);//打印444，直接将123覆盖了
5.在JavaScript中第一次给变量赋值，我们称之为“变量的初始化”。
var num;//定义一个变量
num = 123;//往变量中存储数据，第一次存储，是变量的初始化
num = 444;//不是变量的初始化
6.如果一个变量没有进行初始化，那么变量中存储的是什么呢？（变量默认值）
C语言中变量没有初始化保存的都是垃圾数据
JavaScript中定义了一个变量，但是变量没有初始化，那么变量中存储的是undefined
var a;
console.log(a);//打印undefined
7.给变量初始化有很多种形式
7.1、先定义后初始化
var num;
num = 666;
7.2、定义的同时初始化
var num = 666;
8.定义变量的其他格式
同时定义多个变量：
格式：var 变量名称1, 变量名称2, ... ;
var num, value;//同时定义两个变量
var num1, num2, num3, num4;//同时定义四个变量
9.初始化变量的其他格式
如果在企业开发中对多个变量初始化的值都是一样的，那么我们可以通过
变量名称1 = 变量名称2 = 变量名称... = 初始化值;
num = value = 123;//同时对num和value进行初始化，两个变量中存储的数据都是123.
10.分别给多个变量初始化
var num = 123, value = 666;//给两个变量初始化不同的值
11.注意点
- 在JavaScript中变量之间是可以相互赋值的
var num = 1;
var value;
console.log(num);
value = num;//将num中的值拷贝一份给value。
console.log(value);
- 在JavaScript中如果定义了同名的变量，那么后定义的变量会覆盖先定义的变量。
var a = 666;
a = 888;//如果a前面没有var，那么就是修改变量中存储的值。
var a = 999;//如果a前面有var，那么就不是修改变量中存储的值，而是重新定义一个新的变量。
- 在老版本的标准的（ES6之前）JavaScript中可以先使用变量再定义变量。
由于JavaScript是一门解释型的语言，会边解析边执行，浏览器在解析JavaScript代码之前还会进行一个操作“预解析（预处理）”
预解析（预处理）步骤：
将当前JavaScript代码中所有变量的定义和函数的定义放到所有代码的最前面。
console.log(q);
var q = 123;
预解析后变为：
var q;
console.log(q);//undefined
q = 123;
2.3、ES6-JavaScript变量定义
为了解决老版本标准中的两个注意点
- 在JavaScript中如果定义了同名的变量，那么后定义的变量会覆盖先定义的变量。
- 在老版本的标准的（ES6之前）JavaScript中可以先使用变量再定义变量，并不会报错。
在ES6中就推出了一种新的定义变量的方式
格式：
ES6之前：var 变量名称;
ES6之后：let 变量名称;
ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束
/*重新赋值*/
//定义一个变量
let a;
//初始化
a = 666;
//取出存储的数据
console.log(a);
//修改变量中存储的数据
a = 888;
//取出存储的数据
console.log(a);
/*定义同名变量*/
var num = 111;
var num = 222;
console.log(num);//打印222
let value = 111;
let value = 222;
console.log(value);//报错：Uncaught SyntaxError: Identifier 'value' has already been declared
/*先用后定义*/
console.log(JJ);//undefined
var JJ = 123;
console.log(GG);//报错Uncaught ReferenceError: GG is not defined
let GG = 123;
3.JavaScript基础——关键字和标识符
3.1、关键字和保留字
- 什么是关键字？
-
- JavaScript关键字的概念和C语言一样, 都是指被赋予特殊含义的单词
- 关键字在开发工具中会显示特殊颜色
- 关键字不能用作变量名、函数名等
- 关键字严格区分大小写, var和Var前者是关键字, 后者不是。只需要记住在javascript中所有的关键字都是小写的。
| 关键字 |
||||
| break |
do |
instanceof |
typeof |
case |
| else |
new |
var |
catch |
finally |
| return |
void |
continue |
for |
switch |
| while |
default |
if |
throw |
delete |
| in |
try |
function |
this |
with |
| debugger |
false |
true |
null |
- 什么是保留字?
-
- JavaScript预留的关键字，他们虽然现在没有作为关键字，但在以后的升级版本中有可能作为关键字
| 保留字 |
|||||
| class |
enum |
extends |
super |
const |
export |
| import |
implements |
let |
private |
public |
yield |
| interface |
package |
protected |
static |
3.2、标识符
- 什么是标识符?
-
- 标识某些东西的符号，标识的目的是为了将东西区分开来。因此标识符指程序员在程序中自己起的名称(诸如: 变量名称,函数名称等)
- 标识符命名规则(必须遵守)
-
- JavaScript标识符命名规则的概念和C语言一样
- 只能由26个英文字母的大小写、10个阿拉伯数字0~9、下划线_、美元符号$组成
- 不能以数字开头
- 严格区分大小写，比如test和Test是2个不同的标识符
- 不可以使用关键字、保留字作为标识符
- JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符
| 不建议使用标识符 |
|||||
| abstract |
double |
goto |
native |
static |
boolean |
| enum |
implements |
package |
super |
byte |
export |
| import |
private |
synchronize |
char |
extends |
int |
| protected |
throws |
class |
final |
interface |
public |
| transient |
const |
float |
long |
short |
volatile |
| arguments |
encodeURI |
Infinity |
Number |
RegExp |
undefined |
| isFinite |
Object |
String |
Boolean |
Error |
RangeError |
| parseFloat |
SyntaxError |
Date |
eval |
JSON |
ReferenceError |
| TypeError |
decodeURI |
EvalError |
Math |
URIError |
decodeURIComponent |
| Function |
NaN |
isNaN |
parseInt |
Array |
encodeURICOmponent |
- 标识符命名规范(建议遵守，可以不遵守。企业开发中要遵，)
-
- JavaScript标识符命名规范的概念和C语言一样
- 见名知意。变量的名称要有意义(有利于提高阅读性)。
- 变量的命名遵守驼峰命名法，首字母小写,第二个单词的首字母大写
-
-
- 例如: userName、myFirstName
-
注意：哈哈_asdf是合法的标识符，但是不建议使用。
3.4、注释
1. 什么是注释
注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思、
注释可以用来解释某一段程序或某一行代码是什么意思，方便程序员之间的交流。
注释可以使任何文字，也就是说可以写中文
在开发工具中注释一般是灰色或者绿色。
2.js注释的格式
单行注释：//被注释的内容
注意点：单行注释的有效范围是从第二个斜杠开始一直到这一行的末尾，也就是被注释的内容不能换行
// 我是被注释的内容 var num;
多行注释：/*被注释的内容*/
注意点：多行注释的有效范围是从第一颗星开始到第二颗星结束，也就是说被注释的内容可以换行的。
/*我是被注释的内容*/ var num;
3. js注释的嵌套规则
3.1、单行注释可以嵌套单行注释，但是必须在一行。
// 注释内容 // 注释内容
3.2、单行注释可以嵌套多行注释，但是必须在一行。
// 注释内容 /*注释内容*/
3.3、多行注释可以嵌套单行注释
/*
注释内容
//注释内容
*/
3.4、多行注释不可以嵌套多行注释
4.JavaScript基础——数据及数据类型
4.1、JavaScript数据类型
1. 什么是数据？
生活中的数据：身高、体重、收入、性别等
计算机使用过程中的数据：文档数据、图片数据、视屏数据等
2. 数据分类
- 静态数据
静态数据是指一些永久性的数据，一般存储在硬盘中。硬盘的存储空间一般都比较大，现在普通计算机的硬盘都有500G左右，因此硬盘中可以存放一些比较大的数据。
存储时长：计算机关闭之后再开启，这些数据依旧还在，只要你不主动删掉或者硬盘没坏，数据就在。
静态数据举例：以文件的形式存储在硬盘上的，文档、照片、视频等。
- 动态数据
动态数据是指在程序运行过程中，动态产生的临时数据，一般存储在内存中。内存的存储空间一般都比较小，现在普通计算机的内存只有8G左右，因此要谨慎使用内存。
存储时长：计算机关闭之后，这些临时数据就会被清除
动态数据举例：当运行程序时，整个程序就会被加载到内存中，在程序运行过程中，会产生各种各样的临时数据，这些临时数据都是存储在内存中的。当程序停止运行或者计算机被强制关闭时，这个程序产生的所有临时数据都会被清除。
3. 程序为什么不都在硬盘上运行：因为内存的访问速度是硬盘的N倍。
4. 静态数据和动态数据的相互转换
5. 数据的计量单位
1B（Byte字节） = 8 bit（位）
1 KB = 1024 B
1 MB = 1024 KB
1 GB = 1024 MB
1 TB = 1024 GB
6. JavaScript数据类型概述
- 作为程序员我们最关心的是内存中的动态数据, 因为我们写的程序就是在内存中的
- 和C语言一样,程序在运行过程中会产生各种各样的临时数据, 为了方便数据的运算和操作, JavaScript也对这些数据进行了分类, 提供了丰富的数据类型。
- 在JS中一共有两大类（基本数据类型、引用数据类型），六小类数据类型
-
- String 字符串(基本数据类型)
- Number 数值(基本数据类型)
- Boolean 布尔值(基本数据类型)
- Null 空值(基本数据类型)
- Undefined 未定义(基本数据类型)
- Object 对象(引用数据类型)
7. 基本数据类型
Number 数值类型
在JavaScript中无论是整数还是小数都是属于数值类型的。
利用typeof检测123这个常量是属于哪一种数据类型的。并且将检测的结果保存到res这个变量中。
let res = typeof 123;
console.log(res);//number
let res2 = typeof 123.4;
console.log(res2);//number
由于内存的限制，ECMAScript 并不能保存世界上所有的数值
- 最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
- 最小值：Number.MIN_VALUE
console.log(Number.MIN_VALUE); // 5e-324
- 无穷大：Infinity, 如果超过了最大值就会返回该值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
- 无穷小：-Infinity, 如果超过了最小值就会返回该值
console.log(typeof Infinity); // number console.log(typeof -Infinity); // number
- NaN 非法数字（Not A Number）,JS中当对数值进行计算时没有结果返回，则返回NaN
var num3 = NaN; console.log(typeof num3); // number
Number类型注意点
- JS中整数的运算可以保证精确的结果
var sum1 = 10 + 20; console.log(sum1); // 30
- 在JS中浮点数的运算可能得到一个不精确的结果
var sum1 = 10.1 + 21.1; console.log(sum1); // 31.200000000000003
String 字符串类型
在JavaScript中无论是通过单引号还是通过双引号括起来的内容，都是属于字符串类型的。
let res3 = typeof 'abc';
console.log(res3);//string
let res4 = typeof "der";
console.log(res4);//string
Boolean 布尔值类型
在JavaScript中布尔值类型比较特殊，只有两个取值true/false
let res5 = typeof true;
console.log(res5);//boolean
let res6 = typeof false;
console.log(res6);//boolean
Undefined（类型）未定义类型
在JavaScript中未定义类型比较特殊，只有一个取值undefined（值）
let res7;
//一下代码的含义是输出res7变量中保存的数据，由于未给res7初始化，所以输出的是undefined
console.log(res7);//undefined。值
//利用typeof检测res7中保存的数据（undefined）是什么类型的。
let res8 = typeof res7;
console.log(res8);//undefined。类型、
undefined是Undefined类型的字面量
- 前者undefined和10, "abc"一样是一个常量
- 后者Undefined和Number,Boolean一样是一个数据类型
- 需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。
- undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true
Null 空值类型
只有一个值的数据类型，这个特殊的值是 null
8.引用数据类型
Object 对象类型
9.在JavaScript中为了方便我们检测某一种数据是哪一种数据类型的，JavaScript提供了一个名称叫做typeof的操作符
格式：typeof 需要检测的数据;
10.数据类型和常量之间的关系
猫科动物和狮子老虎的关系
数据类型是猫科动物
常量是狮子。老虎。
常量属于某种数据类型。
5.JavaScript基础——数据类型转换
5.1、转换为字符串类型上
1.将Number类型转换为字符串类型
2.将Boolen类型转换为字符串类型
3.将Undefined类型转换为字符串类型
4.将Null类型转换为字符串类型
在JavaScript中如果想将以上的四种基本数据类型转换为字符串类型，常用的方法有三种
a、对于Number类型和Boolean类型来说，可以通过变量名称.toString()的方式来转换
let value = 123;
let str = value.toString();//将value变量中存储的数据拷贝一份。然后将拷贝的数据转换为字符串（toString）之后返回。不会影响原有数据value。
//在google控制台中，如果是number类型，是蓝色的。string类型是灰色的。
// let str2 = 123.toString();//报错Uncaught SyntaxError: Invalid or unexpected token.不能使用常量调用toString方法，因为常量是不能改变的。
console.log(value, typeof value);//123 "number"
console.log(str, typeof str);//123 string
let valueBool = true;
let strBool = valueBool.toString();
console.log(valueBool, typeof valueBool);//true "boolean"
console.log(strBool, typeof strBool);//true string
let valueUndefined = undefined;
let strUndefined = valueUndefined.toString();//报错。Uncaught TypeError: Cannot read property 'toString' of undefined
b、可以通过String(常量或者变量)，转换为字符串
let value3 = undefined;
//根据传入的数据重新生成一个新的字符串
let str3 = String(value3);
console.log(value3, typeof str3);//undefined "string"
/*String()方法*/
let value4 = null;
let str4 = String(value4);
console.log(value4, typeof value4, str4, typeof str4);
//null "object" "null" "string"
let value5 = 123;
let str5 = String(value5);
console.log(value5, typeof value5, str5, typeof str5);
//123 "number" "123" "string"
let str6 = String(123);//传入常量
console.log(str6, typeof str6);//123 string
let value7 = true;
let str7 = String(value7);
console.log(value7, typeof value7, str7, typeof str7);
//true "boolean" "true" "string"
toString()方法只能讲将Number和Boolean类型转换为字符串
String()函数可以将Number、Boolean、null、undefined转换为字符串
c、还可以通过 变量或常量 + "" / 变量或常量 + '',转换为字符串
+ ''或者 + ""底层的本质就是调用String()函数
let value8 = 123;
let str8 = value8 + '';
let str88 = value8 + "";
console.log(value8, typeof value8, str8, typeof str8, str88, typeof str88);
//123 "number" "123" "string" "123" "string"
let value88 = 123 + '';// + ''或者 + ""底层的本质就是调用String()函数
console.log(value88, typeof value88);
//123 string
注意点：
变量名称.toString()前面不能是常量，因为常量不能被改变
String(常量或变量)。因为是根据传入的值重新生成一个新的值，并不是修改原有的值。
5.2、转换为数值类型
在JavaScript中如果想将以上的四种基本数据类型转换为数值类型，常用的方法有三种
a、通过Number(常量或变量);方式来转换
总结：空字符串/false/null转换之后都是0（如果字符串中没有数据，那么转换的结果是0）
字符串中不仅仅是数字/Undefined转换之后是NaN.( NaN == not a Number )
其他的正常转换
b、还可以通过数学运算中的 + 和 - 来转换
虽然通过+ / - 都可以将其他类型转换为数值类型，但是-会改变数值的正负性
+ / -本质上就是调用了Number函数。
a、b方法转换后的结果
1.将String类型转换为数值类型
-如果字符串中都是数值，那么就正常转换
-如果字符串中都是一个空串""/" "，那么转换之后是0.
-如果字符串中不仅仅是数字，那么转换之后是NaN.
2.将Boolen类型转换为数值类型
-如果是true，那么转换之后的结果是1
-如果是false，那么转换之后的结果是0
3.将Undefined类型转换为数值类型
-转换之后是NaN.
4.将Null类型转换为数值类型
-转换之后是0.
c、还可以通过parseInt(需要转换的字符串)和parseFloat(需要转换的字符串)
方法一：Number()举例
/*String类型转换为数值类型*/
let str = "123";//字符串
let num = Number(str);
console.log(str, typeof str, num, typeof num);
//123 string 123 number
let num2 = Number("456");
console.log(num2, typeof num2);
//456 "number"
//如果字符串中没有数据，那么转换的结果是0
let str3 = "";//字符串
let num3 = Number(str3);
console.log(str3, typeof str3, num3, typeof num3);
// string 0 number
//如果字符串中的数据不仅仅是数值，那么转换的结果是NaN
let str4 = "12pa";//字符串
let num4 = Number(str4);
console.log(str4, typeof str4, num4, typeof num4);
// string 0 NaN number
/*
Boolen类型转换为数值类型
如果是布尔类型的true，那么转换之后的结果是1
如果是布尔类型的false，那么转换之后的结果是0
*/
let flag = true;
let num5 = Number(flag);
console.log(flag, typeof flag, num5, typeof num5);
//true "boolean" 1 "number"
/*Null类型转换为数值类型,转换结果是0*/
let value = null;
let num6 = Number(value);
console.log(value, typeof value, num6, typeof num6);
//null "object" 0 "number"
/*Undefined类型转换为数值类型,转换结果是NaN*/
let value7 = undefined;
let num7 = Number(value7);
console.log(value7, typeof value7, num7, typeof num7);
//undefined "undefined" NaN "number"
方法二：通过数学运算中的 + 和 - 来转换举例
虽然通过+ / - 都可以将其他类型转换为数值类型，但是-会改变数值的正负性
+ / -本质上就是调用了Number函数。
* */
let str8 = "123";
let num8 = +str8;
// let num88 = -str8;
// let num88 = +"123";
// let num88 = +"";
// let num88 = +"";
let num88 = +"12px";
console.log(str8, typeof str8, num8, typeof num8, num88, typeof num88);
//123 string 123 number -123 number
let flag9 = true;
let num9 = +flag9;
console.log(flag9, typeof flag9, num9, typeof num9);
//true "boolean" 1 "number"
let value10 = null;
let num10 = +value10;
console.log(value10, typeof value10, num10, typeof num10);
//null "object" 0 "number"
let value11 = undefined;
let num11 = +value11;
console.log(value11, typeof value11, num11, typeof num11);
//undefined "undefined" NaN "number"
方法三：parseInt(需要转换的字符串)和parseFloat(需要转换的字符串)举例
/*基于Number和+-方法的问题，产生的第三种转换方法
企业开发中存在给一个字符串，包含数字和字母，需要将数字提取出来的需求。
可以方法三parseInt(需要转换的字符串)和parseFloat(需要转换的字符串)
注意点：parseInt/parseFloat都会从左至右的提取数值，一旦遇到非数值就会立即停止。停止的时候如果没有提取到数值，那么就返回NaN
parseInt/parseFloat都会将传入的数据当做字符串来处理
*/
let str12 = "12.1a4pa";//字符串
let num12 = Number(str12);
let num122 = parseInt(str12);
let num1222 = parseFloat(str12);
console.log(str12, typeof str12);
console.log(num12, typeof num12);//NaN number
console.log(num122, typeof num122);//12 "number"
console.log(num1222, typeof num1222);//12.1 "number"
let value13 = true;
let num13 = Number(value13);
let num133 = parseInt(value13);
console.log(num13, typeof num13);//1 "number"
console.log(num133, typeof num133);//NaN "number"。parseInt("true");==NaN
5.3、转换为布尔类型
在JS中如果想将基本数据类型转换为布尔类型，那么只需要条用Boolean(常量or变量)
1.将String类型转换为布尔类型
-只要字符串中有内容都会转换为true，只有字符串中没有内容才会转换为false
2.将数值类型转换为布尔类型
-只有数值是0才会转换为false，其他的都会转换为true
-数值是NaN也会转换为false
3.将Undefined类型转换为布尔类型
-undefined会转换为false
4.将Null类型转换为布尔类型
-null会转换为false
总结：空字符串、0、NaN、undefined、null会转换为false，
其他的会转换为true
任何对象都是true, 只有null和undefined是false
6.JavaScript基础——算数运算符
6.1、运算符基本概念
- JavaScript运算符：是告诉程序执行特定算术或逻辑操作的符号。（+、-等）
- 表达式：表达式是利用运算符链接在一起的有意义，有结果的语句。（表达式一定要有结果。a + b）
- 操作处：a+b。a和b就是操作数。
6.2、运算符分类
- 按照功能划分:
-
- 算术运算符
- 位运算符
- 关系运算符
- 逻辑运算符
- 运算符根据参与运算的操作数的个数分为
-
- 单目运算：只有一个操作数，如i++
- 双目运算：有两个操作数：如a + b
- 三目运算：也叫问好表达式 a > b ? 1 : 0
6.3、运算符的优先级和结合性
- 优先级
-
- JavaScript中,运算符的运算优先级共分为15 级。1 级最高,15 级最低。
- 在表达式中,优先级较高的先于优先级较低的进行运算。
- 在一个运算量两侧的运算符优先级相同时,则按运算符的结合性所规定的结合方向处理
| 运算符（从上至下优先级由高到低） |
描述 |
| () |
表达式分组 |
| ++ -- - ~ ! |
一元运算符 |
| * / % |
乘法、除法、取模 |
| + - + |
加法、减法、字符串连接 |
| << >> >>> |
移位 |
| < <= > >= |
小于、小于等于、大于、大于等于 |
| == != === !== |
等于、不等于、严格相等、非严格相等 |
| & |
按位与 |
| ^ |
按位异或 |
| | |
按位或 |
| && |
逻辑与 |
| || |
逻辑或 |
| ?: |
条件 |
| = += -= *= /= %= |
赋值运算 |
| , |
多重求值 |
- 结合性
-
- 即左结合性(自左至右)和右结合性(自右至左)。
6.4、算数运算符
| 名称 |
符号 |
说明 |
| 加法运算符 |
+ |
对两个值进行加法运算，并将结果返回 |
| 减法运算符 |
- |
对两个值进行减法运算，并将结果返回 |
| 乘法运算符 |
* |
对两个值进行乘法运算，并将结果返回 |
| 除法运算符 |
/ |
对两个值进行除法运算，并将结果返回 |
| 求余运算符 (模运算符) |
% |
对两个值进行取余运算，并将结果返回 |
1.什么是算数运算符？
+、-、*、/、%
2.算术运算符的优先级和结合性
*、/、% 优先级高于 +、-
无论是+ - * / %都是左结合性（从左至右计算）
注意点：
JavaScript中整数除以整数结果是小数
let result6 = 3 / 2;
console.log(result6);//1.5
1.加法运算的注意点
1.1、任何非数值类型的数据在参与加法运算之前，都会被自动的转换成数值类型之后，在参与运算
let result = 5 + true;// 5 + 1 = 6
console.log(result);//6
1.2、任何数据跟NaN进行运算，结果都是NaN
let result2 = 5 + NaN;
console.log(result2);//NaN
1.3、任何数据跟字符串相加，都会被先转换成字符串之后在运算
let result3 = 5 + "afd";
console.log(result3);//5afd
2.减法运算的注意点
1.1、任何非数值类型的数据在参与加法运算之前，都会被自动的转换成数值类型之后，在参与运算
let result4 = 5 - true;// 5 - 1 = 4
console.log(result4);//4
1.2、任何数据跟NaN进行运算，结果都是NaN
let result5 = 5 - NaN;
console.log(result5);//NaN
1.3、任何数据跟字符串相减，都会先把字符串转换成数值类型之后再运算
let result6 = 5 - "123";
console.log(result6);//-118
3.乘法和除法运算的注意点
和减法运算的注意点一模一样。
4.取模（取余）运算的注意点
格式：m%n = 余数
4.1、若m>n，那么就正常取余
4.1、若m<n，那么结果就是m
4.3、若n=0，那么结果就是NaN
4.4、取模运算结果的正负性，取决于m而不是n
let result10 = 5 % -2;
console.log(result10);//1
let result11 = -5 % 2;
console.log(result11);//-1
6.5、赋值运算符
| 优先级 |
名称 |
符号 |
说明 |
| 14 |
赋值运算符 |
= |
双目运算符,具有右结合性 |
| 14 |
除后赋值运算符 |
/= |
双目运算符,具有右结合性 |
| 14 |
乘后赋值运算符 (模运算符) |
*= |
双目运算符,具有右结合性 |
| 14 |
取模后赋值运算符 |
%= |
双目运算符,具有右结合性 |
| 14 |
加后赋值运算符 |
+= |
双目运算符,具有右结合性 |
| 14 |
减后赋值运算符 |
-= |
双目运算符,具有右结合性 |
1.什么是赋值运算符
赋值运算符就是将等号右边的值存储到等号左边的变量中
1.1、简单赋值运算符：
=
//由于算术运算符的优先级高于赋值运算符所以会先计算1 + 1,然后再赋值给res
let res = 1 + 1;
//由于赋值运算符的结合性是右结合性，所以会现将3赋值给num2，然后再将num2中的值赋值给num1
let num1, num2;
num1 = num2 = 3;
1.2、复合赋值运算符：
/=、*=、%=、+=、-=
let res2 = 5;
//会将等号左边存储的值取出来和右边进行指定的运算，运算完毕之后再将运算的结果存储到左边。
res2 += 5;//res2 += 5;相当于res2 = res2 + 5；
console.log(res2);//10
2.赋值运算符的优先级和结合性
赋值运算符的优先级低于算术运算符
赋值运算符的结合性是右结合性（从右至左的计算）
赋值运算符的左边只能放变量，不能放常量。
6.6、自增自减运算符
| 优先级 |
名称 |
符号 |
说明 |
| 2 |
自增运算符(在后) |
i++ |
单目运算符,具有左结合性 |
| 2 |
自增运算符(在前) |
++i |
单目运算符,具有右结合性 |
| 2 |
自减运算符(在后) |
i-- |
单目运算符,具有左结合性 |
| 2 |
自减运算符(在前) |
--i |
单目运算符,具有右结合性 |
1.什么是自增自减运算符？
自增运算符：++
自减运算符：--
2.自增自减运算符的作用
自增运算符：可以快速的对一个变量中保存的数据进行+1操作
自减运算符：可以快速的对一个变量中保存的数据进行-1操作
3.自增自减写在变量前面和后面的区别？
写在变量的后面，表示变量先参与其他的运算，然后再自增或者自减
写在变量的前面，表示变量先自增或者自减，然后再参与其他的运算。
let num = 5;
num ++;//等于num = num + 1 等于 num += 1 等于++ num
console.log(num);//6
let num1 = 5;
++ num1;
console.log(num1);//6
let num2 = 5;
-- num2;//等于num2 = num2 -1 等于 num2 -=1 等于 num--
console.log(num2);//4
let num3 = 1;
let res = num3++ + 1;//let res = num3 + 1; num3++;
console.log(res, num3);//2 2
let res2 = ++num3 + 1;//num3++; let res = num3 + 1;
console.log(res2, num3);//4 3
注意点：
1.自增自减运算符只能出现在变量的前面或者后面，不能出现在常量或者表达式的前面或者后面。(因为自增自减运算符是为了让某个数据快速+1、-1，而常量不能被改变。)
2.在企业开发中自增自减运算符最好单独出现，不要出现在表达式中。
3.什么是表达式？
表达式就是用运算符连接在一起有意义有结果的语句，我们就称之为表达式。
1 + 1、a * 5
6.7、关系运算符
为什么要学习关系运算符
默认情况下，我们在程序中写的每一句正确代码都会被执行，但很多时候，我们想在某个条件成立的情况下才执行某一段代码
这种情况的话可以是用条件语句来完成。
| 优先级 |
名称 |
符号 |
说明 |
| 6 |
大于运算符 |
> |
双目运算符,具有左结合性 |
| 6 |
小于运算符 |
< |
双目运算符,具有左结合性 |
| 6 |
大于等于运算符 |
>= |
双目运算符,具有左结合性 |
| 6 |
小于等于运算符 |
<= |
双目运算符,具有左结合性 |
| 7 |
等于运算符 |
== |
双目运算符,具有左结合性 |
| 7 |
不等于运算符 |
!= |
双目运算符,具有左结合性 |
| 7 |
不等于运算符 |
=== |
双目运算符,具有左结合性 |
| 7 |
不等于运算符 |
!== |
双目运算符,具有左结合性 |
1.什么是关系运算符
> < >= <= == !== === !===
2.关系运算符的返回值
只有两个，要么是true，要么是false
如果关系成立，就返回true
如果关系不成立，就返回false
let res = 10 > 5;
console.log(res);//true
3.关系运算符的注意点
3.1、对于非数值类型的数据，会先转换成数值类型，再进行判断
let res2 = 1 > true;//1>1
console.log(res2);//false
let res3 = 1 > false;//1>0
console.log(res3);//true
let res4 = 1 > null;//1>0
console.log(res4);//true
let res5 = 1 > "0";//1>0
console.log(res5);//true
3.2、对于关系运算符来说，任何数据和NaN进行比较，返回值都是false
let res6 = 20 > NaN;
console.log(res6);//false
let res7 = 20 > undefined;//20>NaN
console.log(res7);//false
3.3、如果参与比较的都是字符串类型，那么不会转换成数值类型再比较，而是直接比较字符对应的Unicode编码
let res8 = "a" > "b";//0061 > 0062
console.log(res8);//false
let res9 = "b" > "a";//0062 > 0061
console.log(res9);//true
//如果字符串中有多个字符，那么会从左至右的依次比较，直到条件不满足为止
let res10 = "b1asd" > "baasd";
console.log(res10);//false
3.4、特殊比较的结果
let res11 = null == 0;//
console.log(res11);//false
let res12 = undefined == 0;
console.log(res12);//false
let res13 = null == undefined;//因为null是衍生出来的
console.log(res13);//true因为null是undefined衍生出来的
/*在企业开发中千万不要通过==来判断某一个数据是否是NaN
如果想判断某一个数据是否是NaN，那么可以通过isNaN来进行判断
*/
let res14 = NaN == NaN;//
console.log(res14);//false
/*判断数值是否是NaN'*/
let num = NaN;
let value = isNaN(num);
console.log(value);//返回true说明就是NaN
4.其他问题：
4.1.=== !==
会同时判断取值和数据类型
== ！=
只会判断取值
//== 只会判断取值是否相等，不会判断数据类型是否相等
let res = 123=="123";//let res = 123 == 123
console.log(res);//true
//=== 不仅会判断取值是否相等，并且还会判断数据类型是否相等。只有取值和数据类型都相等，才会返回true
let res2 = 123==="123";
console.log(res2);//false
let res3 = 123 != "123";// let res3 = 123 != 123;
console.log(res3);//false
let res4 = 123 !== "123";
console.log(res4);//true
4.2.关系运算符的结合性和优先级
关系运算符都是左结合性（从左至右的运算）
//注意点：正是因为关系运算符是左结合性，所以不能利用关系运算符来判断区间
let res5 = 10 > 5 > 3;// let res5 = true > 3;let res5 = 1 > 3;
console.log(res5);//false
let res6 = 10 <= 25 <= 20;// let res6 = true <= 20;let res6 = 1 <= 20;
console.log(res6);//true
关系运算符中> < >= <=的优先级高于== != === !==
let res7 = 10 == 10 > 0;// let res7 = 10 == true;let res7 = 10 == 1;
console.log(res7);//false
6.8、逻辑运算符
1.什么是逻辑运算符
名称、格式、返回值、特点
1.1、逻辑与 &&
格式：条件表达式A && 条件表达式B
返回值：true、false
特点：一假则假
let res = (10 > 5) && (20 > 10);//true &7 true
console.log(res);//true
let res2 = true && true;
console.log(res2);//true
let res3 = true && false;
console.log(res3);//false
let res4 = false && true;
console.log(res4);//false
let res5 = false && false;
console.log(res5);//false
1.2、逻辑或 ||
格式：条件表达式A || 条件表达式B
返回值：true、false
特点：一真则真
1.3、逻辑非 ！
格式：！条件表达式
返回值：true、false
特点：真变假、假变真
2.逻辑运算符的优先级和结合性
逻辑运算符的结合性是左结合性（从左至右的运算）
在逻辑运算中&& 的优先级高于 ||
/*
下方代码按照所结合性，结果为false，而实际结果为true。因此在逻辑运算中&& 的优先级高于 ||
let res = true && false;
let res = false;
*/
let res = true || false && false;
console.log(res);//true
3.逻辑运算符的注意点
3.1、在逻辑运算中如果不是布尔类型，那么会先转换成布尔类型，在参与其它的运算。
3.2、在逻辑与运算中，如果参与运算的不是布尔类型，返回值有一个特点。
格式：条件A && 条件B
如果条件A不成立，那么就返回条件A
let res3 = 0 && 123;
console.log(res3);//0
let res4 = null && 123;
console.log(res4);//null
如果条件A成立，无论条件B是否成立，都会返回条件B
let res5 = 1 && 123;
console.log(res5);//123
let res6 = 1 && null;
console.log(res6);//null
3.3、在逻辑或运算中，如果参与运算的不是布尔类型，返回值有一个特点。
格式：条件A || 条件B
如果条件A成立，那么就返回条件A
let res7 = 1 || null;
console.log(res7);//1
let res8 = 1 || 0;
console.log(res8);//1
如果条件A不成立，无论条件B是否成立，都会返回条件B
let res9 = 0 || 123;
console.log(res9);//123
let res10 = 0 || null;
console.log(res10);//null
3.4、在逻辑与&&运算中，有一个逻辑短路现象
格式：条件A && 条件B
由于逻辑与运算的规则是一假则假，所以只要条件A是假，那么条件B就不会运算
let num11 = 1;
let res11 = (10 > 20) && (++num11 > 0);
console.log(num11,res11);//1 false
3.5、在逻辑或||运算中，有一个逻辑短路现象
格式：条件A || 条件B
由于逻辑与运算的规则是一真则真，所以只要条件A是真，那么条件B就不会运算
let num12 = 1;
let res12 = (10 < 20) || (++num12 > 0);
console.log(num12,res12);//1 true
6.9、逗号运算符
1.逗号运算符：,
在JavaScript中逗号运算符一般用于简化代码
//利用逗号运算符同时定义多个变量
let a, b;
//利用逗号运算符同时给多个变量赋值
a = 10, b = 5;
2.逗号运算符优先级和结合性
逗号运算符的结合性是左结合性（从左至右的运算）
逗号运算符的优先级是所有运算符中最低的
3.逗号运算符也是一个运算符，所以也有运算符结果
逗号运算符的运算符结果就是最后一个表达式的结果
表达式1, 表达式2, 表达式3,.....;
let res = ((1 + 1), (2 + 2), (3+ 3));
console.log(res);//6
6.10、三目运算符
1.什么是三目运算符
三目运算符由称之为条件运算符
2.三目运算符的格式
条件表达式？ 结果A : 结果B；
条件表达式为真：返回结果A
条件表达式为假：返回结果B
let res = true ? 123 : 321;
console.log(res);//123\
let res2 = false ? 123 : 321;
console.log(res2);//321
3.三目运算符注意点
在三目运算符中？和：不能单独出现，要么一起出现，要么一起不出现