一、Node简介
为什么要学习Node
前端必备技能、可以更好的学习前端框架。能够进一步了解Web，有助于了解后端开发。
Node是什么
Node.js是基于Chrome的V8 JavaScript引擎构造的JavaScript运行环境。
Node.js不是一门新语言，也不是一个框架或者一个库，而是一个软件。用来运行JavaScript。
中文官网：https://nodejs.org/zh-cn/
安装Node
二、使用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、函数参数默认值和参数解构
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));//305.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文件）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
