ECMAScript新特性

代码

ECMAScript概述

ECMAScript 是脚本语言的标准化规范，也就是语言的语法。比如：怎样定义变量、怎样定义函数和逻辑运算等等。

那么ECMAScript 和 JavaScript 是何关系？
JavaScript 是ECMAScript 的扩展语言，JavaScript实现了ECMAScript。 比如在浏览器环境中 JavaScript 就是 ECMAScript 和 WebAPI的集合

ES（ECMAScript）于1997年被提出，2015年后基本保持一个版本的迭代

ES2015 是最新ES标准比较典型的版本，主要在于

• 相比ES5.1变化较大
• 命名标准发生变化，按照年份命名

在有些书上或博客上对于ES6有两种意思，一种是特指（ES2015）,另一种是泛指是指ES2015版本之后的所有版本。

ECMAScript新特性主要有以下内容：

• 解决原有语法上的的一些问题和不足 (var)
• 对原有语法进行增强 （对象解构）
• 全新的对象、全新的方法、全新的功能（class、promsie）
• 全新的数据类型和 数据结构（Symbol）

let 与块级作用域

作用域：某个成员能够起作用的范围。

在ES2015之前，ES只有两种作用域：

• 全局作用域
• 函数作用域

在ES2015后，又增加了块级作用域。块级作用域：使用{} 中间的作用域。

在ES2015前没块级作用域作用域的概念，在{} 内容使用var 定义的变量，在{}外也可以访问，这样对于复杂代码是非常不安全的。

if(true) {
    var foo_1 = "foo_1"
}
console.log(foo_1)        // foo_1
1
2
3
4

在块作用域内使用let 声明变量，在{} 外部是不可以访问的：

if(true) {
    let foo_2 = "foo_2"
}
// ReferenceError: foo_2 is not defined
console.log(foo_2)
1
2
3
4
5

在for 循环中会有会有两层嵌套的块级作用域，函数体中的作用域是嵌套在for 循环内部的单独的作用域

for(let i = 0;i < 3; i++) {
    let i = "foo_3"
    console.log(i)
}
1
2
3
4

上边代码我们可以简单的理解为下面：

let i = 0;
if(i < 3) {
    let i = "foo_3" 
    console.log(i)
}
i++
if(i < 3) {
    let i = "foo_3" 
    console.log(i)
}
i++

if(i < 3) {
    let i = "foo_3" 
    console.log(i)
}
i++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let 声明的变量不会变量提升，所以在使用之前必须先声明

console.log(foo_4)
var foo_4 = "foo_4"

console.log(foo_5)
let foo_5 = "foo_5"
1
2
3
4
5

为啥ES2015不把var 废掉？
因为考虑到兼容，原来很多项目还在使用var

const

用于生成只读属性。 声明之时，就要赋值；声明之后，不可修改内存指向

const foo_6 = "foo_6"
const foo_7 = {
    name: "hyb",
    age: 18
}

foo_7.name = "hsf";
// TypeError: Assignment to constant variable.
// foo_7 = {}
1
2
3
4
5
6
7
8
9

var、let 、const 使用指南？
不用var; 主用const; 辅用let

数组解构

当我们获取数组元素时，通常情况下通过下标获取

const arr = [100, 200, 300];
const firstObj = arr[0];
const secondObj = arr[1];
1
2
3

ES2015后我们可以通过数组解构获取元素。

const [arrFirst, arrSecond] = arr;
1

我们可以，获取指定位置的元素，剩余元素、和若获取元素为空时设置默认值

// 前面位置留空格
const [, arrSecond] = arr;

// 剩余元素
const [arrFirst, arrSecond2, ...rest] = arr;

// 默认值
const [arrFirst1,arrSecond3, arrThird, arrFour = 2] = arr;

console.l
1
2
3
4
5
6
7
8
9