1、JavaScript 基础知识回顾

从本章开始，我们就要正式进入 JavaScript 的学习了。

这一章主要对 JavaScript 中的一些基础，规范再做一些简单的介绍，这些本身是大家学习本系列的前提知识储备，但在这里仍然对一些重要的基础知识进行梳理讲解。有一定基础的同学可以选看或者直接跳过本节。

1、代码结构与规范

1.1、分号，表示一条语句的结束

JS 是单线程的语言，它是从上至下按顺序执行。大多数情况下 JavaScript 可以不书写分号，而是将换行符理解成“隐式”的分号，例如这样：

alert('Hello')
alert('World')

但是大多数情况并不意味着全部情况，例如下面这种情况：

alert(1 +
2
+ 3);

由于代码第一行是一个”不完整的表达式“，因此 JS 并没有在这里插入分号。

从上面的例子中好像可以看到 JS 可以直接判断是否需要插入分号，但是实际上却存在着 JS 无法判断的情况。

例如下面这种情况：

alert("Hello")

["zhangsan", "xiaoming", "xiaohua"].forEach(alert)

你可以打开控制台，然后复制这段代码去运行，你会发现它不仅只会显示 Hello，还会在控制台报错。

这时候让我们为 alert 语句后面加上一个分号：

alert("Hello");

["zhangsan", "xiaoming", "xiaohua"].forEach(alert)

你再去运行，就能正常跑完这一段代码了。

之所以会出现上面的情况，就是因为 JS 在处理这段代码时实际上是这样的：

alert("Hello")["zhangsan", "xiaoming", "xiaohua"].forEach(alert);

因此，即使在大部分情况不加分号也没有问题的情况下，依然建议使用分号来作为语句的隔断，这样能避免一些意外的异常。

1.2、注释的合理使用

合理的注释能为代码添彩。

1、JS 中代码注释分为两种：

（1）单行注释：//

// 单独注释一行
console.log("你好，我是张三！");

console.log("你好，我是罗翔老师！"); // 可以在语句后面注释

（2）多行注释： /* … */

/*
 * 注释多行语句
 * ...
 */
console.log("对不起，我是警察！");
console.log("我想做个好人！");

好的注释可以让你的代码规范更上一层楼，不要害怕使用注释会增加代码总量，很多打包工具在你打包时会移除注释。

2、糟糕的代码注释会让你的代码显得臃肿和凌乱，下面举两个例子：

（1）利用注释解释函数

现在需要写一个添加用户的函数，小明是这样写的：

/*
 * 这是一个添加用户的函数
 * 参数 b 表示用户的名字
 */
function aaa(b) {
    console.log("添加用户，名字是：", b);
}

写完之后，小明还洋洋得意的说，看我写的多好，注释里面把函数作用和参数都介绍的清清楚楚了。

而张三是这样写的：

function addUser(userName) {
    console.log("添加用户，名字是：", userName);
}

上面两种代码的优劣相信大家都能看出来。小明由于函数名和参数名的不明确而添加了注释是不合理的，在后续调用时也很容易忘记函数是干什么。

而张三同学的代码在函数名上就点出了函数作用，参数也是清晰明了。无论后续在哪里调用，一看到该函数名就能知道该函数的作用了。

（2）大量解释性代码

例如这个函数：

function count() {
    // 初始值
    let a= 0;
    // b的计算方法
    let b = a + 1;
    // ...
}

没有必要在每一步都加上注释，需要加注释的地方，一定是有特殊意义的。

上面的例子并不是关于注释的全部内容，我在这里提到仅仅是作为一个引子，关于更多的关于怎么才算好的注释，网上有许多专门的资料可以供大家学习。

注释的重要性不言而喻，一名优秀的程序员的标志之一就是能合适当的对代码进行注释。

1.3 现代模式 ”use strict“

在 JavaScript 的发展过程中，新的功能在不断加入，而旧的功能也没有发生改变，这样做对旧代码的兼容很友好，但是同时也让以前的错误也永久的留存在了 JavaScript 的语法中。

