JavaScript（ES6）入门

ES6

1、介绍

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript 语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

2、新增功能

2.1、let

ES6新增了let命令，用来声明变量。它的用法类似于var ，但是所声明的变量，只在let命令所在的代码块内有效。

2.2、const

const声明一个只读的常量。一旦声明，常量的值就不能改变，且声明时必须立即初始化，不能留到以后赋值。const的作用域与let命令相同：只在声明所在的块级作用域内有效。

2.3、匿名函数简写

function(){} 匿名函数简写，语法()=>{}。

2.4、模板字符串

声明一些html标签的字符串更简便，语法：` ` 。

2.5、对象定义

属性名和变量名一致的对象仅使用变量即可无需定义属性名。

2.6、模块

ES6引入了模块系统，可以导出和导入模块。
实战：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECMA6</title>
</head>
<body>
<div id="app">

</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
//es6 1.变量声明 var 原因: 使用var声明变量存在作用范围混淆问题
// let :用来声明局部变量好处: 作用范围严谨从代码声明出开始到代码块结束一般在
声明基本变量使用推荐使用let
// const :用来声明js中常量好处: 一旦被赋值不能被修改推荐使用这两个关键字声明
变量声明js中对象时推荐使用const 数组
//es6 2.在使用匿名函数时作为参数时候 function(){} 推荐使用es6中箭头函数
// (参数,参数)=>{函数体}
axios.get("url").then(function(res){}).catch(function(err){});
axios.get("url").then((res)=>{
}).catch((err)=>{});
//注意:
// 1.当箭头函数没有参数时或者参数大于1个必须加入()
// 2.当箭头函数只有一个参数时 () 可以省略不写
// 3.当函数体中只有一行代码时函数体{} 可以省略不写
// 4.箭头函数和匿名函数最大区别箭头函数没有自己this 匿名函数存在自己的this
//es6 3. 模板字符串使用语法: ` `
let html = "<button οnclick=\"test('+id+')\">点我</button>" +
"<button οnclick=\"test('+id+')\">点我</button>";
let html1 = `<div>
<h1>我是小黑</h1>
<button οnclick="test()">点我</button>
</div>`;
//es6 4. 对象定义便利: 在定义对象时如果对象属性名和变量名一致,写一个即可
let id = 21;
let name = "小王";
let age = 23;
//es5.x版本
const emp = {id:id,name:name,age:age};
//es6.x版本
const emp1 = {id,name,age}
//es6 5. 模块导出和导入
// 导出
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// 导入
// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
</script>
了解更多参考文档： 1.1 ES6 教程 | 菜鸟教程