JavaScript

Javascript是一种脚本语言，可以用来更改页面内容，控制多媒体，制作图像、动画等等

该笔记基于b站视频完成Java开发所需的前端技术教学

1. js入门案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>js入门</title>
</head>
<body>
    <p id="p1">1111</p>
    <script>
        let a = document.getElementById("p1");
        a.innerText = "3333333";
    </script>
</body>
</html>

document.getElementById() 根据元素id获取元素对象


js文件的引用

1.js文件的内容如下：

1
2
let a = document.getElementById("p1");
a.innerText = "44444";

2. 变量

let

1
let 变量名 = 值;
  • let声明的变量可以多次赋值

const

1
const 变量名 = 值;
  • const修饰的为常量，只能赋值一次，不能再次赋值，但是值的内容可以改


var

var声明的变量是可以多次赋值的

1
2
var a = 100;
a = 200;

3. 数据类型

3.1 undefined和null

  • 执行表达式或函数，没有返回结果，出现undefined
  • 访问数字不存在的元素，访问对象不存在的属性，出现undefined
  • 定义变量没有初始化，出现undefined

二者共同点

  • 都没有属性、方法
  • Nullish

二者区别

  • undefined由js产生
  • null由程序员提供

3.2 string

在JavaScript中可以用单引号、双引号、反引号定义字符串

1
2
3
let s1 = 'spring';
let s2 = "spring";
let s3 = `spring`;

模板字符串（Template strings）

需求：拼接url的请求参数，如：

1
2
/test?name=zheng&age=18
/test?name=li&age=20

传统方法拼接

1
2
3
let name = ; // zheng li ...
let age = ; // 18 20 ...
let uri = "/test?name=" + name + "&age=" + age;

模板字符串方式，要用反引号

1
2
3
let name = ; // zheng li ...
let age = ; // 18 20 ...
let uri = `/test?name=${name}&age=${age}`;

3.3 number和bigint

number 类型标识的是双精度浮动小数，例如

1
10 / 3;   // 结果 3.3333333333333335

既然是浮点小数，那么可以除零

1
2
10 / 0;	  // 结果 Infinity 正无穷大
-10 / 0;  // 结果 -Infinity 负无穷大

浮点小数都有运算精度问题，例如

1
2.0 - 1.1; // 结果 0.8999999999999999

字符串转数字

1
2
3
4
5
parseInt("10"); 	// 结果是数字 10 
parseInt("10.5");	// 结果是数字 10, 去除了小数部分
parseInt("10") / 3; // 结果仍视为 number 浮点数, 因此结果为 3.3333333333333335

parseInt("abc");	// 转换失败，结果是特殊值 NaN (Not a Number)

要表示真正的整数，需要用 bigint，数字的结尾用 n 表示它是一个 bigint 类型

1
10n / 3n;			// 结果 3n, 按整数除法处理

3.4 boolean

  • Truthy
  • Falsy

在 js 中，并不是 boolean 才能用于条件判断，你可以在 if 语句中使用【数字】、【字符串】… 作为判断条件

1
2
3
4
let b = 1;
if(b) { // true
    console.log("进入了");
}

这时就有一个规则，当需要条件判断时，这个值被当作 true 还是 false，当作 true 的值归类为 truthy，当作 false 的值归类为 falsy

下面值都是 falsy

  • false
  • Nullish (null, undefined)
  • 0, 0n, NaN
  • "" '' `` 即长度为零的字符串

剩余的值绝大部分都是 truthy

有几个容易被当作 falsy 实际是 truthy 的

  • "false", "0" 即字符串的 false 和 字符串的零
  • [] 空数组
  • {} 空对象

4. 函数

4.1 定义函数

1
2
3
4
function 函数名(参数) {
    // 函数体
    return 结果;
}

例

1
2
3
function add(a, b) {
    return a + b;
}

调用函数

1
函数名(实参);

例

1
add(1, 2);     // 返回 3

js 中的函数调用特点：对参数的类型和个数都没有限制，例如

1
2
3
add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN


4.2 默认参数

java 中（spring）要实现默认参数的效果得这么做：

1
2
3
4
5
6
7
8
9
10
11
12
@RestController 
public class MyController {
    
    @RequestMapping("/page")
    @ResponseBody
    public void page(
        @RequestParam(defaultValue="1") int page, 
        @RequestParam(defaultValue="10") int size
    ){
        // ...
    }
}

js

