JavaScript基础回顾

Xie Steven

.NET 6 / C# / UWP

联系作者

江苏无锡

Timeline

2021年01月(5)

2021年02月(4)

2021年03月(6)

2021年04月(1)

2021年05月(1)

2021年06月(1)

2022年07月(4)

2022年08月(3)

2022年09月(1)

2024年04月(1)

JavaScript作为一门前端页面的脚本语言已经风靡和流行了很多年，作为一个主要从事后端开发的程序员，之前也因为参与一些前端的项目而接触了这一门脚本语言，当时通过对官方文档上介绍的语法、注意点等一些内容的简单学习，也算顺利完成了当时的前端task。

时隔多年，最近手头又遇到了一个Js与C#程序交互的项目，C#项目通过设计文档和代码的理解，基本没有问题，那么Js的内容，就有点头大了，写代码这个事情，常用就会越来越熟，不常用的话，临时学了一段时间，当时可能会用了，但过了一段时间，会发现全忘了。因此，有必要来回顾一下Js的基础内容。

# JavaScript 语言遵守的标准

众所周知，每一门编程语言都会遵守一个大家都认可的标准，那么Js遵守的标准叫做ECMAScript（简称ES）。ES目前最新的版本是ES10，但根据不完全调查目前大家用的最多的版本依然是ES6，因为ES6新增了大量的特性，这些特性更加符合现代开发技术的理念，同时它又能兼容旧技术，使开发人员能够更好的过渡。总的来讲，ES6能够被广泛接受主要归结为以下几点：

1. 强大的新特性：提供了许多实用的特性，如模块、类、箭头函数等，使开发更加简洁和高效。
2. 提高代码可读性和可维护性：新的语法和特性使代码更具有表达力，更容易理解和维护。
3. 模块化开发：支持模块系统，有助于组织和管理代码。
4. 性能提升：一些特性可以提高代码的性能和效率。
5. 浏览器支持：现代浏览器对 ES6 的支持越来越好，使得在实际项目中使用变得更加可行。
6. 开发效率：减少了代码的复杂性，提高了开发效率。
7. 与新技术的兼容性：更好地与其他现代开发技术和框架兼容。
8. 社区和工具支持：开发社区对 ES6 的广泛接受和支持，以及相应工具的不断发展。
9. 代码简洁性：使代码更加简洁明了，减少了冗余代码。
10. 符合开发趋势：适应了现代软件开发的需求和趋势。

# Js项目遇到的一些写法

## 立即执行函数表达式（Immediately-Invoked Function Expression，IIFE）

在阅读Js项目的代码时，发现里面有大量的(.js)库文件，几乎所有的js文件开头，都是这种写法：

```
(function($){
    $.extend(true, $, {
        xxx:{
            xx:{
                x:function(){
                    ...
                }
            }
        }
    });
}(jQuery));
```

初看一脸懵，查了一些官方文档，这种写法称为[**立即执行函数表达式**（简称IIFE）](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)。这个方法一旦定义马上会被执行，但这不是IIFE最主要的特点，它的主要作用是以下几个方面：

1. 作用域隔离：创建一个独立的作用域，避免变量和函数的命名冲突。
2. 隐藏细节：可以将复杂的逻辑或依赖的代码封装在函数内部，使外部代码更简洁清晰。
3. 减少全局变量：避免在全局作用域中创建过多的变量。
4. 模块封装：可以作为一种简单的模块模式，提高代码的可维护性和可复用性。
5. 避免命名冲突：确保内部使用的变量名不会与外部代码中的变量名冲突。
6. 私有成员保护：可以在函数内部定义私有成员，外部无法直接访问。
7. 避免变量提升：可以控制变量的声明和赋值时机。

了解了IIFE，再来认识一下上面这段代码。它定义了一个立即执行函数表达式，函数需要传入一个参数`$`，代码中将`(jQuery)`对象传给了方法，并且利用jQuery的扩展方法，直接将我们自定的对象添加了jQuery对象中，因此我们在其他地方需要调用`x`方法时，可以直接这样写：`$.xxx.xx.x();`

>需要注意的是,为了使用jQuery对象，我们需要在定义这个IIFE前，将jQuery标准库引入进来

再举一个私有成员保护的例子：

```
(function ($) {
    var privateVariable = 'this is a private variable.';
    $.extend(true, $, {
        xxx: {
            xx: {
                getPrivateVar:function(){
                    return privateVariable;
                }
            }
        }
    });
}(jQuery));
```
如果在外部想直接使用`privateVariable`变量，例如`console.log(privateVariable)`，会报错'Uncaught ReferenceError: privateVariable is not defined'. 想要拿到变量`privateVariable`的值,只能通过对外暴露的`$.xxx.xx.getPrivateVar()`方法。


