ECMAScript简介
JavaScript是大家所了解的语言名称， 但它的正式名称叫做ECMAScript。
1996年11月， JavaScript的创造者网景公司将JavaScript提交给国际化组织 ECMA(欧洲计算机制造联合会)， 希望这种语言能够成为国际标准。
随后 ECMA 发布了规定浏览器脚本语言的标准， 即ECMAScript。 它的历史版本：
| version | 时间 | 描述 |
|---|---|---|
| 1.0 | 1997 | 诞生，制定了语言的基本语法 |
| 2.0 | 1998 | 较小改动，同步独立的ISO国际标准 |
| 3.0 | 1999 | 引入正则，异常处理，格式化输出等。在业界得到了广泛的支持， 奠定了JS的基本语法 |
| 4.0 | 2000 | 过于激进,未发布 |
| 5.0 | 2009 | 引入严格模式，Json，扩展对象，数组，原型，字符串，日期方法 |
| 6.0 | 2015 | 模块，面向对象语法，Promise，箭头函数，let，const，数组解构赋值等 |
| 7.0 | 2016 | 幂运算符，数组扩展，Async/await关键字 |
| 8.0 | 2017 | Async/await，字符串扩展 |
| 9.0 | 2018 | 对象解构赋值，正则扩展 |
| 10 | 2019 | 扩展对象，数组方法 |
ES6
目前市面上推荐使用的是ECMAScript 6.0(ES6)， 主要原因在于：
- 兼容性 目前并非所有的浏览器相关都支持最新语言的特性，而ES6已经被广泛支持。并可通过转译工具可将ES6转换为较低版本的JavaScript，以确保在各种环境中的运行
- 新特性 ES6引入了箭头函数，解构赋值，类等，使得代码更加简洁、易读和维护
- 模块化支持 可以提升代码的复用性和可维护性，使得项目结构更清晰
-
异步编程 引入
Promise和async特性， 支持异步编程
ES6的推广主要还是为了解决ES5的不足，目前浏览器的JavaScript虽是ES5版本，但大多数的高版本浏览器支持ES6的使用。
它又被称为ES2015, 因为它是2015年发布的。
ES6所支持的新特性简要说明下：
- 增加
let和const, 可用于块作用域声明变量，避免了var变量提升和作用域不明的问题 - 新增的原始数据类型
Symbol， 可用于定义对象的唯一属性 - 增加了解构赋值的语法， 使得代码更加简洁和易于理解
- 拓展了
Number，支持二/八进制表示，增加了isFinite，整合了parseInt方法等 - 拓展了
String，新增了子字符串的识别， 模版字符串的拼接等 - 拓展了
Array， 增加了对象转换为数组，以及查找的方法相关 - 拓展了函数的默认参数设置， 箭头函数等
- 新增
Map容器和Set对象的使用 - 新增
Proxy和Reflect - 引入class类的支持， 支持extends继承， super访问父类规范， 静态方法等
- 引入模块， 主要分为
export导出和import导入 - 引入
Generator , Promise和 async等异步编程
let、const和Symbol
ES6之前只有全局变量和函数内局部变量。let和const为新增关键字：
-
let必须在声明之后才能使用， 不可重复声明， 块作用域， 变量不能提升 -
const声明之后必须初始化，否则会报错。 且声明后不允许改变，属于只读变量。
// ---------- let -------------
{
let value = 0;
console.log(value); // 0
}
// Error: value is not defined
console.log(value);
// ---------- let -------------
const value: number = 10;
// Error: Assignment to constant variable
value = 100;
经常会拿var与let比较：
/*
var是ES5及之前的JavaScript的关键字，特点：
* 函数作用域，声明的变量在整个函数体内， 而不仅是在块作用域内
* 变量会提升，声明的变量会提升到函数的顶部， 即可在声明之前使用
* 允许重复声明
*/
function example() {
var x = 10;
if (true) {
var x = 20; // 在同一函数作用域内重复声明变量x
console.log(x); // 输出：20
}
console.log(x); // 输出：20
}
example();
/*
let是ES6及之后的JavaScript和TypeScript引入的关键子，特点：
* 块作用域， 比如if语句，循环语句，并不是整个函数体内
* 不存在变量提升，必须声明之后才能使用
* 不允许重复声明，否则会报错
*/
function example2() {
let y = 10;
if (true) {
let y = 20; // 在块级作用域内声明变量y
console.log(y); // 输出：20
}
console.log(y); // 输出：10
}
example2();
const需要注意，所谓的不允许改变真正指的是：变量或引用所指向的内存地址不可改变。
在基础数据类型使用中，值就保存在变量指向的地址。
而对于类似于Array数组，Object对象等这些复杂类型， 对象内的子元素是可改变的
// ------------ 数组 ------------
const numData = [1, 2];
// 允许插入数值
numData.push(3);
console.log(numData);
// 不允许改变对象,Assignment to constant variable
numData = [4, 5];
// ------------ object ------------
const objectData = {
value: 1,
}
// 允许修改对象内部元素
objectData.value = 2;
// 不允许改变对象，Assignment to constant variable
objectData = {value: 2};
Symbol
除了number, string, boolean, object, null, undefined外, Symbol为新增的原始数据类型。
它被用于表示独一无二的值，可被用于定义对象的唯一属性名，构成：
// lib.es2015.symbol.d.ts
interface SymbolConstructor {
readonly prototype: Symbol;
// 创建symbol对象
(description?: string | number): symbol;
// 全局搜索指定key字符串的symbol对象
for(key: string): symbol;
// 获取symbol对象的key, 如果没有则undefined
keyFor(sym: symbol): string | undefined;
}
declare var Symbol: SymbolConstructor;
基本使用：
let sym = Symbol("a_1");
console.log(typeof(sym), sym); // "symbol", Symbol(a_1)
主要用法：
- 定义常量，保证不同常量的唯一性
- 作为对象的属性名， 使用
[]来设定，不要使用.
简单的实例：
let sy = Symbol("key1");
let obj = {
[sy]: "kk",
value: 10,
};
// 虽然作为对象的属性名，但其实是不可读的, 结果是：{"value": 10}
console.log(obj);
解构赋值
它是对赋值运算符的扩展， 可用于 数组 或 对象 进行模式匹配， 然后对其中的变量进行赋值。
// 基本使用
let [a, b, c] = [1,2,3];
console.log(a, b, c); // 1, 2, 3
let {a, b, c} = {a:1,b:2,c:3};
console.log(a, b, c); // 1, 2, 3
// 嵌套使用
let [a, [b, c]] = [1, [2, 3]];
console.log(a, b, c); // 1, 2, 3
let [A, [[B], C]] = [1, [[2], 3]];
console.log(A, B, C); // 1, 2, 3
// 忽略
let [a1, , c1] = [1, 2, 3];
console.log(a1, c1); // 1, 3
let [, b2, , d2] = [1,2, 3,4];
console.log(b2, d2); // 2, 4
let [a3, [, b3], [,,c3]] = [1, [2,3], [4,5,6]];
console.log(a3, b3, c3); // 1, 3, 6
支持不完全解构，可以做个简单了解，但不推荐使用，会有报错文章来源：https://www.toymoban.com/news/detail-668817.html
// Error: Tuple type '[number]' of length '1' has no element at index '1'
let [a1, b1] = [1];
console.log(a1, b1); // 1, undefined
let [a2 = 1, b2] = [];
console.log(a2, b2); // 1, undefined
支持剩余参数，通过...参数来设定，它会用于收集剩余的元素来创建一个新的数组。文章来源地址https://www.toymoban.com/news/detail-668817.html
// 数组
let [a, ...b] = [1, 2, 3];
console.log(typeof(a), typeof(b)); // "number", "object"
console.log(a, b); // 1, [2, 3]
// 对象
let {age, ...params} = {
name: "ES",
age: 2023,
value: 1,
}
// 参数age被赋值，其余的都给了params
// 2023, {"name": "ES", "value": 1}
console.log(age, params);
// 函数参数,比如求和
function AddNum(...numbers: any) {
let totalValue = 0;
for (let num of numbers) {
totalValue += parseInt(num);
}
return totalValue;
}
console.log(AddNum(1, 2, 3)); // 6
console.log(AddNum(1, "2", "3")); // 6
到了这里，关于ECMAScript6 简介及拓展的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