1
2
3
function pagination(page = 1, size = 10) {
    console.log(page, size);
}

测试案例

1
2
3
4
5
6
7
8
// 两个参数都默认
pagination();
// 第一个参数默认，第二个参数自己设置
pagination(undefined, 100);
// 第一个参数自己设置，第二个参数默认
pagination(100);
// 两个参数的自己设置
pagination(100,100);

4.3 匿名函数

语法

1
2
3
4
(function(参数) {
    // 函数体
    return 结果;
})

例

1
2
3
(function(a, b) {
    return a + b;
})

使用场景——定义完毕立即调用

1
2
3
(function(a, b) {
    return a + b;
})(1, 2)

使用场景——作为其它对象的方法

页面元素：

1
<p id = "p1">点我啊</p>

该元素有一个onclick方法，鼠标点击后会调用该方法，onclick方法初始化为null，需要赋值后才能使用

1
2
3
document.getElementById("p1").onclick = (function() {
    console.log("鼠标被单击了----");
});

4.4 箭头函数

语法

1
2
3
4
(参数) => {
    // 函数体
    return 结果;
}
  • 如果没有参数，()要保留``
  • 如果只有一个参数，()可以省略
  • 如果函数体内只有一个一行代码，{}可以省略
1
document.getElementById("p1").onclick = () => console.log("单击");

4.5 函数是对象

以下形式在 js 中非常常见！

  1. 可以参与赋值，例，具名函数也能参与赋值
1
2
3
4
5
function abc() {
    console.log("函数是对象");
}

document.getElementById("p1").onclick = abc;
  1. 有属性、有方法，执行 console.dir(abc)，输出结果如下

  • 其中带有 f 标记的是方法，不带的是属性

  • 带有 ➡ 符号的可以继续展开，限于篇幅省略了

  • 带有 [[ ]] 的是内置属性，不能访问，只能查看

  • 相对重要的是 [[Prototype]] 和 [[Scopes]]

  1. 可以作为方法参数
1
2
3
4
5
6
7
8
9
10
function a() {
    console.log('a')
}

function b(fn) {          // fn 将来可以是一个函数对象
    console.log('b')
    fn();                 // 调用函数对象
}

b(a)
  1. 可以作为方法返回值
1
2
3
4
5
6
7
8
9
function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()

4.6 函数的作用域

看下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function c() {
    var z = 30;
}

var x = 10;
function a() {
    var y = 20;
    function b() {
        // 看这里
        console.log(x, y);
    }
    b();
}
a();
  • 以函数为分界线划定作用域，所有函数之外是全局作用域
  • 查找变量时，由内向外查找
    • 在内层作用域找到变量，就会停止查找，不会再找外层
    • 所有作用域都找不到变量，报错
  • 作用域本质上是函数对象的属性，可以通过 console.dir 来查看调试

4.7 闭包

1
2
3
4
5
6
7
8
9
var x = 10;
function a() {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    return b;
}
a()();  // 在外面执行了 b
  • 函数定义时，它的作用域就已经确定好了，因此无论函数将来去哪里了，它都能从自己的作用域中找到当时的变量
  • 闭包就是指函数能够访问自己作用域中的变量

4.8 var与let的区别

如果函数外层引用的是let变量，那么外层普通的{}也会作为域边界，最外层的let也占一个script作用域

1
2
3
4
5
6
7
8
let x = 10; 
if(true) {
    let y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}

如果函数外层引用的是 var 变量，外层普通的 {} 不会视为边界

1
2
3
4
5
6
7
8
var x = 10; 
if(true) {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}

如果 var 变量出现了重名，则他俩会被视为同一作用域中的同一个变量

