工做中经常使用es6+特性

时间  2019-12-06
标签 中经 常使 es6 特性 栏目 JavaScript 繁體版
原文   原文链接

结合工做中使用状况，简单对es6进行一些复习总结，包括经常使用的语法，api等，以及短期内要上手须要重点学习的知识点（不一样工做环境可能有一些差异），主要参考连接是阮一峰的博客以及外文博客（阮老师大部分文章是直接翻译的这个博客） http://2ality.com/p/about.htmlhtml

1.简介

先说一下ECMAScript，ECMA是一个标准化组织，他们制定了JavaScript的语言标准，因此以后一直称为ECMAScript，普遍的讲，Javascript是其一种标准实现，包括ECMAScript，dom，bom等es6

ECMA组织每一年都会有新标准发布，标准名为ES+年份，因此咱们会听到ES2015，ES2016，ES2017等，ES6其实就是ES2015，表示在15年发布的最新版本，相应的ES2016，ES2017分别称为ES7和ES8，依次日后对应。编程

如今大部分博客，文章，分享中提到的ES6其实也能够理解为ES6+，只不过由于2015年以前，ECMAScript有不少年没有发版（也有历史缘由：ES4的夭折），积累了大量的新语法，api，因此在2015年一次性加在了ES6版本中发布，以后每一年都只有不多的一些新增，好比：api

语法提案

关于语法提案的流程，简单了解一下：一个新的语法从提案到成为标准须要通过五个阶段，每一个阶段都须要标准委员会TC39定时开会进行批准数组

流程见连接：http://exploringjs.com/es2016... 浏览器

须要注意的一点，全部的标准都是基于实现的，几大厂商浏览器对提案的实现必须先于标准才会进入定稿阶段，包括Babel数据结构

咱们经常使用的async和await，就是由于16年开会的时候没有达到可定案的标准，而没有进入ES2016标准，最后添加在2017标准中app

可参考该连接，有每一年发布标准中新增的特性：http://2ality.com/2017/02/ecm...dom

2.简单知识点介绍

下面主要就是结合平时工做，简单介绍最经常使用的语法，类方法以及实例方法等，下面主要是一些列举，大部分知识点想深刻学习的话，仍是获得阮老师博客或者外文博客上学习ecmascript

不过我标注了实际工程中的使用频率，能够参考，针对性的学习，快速上手

提示：实际开发中结合eslint能够帮助本身写出更规范的代码

使用频率极高（为方便一块儿介绍，会将一些不经常使用的语法也列出来，标题括号中也为大量使用）：

2.1 let与const

这是最基础的两个命令，都是声明变量，要强制全部的声明都使用他们两个

与var的区别：

  1. 做用域

    • var做用域在全局
    • let与const做用域为代码块
  2. 变量提高 （https://www.jianshu.com/p/68a...）
  3. 暂时性死区，表示在一个块级做用域内，只要使用let声明一个变量，声明前将不能使用该变量
  4. 不容许重复声明
  5. 与顶层对象window或者global的关系，var声明的全局变量与顶层变量挂钩，而let const声明的全局变量不挂钩

const与let区别：

  1. const定义一个只读的常量，一旦声明不可改变，但须要注意的是，不可改变的是变量指向的那个内存地址，若是使用const声明一个对象，对象内部是能够改变的，若是要强制一个对象不可改变，那么可使用Object.freeze来冻结（该方法只冻结该对象，不会冻结其属性，因此可考虑递归）

2.2 默认值设置

咱们能够直接在经过 param = 1 的形式设置默认值
包括为函数参数设置，为解构设置（见下面介绍）
避免了之前的这种写法：

function test(data) {
    data = data || {};
    ...
}

// 能够直接写为
function test(data = {}) {
    ...
}
须要注意的是：默认值生效的条件是，严格等于 undefined，若是值为null，不会使用默认值

2.3 解构赋值与rest操做符

解构

解构赋值其实就是为了更方便的从数组或者对象中经过属性名取数据，熟练使用以后，配合默认值，rest操做符能够很大程度提升效率，简化代码

下面是一些简单的使用对比

var a = 1, b = 2, c = 3;
// 或者
var param = { a: 1, b: 2, c: 3 };
var a = param.a || 1; // 默认值
var b = param.b;
var c = param.c;
// 或者
function add(param) {
    param = param || {};
    var v1 = param.v1 || 0;
    var v2 = param.v2 || 0;
    return v1 + v2;
}

能够看出来，若是参数比较多的话，代码很臃肿
若是用解构赋值，咱们能够写成这样，很简洁

