【李立超】JS基础学习笔记（一）
本系列更多文章，可以查看专栏 JS学习笔记
一、JS用法
- 多行注释 /注释/
- 单行注释 // 注释
- JS中单个或连续多个的空格和换行会被忽略
- JS语句以
;结束，大部分时候如果省略不写，浏览器会自动补全
以下三种js样式均可以同时使用，内部js和外部js只需要使用多个script标签即可
1. 行内 js（写在body标签中）
js使用alert输出，使用弹窗显示内容
- 写在onclick中，需要点击
- 写在onmousemove中，需要鼠标移动在上方
- 写在href中，需要点击超链接
……
<body>
<!-- 方式1：行内js样式（不便于维护） -->
<button onclick="alert('哈哈哈');">点一下</button>
<hr>
<button onmousemove="alert('啦啦啦');">鼠标移动过来</button>
<hr>
<a href="javascript:alert('写在a标签里的js');">js写在href里</a>
</body>
alert弹窗提示，效果图如下所示：
2. 内部 js（写在head标签中）
script标签的type属性默认值就是text/javascript，使用js可以省略type属性值。
<head>
<meta charset="UTF-8">
<title>JS用法</title>
<!-- 方式2：内部js样式 -->
<script type="text/javascript">
// 使用document.write()输出，在网页中的body标签中输出
let a = '哈哈';
let b = '哈哈';
document.write('修改前a:' + a + 'b:' + b + "<br>");
b = '啦啦啦';
document.write('修改后a:' + a + 'b:' + b + '<hr>')
let c = '呵呵';
let d = c;
document.write('修改前c:' + c + 'd:' + d + '<br>');
c = '好烦啊';
document.write('修改后c:' + c + 'd:' + d + '<hr>')
</script>
</head>
使用document.write()输出，效果如下图所示：
3. 外部 js（写在head标签中）
为 script 指定了 src 导入外部js
<head>
<meta charset="UTF-8">
<title>JS用法</title>
<!-- type属性默认值就是text/javascript，使用js可以不写 -->
<!-- 方式3：外部js样式，src指定js文件路径 -->
<script src="./script/test1.js" type="text/javascript"></script>
</head>
// console.log()输出，是在网页开发者模式中(F12)的控制台中查看
console.log("这里是外部js样式，在控制台输出");
使用console.log输出，效果如下图所示：
二、字面量、变量、常量
使用量之前需要先进行声明
1. 字面量 / 直接量
此部分内容参考 《JavaScript权威指南(第6版)(中文版)》
字面量 / 直接量： 程序中直接使用的数据值
12 // 数字
1.2 // 小数
"hello" // 字符串文本
'Hi' // 字符串文本
true // 布尔值
false // 布尔值
null // 空
2. 常量【ES6新增：let】
使用const声明常量
常量必须声明时，对其值进行初始化。 \color{red}{常量必须声明时，对其值进行初始化。} 常量必须声明时，对其值进行初始化。
const 常量名 = 值;
后续不可对常量值进行修改 , 即使使用“常量名 = 值 ; ”的方式进行二次赋值，也无法修改常量的值 \color{blue}{后续不可对常量值进行修改,即使使用“常量名 = 值;”的方式进行二次赋值，也无法修改常量的值} 后续不可对常量值进行修改,即使使用“常量名=值;”的方式进行二次赋值，也无法修改常量的值
3. 变量【ES6新增：const】
使用let或var声明变量
变量可以选择先声明后赋值，也可以声明时进行初始化其值。
let 变量名; // 仅声明变量
var 变量名; // 仅声明变量
变量名 = 值; // 为变量赋值
let 变量名 = 值; // 声明变量的同时，进行赋值
var 变量名 = 值; // 声明变量的同时，进行赋值
4. 变量的内存结构
（1）当变量的字面值相同时，会共享同一个值地址，共享同一个值空间。
let a = 999;
let b = 'hello';
let c = 999;
（2）若将变量c的值进行修改，如果修改的值已经存在，会共享值地址。
c = 'hello';
（3）若将变量c的值进行修改，如果修改的值不存在，会重新开辟存储值的空间
c = 'haha';
三、原始数据类型（7种）
JavaScript中的数据类型除了原始数据类型，还有对象数据类型
使用 运算符 typeof 可以检查变量类型
1. 数字（数值Number、大整数BigInt）
（1）数值（Number）
使用运算符 typeof 查看变量类型，返回值为 number
可以表示整数、浮点数，当数值过大或者过小时，均会显示成近似值 \color{red}{可以表示整数、浮点数，当数值过大或者过小时，均会显示成近似值} 可以表示整数、浮点数，当数值过大或者过小时，均会显示成近似值
// 以下，单行注释为控制台实际输出值
a = 999999999999999.3; // 999999999999999.2
a = 999999999999; // 999999999999
a = 0.0000000000000012; // 1.2e-15
a = 99999 ** 99999; //number Infinity，正无穷大
a = 1 - "a"; // number NaN，非数字特殊值
// 其它进制数
a = 0b110; // number 6，二进制数
a = 0o17; //number 15，八进制数
a = 0x12; // number 18, 十六进制数
特殊 N u m b e r 类型值： \color{red}{特殊Number类型值：} 特殊Number类型值：
- Infinity： 表示JS中表示正无穷的数值
- -Infinity： 表示JS中表示负无穷的数值
- NaN： 表示JS中非数值的特殊值
（2）大整数（BigInt）【ES6新增】
使用运算符 typeof 查看变量类型，返回值为 bigint
可以作为 N u m b e r 类型无法精确表示的超过 2 5 3 − 1 的整数 \color{red}{可以作为Number类型无法精确表示的超过 2^53 -1 的整数} 可以作为Number类型无法精确表示的超过253−1的整数
可用数值加上 n 结尾，表示 B i g I n t 类型 \color{blue}{可用数值加上n结尾，表示BigInt类型} 可用数值加上n结尾，表示BigInt类型
// 以下，单行注释为控制台实际输出值
a = 999999999999999999999999999999999n; // bigint 999999999999999999999999999999999n
a = 1n; // bigint 1n
a = -5n; // bigint -5n
2. 字符串（String）
使用运算符 typeof 查看变量类型，返回值为 string
（1）使用 单引号 \color{red}{单引号} 单引号 或 双引号 \color{red}{双引号} 双引号 来表示字符串，但是引号内不可包含 换行符 \color{blue}{换行符} 换行符
// 以下，单行注释为控制台实际输出值
a = "hello"; // string hello
a = 'xixi'; // string xixi
// 单引号中可以使用双引号，双引号中可以使用单引号，但是不可包含与其相同的引号
a = "xi'X'xi"; // string xi'X'xi
a = '今天"天气"真好'; // string 今天"天气"真好
使用转义字符在引号中表示特殊字符，可以解决包含自身引号的问题
\为转义符号\\表示\\\\\表示\\\'表示'\"表示"\t表示 制表符\n表示 换行符
……
（2）使用 反引号 \color{red}{反引号} 反引号 (esc键下方引号）来表示模板字符串，可以包含换行
a = `Hello
World
!!!`;
效果如下图所示：
（3）在 模板字符串 \color{red}{模板字符串} 模板字符串 中，使用${}来嵌入其它字符串
let str1 = "今天是星期";
let str2 = `${str1}一`;
console.log(str2);
效果如下图所示：
3. 布尔类型（Boolean）
主要用于逻辑判断，只有两种值， t r u e \color{red}{true} true 和 f a l s e \color{red}{false} false
使用运算符 typeof 查看布尔值类型，返回值为 boolean
4. 空值（Null）
用于表示空对象、空对象，只有一个值
null
使用运算符 typeof 查看null类型，返回值为 object，无法使用 typeof 检查空值
5. 未定义（Undefined）
仅声明一个变量，未赋值时，该变量就是Undefined类型
只有一个值，undefined
使用运算符 typeof 查看未定义变量，返回值为 undefined
5. 符号类型（Symbol）【ES6新增】
一个symbol值可以作为一个对象的标识符，可以创建唯一的标识
使用运算符 typeof 查看未定义变量，返回值为 symbol
let sy1 = Symbol();
let sy2 = Symbol("foot");
let sy3 = Symbol(123);
console.log(typeof sy1, sy1);
console.log(typeof sy2, sy2);
console.log(typeof sy3, sy3);
效果如下图所示：
结尾
本篇博客参考【JavaScript核心基础_讲师（李立超）_JS教程（DOM、jQuery更新中）】，此合集视频[哔哩哔哩BV号：BV1mG411h7aD]。
如有错误，欢迎评论区指正。