ECMAScript新特性

news2024/7/6 20:25:56

代码

ECMAScript概述

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

那么ECMAScript 和 JavaScript 是何关系？
JavaScript 是ECMAScript 的扩展语言，JavaScript实现了ECMAScript。比如在浏览器环境中 JavaScript 就是 ECMAScript 和 WebAPI的集合
在这里插入图片描述
ES（ECMAScript）于1997年被提出，2015年后基本保持一个版本的迭代

名称	标准版本	发布时间
ECMAScript2019（ES2019）	10	2019年6月
ECMAScript2018（ES2018）	9	2018年6月
ECMAScript2017（ES2017）	8	2017年6月
ECMAScript2016（ES2016）	7	2016年6月
ECMAScript2015（ES2015）	6	2015年6月
ECMAScript5.1（ES5.1）	5.1	2011年6月
ECMAScript5（ES5）	5	2009年12月
ECMAScript4（ES4）	4	被放弃
ECMAScript3（ES3）	3	1999年12月
ECMAScript2（ES2）	2	1998年6月
ECMAScript1（ES1）	1	1997年6月

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

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

if(true) {
    let foo_2 = "foo_2"
}
// ReferenceError: foo_2 is not defined
console.log(foo_2)

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

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

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

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++

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

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

console.log(foo_5)
let foo_5 = "foo_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 = {}

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

数组解构

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

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

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

const [arrFirst, arrSecond] = arr;

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

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

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

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

console.log(arrSecond, rest ,arrFour)

对象解构

数组时根据索引位置进行解构，对象要根据key值进行解构

const obj1 = {
    name: "hsf"
}

const name = "hyb";
// 如果我们提前已经定一个一个name 变量，肯定会冲突，那么起别名 和若解构出来为null, 设置默认值
const { name:nameAlias = "foo" , age = 2} = obj1;

console.log(nameAlias, age);