一、什么是ES6？

ECMAScript是JavaScript的标准，JavaScript是ECMAScript的实现，

正式名称：ES2015、其实就是ECMA标准第6版的简称

• 最新版本:ECMA2019

二、为什么使用ES6？

• 语言都在更新换代：JDK8 PHP7 Python3.7
• 支持更多语法、使用更方便
• 增强的工程性

三、ES6语法特性

3.1 新的声明方法

• let：变量，不可重复声明，块级作用域
• const：常量，定义了就不能改变

let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

3.2 let 命令

基本用法:

{let a = 0;a   // 0
}
a   // 报错 ReferenceError: a is not defined

代码块内有效
let 是在代码块内有效，var 是在全局范围内有效:

{let a = 0;var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

不能重复声明
let 只能声明一次 var 可以声明多次:

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

不存在变量提升
let 不存在变量提升，var 会变量提升:

console.log(a);  //ReferenceError: a is not defined
let a = "apple";console.log(b);  //undefined
var b = "banana";

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。
变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

3.3 const 命令

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。

基本用法:

const PI = "3.1415926";
PI  // 3.1415926const MY_AGE;  // SyntaxError: Missing initializer in const declaration    

暂时性死区:

var PI = "a";
if(true){console.log(PI);  // ReferenceError: PI is not definedconst PI = "3.1415926";
}

ES6 明确规定，代码块内 如果存在 let 或者 const ，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

四、 解构赋值

在解构中，有下面两部分参与：

• 解构的源，解构赋值表达式的右边部分。
• 解构的目标，解构赋值表达式的左边部分。

解构赋值必须具备的条件：

1. 两边的结构必须一样
2. 赋值和解构需同时完成

4.1 数组模型的解构（Array）

4.1.1 基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

4.1.2 可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

4.1.3 可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

4.1.4 不完全解构

let [a = 1, b] = []; // a = 1, b = undefined

4.1.5 剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

4.1.6 字符串等

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

4.2 对象模型的解构（Object）

4.2.1 基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

4.2.2 剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

4.3 实例 使用(…)求任意个参数之和

function sum(...num){var sumNum = 0;for(let i=0;i<num.length;i++){sumNum += parseInt(num[i])}console.log(sumNum)}sum(1,2,3)      //6
sum(1,2,"3")     //6
sum(1,3,"6和4")   //10

五、箭头函数

5.1 箭头函数的功能一：简写function

ES6当中的箭头函数其实就是把function简写了。
比如:

function(){...
}

等同于:

()=>{...
}

并且箭头函数还可以继续简写，不过有两个前提条件:

1. 如果有且仅有一个参数，()也可以不写
2. 如果有且仅有一个语句，并且是return，{}也可以不写

这里我们来演示一下,当然在开始使用简化的箭头函数之前，我们还是用正常的方法来写一下。

比如说现在有一个需求，我们需要有一个参数，需要返回它加上5的值，那么我们可以这么写：

function add(n){return n+5;
}function show(n,fn){alert(fn(n));
}show(4,add)

当然哈，这个函数的功能很值得怀疑，不过这里我们这是为了用它来引出简写的箭头函数。
那么，用箭头函数来简写就是这样的：

function show(n,fn){alert(fn(n));
}show(4,n=>n+5)

so,是不是perfect!

5.2箭头函数的功能二： 修正this

ES6当中的箭头函数除了简写，除了更现代化。它还有一个功能：修正我们的this.
下面这个列子当中，json对象的this就变来变去的，我们为了不那么混乱，就可以使用箭头函数来固定this

let json={a:12,fn:function(){console.log(this);alert(this.a);}
};// json.fn();//{a: 12, fn: ƒ}
let oDate=new Date();
oDate.fn=json.fn;
oDate.fn();//Tue May 26 2020 22:07:41 GMT+0800 (中国标准时间)

ES6:

//es6的写法
class Json{constructor(){console.log(this);this.a=12;this.fn=()=>{console.log(this);alert(this.a);}}
}let json = new Json();
// json.fn();//Json {}  Json {a: 12, fn: ƒ}let oDate=new Date();
oDate.fn=json.fn;
oDate.fn();//json.fn();//Json {}  Json {a: 12, fn: ƒ}

可以发现我们的this并没有改变。

六、参数展开与收集(…)

6.1 收集数组参数

…

function show(a,b,...c){console.log(a,b,c);//a:12 b:5 c:Array(5)[4, 8, 15, 27, 36]
}show(12,5,4,8,15,27,36)

不过斜面这种写法是 错误 的：

function show(a,b,...c,d){console.log(a,b,c,d);
}show(12,5,4,8,15,27,36)

三个… 这种参数必须放在最后面。
此外还有一些奇怪的用法(参数不足的情况)，ES6也是支持的：

function show(a,b,...c){console.log(a,b,c);//12 5 []
}show(12,5)function newShow(a,b,...c){console.log(a,b,c);//12 undefined []
}newSshow(12)

6.2 展开数组参数

let arr1=[12,5,8];function show(a,b,c){alert(a+b+c);//25
}show(...arr1);

例如我们可以合并两个数组：

let arr1=[12,5,8];
let arr2=[1,2,3];//原始写法
// let arr3=arr1.concat(arr2);
// alert(arr3);//12,5,8,1,2,3//ES6写法
let arr4=[...arr1,...arr2];
alert(arr4);//12,5,8,1,2,3

可以发现结果是一模一样的；

6.3 展开json参数

let Json={a:12,b:5,c:99
}
let Json2={...Json,d:999
}console.log(Json2);//{a: 12, b: 5, c: 99, d: 999}

请注意，下面这种是错误用法：

let Json={a:12,b:5,c:99
}
//这是错误用法 就好比alert(a:12,b:5,c:99)一样会报错一样;
alert(...Json);//报错:  Found non-callable @@iterator

Json同样也可以收集参数，不过之里我们就iu不演示了，和上边的数组一样。

七、数组对象的扩展

7.1 map

定义和用法
功能：map() 方法按照原始数组元素顺序依次处理元素。
返回值：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

map 意为地图，这里我们主要叫它映射，理解为一 一对应，
如果传入的参数是10个，那么返回的参数也是10个
array.map(function(item[必须 值],index[索引],arr), thisValue)

7.1.1 map实例1 一行代码判断成绩是否及格

let arr=[68,53,12,98,65];let arr2 = arr.map(function(item){if(item>=60){return '及格';}else {return '不及格';}
});
console.log(arr);//[68, 53, 12, 98, 65]
console.log(arr2);//["及格", "不及格", "不及格", "及格", "及格"]

上面这个代码片段当中，我们可以使用箭头函数来简写一下：

let arr=[68,53,12,98,65];//第一步：
// let arr2 = arr.map(function(item){
//     if(item>=60){
//         return '及格';
//     }else {
//         return '不及格';
//     }
// });//第二步：
// let arr2 = arr.map(function(item){
//     return item>=60?"及格":"不及格";
// });//第三步：
let arr2 = arr.map(item=>item>=60?"及格":"不及格");console.log(arr);//[68, 53, 12, 98, 65]
console.log(arr2);//["及格", "不及格", "不及格", "及格", "及格"]

效果是一模一样的，但是我们的代码却简洁了很多，所以说箭头函数还是挺不错的，现学现卖对吧,哈哈哈！

7.1.2 map实例2 从接口得到数据

let json=[{name:'Are',height:'170cm',weight:'60kg',sex:'boy',age:'20',avatar:'default'
}]let result = json.map(item => {return {name: item.name,sex: item.sex === 'boy'? '男':item.sex === 'girl'?'女':'保密',age: item.age,avatar: item.avatar}
})console.log(result);
//运行结果：[{name: "Are", sex: "男", age: "20", avatar: "default"}]

7.2 reduce

定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
返回值：返回计算结果

reduce 意为减少，缩减
传入的参数是n个，出来的只有一个

total:全部，全体的，总的

7.2.1 reduce实例1 求数组元素平均分

先来看一下底层的运行机制

let arr=[68,53,12,98,65];let result = arr.reduce(function(tmp,item,index){console.log(index+':'+tmp+','+item);/*1:68,532:undefined,123:undefined,984:undefined,65*/
});

通过观察我们可以发现，tmp在第二次及以后都是undefined,原因是reduce函数需要一个返回值，好作为下一次reduce函数的输入。

接下里我们reduce来求一下平均分

let arr=[68,53,12,98,65];let result = arr.reduce(function(tmp,item,index){if(index == arr.length-1){//最后一次循环 求平均分return (tmp+item)/arr.length;}else{return tmp+item;}});alert(result);//59.2

7.2.2 reduce实例2 数组元素进行四舍五入并计算总和

let numbers = [15.5, 2.3, 1.1, 4.7];function getSum(total, num) {return total + Math.round(num);
}
alert(numbers.reduce(getSum,0));

7.3 filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
返回值： 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

filter 意为过滤
传入的参数是n个，出来的参数根据规则的变化而变化

7.3.1 filter实例 返回数组里边的偶数

let arr=[68,53,12,98,65];let result=arr.filter(item=>{if (item%2==1) {return false;}else{return true;}
});console.log(result);//[68, 12, 98]

我们上边的函数可以简写一下：

let arr=[68,53,12,98,65];//简写
let result=arr.filter(item=>item%2==0);//true false true true falseconsole.log(result);//[68, 12, 98]

可以发现我们的结果是一样的。

7.3.2 filter实例2 返回数组中所有元素都大于输入框指定数值的元素:

<body><p>点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>所有大于指定数组的元素有？ <span id="demo"></span></p>
<script>var ages = [32, 33, 12, 40];function checkAdult(age) {return age >= document.getElementById("ageToCheck").value;}function myFunction() {document.getElementById("demo").innerHTML = ages.filter(checkAdult);}
</script>
</body>

效果：

7.4 forEach

定义和用法
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

forEach 意为遍历
主要就是把所有的元素都循环一遍。

7.4.1 forEach实例 列出数组的每个元素

我们先来看一下forEach参数的底层运行机制：

let arr=[68,53,12,98,65,83,16];arr.forEach((item,index)=>{console.log('第'+index+'个：'+item);/*运行结果：第0个：68第1个：53第2个：12第3个：98第4个：65第5个：83第6个：16*/});

7.4.2 forEach 将数组中的所有值乘以特定数字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>将数组中的所有值乘以特定数字</title>
</head>
<body><p>点击按钮将数组中的所有值乘以特定数字。</p>
<p>乘以: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="numbers.forEach(myFunction)">点我</button><p>计算后的值: <span id="demo"></span></p><script>
var numbers = [65, 44, 12, 4];function myFunction(item,index,arr) {arr[index] = item * document.getElementById("multiplyWith").value;demo.innerHTML = numbers;
}
</script></body>
</html>

八、字符串模板

我们平时在拼接一个字符串的时候使用 +号 “” 引号时，字符串段的时候还没什么。要是字符串太长的话，就很恶心了对吧。
ES6提供了一个字符串模板，具体使用方法如下:
使用 反单引号,也就是ESC下边的那个键 → `

let arr=[68,53,12,98,65,83,16];arr.forEach((item,index)=>{console.log(`第${index}个是${item}`);/*第0个：68第1个：53第2个：12第3个：98第4个：65第5个：83第6个：16*/
});

可以发现和咱们上边的效果是一模一样的。

九、JSON对象的扩展

9.1 JSON.stringify()

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

在了解这两个方法之前我们需要知道，JSON其实是有它标准的写法的：

1. 名字必须有引号，不过在JS当中我们可以简写，但是其他语言(JAVA)是不可以的。
   标准格式：

   let json = {"a":12,"b":10};
   

2. 如果它有一个字符串的属性，你不能用单引号，只能用双引号。
   标准格式：

   let json = {"a":12,"b":10,"name":"Are"};
   

啊，回过头来继续说我们的，JSON.stringify();

let json = {'a':12,"b":10,name:'Are'};console.log(typeof JSON.stringify(json));//string
console.log(JSON.stringify(json));//{"a":12,"b":10,"name":"Are"}

可以看到成功为我们返回了字符串类型的JSON格式数据，并且还是标准格式的，哎嘿，还不错哟！

9.2 JSON.parse()

这里需要注意的是JSON.parse()必须要是标准的JSON格式才行,例如:

这种格式是会报错的

let json='{a:12,b:5}';
console.log(JSON.parse(json));
//报错：Uncaught SyntaxError: Unexpected token a in JSON at position 1

这样才能返回正确的JSON格式。

let json='{"a":12,"b":5}';
console.log(JSON.parse(json));//{a: 12, b: 5}