ES6(ECMAScript 6.0) 新特性

1 ES6 基本介绍

（1）ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。

（2）ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语言

（3）ECMAScript 和 JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现

2 let 声明变量

2.1 应用实例-基本使用

需求: 演示 let 的基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let基本使用</title><script type="text/javascript">// 使用let声明变量let name = "小王";//1. console.log("name=",name); 使用, 可以输出对象的完整信息//2. console.log("name=",name); 使用+, 表示字符串的拼接。// 如果name是一个对象，会输出object，而不会输出对象的完整信息console.log("name=",name);</script>
</head>
<body>
</body>
</html>

注意：可以使用F12 或者 Ctrl+Shift+j 进入开发者模式，就可以看到控制台（这里如果使用chrome浏览器控制台无输出，edge可以正常输出，目前未解决）

2.2 注意事项和使用细节

（1）let 声明的变量有严格局部作用域

（2）let 只能声明一次, var 可以声明多次

（3）let 不存在变量提升, var 存在变量提升

（4）代码演示 : let_detail.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let 使用注意事项和细节</title><script type="text/javascript">// let 细节1// (1) let 声明的变量, 在代码块中，则作用域在代码块中// (2) var声明的变量, 在代码块中，作用域没有限制{var name = "小王";let job = "java工程师";console.log("name=", name);console.log("job=", job);}console.log("name=", name);//console.log("job=", job);//job is not defined// let 细节2// 1. var 可以声明多次// 2. let 只能声明一次var num1 = 100;var num1 = 200;console.log(num1);let num2 = 600;//let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2console.log(num2);// let 细节3// 1. let 不存在变量提升，如果使用了后面才声明的变量会报错。浏览器认为这个变量不存在// 2. var 存在变量提升，如果使用了后面才声明的变量不会报错，浏览器认为这个变量是存在的，// 但是没有值，会赋予一个初始值undefinedconsole.log("x=", x);//undefinedvar x = "tom";//can't access lexical declaration 'z'console.log("z=", z);let  z = "mary";</script>
</head>
<body></body>
</html>

3 const 声明常量/只读变量

3.1 应用实例

需求: 演示 const 的基本使用

代码演示, 创建 const.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>const常量/只读变量的使用</title><script type="text/javascript">//const 基本使用/**1. 常量在定义时，需要赋值2. 常量赋值后不能修改*///常量const PI = 3.14;//PI = 3.1415926;//invalid assignment to const 'PI'console.log("PI=", PI)</script>
</head>
<body>
</body>
</html>

3.2 注意事项和使用细节

（1）常量在定义时，需要赋值

（2）常量赋值后不能修改

4 解构赋值

4.1 基本介绍

（1）解构就是取出数据，解构赋值是对赋值运算符的扩展

（2）是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

（3）主要有两种形式：数组解构和对象解构

4.2 应用实例-数组解构

需求: 演示 ES6 数组解构用法

代码演示, 创建 arr_resolve.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组解构赋值</title><script type="text/javascript">let arr = [1, 2, 3];//如果要看某个变量的类型console.log("arr=>", arr);//数组解构[取出元素]//1.传统let x = arr[0], y = arr[1], z = arr[2];console.log(x, y, z);console.log("==================================");//2. ES6风格let [a, b, c] = arr;console.log(a, b, c);let [num1, num2, num3] = [100, 200, 300];console.log(num1, num2, num3);</script>
</head>
<body>
</body>
</html>

4.3 应用实例-对象解构

需求: 演示 ES6 对象解构用法

代码演示, 创建 object_resolve.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象解构</title><script type="text/javascript">//对象解构/*** let monster = {name: '牛魔王', age: 800}* 细节说明* 1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致* 2. 也可解构对象部分属性，比如 let{age} 这样就只取出age 属性* 3. 还有其它的形式,比如方法上使用对象解构*///monster是一个对象let monster = {name: '牛魔王', age: 800};//传统方式取出属性-解构 对象名.属性名console.log(monster.name, " ", monster.age);//ES6对象解构//1. 把monster对象的属性, 赋值给{name,age}//2. {name,age} 的取名name 和 age 要和monster对象的属性名保持一致//3. 使用{} 包括, 不要使用[]//4. {name,age} 顺序是无所谓let {name, age} = monster;console.log("========================");console.log("name=", name, " age=", age);//下面这个写法也可以//let {name, age} = {name: '牛魔王', age: 800};//还有其它的形式,比如方法上使用对象解构//如果这样使用，仍然要保证名称和对象的属性名一致function f1({name, age}) {console.log("f1-name=", name, " ", "f1-age=", age)}f1(monster);</script>
</head>
<body></body>
</html>

5 模板字符串

5.1 基本介绍

（1）模板字符串使用反引号 `` 将字符串包裹

（2）可作为普通字符串

（3）可用来定义多行字符串，即可以将换行字符串原生输出

（4）字符串插入变量和表达式, 使用 ${}

（5）字符串中可以调用函数

5.2 应用实例

