JavaScript从初级往高级走系列————ES6

原创 Bios 随笔 js 51阅读 18 天前 举报

原文博客地址:https://finget.github.io/2018/05/10/javascript-es6/

ES6

现在基本上开发中都在使用ES6,浏览器环境支持不好,可以用babel插件来解决。

采用‘二八定律’,主要涉及ES6常用且重要的部分。

问题:

  • ES6模块化如何使用,开发环境如何打包
  • Class和普通构造函数有何区别
  • Promise的基本使用和原理
  • 总结一下ES6其他常用功能

ES6模块化如何使用,开发环境如何打包

模块化的基本语法

export default 默认输出这个,然后在import的时候就会拿到默认输出的内容。例子中默认输出的a=100
export多个内容,在import时需要使用{}进行引用你需要的内容。

exportexport defaultexportsmodule.exports的区别

require: node 和 es6 都支持的引入
export / import : 只有es6 支持的导出引入
module.exports / exports: 只有 node 支持的导出

  1. module.exports 初始值为一个空对象 {}
    1. exports 是指向的 module.exports 的引用
    2. require() 返回的是 module.exports 而不是 exports

Node里面的模块系统遵循的是CommonJS规范。

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

在nodejs,exportsmodule.exports的引用,初始化时,它们都指向同一个{}对象。

对象在JS中属于引用类型,意思就是exportsmodule.exports是指向同一个内存地址的。

看下面的例子:

exports对象是当前模块的导出对象,用于导出模块公有方法和属性。别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象。

  • module.exports 的使用

定义一个sayHello模块,模块里定义了一个sayHello方法,通过替换当前模块exports对象的方式将sayHello方法导出。
在app.js中加载这个模块,得到的是一个函数,调用该函数,控制台打印hello。

  • exports 导出多个变量

当要导出多个变量怎么办呢?这个时候替换当前模块对象的方法就不实用了,我们需要用到exports对象。

当然,将useExports.js改成这样也是可以的:

在实际开发当中可以只使用module.exports避免造成不必要的问题。

开发环境配置

babel

Babel中文网

  • nodejs环境 npm init
  • npm i babel-core babel-preset-es2015 babel-preset-latest --save-dev
  • 创建.babelrc文件
  • npm i --global babel-cli
webpack

四大维度解锁webpack3笔记

rollup.js

Rollup.js官网

  • npm init
  • 安装 rollup.js需要的一些插件
    npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-core babel-plugin-external-helpers babel-preset-latest --save-dev
  • 配置 .babelrc
  • 配置 rollup.config.js

rollup 功能单一(打包js模块化), webpack功能强大
工具尽量功能单一,可继承,可扩展

npm run start

关于JS众多模块化标准

  • 没有模块化
  • AMD成为标准,require.js
  • 前端打包工具,使得nodejs模块化(CommonJS)可以被使用
  • ES6出现,想统一现在所有模块化标准
  • nodejs积极支持,浏览器尚未统一
  • 你可以自造lib,但是不要自造标准!!!

Class和普通构造函数有何区别

JS构造函数

Class基本语法

语法糖

typeof MathHandle = 'function'
MathHandle其实是个function,‘构造函数’
MathHandle === MathHandle.prototype.constructor

继承

原生js继承

廖雪峰老师的原型继承:点这里

ES6继承

Promise 的基础使用

解决回调地狱(Callback Hell)
详细点的Promise:点这里

Promise 基础语法

我最开始接触到Promise的时候,一直傻了吧唧的在想resolve()reject()在什么时候调用。
resolve()reject()就是为后面then()中的两个函数服务的。

resolve和reject

来个实际的例子

ES6常用其他功能

let/const

let constvar都是用来定义变量的,不同的是let自带作用域,const不能重复赋值。

let定义的变量只在包含它的代码块内有用

多行字符串/模板变量

模板字符串就是用`(Tab键上面那个)包含,变量就是用${}`表示

解构赋值

还可以反过来:

块级作用域

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

let 自带块级作用域

原生js想实现这种效果,需要用到闭包:

立即执行函数形成了一个块级作用域,将参数j保存了下来,并不会被‘污染’,原生js没有块级作用域,varfor中定义的变量是个全局变量,可以在外部访问,也就可以被改变,所以每次for循环都是重置修改i的值,导致最后只能输出10。

函数默认参数与rest

default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat'来指定默认值。

如果用ES6我们而已直接这么写:

最后一个rest语法也很简单,直接看例子:

而如果不用ES6的话,我们则得使用ES5的arguments。

箭头函数

function去掉,在(){}之间加上=>


当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复