导航
导航
文章目录
  1. 什么是ES6
  2. Babel
  3. let和const命令
    1. let命令
    2. const命令
  4. 函数的扩展
    1. 函数参数的默认值
    2. 参数默认值的位置
    3. 箭头函数
  5. Module
    1. export命令
    2. import命令
    3. export default命令

webpack+vue项目中常用ES6语法小结

好久没有更新博客啦,最近入了阴阳师的坑,纯种非洲人,都没心情写博客了。这段时间在接触vue这个框架,用vue+webpack做一些小项目的时候经常会用到ES6的语法,用起来确实比较方便,今天就总结下在vue+webpack项目中经常会用到的一些ES6语法吧。首先来谈谈什么是ES6。

什么是ES6

首先要说说ECMAScript是什么,ECMAScript是JavaScript的规格,而JavaScript是ECMAScript的一种实现,ECMAScript的实现还有Jscript和ActionScript等。ES6(ECMAScript6)一般指ECMAScript2015标准,它是JavaScript语言的下一代标准。

Babel

ES6标准虽然已经发布了,但是很多浏览器环境都还不支持,webpack是通过Babel这个转码器将ES6代码转为ES5,从而在现有环境执行。babel是在webpack的配置文件webpack.config.js的module参数中的loaders中配置,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
...
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
...
]
}
}

配置完成后还需要安装”babel-loader”模块

1
npm install babel-loader --save-dev

然后webpack就可以对用了ES6语法的js文件进行转码了。下面总结一些常用到的ES6语法。

let和const命令

let命令

ES6中let命令用来声明变量,用法类似于var,但是let所声明的变量是局部变量,只在let命令所在的代码块内有效。所以在for循环中很适合用let变量做计数器。
let变量不会像var变量那样会进行变量提升,变量一定要在声明后使用,否则会报错。
只要块级作用域内存在let命令,它所声明的所有变量都绑定这个作业域,不收外部变量的影响,即形成了一个封闭的作用域。
let不允许在相同作用域内重复声明同一个变量。可以看出,let变量实际上为JavaScript新增了块级作用域

const命令

const声明一个只读的常量,一旦声明,值就不能改变。所以,const一旦声明就必须立即初始化,不能只声明不初始化。
const作用域和let命令相同,只在声明所在的块级作用域中有效。const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

函数的扩展

函数参数的默认值

在ES6之前不能直接为函数的参数指定默认值,只能采用变通的方法。ES6允许为函数参数设置默认值,直接写在参数定义的后面。

1
2
3
4
5
function log(x, y='World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China

参数默认值的位置

通常定义了默认值的参数应该是函数的尾参数,如果是非尾部的参数设置默认值,实际上这个参数是没法省略的。除非显式输入undefined。

箭头函数

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

1
var f = v => v;

上述箭头定义的函数等同于:

1
2
3
var f = function(v) {
return v;
};

若箭头函数不需要参数或者需要多于一个参数,就使用一个圆括号代表参数部分。

1
2
3
4
5
6
7
8
9
10
var f = () => 5;
// 等同于
var f = function() {
return 5;
}
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
}

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

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

使用注意点

  1. 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  2. 不可当做构造函数,不可以使用new命令,否则会抛出错误。
  3. 不可使用arguments对象,该对象在函数体内不存在,可以用Rest参数代替。

Module

ES6之前,JavaScript一直没有模块(module)体系,ES6在语言规格的层面上,实现了模块功能,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时采用静态命令的形式。

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

上面代码就是从fs模块加载3个方法,其他方法不加载。这种加载成为“编译时加载”。ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。

export命令

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

1
2
3
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

还可以如下书写:

1
2
3
4
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

export除了输出变量通用可以输出函数或者类,export输出的变量还可以用as关键字重命名。

1
2
3
4
5
6
7
8
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};

import命令

使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。用法上面已经有介绍,如果想为输入的变量重命名,使用as关键字。

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

export default命令

从前面的例子可以看出,使用import命令的时候,需要知道所要加载的变量名或函数名,否则无法加载。export default命令,为模块指定默认输出,其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

我在项目中目前用到的ES6语法就这些了,以后有机会再进一步学习ES6的新语法。