ECMAScript新特性（一）

一、ECMAScript基础

ECMAScript也是一门脚本语言，一般缩写为ES，通常看作是JavaScript的标准化规范，实际上，JS是ES的扩展语言，ES只是提供了最基本的语法。

JavaScript在 Web环境下就等于 ECMAScript + WebAPIs(DOM、BOM等)。
JavaScript在 Node环境下就等于 ECMAScript + Node APIS(fs、net、etc等)

ES2015也就是ES6在2015年6月发布，此后每年6月发布一个新版本，知道2019年的 ES2019(ES10)
ES6之前是ES5.1，发布于2011年6月，与ES6相隔四年

ES2015相比于ES5.1的变化，简单归为以下四大类：
1、解决原有语法上的一些问题或者不足，比如let、const的块级作用域
2、对原有语法进行增加，使之变得便捷、易用，例如解构、展开、参数默认值、模板字符串等
3、全新的对象、全新的方法、全新的功能，例如 Promise、Proxy、Object.define之类
4、全新的数据类型和数据结构

二、let与const

2.1、let与块级作用域

ES6(ES2015)之前，只有两种作用域，即全局作用域与函数作用域，ES6新增了块级作用域

if(true){
	let i = 10;
	// =========== 
	// i只能在这之中访问到
	console.log(i)
	// ===========
}

块级作用域就是大括号{}之内的区域，且let并没有var的声明提升，所以必须在声明之后才能访问到，否则会报错；同一作用域下不能重复声明同一变量，否则也会报错。
小括号()内也算块级作用域，例如for循环等

for(let i=0; i<3; i++){
     let i = 'foo' // 这里的i与上面的i不会冲突
     console.log(i);
 }
// 上述代码相当于如下代码：
let i = 0;
if(i<3){
    let i = 'foo'
    console.log(i);
}
i++
if(i<3){
    let i = 'foo'
    console.log(i);
}
i++
if(i<3){
    let i = 'foo'
    console.log(i);
}
i++
if(i<3){
    let i = 'foo'
    console.log(i);
}

2.2、const声明变量

const 就是在let的基础上多了 “只读” 的特性，变量声明过后不再允许修改

const name = "jack"
// name = 'zac' // 抛出异常

const user; // 定义的时候必须赋值，否则抛出异常

const所谓的声明过后不能修改，其实只是不能将变量整个修改。例如string、number等基础数据类型创建后是直接在栈上开内存空间保存下来，object、array等引用数据类型是在堆上保存数据，在栈上保存一个指向堆中数据的地址。
如果const声明的是基础数据类型，是无法修改的；而引用数据类型的话，是可以修改其中的成员属性值的。

const user = {
    name:"jack",
    age:23
}
user.age = 18

三、解构

3.1、数组解构

const arr = [100,200,300,400]
// 以往我们要获取一个数组某一下标的值时，写法如下：
const r1 = arr[0]
const r2 = arr[1]

// 使用数组解构的方法会更加便捷
// 将arr数组中的第1、2、3个值赋值给r3、r4、r5，即按顺序赋值
// 如果变量数多于数组长度，多出变量为undefined
const [r3, r4, r5] = arr 

// 如果只想要第三个值
const [,,d3] = arr // 将前两个变量省略即可，但逗号不能省

// 这种写法表示，将第一个数值赋值给 b1, 之后的所有数值以数组的形式赋值给 b2
const [b1, ...b2] = arr

// 我们还可以给接收数组值的变量提供默认值，在变量数多于数组长度时发挥作用，不为undefined
const [a1, a2, a3, a4, a5 = "default value"] = arr

3.2、对象解构

const obj = {
    name:"jake",
    age:18
}

// 对象的解构一定要用可以匹配属性的变量名，obj中的name属性的值，一定要用一个name作为匹配规则才行
// 和数组类似的是，对象结构一样可以设置默认值，在没有从对象中拿到赋值的情况下去默认值
const { name,add="default" } = obj

// 还有一种情况就是，假如匹配规则为name，而实际代码中已经有一个name变量，这种情况下我们就需要重命名
const { name:objName, sex:objSex="default sex" } = obj

// 最后再来一个小技巧
// 因为console也是一个对象，log是其中的一个方法，我们可以使用解构赋值的方法定义log接收
const { log } = console
log('name')

四、模板字符串

const str = `哈哈哈，这就是模板字符串`
// 模板字符串相比于传统字符串就是将引号改成了 ``

// 在模板字符串中使用转义字符
const str1 = `hello \`world\` 憨憨`

// 模板字符串支持换行，对于在js中写html代码会很舒服
const str2 = `hello 
world 
憨憨`

// 最重要插值表达式
// 通过${}，可以在大括号内使用变量，也可以进行运算，使用js方法
const say = `hello ${str} === ${1 + 2 + 3} ===== ${Math.random()}`

// 带标签的模板字符串
const user = "tom"
function myTagFunc(strings,tem1,tem2){
    log(strings)
    log(tem1,tem2) // tem1，tem2为字符串中的插值表达式，如果没有则为undefined
}
myTagFunc`hey,${user},are you sure` 
// 结果为：['hey,',', are you sure'] 
// 原因：根据字符串中的插值表达式将字符串截取了，如果其中没有插值表达式，则是完整的字符串
myTagFunc`hey,tom,are you sure`// 结果为：['hey,tom,are you sure']
myTagFunc`hey,${user},are you ${1+2+18}`// tem1为tom tem2为21

// 标签的用处
function judgeGender(strings,v1,v2){
    const cc = v2==1?'先生':'小姐'
    return strings[0] + v1 + strings[1] + cc + strings[2]
}
const gender = 1
const result = judgeGender`请注意,${user}是${gender}哦`
console.log(result);