一、Node简介

为什么要学习Node

前端必备技能、可以更好的学习前端框架。能够进一步了解Web，有助于了解后端开发。

Node是什么

Node.js是基于Chrome的V8 JavaScript引擎构造的JavaScript运行环境。

Node.js不是一门新语言，也不是一个框架或者一个库，而是一个软件。用来运行JavaScript。

官网：https://nodejs.org/en/

中文官网：https://nodejs.org/zh-cn/

安装Node

相关视频：https://www.bilibili.com/video/av543554941?from=search&seid=18225893708128539887&spm_id_from=333.337.0.0

二、使用node执行js代码的两种方式

方式1：交互（repl模式）

win键+R键打开命令行窗口，输入node，即进入交互模式。在这个模式下可以输入js代码直接回车执行

方式2：解释js文件

书写一个js文件，在黑窗口中输入node 文件名+tab回车

利用此方式来解释js代码

三、Node的注意事项

1、nodejs ： ECMAScript + 核心的api(重点) . 没有 DOM、 BOM。若使用则会报错。

2、nodejs 提供了文件操作系统(fs)，还提供了 web 服务的功能(http)，即使用nodejs可以编写一个web服务器。

3、VScode中若想执行js代码，可安装扩展Code Runner。

四、ES6语法简介

1、var的弊端及let关键字

1.1var的弊端：

var有预解析，在变量声明之前可以使用，否则会报错。

var可以重复定义

var(ES5没有块级作用域)ES5有全局作用域，函数作用域

for循环中的全局变量污染问题

1.2ES6的关键字

（1）let

let取消预解析，变量声明可以提升，必须声明后使用

let不可以重复定义同一个变量

let有块级作用域用{}表示

在for循环中不会造成全局变量污染

（2）const

const是只读常量的关键字（永久不变）

常量具备的特点：

        一旦声明必须赋值

        一旦赋值不能修改

        常量的作用域和let变量的作用域一致

注意：用const声明的引用数据类型的常量可以修改引用的值，但不能修改引用的地址

2、ES6拼接字符串的方式

ES5拼接字符串方式繁琐，易写错。ES6推出的新字符串拼接方式----模板字符串

​
 var name="小明",age=12,gender="男";
        // var newStr="我的名字是"+name+",今年"+age+"岁了，我是个小"+gender+"孩。"
        // console.log(newStr);
        var newStr2=`我的名字是${name},今年${age}岁了。`
        console.log(newStr2);

​

${}里面放的是变量或表达式，内容允许换行

3、解构语法

ES6允许按照一定模式，从数组或对象中提取值对变量进行赋值，这被称为解构

目的：简化代码

等号左边的变量，和对象属性值同名时，才可以解构赋值与顺序无关。

3.1完全结构和部分解构

 //完全解构
        var obj={
            name:"小明"，
            age:12，
            gender:"男"
        }
        let {name,gender,age}=obj;
        console.log(name,gender,age);
        //部分解构
        let {name}=obj;
        console.log(name);

解构后重新命名

 //解构后重命名
        let {name:myName}=obj;
        console.log(myName);

获取现有对象方法，赋值给变量

let {random}=Math;
        console.log(random);

3.2数组的解构赋值

//数组解构
        let arr=[10,20,30];
        let [a,b,c]=arr;
        console.log(a,b,c,d);//a=10,b=20,c=30,d=undefind
 //数组部分解构
        let [e]=arr;//e=arr[0]=10
        let[,,f]=arr;//f=arr[2]=30
 //复合解构
        let arr2=[10,20,[100,200,300]];
        let [p,,[x,y,z]]=arr2;

3.3字符串解构（伪数组）

//字符串解构
        let str="xyzsc";
        let [a,b,c,,]=str;
        //交换变量的值
        [a,b]=[b,a];
        console.log(a,b);

4、对象的简化写法

如果一个对象的属性名和外面的一个变量同名，可以直接交换变量名作属性名，并会自动把变量值作为属性值。

  var 
            name:"小明",
            age:12,
            gender:"男"
    let obj={
        name:name,
        age:age,
        gender:gender
    }
    //简写
    // let obj={
    //     name,
    //     age,
    //     gender
    // }

