JavaScript / 大前端

前言

最近在看ES6+的一些更新特点，又重新从各数据类型及语法上温习了一遍ES6。突然有了一点想法，那就尝试着从三个特点来去简单总结和理解一下ES6的更新。这三个特点分别是：标准化、更丰富、更高级

特点一：标准化

变量新声明语句：let

简单举一个let的优势

  • 不允许重复声明：var是允许一直声明的，是完全不符合的一个常规操作
var min = 20

//...
//...
//...
//...
//...

// 此时声明变量，按道理来讲声明变量未赋值，应为 undefined 。
// 但是，由于上面声明过并且赋值过，所以此时声明并不是希望的一个结果。它的值是依然是 20
var min

console.log(min) // 20

如果使用let语句声明，在代码运行时就报错了。而不会等到在业务逻辑中才发现异常。

那其他特点有：

  • 不存在变量提升：符合先声明后使用
  • 暂时性死区：在声明区块中，会绑定这个区块，防止未声明即使用
  • 块级作用域：常用于for循环，index泄漏
  • 全局声明不归window所属

常量：const

在ES5之前没有常量的概念，在一大段逻辑中例如在顶部声明的变量，可能会在逻辑中进行更改以影响下面的代码或者产生未知后果。那么常量出现后就可以使用常量来表示这个值不可进行更改

const min = 20

//...
//...
//...
//...
//...

min = 50  // TypeError: Assignment to constant variable.

此时就会抛出错误，而且编辑器也会很好的提示代码写错了。或许不用等代码运行就发现错误了

Reflect对象

Reflect对象是用来去操作一个对象的新API，目的是：

  • 将一些原本要属于JavaScript语言的方法挂载到Reflect对象中，例如：Object.defineProperty放在了Reflect.defineProperty
  • 并可以得到方法执行的操作结果，例如：Reflect.defineProperty
  • 将过去一些操作符函数化例如：prop in object
const obj = {
  min: 20
}

// 冻结一个对象
Object.freeze(obj)

// 报错
Object.defineProperty(obj, 'max', {  // TypeError: Cannot define property max, object is not extensible
  configurable: false
})
// 使用Reflect下的方法
console.log(Reflect.defineProperty(obj, 'max', {})) // 不会报错，返回 false

函数化：

const obj = {
  min: 20
}
// 旧写法
delete obj.min

// 函数化之后
Reflect.deleteProperty(obj, 'min')

将一些全局函数移植到本该属于它的对象下

例如：parseInt、parseFloat 移植到 Number 对象下

console.log(parseInt === Number.parseInt) // true

class

过去使用函数来当做一个类，现在可以用 class 来去按照传统语言的方式去编写一个类和完成最友好的继承

特点二：更丰富

新增数据类型

新增Symbol来表示独一无二的值

新增方法

在各数据类型中新增了一些方法，包括静态方法，例如：

  • 静态方法
    • Array.isArray
    • Object.keys
    • ..
  • 原型方法
    • Array.prototype.includes
    • String.prototype.trimEnd
    • Object.is
    • ..

新增数据结构

Set、Map、WeakSet、WeakMap 来补充数组、对象的一些无法做到的事情

新增对象

新增Promisi来解决异步操作、回调地狱的问题

新增Reflect、Proxy、class去增强对象的操作

特点三：更高级

语法糖、扩展、运算法等

例如：

  • 解构赋值
  • rest 参数
  • 运算符 ** ?.
  • async
  • generator、yield

新增模块化 module

例如在nodejs使用 require 就是一种模块化，但仅限于 nodejs中。ES6新增了module是采用 import 实现引入、export 导出模块

iterator 接口及新的循环 for…of

在一些原生对象中新增 iterator 提供一种新的访问机制。例如：

  • String
  • Array
  • Map
  • Set
  • arguments
  • NodeList
  • TypedArray