1
2
3
4
5
6
var e = 10; 
if(true) {
    var e = 20;
    console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量，还是打印 20

<>br/>

如果是 let，则视为两个作用域中的两个变量

1
2
3
4
5
6
let e = 10; 
if(true) {
    let e = 20;	
    console.log(e);	// 打印 20
}
console.log(e);		// 打印 10

要想里面的 e 和外面的 e 能区分开来，最简单的办法是改成 let，或者用函数来界定作用域范围

1
2
3
4
5
6
7
8
9
var e = 10; 
if(true) {
    function b() {
        var e = 20;
    	console.log(e);
    }
    b();
}
console.log(e);

5. 数组

5.1 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 创建数组
let arr = [1,2,3];

// 获取数组元素
console.log(arr[0]);

// 修改数组元素
arr[0] = 10;

// 获取数组长度
arr.length;

// 变量数据元素
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

5.2 API

  • push、shift、splice
1
2
3
4
5
let arr = [1,2,3]; 

arr.push(4);    	// 向数组尾部(右侧)添加元素, 结果 [1,2,3,4]
arr.shift();		// 从数组头部(左侧)移除元素, 结果 [2,3,4]
arr.splice(1,1);	// 删除【参数1】索引位置的【参数2】个元素，结果 [2,4]

  • join
1
2
3
4
5
let arr = ['a','b','c','d'];

arr.join(); 		// 默认使用【,】作为连接符，结果 'a,b,c,d'
arr.join('');		// 结果 'abcd'
arr.join('-');		// 结果 'a-b-c-d'

  • map、filter、forEach
1
2
3
4
5
6
7
8
9
10
let arr = [1,2,3,6];

function a(i) {   // 代表的新旧元素之间的变换规则
    return i * 10
}

// arr.map(a) // 具名函数，结果 [10,20,30,60]

// arr.map( (i) => {return i * 10} ); // 箭头函数
arr.map( i => i * 10 ); // 箭头函数


  • 传给 map 的函数，参数代表旧元素，返回值代表新元素

map 的内部实现（伪代码）

1
2
3
4
5
6
7
8
9
function map(a) { // 参数是一个函数
    let narr = [];
    for(let i = 0; i < arr.length; i++) {
        let o = arr[i]; // 旧元素
        let n = a(o);   // 新元素
        narr.push(n);
    }
    return narr;
}

filter 例子

1
2
let arr = [1,2,3,6];
arr.filter( (i)=> i % 2 == 1 ); // 结果 [1,3]
  • 传给 filter 的函数，参数代表旧元素，返回 true 表示要留下的元素

forEach 例子

1
2
3
4
5
6
7
let arr = [1,2,3,6];

/*for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}*/

arr.forEach( (i) => console.log(i) );

两个称呼

  • 高阶函数，map，filter，forEach
  • 回调函数，例如作为参数传入的函数

6. Object

6.1 语法

1
2
3
4
5
6
let obj = {
    属性名: 值,
    方法名: 函数,
    get 属性名() {},
    set 属性名(新值) {}
}

例1：

1
2
3
4
5
6
7
let stu = {
    name: "小明",
    age: 28,
    study: function() {
        console.log(this.name + "爱学习");
    }
}

例2:

1
2
3
4
5
6
let name = "小红";
let age = 20;
let study = function() {
    console.log("小红爱学习");
}
let stu = {name, age, study};

例3：(重点)

1
2
3
4
5
6
7
let stu = {
    name: "小刚",
    age: 21,
    study() {
        console.log(this.name + "爱学习");
    }
}
  • 这种定义对象方法的方式只限于对象内部

6.2 get()和set()方法

例：

1
2
3
4
5
6
7
8
9
10
11
12
let stu = {
    _name : null, // 类似于java中的私有属性
    get name() { // 定义get方法
        console.log("进入了get");
        return this._name;
    },
    set name(name) { // 定义set方法
        console.log("进入了set");
        this._name = name;
    }
}

1
2
3
4
5
// 赋值操作会调用set方法
stu.name="小白";

// 调用操作会调用get方法
console.log(stu.name);
  • JavaScript中是没有私有属性这种概念的，在属性前加 ‘_’ 是一种习惯上的约定

6.3 属性增删

对比一下 Java 中的 Object

  • Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的
  • JS 的对象，不需要什么模板，它的属性和方法可以随时加减
1
2
3
4
5
6
7
let stu = {name:'张三'};
stu.age = 18;					// 添加属性
delete stu.age;					// 删除属性

stu.study = function() {		// 添加方法
    console.log(this.name + "在学习");
}

添加 get，set，需要借助 Object.definePropery

1
2
3
4
5
6
7
8
9
10
let stu = {_name:null};

Object.defineProperty(stu, "name", {
    get(){
        return this._name;
    },
    set(name){
        this._name = name;
    }
});
  • 参数1：目标对象
  • 参数2：属性名
  • 参数3：get，set 的定义

6.4 this

先来对 Java 中的 this 有个理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class TestMethod {

    static class Student {
        private String name;

        public Student(String name) {
            this.name = name;
        }

        public void study(Student this, String subject) {
            System.out.println(this.name + "在学习 " + subject);
        }
    }

    public static void main(String[] args) {
        Student stu = new Student("小明");
        
        // 下面的代码，本质上是执行 study(stu, "java")，因此 this 就是 stu
        stu.study("java"); 
    }
}
  • Java 中的 this 是个隐式参数
  • Java 中，我们说 this 代表的就是调用方法的那个对象

js 中的 this 也是隐式参数，但它与函数运行时上下文相关

例如，一个“落单”的函数

1
2
3
function study(subject) {
    console.log(this.name + "在学习 " + subject)
}

测试一下

1
study("js");  // 输出 在学习 js

这是因为此时函数执行，全局对象 window 被当作了 this，window 对象的 name 属性是空串


同样的函数，如果作为对象的方法

1
2
3
4
let stu = {
    name:"小白",
    study
}

这种情况下，会将当前对象作为 this

1
stu.study('js'); 	// 输出 小白在学习 js

还可以动态改变 this

1
2
let stu = {name:"小黑"};
study.call(stu, "js");	// 输出 小黑在学习 js

这回 study 执行时，就把 call 的第一个参数 stu 作为 this


一个例外是，在箭头函数内出现的 this，以外层 this 理解

用匿名函数

1
2
3
4
5
6
7
8
9
10
let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(function(e){
            console.log(this.name + "与" + e + "在玩耍");
        });
    }
}
stu.play()
  • this.name 所在的函数是【落单】的函数，因此 this 代表 window