5、函数参数默认值和参数解构

5.1函数参数的默认值

 function add(a,b,c,d){
        //如果只传少于四个值
        // a=a||0;
        // b=b|0;
        // c=c||0;
        // d=d|0;
        return a+b+c+d;
    }
    console.log(add(10,20));
    console.log(add(10,20,30,40));
    //以上是ES5写法
    function add(a=0,b=0,c=0,d=0){
        return a+b+c+d;
    }
    console.log(add(10,20));//30

5.2解构赋值

可以数组解构，当参数是一组有序的值时

适用对象结构，当参数是一组无序的值时

 function fn([x,y,z]){
        console.log(x,y,z);
    }
    fn([1,2,3])
    function fun({x,y,z}){
        console.log(x,y,z);
    }
    fun({x:1,z:2,y:3})

6、rest参数和拓展运算符

6.1rest参数

rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function fun(a,b,...rest){
console.log(rest);//Arry(3)真数组
    }
    fun(10,20,30,40,50);

重点是”...“不是一定要写rest,要写在形参的最后

rest获取的是剩余参数，以数组的形式呈现

6.2拓展运算符

ES6中的拓展运算符是一个非常有用的运算符，可以用来快速展开数组，对象...拆成一个个单独的数据。

let arr=[1,2,3,4];
console.log(...arr);

展开对象

//展开对象
let obj={
            name:"小明",
            age:12,
            gender:"男"
        }
console.log({id:1,date:"2021-09-03",...obj});

使用场景：

1、数组中值作为函数参数使用

2、数组合并  let newArr=[..arr1,...arr2]

3、对象合并

拓展运算符在解构中的使用

let str="xiaoming";
let [a,b,...strNew]=str;
    console.log(strNew);//strNew="aoming"

7、箭头函数

7.1固定语法

（参数）=>{函数体}

注：形参个数如果为一个，可以省略小括号不写

如果函数体里面只有一个语句，可以省略大括号不写，并且会返回=>符号后的数据

如果函数体只有多个语句，则不能省略大括号

如果函数体只有一个语句，且返回一个对象，建议不要写成简式。

箭头函数不可以使用arguments获取参数列表，可以用rest参数代替

  //创建无参无返回的函数
    let fun1=()=>{};//花括号可以省略，但小括号不可
    //创建无参有返回的函数
    let fun2=()=>{
        return "fun2";
    }//return与花括号可以省略
//创建有参无返回的函数
let fun3=x=>{
    console.log(x);
}//小括号可以省略
//创建有参有返回的函数
let fun4=(x,y)=>{
    let sum=x+y;
    return sum;
}
//箭头函数返回对象

箭头函数中的this

全局中使用指向window

对象调用指向该对象（事件中的事件源）

箭头函数没有自己的作用域，即箭头函数中的this指向外层作用域与function不同

但如果创建的是字面量对象，不适合书写箭头函数

在dom操作中使用箭头函数
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="odiv" class="box"></div>
    <script>
        //var obj = document.getElementById("odiv");
       odiv.onclick = function(){
            
            // setTimeout(function(){
            //     this.style.width="300px"   //修改不了
            // },1000);


            setTimeout(()=>{
                this.style.width="300px"   //修改成功
            },1000);
        }
    </script>
</body>
</html>

8、面向对象（重点）

一般面向对象的语言里面，都有类，实例对象这些概念。我们通过实例化类，得到实例对象。

类：定义一个 类，需要使用 class 关键字，但是es5里面，使用构造函数（首字母大写）来实现的。

继承：一般使用 extends 关键字来进行继承，但是在es5里面，也是没有extends继承，而是使用的prototype原型继承完成的。

es6之前的写法：

// 用函数定义类
function Animal(name){
    this.name = name;
}
// 给类的实例定义方法
Animal.prototype.showName = function(){
    console.log(this.name);
}
// 给类定义静态方法
Animal.eat = function(){
    console.log('进食');
}

// 根据函数实例化对象
var a = new Animal("Tom");
// 调用对象的方法
a.showName();
// 调用类的静态方法
Animal.eat();

//重点掌握：

class Animal{

    // 定义构造函数
    constructor(name){
        // console.log("constructor");
        this.name = name
    }

