JavaScript基础知识
变量
变量就是用来储存信息的
变量 是数据的“命名存储”。我们可以使用变量来保存商品、访客和其他信息
let user = 'John';
let age = 25;
let message = 'Hello'
介绍这个代码
let或vue
关键字用来“声明”或“定义”变量。如代码第一行则声明了一个名称为“user”的变量后面的=为变量赋值添加数据（末尾用分号或逗号结束）
此处的“user”“age”“message”可以看作盒子，而“=”后面则为放入盒子中的东西
若重复输入则值会被改变，没重新输入一次则会改变一次
变量命名
JavaScript 的变量命名有两个限制：
- 变量名称必须仅包含字母，数字，符号 $ 和 _ 。
- 首字符必须非数字。
- 保留字无法用作变量命名(let class return function）
- 不能重复声明
变量命名还区分大小写
注意需采用use strict不然会报错
常量
声明一个常数（不变）变量，可以使用 const 而非 let ：
使用 const 声明的变量称为“常量”。它们不能被修改，如果你尝试修改就会发现报错：
好处
- COLOR_ORANGE 比 "#FF7F00" 更容易记忆。
- 比起 COLOR_ORANGE 而言， "#FF7F00" 更容易输错。
- 阅读代码时， COLOR_ORANGE 比 #FF7F00 更易懂。
总结：
- 我们可以使用 var 、 let 或 const 声明变量来存储数据。
- let — 现代的变量声明方式。
- var — 老旧的变量声明方式。一般情况下，我们不会再使用它。但是，我们会在 旧时的 "var"
- 章节介绍 var 和 let 的微妙差别，以防你需要它们。
- const — 类似于 let ，但是变量的值无法被修改。
- 变量应当以一种容易理解变量内部是什么的方式进行命名。
使用变量的小测式
题
- 声明两个变量： admin 和 name 。
- 将值 "John" 赋给 name 。
- 从 name 变量中拷贝其值给 admin 。
- 使用 alert 显示 admin 的值（必须输出 “John”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<script>
let name='john';
let admin=name;
alert(admin);
</script>
<p></p>
</body>
</html>
数据类型
number类型
number 类型代表整数和浮点数
- Infinity 代表数学概念中的 无穷大或用1/0
- NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
- NaN 是粘性的。任何对 NaN 的进一步操作都会返回 NaN
biglnt类型
BigInt 类型是最近被添加到 JavaScript 语言中的，用于表示任意长度的整数。可以通过将 n 附加到整数字段的末尾来创建 BigInt 值。
string类型
javaScript 中的字符串必须被括在引号里
双引号和单引号都是“简单”引用，在 JavaScript 中两者几乎没有什么差别
反引号是 功能扩展 引号。它们允许我们通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字 符串中
可以在 ${…} 内放置任何东西
null值
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值（不属于任何一种类型）
undefined值
undefined 的含义是 未被赋值
如果一个变量已被声明，但未被赋值，那么它的值就是 undefined
object类型和symbol类型
object 类型是一个特殊的类型
object 则用于储存数据集合和更复杂的实体
symbol 类型用于创建对象的唯一标识符
typeof运算符
两种语法形式：
1作为运算符：typeof x
2函数形式：typeof（x）
typeof x 的调用会以字符串的形式返回数据类型
总结
JavaScript 中有八种基本的数据类型（译注：前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型）。
- number 用于任何类型的数字：整数或浮点数，在 ±(253-1) 范围内的整数。
- bigint 用于任意长度的整数。
- string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
- boolean 用于 true 和 false 。
- null 用于未知的值 —— 只有一个 null 值的独立类型。
- undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
- symbol 用于唯一的标识符。
- bject 用于更复杂的数据结构
交互：alert、prompt、confirm
alert
弹出窗口，我们称为模拟窗“modal” 意味着用户不能与页面的其他部分（例如点 击其他按钮等）进行交互，直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确 定”按钮。
prompt
prompt 函数接收两个参数
浏览器会显示一个带有文本消息的模态窗口，还有 input 框和确定/取消按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<script>
let result=prompt("title,[default]");
alert(result);
</script>
<p></p>
</body>
</html>
confirm
confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。 点击确定返回 true ，点击取消返回 false 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<script>
let result=confirm("are you the boss?");
alert(result);
</script>
<p></p>
</body>
</html>
总结
我们学习了与用户交互的 3 个浏览器的特定函数： alert 显示信息。 prompt 显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null 。 confirm 显示信息等待用户点击确定或取消。点击确定返回 true ，点击取消或按下 Esc 键返回false 。
这些方法都是模态的：它们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，直到窗口被解除。
上述所有方法共有两个限制：
- 模态窗口的确切位置由浏览器决定。通常在页面中心。
- 窗口的确切外观也取决于浏览器。我们不能修改它。
类型转换
字符串转换
alert(value) 将 value 转换为字符串类型，然后显示值。 我们也可以显式地调用String(value) 来将 value 转换为字符串类型 变量.tostring() 但是一些数据类型不能使用该方法 加法 只要有一边是字符串就行
数字类型转换
在算术函数和表达式中，会自动进行 number 类型转换
let num = Number(str); // 变成 number 类型 123
alert(typeof num);
number类型转换规则
| 值 | 变成 |
|---|---|
| undefined | NaN |
| null | 0 |
| true和false | 1and0 |
| string | 去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0 。否则，将会从剩余字 符串中“读取”数字。当类型转换出现 error 时返回 NaN |
布尔型转换
转换规则
- 直观上为“空”的值（如 0 、空字符串、 null 、 undefined和 NaN ）将变为 false 。
- 其他值变成 true 在js中只有''、0、null、undefined、NaN、这些是false，其余都是true
总结
字符串转换 —— 转换发生在输出内容的时候，也可以通过 String(value) 进行显式转换。原始类型值的 string 类型转换通常是很明显的
数字型转换 —— 转换发生在进行算术操作时，也可以通过 Number(value) 进行显式转换。数字型转换遵循以下规则
布尔型转换 —— 转换发生在进行逻辑操作时，也可以通过 Boolean(value) 进行显式转换。布尔型转换遵循以下规则：
上述的大多数规则都容易理解和记忆。人们通常会犯错误的值得注意的例子有以下几个：
- 对 undefined 进行数字型转换时，输出结果为 NaN ，而非 0 。
- 对 "0" 和只有空格的字符串（比如： " " ）进行布尔型转换时，输出结果为 true
基础运算符--数学
数学
如果一个运算符对应的只有一个运算元，那么它是 一元运算符
如果一个运算符拥有两个运算元，那么它是 二元运算符
支持以下数学运算： 加法 + , 减法 - , 乘法 * , 除法 / , 取余 % , 求幂 **
加号 + 被应用于字符串，它将合并（连接）各个字符串
let s = "my" + "string";
alert(s); // mystring
==注意==：只要任意一个运算元是字符串，那么另一个运算元也将被转化为字符串
alert(2 + 2 + '1' ); // "41"，不是 "221"
运算符是按顺序工作
它的效果和 Number(...) 相同，但是更加简短
故想要转换为数字类型的可以用＋号
运算符优先级
一元运算符高于二元
赋值运算符
赋值符号 =
赋值 = 返回一个值
例
let a = 1;
let b = 2;
let c = 3 - (a = b + 1);
alert( a ); // 3
alert( c ); // 0
故式子除了优先级外可以从右往左看
原地修改
let n = 2;
n = n + 5;
n = n * 2
自增/自减
运算符 ++ 和 -- 可以置于变量前，也可以置于变量后。 当运算符置于变量后，被称为“后置形式”： counter++ 。 当运算符置于变量前，被称为“前置形式”： ++counter
前置
let counter = 1;
let a = ++counter; // (*)
alert(a); // 2
后置
let counter = 1;
let a = counter++; // (*) 将 ++counter 改为 counter++
alert(a); // 1
位运算符
按位与 ( & ) 按位或 ( | ) 按位异或 ( ^ ) 按位非 ( ~ ) 左移 ( << ) 右移 ( >> ) 无符号右移 ( >>> )
值的比较
大于 / 小于： a > b ， a < b 。 大于等于 / 小于等于： a >= b ， a <= b 。 检查两个值的相等： a == b ，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋 值。 检查两个值不相等。不相等在数学中的符号是 ≠ ，但在 JavaScript 中写成 a != b
比较结果为boolean类型
所有比较运算符均返回布尔值
字符串的比较方法
- 首先比较两个字符串的首位字符大小。
- 如果一方字符较大（或较小），则该字符串大于（或小于）另一个字符串。算法结束。
- 否则，如果两个字符串的首位字符相等，则继续取出两个字符串各自的后一位字符进行比较。
- 重复上述步骤进行比较，直到比较完成某字符串的所有字符为止。
- 如果两个字符串的字符同时用完，那么则判定它们相等，否则未结束（还有未比较的字符）的 字符串更大
不同类型间的比较
当对不同类型的值进行比较时，JavaScript 会首先将其转化为数字（number）再判定大小
严格相等
普通的相等性检查 == 存在一个问题，它不能区分出 0 和 false
相等判断符号 == 两侧的值会先被转化为数字
区分0和false 严格相等运算符 === 在进行比较时不会做任何的类型转换
总结
- 比较运算符始终返回布尔值。
- 字符串的比较，会按照“词典”顺序逐字符地比较大小。 当对不同类型的值进行比较时，它们会先被转化为数字（不包括严格相等检查）再进行比较。
- 在非严格相等 == 下， null 和 undefined 相等且各自不等于任何其他的值。
- 在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。比较好的方法 是单独检查变量是否等于 null/undefined 。
