Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

es6涉及的那点东西

fozero 2019-02-22 13:32:00 阅读数:186 评论数:0 点赞数:0 收藏数:0

前言

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。
也就是说,ES6就是ES2015。
目前并不是所有浏览器都能兼容ES6全部特性,我们可以使用Babel工具来转换成es5
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码

最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

一、let 、const命令

1、let用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效
2、不存在变量提升,let不像var那样会发生“变量提升”现象。所以,变量一定要在声明后使用,否则报错。

console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError
var foo =2;let bar =2;

3、在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。

const声明常量还有两个好处,一是阅读代码的人立刻会意识到不应该修改这个值,二是防止了无意间修改变量值所导致的错误。

4、ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。也就是“暂时性死区”。

二、es6模块(module)

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

这有可能导致两个问题:

  • 一方面js代码变得很臃肿,难以维护
  • 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug
  • 在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)。

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

传统的写法
首先我们回顾下require.js的写法。假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果,我们要怎么做呢?
首先定义:

//content.js
define('content.js', function(){
return'A cat';
})

然后require:

//index.js
require(['./content.js'], function(animal){
console.log(animal); //A cat
})

CommonJS写法

//index.js
var animal = require('./content.js')
//content.js
module.exports = 'A cat'

ES6的写法

//index.js
import animal from'./content'//content.js
export default'A cat'

// ES6模块

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

上面代码的实质是从fs模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”,即ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。当然,这也导致了没法引用ES6模块本身,因为它不是对象。

浏览器使用ES6模块的语法如下。

<script type="module" src="foo.js"></script>

上面代码在网页中插入一个模块foo.js,由于type属性设为module,所以浏览器知道这是一个ES6模块。

Node的默认模块格式是CommonJS,目前还没决定怎么支持ES6模块。所以,只能通过Babel这样的转码器,在Node里面使用ES6模块。

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

1、export命令

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。例如,

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

也可以是下面这种写法(优先考虑使用),

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

export命令除了输出变量,还可以输出函数或类(class)。

export function multiply(x, y){return x * y;};

可以使用as关键字重命名

function v1(){...}
function v2(){...}
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};

注意:export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,import命令也是如此,这是因为处于条件代码块之中,就没法做静态优化了,违背了ES6模块的设计初衷。下面代码中,export语句放在函数之中,结果报错。

function foo(){
export default 'bar' // SyntaxError
}
foo()

2、import命令

使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

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

上面代码的import命令,就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名

使用as关键字将输入的变量重新命名

import { lastName as surname } from './profile';

import命令具有提升效果,会提升到整个模块的头部,首先执行。

foo();
import { foo } from 'my_module';

上面的代码不会报错,因为import的执行早于foo的调用。

import语句会执行所加载的模块,但是不输入任何值。

import 'lodash';

import 也可以引用文件夹/目录

如import router from './router' 

这里router是个目录 里面有个index.js文件

3、模块整体加载

circle模块有2个方法

// circle.js
export function area(radius){return Math.PI * radius * radius;}
export function circumference(radius){return2* Math.PI * radius;}
通过使用*号加载整个模块
import * as circle from './circle';
console.log('圆面积:'+ circle.area(4));
console.log('圆周长:'+ circle.circumference(14));

三、class类

1、class的基本用法
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类

//定义类
class Point{
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return'('+this.x +', '+this.y +')';
}
}

constructor这就是构造方法,而this关键字则代表实例对象
定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

使用时直接对类使用new命令

class Bar{
doStuff(){
console.log('stuff');
}
}
var b =new Bar();
b.doStuff() // "stuff"

2、constructor构造方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
constructor(){}

3、class表达式

与函数一样,类也可以使用表达式的形式定义。

const MyClass = class Me{
getClassName(){
return Me.name;
}
};

这个类的名字是MyClass而不是Me,Me只在Class的内部代码可用,指代当前类。

如果类的内部没用到的话,可以省略Me

const MyClass = class {/* ... */};

采用Class表达式,可以写出立即执行的Class。

let person =newclass{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}('张三');
person.sayName(); // "张三"

4、class类继承

通过extends关键字实现继承

class ColorPoint extends Point{}

四、arrow function箭头函数

function(i){
return i + 1;
} //ES5
(i) => i + 1//ES6

如果方程比较复杂,则需要用{}把代码包起来:

function(x, y){
x++;
y--;
return x + y;
}
(x, y) => {
x++; y--;
return x+y
}

在对象方法中使用this

传统的写法需要将this传给self,再用self来指代this

 says(say){
var self = this;
setTimeout(function(){
console.log(self.type + ' says ' + say)
}, 1000)

使用es6的写法

classAnimal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //animal says hi

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

五、template string

当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等

$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);

我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串`后 ``` $("#result").append(
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
); ``` 用反引号(\)来标识起始,用${}来引用变量,而且所有的空格和缩进都会被保留在输出之中

六、default, rest

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

function animal(type){
type = type || 'cat'
console.log(type)
}
animal()

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

function animal(type = 'cat'){
console.log(type)
}
animal()

rest语法也很简单,看例子:

function animals(...types){
console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

参考阅读

https://segmentfault.com/a/1190000004365693#articleHeader7
http://es6.ruanyifeng.com/

版权声明
本文为[fozero]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/fozero/p/10417855.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领