1.简介
ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。每年一个新版本
2.什么是 ECMAScript
来看下前端的发展历程：
2.1.web1.0 时代：
最初的网页以 HTML 为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。
2.2.web2.0 时代：
- 1995 年，网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言
- 1996 年，微软发布了 JScript，其实是 JavaScript 的逆向工程实现。
- 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。
- 1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。JavaScript 和 JScript 都是
ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。所以，ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的 js 语言，如 JavaScript 则是规范的具体实现。
3.ES6新特性
3.1.let声明变量
<!-- shitf+!生成html模板 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>es6-let</title>
</head>
<body>
<script>
// var声明的变量会越域,let声明的变量有严格的作用域
{
var a =1;
let b=2;
console.log("a="+a);
console.log("b="+b);
}
console.log("a="+a);
console.log("b="+b);// b is not defined
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>es-let</title>
</head>
<body>
<script>
// var中同一变量可声明多次,let中只能声明1次
var a = 1;
var a = 2;
console.log("a="+a);
let b = 3;
//let b = 4;
console.log("b="+b);// Identifier 'b' has already been declared
console.log("x="+x);//undefined
var x = 10;
console.log("y="+y);//Cannot access 'y' before initialization
let y = 20;
</script>
</body>
</html>
注释掉let b = 4;
3.2.const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>const</title>
</head>
<body>
<script>
// const声明只读变量(常量),一旦声明不能改变
const a = 10;
console.log(a);
a = 20;
console.log(a);//Assignment to constant variable.
</script>
</body>
</html>
3.3.解构表达式
3.3.1数组解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解构表达式</title>
</head>
<body>
<script>
let arr = [1,2,3];
//常规写法
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log("a=" + a + ",b=" + b + ",c=" + c);
//解构表达式写法 数组解构
let [x,y,z] = arr;
console.log("x=" + x + ",y=" + y + ",z=" + z);
</script>
</body>
</html>
3.3.2对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解构表达式</title>
</head>
<body>
<script>
let arr = [1,2,3];
//常规写法
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
// console.log("a=" + a + ",b=" + b + ",c=" + c);
//解构表达式写法 数组解构
// let [x,y,z] = arr;
// console.log("x=" + x + ",y=" + y + ",z=" + z);
const person = {
name: "小生不才",
age:18,
language:["C","HTML","JAVA","MYSQL"]
}
//常规写法
//const name = person.name;
//const age = person.age;
//const language = person.language;
//console.log(name,age,language);
//解构表达式写法 对象解构
const {name,age,language}=person;
console.log(name,age,language);
const {name:name2,age:age2,language:language2}=person;
console.log(name2,age2,language2);
</script>
</body>
</html>
3.4.字符串拓展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串</title>
</head>
<body>
<script>
let s = "hello,vue";
//startsWith是否以XX开始
console.log(s.startsWith("he"));
//endsWith是否以XX结尾
console.log(s.endsWith("he"));
//includes是否包含XX
console.log(s.includes("he"));
//字符串模板
let s2 = `
<div>
<span>hello world<span>
</div>
`;
console.log(s2);
// 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
function say(){
return "Hi,VUE";
}
let name ="小生不才";
let age = 18;
let s3 = `我是${name},今年${age+2},我想说${say()}`;
console.log(s3);
</script>
</body>
</html>