## 变量的声明

在ES6以前，声明变量使用关键字`var`，例：`var name ='steven';`，var 声明的变量只有**全局作用域**和**函数作用域**，因此对于习惯了高级编程语言的开发者来讲，经常会出现一些莫名其妙的Bug，在ES6以后新增了**块级作用域**，通过`let` 和 `const` 关键字实现。

`var`、`let` 和 `const` 它们之间的主要区别：
- `var`：
    - `var`定义的变量，作用域是整个封闭函数，即全局变量。
    - 存在变量提升，即变量可以在声明之前使用，并且可以多次声明同名变量。
- `let`：
    - `let`定义的变量，作用域是块级或子块。
    - 不存在变量提升，即变量必须在声明之后才能使用，并且不能在同一作用域内重复声明同名变量。
- `const`:
    - `const`用来专门声明常量，常量一旦初始化，就不能重新赋值，否则会报错。
    - 与 `let` 一样作用于块级作用域。

`var` 声明变量举例：

```
function varTest() {
    console.log(variable);
    if (true) {
        var variable;
        variable = 'hello. var def.'
    }
    console.log(variable);
}
```

调用这个方法时不会报错，会先输出 `undefined`, 再输出 `hello. var def.`。这种现象体现了`var`声明的变量，它的作用域是**全局**的，在这里指的是整个函数区域内，换句话说，无论在函数的哪个地方，只要用`var`声明的变量，会**自动被提升**到代码块的开头位置，在函数里面任何地方都可以使用。例子中，因为一开始就使用了还没被赋值的变量`variable`，因此打印出来是`undefined`,而第二次打印这个变量，因为已经完成了赋值，因此可以正常打印出变量的值。

`let` 声明变量举例：

```
function letTest() {
    console.log(variable);

    if (true) {
        let variable = 'hello. let def.';
    }

    console.log(variable);
}
```

调用这个方法时会直接报错 'Uncaught ReferenceError: variable is not defined', 因为let 声明的变量作用域是块级，这里指的是if代码块。

同样，我们把第一行代码注释掉：

```
function letTest() {
    //console.log(variable); 'Uncaught ReferenceError: variable is not defined'

    if (true) {
        let variable = 'hello. let def.';
    }

    console.log(variable);
}
```
还是报错了'Uncaught ReferenceError: variable is not defined',因为变量声明在if代码块中，而使用这个变量是在if代码块外面。

正确的代码应该是这样：

```
function letTest() {
    //console.log(variable); 'Uncaught ReferenceError: variable is not defined'

    if (true) {
        let variable = 'hello. let def.';
        console.log(variable);
    }

    //console.log(variable); 'Uncaught ReferenceError: variable is not defined'
}
```

`const` 声明变量举例：

```
function constTest(){
    const variable = 'hello. const def.';
    variable = 'hello. js.';
}
```

调用这个方法时会报错'Uncaught TypeError: Assignment to constant variable.'，原因就是`const`定义的变量一旦被赋值，不可以被重新赋值。

总结一下，在ES6之前，JavaScript只有全局作用域和函数作用域，对于习惯了高级编程语言的程序员来讲，容易遇到一些难以理解的Bug, 为了解决这个问题，ES6以后引入了`let`和`const`，来避免因作用域缺陷产生的Bug。因此，在实际开发过程中，建议大家还是尽量用`let`和`const`来声明变量，实在没有办法为了兼容旧代码，再考虑用`var`。

# JavaScript对象的特性

## 封装

在ES6之前，要定义一个对象，可以像下面这样写：

```
var user = {
    userName : 'Steven',
    age : 30,

    introduce : function(){
        return "My name is " + this.userName + ", I'm " + this.age + " years old."
    }
}
```

可以看到，定义了一个`user`对象，这个对象包含`userName`和`age`属性，以及一个`introduce()`方法。

ES6以后，新增了类的概念，我们可以使用`class`关键字来创建一个类：

```
class NewUser {
    constructor() {
        this.userName = 'Steven';
        this.age = 30;
    }

    introduce() {
        return "My name is " + this.userName + ", I'm " + this.age + " years old."
    }
}
```

使用时，需要先创建这个类的实例，再使用它的属性和方法：

```
let user = new NewUser();
console.log(user.introduce());
```

## 继承

在ES6以前，可以通过原型链来实现JavaScript中的继承：