let [a, b, c] = [1, 2, 3]
// 或者
let {a = 1, b, c} = {a: 1, b: 2, c: 3}
// 或者
function add({v1 = 0, v2 = 0} = {}){
    return v1 + v2;
}
// 类比上面代码，其中 {v1 = 0, v2 = 0} 这个对象接收param参数，若是param未传入，设置默认值为{}，进而，v1，v2从param或者默认值{}中取值，取不到的话也设置默认值
解构的核心是，=号左边经过属性名直接获取=号右边对象相应的属性

而且全部类型的数据均可以被解构，即出如今=号右边，只不过字符串，数字，布尔值出如今等号右边时会先转化为对象
使用解构能够大大改善代码的可读性，减小的冗余的代码，更灵活简洁的获取属性，设置默认值，尤为是配合rest操做符时。

rest操做符，即…

使用在函数参数中（取代arguments）或者解构赋值时，方便咱们批量的获取设置数据，大量用在数组和对象中，见下面 数组部分

该语法在ES2018中成为规范，可是工做中早已大量使用，参考博客 http://2ality.com/2016/10/res...

注意：...只能出现一次而且必须出如今结尾

下面是错误的用法：

const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError

2.4 函数相关的扩展（箭头函数，rest参数，默认值）

ES6对函数进行了不少扩展，其中最经常使用的是箭头函数以及rest参数和默认值，rest参数与默认值都与解构关系密切

2.4.1 默认值

  • 通常在函数中设置默认值的参数应该是尾参数
  • 若是指定了默认值，函数的length值为默认值参数前面未使用默认值的参数个数

注意：函数参数值会造成一个新的做用域，区别于函数内做用域

2.4.2 箭头函数

这个使用频率极高，大大简洁了代码，尤为做为回调传入的时候
与es5函数区别：

  • 自动绑定函数定义时做用域this，替换bind写法（在须要手动绑定this时，使用箭头函数）
  • 不能做为构造函数
  • 没有arguments，使用rest代替

下面可选择性了解：

2.4.3 函数 name属性，会返回函数名

  • 可能用到的，使用bind绑定以后，name属性前会加bound前缀

2.3.4 函数式编程中尾调用和尾递归，大大优化内存，待深刻

2.5 字符串扩展（模板）

经常使用的主要是如下几点
最经常使用的是支持模板写法，使用反引号``和${} 取代字符串拼接

// 好比：
const a = ‘222’, b = ‘333’;
const c = a + ‘444’ + b;

const c = `${a}444${b}`

剩下的选择性了解：

  • 增强对unicode支持，使用频率很小
  • 支持for of 遍历，使用频率小，可以使用split或者rest代替
  • 增长搜索方法，includes，startsWith，endsWith，以前只有一个indexOf
  • repeat，padStart，padEnd 循环或者补全字符串，偶尔使用

2.6 数组扩展（rest操做符，实例方法）

主要是增长如下经常使用点

  • …操做符，类rest

    • 替代apply写法，以下，还有不少好比max，min求值，push一个数组等等
    • 替代concat
    • clone
    • 结合解构赋值等
    • string -> array，替换split写法，而且可识别4字节的unicode
    • 将iterator接口的对象转化为数组，好比dom获取到的列表，任何部署了Iterator接口的类数组对象均可以，map，set对象等

  • 实例方法，好比coryWithin，find，findIndex，fill，entries，keys，values，includes等

    • find，findIndex，includes相比indexOf，能够识别NaN，而且更语义化
let a = [1, 2, 3], b = [2, 3, 4];
let merge = […a, …b] // [1, 2, 3, 2, 3, 4]

// 替换apply
function func (a, b, c) {…}
//  若是须要传入一个数组，es5就要这样写
func.apply(null, [1, 2, 3])
// es6
func(…[1, 2, 3])