    // 定义一个方法
    showName(){
        console.log(this.name);
    }

    //定义静态方法
    static eat(){
        console.log("吃---");
    }
}

let obj = new Animal("Tom");

obj.showName();
Animal.eat();

继承和重写：

//es6之前写法：
function Animal(name){
    this.name = name;
}
Animal.prototype.showName = function(){
    console.log(this.name);
}
Animal.eat = function(){
    console.log('进食');
}

// 定义子类
function Mouse(name, color){ 
    // 子类继承父类的属性 需要将 this 指向父类中的 name
    Animal.call(this, name);  
    this.color = color;
}
//设置子级构造原型
// 子类继承父类的方法
Mouse.prototype = new Animal(); 
// 给子类实例添加新方法 
Mouse.prototype.showInfo = function(){
    console.log(this.name, this.color);
}

var m = new Mouse('Jerry', 'gray');
m.showName();
m.showInfo();
Animal.eat();

//重点掌握：
class Animal{

    // 定义构造函数
    constructor(name){
        // console.log("constructor");
        this.name = name;
    }

    // 定义一个方法
    showName(){
        console.log(this.name);
    }

    //定义静态方法
    static eat(){
        console.log("吃---");
    }
}

class Cat extends Animal{

}

let cat1 = new Cat("Tom");

cat1.showName();
Cat.eat();

继承中的子类constructor的写法：

在ES6中使用继承时，constructor中必须调用super()方法,其本质是在调用父类的constructor方法。通过这样的方式来达到属性继承的效果

注意：在ES6中使用继承时，constructor中必须调用super()方法,其本质是在调用父类的constructor方法。通过这样的方式来达到属性继承的效果。

class Animal{

    // 定义构造函数
    constructor(name){
        console.log("constructor");
        this.name = name;
        this.age = 0;
        this.color = "white";
    }

    // 定义一个方法
    showName(){
        console.log(this.name);
    }

    //定义静态方法
    static eat(){
        console.log("吃---");
    }
}

class Cat extends Animal{
    constructor(name){
        super(name);//调用constructor()方法并且让this在constructor起作用
        // console.log("constructor");
        this.color = "yellow";
    }
    
    
    //定义Cat类特有的方法
    catchMouse(){
        console.log("抓老鼠");
    }
    //重写父类方法
    showName(){
        console.log(this.name, "喵喵");
    }
}

let cat1 = new Cat("Tom");
console.log(cat1.color);
console.log(cat1.age);
console.log(cat1.name);
cat1.catchMouse();
cat1.showName();

9、静态属性和静态方法

Math.max(10, 20 30, 16)   把构造函数当成普通对象来调用某个方法，这个方法叫静态方法，如果是属性，我们就称它为静态属性。

定义静态方法，再类中通过加static关键字来定义。

关于静态属性，目前暂时没有关键字来定义，想要实现的话就在定义完类之后直接在类上添加属性，获取的时候通过类名来获取这个属性。

10、全局对象

JavaScript 中有一个特殊的对象，称为全局对象（Global Object），它及其所有属性都可以在程序的任何地方访问，即全局变量。

在浏览器 JavaScript 中，通常 window 是全局对象， 而 Node.js 中的全局对象是 global，所有全局变量（除了 global 本身以外）都是 global 对象的属性。

后面看到所有的全局变量，例如 console，setTimeout 和 process 是 global 变量的成员。我们甚至可以向全局变量添加成员，使其在任何地方都可用。
1. nodejs 里面没有 window全局对象，但是存在一个 gloabal 全局对象。之前使用 console. setTimeout 这些全局的函数都是 global 上面的属性

console.log(window);   // 报错 ReferenceError: window is not defined
 console.log(global);
 2. nodejs 里面声明的变量，并不会被挂载带 global 全局对象
let b = 20;
console.log(global.b);  //undefined
 3. 可以向global添加成员，使其在任何地方都可用
global.a = 10;
console.log(a); //10

4. 在nodejs执行js文件的过程中，里面也存在 this ，但是这个 this 和 global 并不是相等。
console.log(global === this);  //false
实际上，在 nodejs 里面的this代表的当前这个 js模块（暂且认为 this 代表当前这个js文件）