ES6入门教程

VScode安装插件 Chinese (Simplified)、vscode-icons、Live Server

创建项目

新建文件夹 ES6，在VScode中打开

新建两个文件夹 src用于存放es6语法的代码，dist用于存放编译后的代码

打开VScode终端，使用命令

//意思是使用默认配置初始化项目
npm init -y

使用babel

安装 babel 终端使用命令（babel的作用是把es6的代码转译成es5）

// npm安装 非全局安装 babel客户端，babel的规则集，使用es2015(es6转换代码)
npm i --save-dev babel-cli babel-preset-es2015

测试 babel是否生效

配置babel，在根目录下新建.babelrc文件，编写转译规则集

在src目录下新建一个test.js文件，使用es6语法写一行代码

使用babel编译test.js，命令如下

// 非全局的babel所以要在目录中使用babel命令   es6文件  输出    输出位置
.\node_modules\.bin\babel .\src\test.js --out-file .\dist\test.js

发现报错，具体如下

解决办法，使用管理员运行VScode，执行命令

PS D:\Users\lixx\Desktop\es6> get-ExecutionPolicy
Restricted
PS D:\Users\lixx\Desktop\es6> set-ExecutionPolicy RemoteSigned
PS D:\Users\lixx\Desktop\es6> get-ExecutionPolicy
RemoteSigned

重新执行babel命令，发现在dist目录下生成了一个转译后的文件，转译成功

转译多个文件使用文件夹命令

自动转译

关键字 let、const

var在声明变量的时候是全局的问题

// 在 for中声明的变量，我们在for结束后还可以使用输出的结果是10，造成内存泄漏问题
for (var i = 0; i<10; i++) {}
console.log(i);

var在声明变量的时候局部作用域问题

// 会输出 undefined，按照我们原本的设想应该报Uncaught ReferenceError: b is not defined错误
!(function(){
    console.log(b);
    var b = 10;
})()

// 原因是浏览器在执行的时候会执行js变量提升的操作行为，会把代码转换成以下进行执行，可能造成我们预期之外的结果
!(function(){
    var b;
    console.log(b);
    b = 10;
})()

块级作用域 { }

因为有上面的问题，所以在es6中出现了块级作用域 { } 在花括号中定义的变量在外部是不能访问的

let：用来声明变量
const：用来声明一个只读的变量（值可以变，保证内存地址不可变）
- 变量声明的同时必须⽴即赋值
- 如声明的是简单类型的数据，变量的值不可改变
- 简单类型如字符串、数字和布尔值，值就保存在变量指向的内存地址。⽽复杂类型的数据如对象、数组和函数，保证变量的引用地址是不变的，但是对象的堆内存地址的数据是会改变的

特点：只在声明的代码块中生效、暂时性死区、没有变量提升、不能重复声明

创建项目

使用babel

关键字 let、const

相关推荐