前言
虽然现在到了2020年，es10都出了，但是作为ECMAScript各个新版本中的代表版本，我依然有一些用得不够多的新特性，很多时候还在吃es5的老本，这样肯定是不够与时俱进的，因此，开始重新系统再读ES6，也就有了这系列es6学习笔记，希望能对你有帮助~
说到es6即ECMAScript2015 那就不得不提及ECMAScript，他是javascipt中标准化语言的一部分，如下所示
javascript包含范围：
在浏览器环境中：javascript分为ECMAScript、BOM、DOM；
在node环境中：javascipt分为ECMAScript、fs、net、etc.
本文将先从浏览器环境的es6开始，一一阐明自己学习过程中的心得，希望前端朋友多多交流，如有错误的地方，请直接指出，欢迎指导~
1.let 与 const
es6之前js的作用域分为：1.全局作用域 2.函数作用域
es6之后新增块级作用域
块级作用域：指代码中用{}包起来的范围，比如
if(){} for(){}
1.1 let与const可以创造块级作用域
1.1.1在没有块级作用域之前，很多大括号内的变量在外部可以直接访问，给代码的安全性以及模块化造成了很多影响：
if (true){
var a = 10
}
console.log(a) //10
但在ES6以后，用let或者const申明的变量，只能在其声明的块级作用域内才能生效。
if (true){
let a = 10
}
console.log(a) // a is not defined
只有打括号里的才是块级作用域，小括号里的作用域与其所在的父级作用域一致
let i = 0;
if (i>=0){
let i ='bbb'
console.log(i) //bbb
}
console.log(i) 0
i++
if (i>=1){
let i = 'ccc'
console.log(i) //ccc
}
console.log(i) ///1
1.1.2 使用let或const不会有变量提升，所以会造成当前块级作用域内的”暂时性死区“
//es6以前的变量提升
console.log(a) //2222
var a = '2222'
//let 不会有变量提升这个特性
console.log(b) //Cannot access 'b' before initialization
let b = '333' //此行以上的区域因为变量b调用不了称为暂时性死区，
1.1.3 const
const申明一般为常量或恒量，其申明时必须赋值，且申明后引用地址不可以改变，否则报错。
const b; //Missing initializer in const declaration
b = 10;
console.log(b)
------
const a = 10;
a = 11; //Assignment to constant variable.
console.log(a);
但值得注意的是，const申明的值并不意味着不能被修改，只是其引用地址不能更改
const a= {b:1,c:2};
a.b = 3
console.log(a) //{ b: 3, c: 2 } 此时修改const申明的对象其引用地址未发生变化，修改成功
---
const d= {e:1,f:2};
d = { e : 4 } //Assignment to constant variable. //此时d对象的应用地址发生改变，报错
console.log(a)
2.数组的解构
数组的解构在我的理解中其最主要的作用是快速提取出数组中的对应元素，同时还能减少中间变量的申明，提升开发效率：
//以往获取数组中指定元素一般通过下标
const a = [1,2,3,4,5,6,7]
const b = a[3];
const c = a[4];
console.log(b,c) //4，5
------
const a = [1,2,3,4,5,6,7]
const [,,,b,c] = a
console.log(b,c) //4，5 简单快捷高效
---
//如果需要截取数组第三个元素至最后一个元素的数组的话可以用...
const a = [1,2,3,4,5,6,7]
const [,,,...rest] = a ;
console.log(rest) //[ 4, 5, 6, 7 ]
//注意：...在解构中只能放数组最后，否则报错
const a = [1,2,3,4,5,6,7]
const [,,,...rest,] = a ; //Rest element must be last element
console.log(rest)
3.对象的解构
对象的解构与数组解构类似，都是为了方便获取对象的属性值。
const a = {
b:1,
c:2,
d:3
}
const {b:e,d} = a; //把a对象中属性b的值赋值给e变量，把a对象中属性d的值赋值给d变量
console.log(e,d) //1,3
4.模板字符串
4.1形式：`xxx${xx}`
意义：
1.简化JS中字符串拼接，增强可读性，便于修改
2.可以用于多行字符串（模板字符串里可以直接输入换行符不用/n）,传统字符串不能直接换行。
const a = `dfdf
dfdf
sdfd`;
console.log(a)
//dfdf
//dfdf
//sdfd
4.2 模板字符串标签函数
作用：处理较为复杂的字符串拼接，同时可以包含逻辑代码处理。
方式：模板字符串标签函数是指在定义模板字符串的前面先写一个标签，这个标签其实相当于调用了跟标签同名的函数，同时模板字符串的插槽中填写的参数可以相当于形参传入标签函数。在标签函数内可以自定义要执行的逻辑判断，最终这个标签函数的返回值为定义的模板字符串最终字符。
例如：利用模板字符串标签函数根据传入的动物最终输出动物和他的行为的字符串
const animal1 = "dog"
const animal2 = "cat"
const dogSay = "wangwang"
const catSay = "miaomiao"
function handleAnimalAct(string,animal1,dogSay){
console.log(string); //[ 'the ', ' say ', '' ] 此时会把标签函数中传入的整个string按照拼接的段数分割成数组
const say= animal1 === "dog"?dogSay:catSay;
return "the " + animal1 + " say " + say
}
const result = handleAnimalAct`the ${animal1} say ${dogSay}` //handleAnimalAct就是标签函数
console.log(result);the dog say wangwang
4.3字符串查找新增API
str.includes('xxx')判断字符串中是否包含xxx字符串str.startsWith('xxx')判断字符串中是否以xxx字符串开头str.endsWith('xxx')判断字符串中是否以xxx字符串结尾
const a = 'qqq asdfas eee';
console.log(a.includes('asdf')) //true
console.log(a.startsWith('qqq')) //true
console.log(a.endsWith(' eee')) //true
未完待续~