输出结果为


用箭头函数

1
2
3
4
5
6
7
8
9
let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(e => {
            console.log(this.name + "与" + e + "在玩耍");
        })
    }    
}
  • this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象

输出结果为


不用箭头函数的做法

1
2
3
4
5
6
7
8
9
10
let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        let me = this;
        this.friends.forEach(function(e){
            console.log(me.name + "与" + e + "在玩耍");
        });
    }
}

6.5 原型进程

1
2
3
4
5
6
7
8
9
10
11
let father = {
    f1: '父属性',
    m1: function() {
        console.log("父方法");
    }
}

let son = Object.create(father);

console.log(son.f1);  // 打印 父属性
son.m1();			  // 打印 父方法
  • father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
  • son 自己可以添加自己的属性和方法
  • son 里有特殊属性 __proto__ 代表它的父对象，js 术语： son 的原型对象
  • 不同浏览器对打印 son 的 __proto__ 属性时显示不同
    • Edge 打印 console.dir(son) 显示 [[Prototype]]
    • Firefox 打印 console.dir(son) 显示 <prototype>

基于函数的原型继承

出于方便的原因，js 又提供了一种基于函数的原型继承

函数职责

  1. 负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法

  2. 函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象

    注意！名字有差异，这个属性的作用就是为新对象提供原型