```
function User(){
    this.userName = 'Steven';
    this.age = 30;
}

User.prototype.introduce = function(){
    return "My name is " + this.userName + ", I'm " + this.age + " years old."
}

function Child(){
    User.call(this);
}

Child.prototype = Object.create(User.prototype);

Child.prototype.constructor = Child;
```

它的工作原理如下：

1. User 函数定义了父类，具有一个属性 userName 和 age，并定义了一个方法 introduce。
2. Child 函数作为子类，通过调用 User.call(this) 来执行父类的构造函数。
3. 通过 Object.create(User.prototype) 将子类的原型指向父类的原型，实现了属性和方法的继承。
4. 明确设置 Child.prototype.constructor 为 Child，以确保正确的构造函数指向。

看完原理，是不是觉得Js中写个继承咋这么费劲呢！代码看起来还不好理解。不过没关系，ES6以后因为有了新的`class`关键字可以用来创建类，因此继承的写法也有了很大的改善：

```
class NewUser {
    constructor() {
        this.userName = 'Steven';
        this.age = 30;
    }

    introduce() {
        return "My name is " + this.userName + ", I'm " + this.age + " years old."
    }
}

class NewChild extends NewUser{
    constructor(){
        super();
        this.userName = 'May';
    }

    draw(){
        console.log("I'm good at drawing.");
    }
}
```

代码中，新建了一个NewChild类，通过`extends`关键字来实现继承NewUser类，并且在子类NewChild的构造函数中调用`super()`方法来访问父类的构造函数。

## 多态

多态也是面向对象编程(OOP)的三大特性之一，指的是同一个接口，不同的实例会有不同的实现方法。举个例子，ES6之前的写法还是用原型链的形式：

```
function Person(name){
    this.userName = name;
}

Person.prototype.getName = function(){
    console.log(this.userName +" is person.");
}

function Man(name){
    Person.call(this);
    this.userName = name;
}

Man.prototype = Object.create(Person.prototype);
Man.prototype.constructor = Man;
Man.prototype.getName = function(){
    Person.prototype.getName.call(this);
    console.log(this.userName + " is a man.");
}

function Woman(name){
    Person.call(this);
    this.userName = name;
}

Woman.prototype = Object.create(Person.prototype);
Woman.prototype.constructor = Woman;
Woman.prototype.getName = function(){
    Person.prototype.getName.call(this);
    console.log(this.userName + " is a Woman.");
}
```

上面代码中，Man 和 Woman分别继承父类Person,并且重写了getName 方法。

ES6以后，通过`class`、`extends`来实现多态：

```
class NewPerson{
    constructor(name){
        this.userName = name;
    }

    getName() {
        console.log(this.userName +" is person.");
    }
}

class NewMan extends NewPerson{
    constructor(name){
        super(name);
    }

    getName(){
        super.getName();
        console.log(this.userName + " is a man.");
    }
}

class NewWoman extends NewPerson{
    constructor(name){
        super(name);
    }

    getName(){
        super.getName();
        console.log(this.userName + " is a Woman.");
    }
}
```

## 动态性

JavaScript对象的动态特性区别于其它编程语言，可以给对象动态添加属性和方法，而不用事先定义好。

举个例子：

```
let animal = {}
animal.name = "kiki";
console.log(animal.name);
```

代码中定义了一个animal对象，动态的给她添加了一个name属性。动态性在实际开发中很实用，可以很方便我们在代码任何地方，想要修改对象时可以直接对对象进行修改。比如我们在发送http请求时，请求体要求的参数形式为json形式，包含几个字段的值，这种场合，新建一个对象，动态的给它追加属性和值，最后json序列化是很方便的。

```
let animal = {}
animal.name = "kiki";
animal.xxx = "xxx";
console.log(JSON.stringify(animal));
```

动态性是把双刃剑，它能给开发人员带来遍历，同时又会存在隐患。举个例子，http请求体的参数要求为json形式，同时json中需要包含 'name'、'age'、'memo'三个字段的值。正常情况下，为了格式统一，一般会预先定义好Dto对象,然后对属性值进行赋值：

```
let req = {
    name : '',
    age : 0,
    memo : ''
}

req.name = 'steven';
req.age = 30;
req.memo = 'memo..'
```

然而正是由于动态性，实际开发中会有用错属性名的场合，例如

```
req.names = 'steven';
req.age = 30;
req.memo = 'memo..'
```

代码中应该是给`name`属性赋值，但实际代码的效果是给对象追加了一个`names`属性，这样就会造成请求参数不符合要求的问题。

