学习一天ES6，我能收获什么

最新推荐文章于 2024-09-19 09:43:23 发布

AndyVibes

最新推荐文章于 2024-09-19 09:43:23 发布

阅读量211

点赞数 1

文章标签： es6

本文链接：https://blog.csdn.net/weixin_44793569/article/details/119143781

版权

前言

持续学习很重要，学习最高效的方法就是记录自己的学习过程，希望能通过这种方法巩固自己的学到的东西，也在同时帮助到有需要的人。

闲言少叙，让我们直插主题：

一、ES6是什么？

ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等，ES6 的第一个版本，在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》

二、入门

1.Babel

要想学习ES6，要先搞定它的运行，因此首先我们需要安装一个Babel

babel是一个广泛使用的es6转换器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

转码前：

input.map(item => item + 1);

转码后：

 input.map(function (item) { return item + 1; });

通过这个例子，我们不难看出ES6的代码突出一个简介明了，不像之前的ES5，冗长，又是function又是return，非常的不人性

因此我们来安装一手Babel-cli

安装 $ npm install --global babel-cli
安装预设并且添加配置文件配置 .babelrc
$ npm install --save-dev babel-preset-es2015

{ “presets”: [ "es2015"]}
使用

转码结果输出到标准输出

$ babel example.js

转码结果写入一个文件，--out-file 或 -o 参数指定输出文件

$ babel example.js --out-file compiled.js

整个目录转码 --out-dir 或 -d 参数指定输出目录

$ babel src --out-dir lib

大家可以跟着上面的代码在终端直接来一遍

但是呀但是

Babel并不全面，它只能转换新的JavaScript句法，不能转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。笨哪ES！

所以我们给他加个东西babel-polyfill，来个垫片

安装

$ npm install --save babel-polyfill

在js文件中引用并且使用

import 'babel-polyfill'; // 或者 require('babel-polyfill');

这样就ok了，入门完成

2.ES6模块化

Javascript一直没有模块体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

// ES6模块

import { stat, exists, readFile } from 'fs';

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。

这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";

export命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系，也就是说外部接口需要用这个接口名来引用。

var firstName = 'Michael'; 
var lastName = 'vicky'; 
export { firstName, lastName }; //列表导出
export { firstName as first, lastName as last}; //重命名导出
export var a = 3;	//导出单个属性
export function multiply(x, y) { return x * y; }; //导出单个属性
//默认导出，一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 export default。
export default {}
export default function 	foo(){}
var a = 1;
export a;	//报错，因为没有提供对外的接口。应该export var a = 1; 或者export {a}

impor命令

静态的import 语句用于导入由另一个模块导出的绑定。

import * as person from './person.js'	//导入整个模块内容
import {firstName,lastName} from './person.js'	//导入多个接口
import {firstName as name} from './person.js'	//重命名
import '/modules/my-module.js';			//运行整个模块而不导入任何值
import myDefault from './my-module.js';		// 导入使用export default导出的模块

CommonJS模块化

CommonJS 和 AMD 模块，都只能在运行时确定模块之间的依赖关系，以及输入输出的变量。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块 
let { stat, exists, readfile } = require('fs');
 // 等同于
let _fs = require('fs'); 
let stat = _fs.stat;
let exists = _fs.exists; 
let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。