// 反转字符串的实现
[…str].reverse().join(‘')

// 类数组对象
{
    ‘0’: ’12’,
    ‘1’: ‘123’,
  length: ‘2'
}

下面的选择性学习：

  • Array.form 将类数组对象或者实现了iterator接口对象转化为数组，常见的有dom集合，arguments，map，set等，使用频率通常

    • 区别于…操做符的是，不只能转化iterator，还能转化类数组对象，如上代码
    • 可传入第二个参数，相似于map方法
  • Array.of 将一组值转化为数组，替代 Array() 或者 new Array()，使用频率通常

2.7 对象扩展（遍历与简化写法）

简化对象写法，新增一些Object类方法，使用频率极高

主要更新

  • 简化对象写法，工做中应该全面改写

    • 好比{x, y} 等同于{x: x, y: y}
    • 函数相似 {func() {}} 等同于 {func: function() {}}
  • 新增keys，values，entris方法，获取对象的属性名数组，值数组或者键值对，使用较多，可配合for of使用（必须是可遍历对象）
  • Object.is 相似于 ===，可是可识别 isNaN === isNaN // true 与+0 === -0 // false，与咱们主观意识一致
  • Object.assign 合并对象的可枚举属性，后者会覆盖前者，属于浅拷贝

  • 属性的遍历：

    • for in 遍历自身以及继承的可枚举属性
    • Object.keys 自身的可枚举属性键名
    • getOwnPropertyNames 自身全部属性，包括不可枚举
    • getOwnPropertySymbols 获取自身全部symbol属性键名，前三者都不包括symbol
    • Reflect.ownKeys 全部的自身属性

下面的选择性学习：

  • 属性名能够用表达式
  • 提供一些对原型链的操做，使用极少，有兴趣可研究
  • 新增super字段，区别于this，this指向该对象，super指向原型对象

3.高级知识点

对上面使用频率高的知识点进行了解学习之后即可以进行基本开发了，熟练使用后天然会体会到es6的美
可是实际工做中，不可能都是这些基础语法，api，须要用到更多的高级知识点

目前咱们在大量使用的有：
这儿作简单介绍，工做之余能够本身去深刻，其中Class好理解，Module和Decorate相对也好上手
主要是Promise与Async，简单了解以后也能够快速写代码，可是当应用复杂时，仍是须要你深刻了解其工做原理

推荐首学Promise，Decorator可在用到时再学

3.1 Promise

这是重中之重，ES6提出的异步的一种解决方案，要深刻学习

3.2 async与await

也是异步的解决方案，代替Generator，更友好，语义化的使用

3.3 Class

ES6提供的语法糖，内部使用prototype实现，以面向对象的方式实现JS

3.4 Decorate

装饰器，能够对类或者类方法进行装饰，增长一些额外的行为

3.5 Module

模块化的实现，帮助咱们拆分组合代码，模块化开发
此处还有两个概念，CommonJS和AMD模块

4.使用频率低的一些特性：

除了前面介绍的，剩下就是一些工做中用到比较少的特性，包括一些你经常使用可是并不知道的底层技术，好比Iterator，当你使用 … 或者for of时都会用到该知识点，建议学习

4.1 Set与Map

新增的数据结构，与Java中相似，目前来看，习惯未养成，使用比较少，可是建议学习

4.2 正则的扩展

工做中会经常使用的正则语法即可以了，推荐一个连接，帮助你更好的学习使用正则：https://regexper.com/#%2Fabc%...
有时候能够用先行断言和后行断言实现一些复杂的判断

  • 字符串可以使用正则的方法：match，replace，search，split，在es6环境下内部都是使用正则的方法来进行匹配，能够将replace第二个参数传入函数来观察函数参数，好比
    image
  • 新增u修饰符，可识别大于uffff的unicode字符
  • 新增y修饰符，相似于g，可是下次匹配必须从剩余字符串的头部开始，对应属性为sticky
  • 新增flags属性，返回修饰符
  • 新增dotAll模式，见连接http://2ality.com/2017/07/reg...，.能够匹配任意单个字符，以前不匹配终止符，n r 等
  • 支持后行断言，介绍见笔记本->正则
  • 新增具名组匹配，同上
  • matchAll一次性返回全部的匹配，返回结果是一个遍历器

4.3 symbol

es6新增的原始数据类型，表示独一无二的值，通常使用为直接Symbol(str)，Symbol.for(str)，Symbol.keyFor(str)

如今有string boolean，number，undefined，null，symbol六种，JS语言内部大量使用，工做中偶尔会用，好比定义私有属性的时候

const FETCH = Symbol('fetch');
import fetch from './lib/fetch';

module.exports = {
  get fetch() {
    if (!this[FETCH]) {
      this[FETCH] = fetch;
    }
    return this[FETCH;
  },
}

4.4 Proxy与Reflect，都是JS语言层次上的概念

Proxy即在目标对象外设置一层代理，外界真正访问到该对象时必须先访问代理
Reflect相似Proxy，是ES6为了操做对象而新增的Api，将一些Object上的对象放在了Reflect对象上，并修改了一些行为

4.5 数值方面的扩展

这部分主要是新增方法，使用频率整体不高

  • 新增 0b 0o表示二进制和八进制，es5八进制表示为0开头（严格模式下不可用）

  • Number新增类方法，

    • isFinite与isNaN，与挂载在全局的两个方法区别是参数只能是数值，方法内部不会调用Number()转化
    • parseInt与parseFloat，与全局保持一致
    • isInteger，参数只能为数值而且 25与25.0同样，而且不在js精度范围内时会误判
    • 常量EPSILON，js可以识别的最小偏差
  • Math对象新增大量方法，不多用
  • ** 指数运算，与Math.pow相似，对于特大运算，可能有偏差
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程