这种情况一直到 ES5 的出现才有了改变。在 ES5 的规范中，它不仅增加了新的语言特性，同时还修改了一些已经存在的特性。这一步是历史性的。

为了保证旧的功能可以使用，这些修改中大部分默认是不生效的。你可以用一个特别的指令（也就是本节的主角）“use strict” 来明确地激活这些特性。

当你将 “use strict” 放置于脚本的最顶端时，整个脚本都会以严格模式进行工作。

当然，如你的代码全都写在了 class 和 module 中时，则可以不写 “use strict”，因为它们会自动启用严格模式。

当然了，也不需要担心严格模式与旧的模式有很大的差异，实际上，差异并没有那么多，并且这些差异还能提升编程体验。

这里我举两个例子：

（1）在严格模式中，调用某个函数时，this值是undefined；而在旧模式中，调用的函数中的this值总是全局对象（window）。我们可以利用这种特性来判断JavaScript实现是否支持严格模式：

（2）在严格模式中，任何变量都需要先声明再使用；而在旧模式中则不是绝对的，隐式的声明方式是给全局对象添加了一个新属性。

更多的区别大家可以自行查阅，这里不再赘述。

注：使用开发者控制台运行代码时，默认是不启动 use strict 的。

2、JavaScript 的一些基础介绍

2.1、变量

在 JS 中一共有三种声明变量的方式：

let，const， var

它们之间的区别这里简单介绍下：

（1）let 和 const 的唯一区别是，const 定义的基本数据类型不能被修改。

（2）var 是旧式的定义变量的方式，它定义的变量可以在定义之前使用（“变量提升”），而其他两种没有。

（3）var 没有块级作用域，只有全局和函数作用域。而其他两种有块级作用域。

变量名规则：

（1）变量名通常包括：字母，数字，$，_

（2）变量名不能以数字开头

2.2、数据类型

基本数据类型：
string，number，boolean，null，undefined，symbol，bigInt

引用类型：
Object，Array，Function，String，Number，Boolean，Date，Math，RegExp …

它们在内存中存储的区别：
基本类型全部存放于栈中
引用类型的值存放与堆中，而把指向值的地址存放于栈中

2.3、函数

1.函数声明

function sum(a, b) {
  let result = a + b;

  return result;
}

2.函数表达式

let sum = function(a, b) {
  let result = a + b;

  return result;
}

3.箭头函数

// 表达式在右侧，自带 return
let sum = (a, b) => a + b;

// 带 {...} 的多行语法，此处需要 return：
let sum = (a, b) => {
  // ...
  return a + b;
}

// 没有参数，需要用括号占位
let sayHi = () => alert("Hello");

// 有一个参数，可以省略括号
let double = n => n * 2;

2.4 运算符

1.算数运算符：

+ - * /（加减乘除），取余运算符 % 

2.赋值运算符（=）

let a = 2;
let b = a + 1;

3.三元运算符（ … ? … : …）

bool ? A : B; // bool 为 true，则返回 A，否则返回 B。

4.逻辑运算符（&&，||，!）

1、&&：仅在符号两边全为 true 时则返回 true，其余情况返回 false。

2、||：仅在符号两边全为 fasle 时则返回 fasle，其余情况返回 true。

3、!：!true 为 false，!false 为 true。

5.空值合并运算符（??）

仅在 ?? 前面是 undefined 或 null 时返回 ?? 符号后的值。

即：a ?? b 的结果是 a，除非 a 为 null/undefined，这时结果是 b。

6.比较运算符（===， ==， > , < …）

2.5 循环

1、for 循环

for(let i = 0; i < 10; i++) {
  console.log(i);
}

2、while 循环

let i = 0;
while (i < 10) {
  console.log(i);
  i += 1;
}

3、do … while 循环

do {
  console.log(i);
  i += 1;
} while (i < 10);

本小节只是对 JS 的基础进行简单的介绍，后续可能还会对内容进行补充，有 JS 基础的同学可以跳过这一节。

接下来的内容，会逐步深入的介绍 JS 中的知识点。

欢迎大家点赞收藏关注！！！

同时欢迎大家关注我的微信公众号：火锅只爱鸳鸯锅 ！