JAVA前端进阶（二）：ES6

2023-08-30 08:40:58

一、ES6介绍

简介

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版，主要目的是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念。

背景

JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。

ECMAScript历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

1997 年 ECMAScript 1.0 诞生。
1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

二、ES6重点

1. let 和 const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:

let 声明的变量只在 let 命令所在的代码块内有效。

解决 var的变量穿透

for(var i=0;i<5;i++){
    console.log(i);
}
console.log(i);//i在循环内定义，此处造成变量穿透

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

解决var常量能被修改
```
var PI = math.PI;
PI = 100; //定义常量却可以修改
console.log(PI);
```

2. 字符串

模板字符串

传统使用的是拼接方式，ES6可以使用模板字符串方式

<script>
    var person = {
        name : "铁蛋" ,
        address : "广州"
    };

    let describe = "传统字符串：我是"+person.name+",我在"+person.address+"打工";
    console.log(describe);

    describe = `ES6字符串：我是${person.name},我在${person.address}打工`;
    console.log(describe);
</script>

3. 函数

函数设置默认参数

function sum(a=10,b=10){
    return a+b;
}

箭头函数

<script>
    var sum = function(a,b){
        return a+b;
    }
    //改进1
    var sum = (a,b)=>{
        return a+b;
    }
    //改进2
    var sum = (a,b)=>a+b;
</script>

4. 对象

对象简写

如果key和变量的名字一样，可以只定义一次
如果value是一个函数，可以去掉function关键字

对象解构

传统对象解构方式

通过"."的方式，如user.name
通过“[]”的方式，如user["name"]

ES6新增对象解构

通过“{}”获取对象多个属性
```
var {id,name}  = user;
```

对象传播操作符

通过传播操作符“...”可以将一个对象的部分属性赋给另一个对象

var {id,name,...user2} = user;

5、数组

数组map

var users = [{name:"张三", age:20},{name:"李四", age:30}];
var newusers = users.map(function(ele){
    return ele.age + 1;        
})
//箭头函数精简版
//var newusers = users.map(ele=>ele.age+1);
console.log(newusers);

数组reduce

var arr = [1,2,3,4,5,6,7,8,9];
var result = arr.reduce(function(a,b){
    return a+b;
});
//精简版
//var result = arr.reduce((a,b)=>a+b);
console.log(result);//结果为45

三、Babel转码工具

简介

Babel是一个广泛使用的转码器，可以将ES6转化为ES5，从而处理ES6的部分高级语法无法直接在浏览器或Node.js环境中执行的问题。

安装

npm install --global babel-cli
#查看是否安装成功
babel --version

Babel的使用

创建babel文件夹
初始化项目，产生package.json
```
npm init -y
```

创建ES6文件src/example.js

var arr = [1,2,3,4,5,6,7,8,9];
var result = arr.reduce((a,b)=>a+b);
console.log(result);

新建配置文件.babeirc

{
    "presets":["es2015"],
    "plugins":[]
}

在项目中安装转化器

npm install --save-dev babel-preset-es2015

转码
```
babel src -d dist
```

码农公寓