鉴于此，我们需要在这种情况下为我们创建的对象添加一个限制，可以利用`Object.preventExtensions()`方法阻止对象的扩展：

```
"use strict";
let req = {
    name : '',
    age : 0,
    memo : ''
}

Object.preventExtensions(req);

req.name = 'steven';
req.age = 30;
req.memo = 'memo..'

req.names = 'steven';
```

代码中，在第一行添加了一句"use strict"是为了启用严格语义模式，能够让Js抛出异常，阻止代码继续运行下去，如果不添加，扩展的属性`names`不会被追加到对象中，但不会有异常抛出，代码依然可以运行下去。

## 字符串拼接

在ES6之前，字符串拼接是通过 `+` 、`+=`操作符实现：

```
let str1 = 'hello ';
let str2 = 'javascript.';
let str = str1 + str2;
str1 += str2;
```

ES6之后，新添加了`模版字符串`的功能：

```
let userName = 'steven';
let strs = `hello javascript. I'm ${userName}.`;
```

实例中，使用反引号```来定义模板字符串，通过`${}`来插入变量或者表达式，实现字符串拼接的效果。使用模板字符串能够使代码看起来更简洁明了。

## 扩展运算符(`...`)

扩展运算符 ... 是 ES6 中新增的内容，它可以在函数调用或者数组构造的时候，将数组表达式或者字符串在语法层面进行展开。下面是扩展运算符的一些使用场景：

- 合并数组：使用扩展运算符 ... 可以很方便地实现多个数组的合并。

```
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);//(6) (1, 2, 3, 4, 5, 6)
```

- 复制数组：使用扩展运算符可以更加简洁地复制数组，需要注意的是，使用扩展运算符复制数组时，复制的是数组的值而不是引用。所以修改复制后的数组不会影响原始数组。

```
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray);//(1, 2, 3)
copiedArray.push(4);
console.log(originalArray);//(1, 2, 3)
```

- 字符串转数组：可以使用扩展运算符将字符串转换为数组。

```
let str = "hello";
console.log(...str);// "h" "e" "l" "l" "o"
```

- 展开对象：

```
let user = { name: '小明', age: 28 };
let userInfo = {...user, description: 'info'};
console.log(userInfo); 
```

- 替代数组的 apply 方法：扩展运算符可以展开数组，将一个数组变为参数序列，所以不再需要 apply 方法，将数组转为函数的参数

```
function add(x, y) {
    return x + y;
}
const numbers = [4, 38];
add(...numbers); 
```

- 扩展运算符与正常的函数参数结合使用：

```
function push(array, ...items) {
    array.push(...items);
}
function f(v, w, x, y, z) {}
const args = [0, 1];
f(-1, ...args, 2, ...(3));
```

- 扩展运算符后面放置表达式

```
const arr = [...(x > 0 ? ['a'] : []), 'b'];
```

- 扩展运算符后面是一个空数组，则不产生任何效果

```
const arr = [...[]];
```

# 值比较运算符

1. ES6之前，使用比较运算符：如 ==（宽松比较）或 ===（严格比较）
- `==` 宽松相等运算符

```
let num1 = 5;
let num2 = "5";
let ret = num1 == num2 ? true : false;
```

在上述示例中，由于 == 会进行类型转换，所以将字符串 "5" 转换为数字 5 后与变量 num1 进行比较，结果为 true 。

- `===` 严格相等运算符

```
let num1 = 5;
let num2 = "5";
let ret = num1 === num2 ? true : false;
```

在这个示例中，=== 不会进行类型转换，它要求操作数的类型和值都完全相等才返回 true ，所以结果为 false 。

2. ES6 之后
    - 引入了 Object.is() 方法：用于严格比较两个值，不进行类型转换
    - Set 和 Map 数据结构的存在：提供了更高效的集合比较操作

```
// 基本示例
const value1 = 5;
const value2 = 5;
console.log(Object.is(value1, value2));

// 不同类型的比较
const obj1 = { key: 'value' };
const obj2 = { key: 'value' };
console.log(Object.is(obj1, obj2));

// null 和 undefined 的比较
console.log(Object.is(null, undefined));

// 集合类型比较
const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([1, 2, 3, 4, 5]);

console.log(Object.is(set1,set2)); 

const map1 = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
const map2 = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);

console.log(Object.is(map1, map2)); 
```

在上述示例中，Object.is() 用于比较值的相等性。它具有更严格的比较规则，不会进行类型转换。与传统的相等比较运算符不同，Object.is() 能够正确处理一些特殊情况，例如 0 和 -0 的比较。