ECMAScript6 简介及拓展-Toy模板网

这篇具有很好参考价值的文章主要介绍了ECMAScript6 简介及拓展。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

支持不完全解构，可以做个简单了解，但不推荐使用，会有报错

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