需求: 演示模板字符串用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板字符串的使用</title><script type="text/javascript">//1、字符串，换行会原生输出let str1 = `for(int i = 0;i < 10;i++){System.out.println("i="+i);}`;console.log("str1=", str1);//2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。let name = "小王";//(1) 当解析 ${name}, 就找最近的name遍历, 进行替换//(2) 然后可以得到最后解析的字符串let str2 = `名字=${name}`;let str3 = `1+2=${1 + 2}`;let n1 = 80;let n2 = 20;let str4 = `${n1}+${n2}=${n1 + n2}`;console.log("str2=", str2);console.log("str3=", str3);console.log("str4=", str4);//3. 字符串中调用函数function sayHi(name) {return "hi " + name;}let name2 = "tom";let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;console.log("str5=", str5);console.log("str6=", str6);</script>
</head>
<body></body>
</html>

控制台输出：

6 对象相关新特性

6.1 应用实例-声明对象简写

需求: 演示声明对象简写

代码演示, 创建 object.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>声明对象的简写方式</title><script type="text/javascript">const age = 800;const name = "牛魔王";// 传统 声明/定义对象let monster = {name: name, age: age};// ES6 声明/定义对象//1. {name, age} : 表示对象的属性名是name和age//2. 属性name的值是从变量/常量 name来的let monster02 = {name, age};console.log("monster02=>", monster02);</script>
</head>
<body></body>
</html>

控制台输出

6.2 应用实例-对象方法简写

需求: 演示对象方法简写

代码演示, 创建 object_method.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象方法的简写形式</title><script type="text/javascript">// 传统-对象方法定义let monster = {name: "红孩儿",age: 100,sayHi: function () {console.log("信息: name=", this.name, " age=", this.age);}}monster.f10 = function () {console.log("哈哈");};monster.sayHi();monster.f10();// ES6-对象方法定义let monster2 = {name: "红孩儿~",age: 900,sayHi() {console.log("信息: name=", this.name, " age=", this.age);},f1() {console.log("f1()");}}monster2.sayHi();monster2.f1();</script>
</head>
<body></body>
</html>

控制台输出

6.3 应用实例-对象拓展运算符

需求: 演示对象拓展运算符使用，对象深拷贝

代码演示, 创建 object_operator.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象运算符的扩展</title><script type="text/javascript">let cat = {name: "小花猫", age: 2};// 拷贝对象(深拷贝),深拷贝的意思拷贝的对象是独立的，不会对原先的对象有影响let cat2 = {...cat};cat2.name = "中花猫";console.log("cat=>", cat);//小花猫console.log("cat2=>", cat2);//中花猫// 合并对象[深拷贝]let monster = {name: "白骨精", age: 100};let car = {brand: "奔驰", price: 800000};let monster_car = {...monster, ...car}monster_car.name = "狐狸精";console.log("monster=>", monster);console.log("monster_car=>", monster_car);</script>
</head>
<body></body>
</html>

控制台输出

7 箭头函数

7.1 基本介绍

（1）箭头函数提供更加简洁的函数书写方式。

（2）基本语法是：(参数列表) => { 函数体 }

（3）箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()

（4）箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块

（5）函数体只有一行语句，并且需要返回结果时，可以省略 {} 和 return, 结果会自动返回

（6）箭头函数多用于匿名函数的定义

7.2 应用实例1-箭头函数使用

需求: 演示箭头函数基本使用，箭头函数的简写，箭头函数作为变量传入另一个函数

代码演示, 创建 arrow_method.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数的使用</title><script type="text/javascript">// 传统定义函数var f1 = function (n) {return n * 2}console.log("传统= " + f1(2))// ES6 , 箭头函数使用let f2 = (n) => {return n * 2;}console.log("f2() 结果= ", f2(100));//200//上面的es6 函数写法，还可以简化let f3 = n => n * 3;console.log("f3() 结果=", f3(100));//300//函数也可以传给一个变量=> 看看java基础匿名内部类function hi(f4) {console.log(f4(900));}hi((n) => {return n + 100});hi((n) => {return n - 100});</script>
</head>
<body>
</body>
</html>

控制台输出

7.3 应用实例2-箭头函数使用

需求: 演示箭头函数使用

代码演示, 创建 arrow_method02.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数使用案例2</title><script type="text/javascript">// 传统var f1 = function (n, m) {var res = 0for (var i = n; i <= m; i++) {res += i}return res}console.log("传统= " + f1(1, 10))// ES6 , 箭头函数使用let f2 = (n, m) => {var res = 0for (var i = n; i <= m; i++) {res += i}return res};console.log("ES6= " + f2(1, 10));</script>
</head>
<body></body>
</html>

控制台输出

7.4 应用实例3-箭头函数+对象解构

需求: 演示箭头函数+解构使用

代码演示, 创建 arrow_method03.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数+对象解构</title><script type="text/javascript">const monster = {name: "红孩儿",age: 1000,skill: ['红缨枪', '三位真火']}//要求：在方法形参取出monster对象的skill属性//传统方式function f1(monster) {console.log("skill=", monster.skill);}f1(monster);//箭头函数let f2 = ({skill}) => {console.log("skill=", skill);}//老韩解读//1. f2 传入对象 monster//2. f2形参是 {skill} , 所以es6的对象解构特性, 会把monster对象的 skill属性赋给//   skill//3. 对象解构的前提就是 {skill}的skill 和 monster的 skill属性是一致f2(monster);//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.let f3 = ({age, name, skill}) => {console.log("skill=", skill, " age=", age, " name=", name);}f3(monster);</script>
</head>
<body></body>
</html>

控制台输出