前端模块化开发--ES6相关知识
一、简介
- ES全名:ECMAScript
- ES由ECMA进行标准化的一套规范
- ES涵盖各种环境中JS使用场景,无论是浏览器环境还是类似node.js的非浏览器环境
- ES版本:1、2、3、5、6
- ES6是最新标准,目标是使JS可以编写复杂的大型应用程序,成为企业级开发语言。
二、新特性
1、变量声明 let
使用var关键字,意味着a变量是全局的,打印结果是abc
1 | function info(bol) { |
使用let关键字,此时就会报错
- ES6之前,声明变量使用var,该关键字声明的变量会在函数最顶部(不在函数内的即在全局作用域的最顶部)
- ES6声明变量使用let,常量使用const,它们声明的变量都属于块级作用域,即在声明的{}中有效
1 | function info(bol) { |
2、常量声明:const
关键字const声明的常量只能赋值一次
3、模版字符串:
单行字符串拼接:
${}
1 | let name = 'michong'; |
4、参数默认值:
ES6为函数参数提供了默认值
1 | function getAge(age = 24) { |
5、箭头函数
箭头代替函数,简化函数定义,箭头函数最直观的三个特点。
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的 this 关键字
1 | getName = (name) => { |
6、对象初始化简写
ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的
1 | People = (name, age) => { |
==返回值==
1 | { name: '米虫', age: 24 } |
7、解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程
1 | //对象 |
8、Spread Operator
1 | //数组 |
9、NodeJS对ES6支持
- 1)在项目根目录添加.babelrc文件,配置es2015插件
1 | { |
2)安装es2015插件
运行安装命令1
cnpm install babel-preset-es2015 --save-dev
babel-preset-es2015: 可以将es2015即es6的js代码编译为es5
3)全局安装命令行工具
1 | cnpm install babel-cli -g |
- 4)使用
babel-node js文件名
10、Import和Export(Node中不支持这个,所有参考上面第九条的内容)
ES6中的新语法,类似于exports和require,可以实现函数跨文件使用
test.js
1 | //对象 |
test2.js
1 | import {People} from './test' |
11、Promise 对象(异步处理,Ajax等)
Promise
是异步编程的一种解决方案,避免了传统的回调函数的层层嵌套,也就是常说的“回调地狱”。
Promise
一旦新建就会立即执行,无法中途取消。
1 | let promise = new Promise(function (resolve, reject) { |
补充 async
await
Async/await建立于Promise之上,很多人认为的最高境界,就是根本不用关心它是不是异步。async await就是异步操作的终极解决方案。
1 | getJSON = () => { |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 MiChong的🏡!
评论