JavaScript ES6入门


 

ECMAScript是JavaScript的标准,JavaScript是ECMAScript的实现。

ES6是2015年发布的,也叫作ES2015。ES6的目标是使JS可以编写复杂的⼤型应⽤程序,成为企业级开发语⾔。

ES6项目环境的搭建

因为某些浏览器不支持ES6,我们需要使用babel将ES6代码转换为低版本的ES代码(低版本js代码),以兼容某些不支持ES6的浏览器,比如IE。
 
1、在VSCode中打开项目,Ctrl+~打开终端

#初始化项目配置
npm init

#安装babel-cli、设置转换规则
npm install --save-dev babel-cli babel-preset-es2015

这种安装方式是局部安装,只对当前项目有效。推荐局部安装,因为每个项目的环境可能不同。
 

2、项目根目录下新建文件夹src、dist,src放ES6代码(js代码),dist放转换得到的低版本ES代码。
 

3、项目根目录下新建babel配置文件.babelrc

// 配置转换使用的规则集
{
    "presets": ["es2015"]
}

 
4、在package.json中配置babel转译

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",  //逗号分隔
    "build": "babel src -w -d dist"  //babel脚本命令,key可以自己取
  },

scripts对象中,每个键值对都是一个脚本命令,key是脚本名称,value是脚本命令。
自己可以配置多个脚本命令。
 

babel 源文件|目录 [-w] [-o|-d] 目标文件|目录

-w 可选,表示一直监听源文件|目录,保存文件时自动转译。如果不使用此参数,每次转译都需要在VSCode终端执行 “npm run 脚本名称“

-o指定输出的目标文件,-d指定输出的目标目录。如果只转译某个js文件,也可以这样写
babel src/xxx.js [-w] -o dist/xxx.js

5、VSCode终端转译

项目写好之后,将ES6代码转换为低版本ES代码

npm run build  #run后面是scripts中的babel脚本名称,使用npm运行babel脚本完成转译

babel脚本使用了-w会一直监听,Ctrl+C可退出监听。
可以在src下写个js文件,里面写句ES6代码 let a=1; 转译下看能否成功、配置是否生效。

写代码时,在项目根目录下新建css、img、plugin等文件夹放对应的文件,html文件可以直接放在项目根目录下,也可以新建文件夹html来存放.html文件。

转译时默认使用严格模式。

新的变量声明方式 let、const

ES5用var声明变量、常量,ES6用let声明变量、const声明常量(只读变量)。

1、内存泄漏、块级作用域

if(true){
    var a=1;
}
console.log(a);  //1


for(var i=0;i<10;i++){
    var j=2;
}
console.log(i);  //0
console.log(j);  //2

var的局部作用域只适用于函数,函数外部不能访问函数内部的局部变量(闭包除外),但在if、for等语句中声明的局部变量,可以在语句块外访问,会造成内存泄漏。

在if、for等语句块中使用let、const声明局部变量,则该局部变量的作用域只是语句块,在语句块外无法访问。

2、重复声明

var i=1;
var i=2;

在同一作用域var可以重复声明变量,let、const则不允许这样做。

3、作用域提升、暂时性死区

//如果使用之前或之后没有声明这个变量,此句代码会报错:i没有定义
console.log(i);  


//如果之后用var声明了这个变量,不会报错
console.log(i);  //不会报错,i的值是undefined
var i=1;


//上面2句代码执行过程如下
var i;   //var在需要时会自动提升变量作用域,但只是将声明提前,到实际赋值处才会赋值
//这期间该变量的值是undefined(没有值),声明了但没有赋值,这个代码区间叫做该变量的暂时性死区,赋值之后才恢复活力,可以正常使用
console.log(i);  //不会报错,i的值是undefined
i=1;

let、const不会自动提升作用域,要求变量、常量必须先声明、再使用。

4、常量的使用

var NAME;
NAME="xxx";
NAME="yyy";

var声明的常量,其实只是标识符全大写罢了,和变量完全相同,可以先声明后赋值,可以修改值。

使用const声明常量,在声明时就必须赋值,且后续不能修改该常量的值。如果常量值是引用,const只能保证常量值(引用的指针)不被修改,引用指向的数组、对象本身是可以修改的。

const不仅仅只用于声明常量,如果想保护变量不被修改,也可以使用const来声明变量。

新的数据类型Symbol

Symbol可以创建独一无二的变量

let str1="chy";
let str2="chy";
console.log(str1==str2);  //true


let obj1=Symbol("chy");
let obj2=Symbol("chy"); 
console.log(obj1==obj2);  //false


// 也可以这样写
let obj3=Symbol.for("chy");
console.log(obj2==obj3);  //false

解构赋值

解构赋值可以把可迭代的数据(数组、对象)批量赋给变量


let a,b,c,d;

// 解构数组
[a,b,c,d]=[12,45,32,21];  //解构赋值,右边的第n个元素赋给左边的第n个变量,a=12,b=45,c=32,d=21

[a,b,c=0,d=0]=[1,2];  //元素不够时可以设置默认值

[a,,b]=[12,5,3];  //可以跳过数组的元素,a=12,b=3,5被跳过了

[a,...b]=[32,45,5,13];  //...b表示把后面的元素作为数组赋给b,带...的变量要放在最后
console.log(a,b);  //32  [45, 5, 13]



let name,age;

// 解构对象,整个式子要放在()中
({"name":name,"age":age}={"name":"chy","age":20})  //解构对象的意义在于把value批量赋给变量
console.log(name,age); //chy  20

解构赋值主要用于前后端联调(tiao),后台返回json对象、json数组,前端使用解构赋值把json对象、json数组中的数据批量赋给变量,后续使用这些变量。

猜你喜欢

转载自blog.csdn.net/chy_18883701161/article/details/106165150