1
2
3
4
5
6
7
8
9
10
11
12
function cons(f2) {
    // 创建子对象(this), 给子对象提供属性和方法
    this.f2 = f2;
    this.m2 = function () {
        console.log("子方法");
    }
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {
    console.log("父方法");
}

配合 new 关键字，创建子对象

1
let son = new cons("子属性")

子对象的 __proto__ 就是函数的 prototype 属性


7. JSON

一个 json 对象可以长这样：

1
2
3
4
{
    "name":"张三",
    "age":18
}

一个 js 对象长这样：

1
2
3
4
{
    name:"张三",
    age:18
}

JSON和JS的区别

  1. 本质不同
    • json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货
    • js 对象是切切实实的对象，可以有属性方法
  2. 语法细节不同
    • json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
    • json 中不能有除以上的其它 js 对象的特性，如方法等
    • json 中的属性必须用双引号引起来

json 字符串与 js 对象的转换

1
2
JSON.parse(json字符串);  // 返回js对象
JSON.stringify(js对象);  // 返回json字符串

8. 运算符与表达式

  • + - * / % **
  • += -= *= /= %= **=
  • ++ --
  • 位运算、移位运算
  • == != > >= < <=
  • === !==
  • && || !
  • ?? ?.
  • ...
  • 解构赋值

8.1 ===

严格相等运算符，用作逻辑判等

1
2
3
1 == 1    	// 返回 true 
1 == '1'	// 返回 true，会先将右侧的字符串转为数字，再做比较
1 === '1'	// 返回 false，类型不等，直接返回 false

typeof 查看某个值的类型

1
2
typeof 1	// 返回 'number'
typeof '1'	// 返回 'string'

8.2 ||

需求：如果参数 n 没有传递，给它一个【男】

推荐做法

1
2
3
function test(n = '男') {
    console.log(n);
}

一些老旧代码中可能的做法（不推荐）

1
2
3
4
function test(n) {
    n = n || '男';
    console.log(n);
}

它的语法是

1
值1 || 值2

如果值1 是 Truthy，返回值1，如果值1 是 Falsy 返回值 2


8.3 ??与?.

??

需求：如果参数n没有传递或者是null，给他一个[男]

传统办法

1
2
3
4
5
6
function test(n) {
    if(n === undefined || n === null) {
        n = '男';
    }
    console.log(n);
}

使用??

1
2
3
4
function test(n) {
	n = n ?? '男';
    console.log(n);
}

?.

需求：函数参数是一个对象，可能包含子属性

例如，参数可能是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let stu1 = {
    name:"张三",
    address: {
        city: '北京'
    }
};

let stu2 = {
    name:"李四"
}

let stu3 = {
    name:"李四",
    address: null
}

现在要访问子属性（有问题）

1
2
3
function test(stu) {
    console.log(stu.address.city)
}

现在希望当某个属性是 nullish 时，短路并返回 undefined，可以用 ?.

1
2
3
function test(stu) {
    console.log(stu.address?.city)
}

用传统办法 

1
2
3
4
5
6
7
function test(stu) {
    if(stu.address === undefined || stu.address === null) {
        console.log(undefined);
        return;
    }
    console.log(stu.address.city)
}

8.4 …

展开运算符

作用1：打散数组，把元素传递给多个参数

1
2
3
4
5
let arr = [1,2,3];

function test(a,b,c) {
    console.log(a,b,c);
}

需求，把数组元素依次传递给函数参数

传统写法

1
test(arr[0],arr[1],arr[2]);		// 输出 1,2,3

展开运算符写法

1
test(...arr);					// 输出 1,2,3
  • 打散可以理解为【去掉了】数组外侧的中括号，只剩下数组元素

作用2：复制数组或对象

数组

1
2
let arr1 = [1,2,3];
let arr2 = [...arr1];		// 复制数组

对象

1
2
3
let obj1 = {name:'张三', age: 18};

let obj2 = {...obj1};		// 复制对象

注意：展开运算符复制属于浅拷贝，更深一层的数据采用了引用的形式，例如这里的city就是引用了原来的地址

1
2
3
let o1 = {name:'张三', address: {city: '北京'} }

let o2 = {...o1};

作用3：合并数组或对象

合并数组

1
2
3
4
5
let a1 = [1,2];
let a2 = [3,4];

let b1 = [...a1,...a2];		// 结果 [1,2,3,4]
let b2 = [...a2,5,...a1]	// 结果 [3,4,5,1,2]

合并对象

1
2
3
4
5
6
7
let o1 = {name:'张三'};
let o2 = {age:18};
let o3 = {name:'李四'};

let n1 = {...o1, ...o2};	// 结果 {name:'张三',age:18}

let n2 = {...o1, ...o2, ...o3}; // 结果{name:'李四',age:18}
  • 复制对象时出现同名属性，后面的会覆盖前面的

8.5 []{}

解构赋值

[]

用在声明变量时

1
2
3
let arr = [1,2,3];

let [a, b, c] = arr;	// 结果 a=1, b=2, c=3

用在声明参数时

1
2
3
4
5
6
7
let arr = [1,2,3];

function test([a,b,c]) {
    console.log(a,b,c) 	// 结果 a=1, b=2, c=3
}

test(arr);

{}

用在声明变量时

1
2
3
let obj = {name:"张三", age:18};

let {name,age} = obj;	// 结果 name=张三, age=18

用在声明参数时

1
2
3
4
5
6
7
let obj = {name:"张三", age:18};

function test({name, age}) {
    console.log(name, age); // 结果 name=张三, age=18
}

test(obj)

9. 控制语句

  • if ... else
  • switch
  • while
  • do ... while
  • for
  • for ... in
  • for ... of
  • try ... catch

9.1 for in

主要用来遍历对象

1
2
3
4
5
let father = {name:'张三', age:18, study:function(){}};

for(const n in father) {
    console.log(n);
}

  • 其中 const n 代表遍历出来的属性名

  • 注意1：方法名也能被遍历出来（它其实也算一种特殊属性）

  • 注意2：遍历子对象时，父对象的属性会跟着遍历出来

    1
    2
    3
    4
    5
    6
    let son = Object.create(father);
    son.sex = "男";

    for(const n in son) {
        console.log(n);
    }

  • 注意3：在 for in 内获取属性值，要使用 [] 语法，而不能用 . 语法

1
2
3
for(const n in son) {
    console.log(n, son[n]);
}

9.2 for of

主要用来遍历数组，也可以是Map、Set等可迭代对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let a1 = [1,2,3];

for(const i of a1) {
    console.log(i);
}

let a2 = [
    {name:'张三', age:18},
    {name:'李四', age:20},
    {name:'王五', age:22}
];

for(const obj of a2) {
    console.log(obj.name, obj.age);
}

for(const {name,age} of a2) {
    console.log(name, age);
}

9.3 try catch

对有可能出现异常的代码进行try catch处理，finally中放的代码一定会被执行

1
2
3
4
5
6
7
8
9
10
11
12
let stu1 = {name:'张三', age:18, address: {city:'北京'}};
let stu2 = {name:'张三', age:18};

function test(stu) {
    try {
        console.log(stu.address.city)   
    } catch(e) {
        console.log('出现了异常', e.message)
    } finally {
        console.log('finally');
    }
}

10.node的安装

安装 nvm

nvm 即 (node version manager)，好处是方便切换 node.js 版本

安装注意事项

  1. 要卸载掉现有的 nodejs
  2. 提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
  3. 选用【以管理员身份运行】cmd 程序来执行 nvm 命令
  4. 首次运行前设置好国内镜像地址
1
2
nvm node_mirror http://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

首先查看有哪些可用版本

1
nvm list available

输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    21.1.0    |    20.9.0    |   0.12.18    |   0.11.16    |
|    21.0.0    |   18.18.2    |   0.12.17    |   0.11.15    |
|    20.8.1    |   18.18.1    |   0.12.16    |   0.11.14    |
|    20.8.0    |   18.18.0    |   0.12.15    |   0.11.13    |
|    20.7.0    |   18.17.1    |   0.12.14    |   0.11.12    |
|    20.6.1    |   18.17.0    |   0.12.13    |   0.11.11    |
|    20.6.0    |   18.16.1    |   0.12.12    |   0.11.10    |
|    20.5.1    |   18.16.0    |   0.12.11    |    0.11.9    |
|    20.5.0    |   18.15.0    |   0.12.10    |    0.11.8    |
|    20.4.0    |   18.14.2    |    0.12.9    |    0.11.7    |
|    20.3.1    |   18.14.1    |    0.12.8    |    0.11.6    |
|    20.3.0    |   18.14.0    |    0.12.7    |    0.11.5    |
|    20.2.0    |   18.13.0    |    0.12.6    |    0.11.4    |
|    20.1.0    |   18.12.1    |    0.12.5    |    0.11.3    |
|    20.0.0    |   18.12.0    |    0.12.4    |    0.11.2    |
|    19.9.0    |   16.20.2    |    0.12.3    |    0.11.1    |
|    19.8.1    |   16.20.1    |    0.12.2    |    0.11.0    |
|    19.8.0    |   16.20.0    |    0.12.1    |    0.9.12    |
|    19.7.0    |   16.19.1    |    0.12.0    |    0.9.11    |
|    19.6.1    |   16.19.0    |   0.10.48    |    0.9.10    |

建议安装 LTS（长期支持版）

1
nvm install 18.17.0

执行 nvm list 会列出已安装版本

1
nvm list

切换到 16.16.0

1
nvm use 18.17.0

安装后 nvm 自己的环境变量会自动添加，但可能需要手工添加 nodejs 的 PATH 环境变量


检查 npm

npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像

检查镜像

1
npm get registry

如果返回的不是 https://registry.npm.taobao.org/，需要做如下设置

1
npm config set registry https://registry.npm.taobao.org/

搭建前端服务器

新建一个保存项目的 client 文件夹，进入文件夹执行

1
npm install express --save-dev

执行上面指令后会生成下面三个文件

修改 package.json 文件

1
2
3
4
5
6
{
  "type": "module",
  "devDependencies": {
    "express": "^4.18.1"
  }
}
  • 其中 devDependencies 是 npm install –save-dev 添加的

编写 main.js 代码

1
2
3
4
5
import express from 'express'
const app = express()

app.use(express.static('./'))
app.listen(7070)

执行 js 代码（运行前端服务器）

1
node main.js
前端
#前端 #js
JavaScript
https://lzhengjy.github.io/2023/11/01/JS/
作者
Zheng
发布于
2023年11月1日
许可协议