【修真web小课堂】es6的新特性

一、背景介绍

1、es6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2、ECMASCRIPT 和 JAVASCRIPT 的关系?

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。日常场合，这两个词是可以互换的。

二、常用的es6新特性

1、let 和 const 命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。


{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

扫描二维码关注公众号，回复： 2794889 查看本文章

CONST 命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。


const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

CONST 命令

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

2、箭头函数

ES6 允许使用“箭头”（=>）定义函数。


var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

ES6 允许使用“箭头”（=>）定义函数。


var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。


var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。


// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数使用注意点

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。、

3.MODULE语法

概述：历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

EXPORT 命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。


// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量。

IMPORT 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。 JS 文件，里面使用export命令输出变量。


// main.js
import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

EXPORT DEFAULT

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。


// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

三、更多讨论

Q: 对于前端入门来说，是学习ES6还是其他JS框架？

A: 面对这个问题，我目测该同学一定是没了解过ES6的概念。首先ES6是JavaScript最新的语言标准，不是框架，
所以不具备可比性；其次，是先学ES6还是先学其他JS框架，这个要根据自身情况才能做出判断，不过值的一提的是很多JS框架的源码是用ES6写的，
提供的代码示例是用ES6写的。如果不提前学习ES6，估计是看不太懂了。所以个人建议，ES6是前端开发工程师的必备技能之一，建议抽空学习一下，用到的时候就手到擒来了。

Q: ES6和之前的JS比有什么区别呢？

A: 如果非要用一两句话来描述这个问题，那就是ES6语法更简洁、功能更强大。这种模糊的答案未必让你心满意足，仔细看下另一篇通过实例代码做了详细对比，去看看吧，一定不会让你失望。当然，ES6的强大还不止手记中提到的这些，我们也期待大家去深入的学习并沉淀出一些文章，大家相互分享和学习。

Q: 跟ES6相关的技术栈有哪些？

A: 最主要的就是构建相关、工作流相关；主要给大家推荐babel、Gulp、Grunt、webpack

其中babel支持对ES6的编译弥补浏览器支持不足的缺陷，gulp和grunt主要是工作流管理工具,webpack主要用来处理前端JS文件的打包处理。

关于这些技术栈的学习还是结合官网API和一些小的案例去学习，只看官网的API学习效果不是很理想且枯燥。

四、相关链接

PPT	https://it-xzy.github.io/WEB-NEW/2018-7-24-C-js11-tds.html
腾讯视频	https://v.qq.com/x/page/d07353v2pym.html

【修真web小课堂】es6的新特性

猜你喜欢