ES6笔记 - 常用特性
这里列出在项目中常用的ES6相关特性，以便更快的理解和应用ES6。
常用特性
- 作用域控制 let、const
- 模板字符串
- 语法糖 - 箭头函数
- 解构
- 类与模块
- Promise
let & const
const不可重新赋值的值 (常量、配置项以及引用的组件)let使用let声明的变量只在语句块内有效
let 的使用场景相对较少的，我们只会在 loop(for，while 循环)及少量必须重定义的变量上用到他
let 的使用场景
|
// 函数体内的变量
function f1() {
let n =
5;
if (
true) {
let n =
10;
}
console.log(n);
// 5
}
// for循环的初始量
for (
let i =
0; i < buttons.length; i++) {
// ...
}
|
const 由于不可以重新赋值的特性，所以可以做更多语法静态分析方面的优化，从而有更高的执行效率。
const 的使用场景
|
// 定义常量
const REG_GET_INPUT =
/^\d{1,3}$/;
// 定义配置项
const config = {
isDev :
false,
pubDir:
'./admin/'
}
// 引入 gulp
const gulp =
require(
'gulp');
|
模板字符串 Template Strings
增强版的字符串，用反引号（`）标识，支持变量注入与多行文本
|
//1. 注入变量与方法
const start =
'hi all';
const getName =
() => {
return
'jelly';
};
const conf = {
fav:
'Coding'
};
const msg =
`${start}, my name is ${getName()}, ${conf.fav} is my favourite`;
// 2. 与引号混用
const wantToSay =
`I'm a "tbfed"`;
// 3. 支持多行文本
const slogan =
`
I have a dream today!
`;
// 4. 比较适合写HTML
const resultTpl =
`
...
`;
|
箭头函数 Arrow Function
使用箭头(=>)进行定义的函数，属于匿名函数（Lambda）一类
箭头函数没有独立执行上下文（ this ），所以其内部引用 this 对象会直接访问父级。
|
// 完整写法
const getOptions =
(name, key) => {
...
}
// 省略参数括号
const getOptions =
key => {
...
}
// 省略参数和方法体括号
const getOptions =
key =>
console.log(key);
// 无参数或方法体，括号不能省略
const noop =
() => {};
// 应用示例
let names = [
'Will',
'Jack',
'Peter',
'Steve',
'John',
'Hugo',
'Mike' ]
let newSet = names
.map(
(name, index) => {
return {
id: index,
name: name
}
})
.filter(
man => man.id %
2 ==
0)
.map(
man => [man.name])
.reduce(
(a, b) => a.concat(b))
console.log(newSet)
//=> [ 'Will', 'Peter', 'John', 'Mike' ]
|
解构 Destructuring
用于分解方法的参数、数组、对象中的变量
|
const bookSet = [
'UED',
'TB fed',
'Not find'];
const bookCollection =
() => {
return {
book1:
'UED',
book2:
'TB fed'};
};
// 1. 解构也可以设置默认值
const {book1, book3 =
'Not find'} = bookCollection();
// 2. 解构数组时候是可以跳过其中某几项的
const [book1,,book3] = bookSet;
// book1 = 'UED', book3 = 'Not find'
// 3. 解构可以取到指定对象的任何属性，包括它包含的方法
const {
length: setLength} = bookSet;
// setLength = 3
|
Rest运算符（解构赋值）/ Spread扩展运算符（…）
|
// 1. rest 得到的是一个真正的数组而不是一个伪数组
const getOptions =
function(...args){
console.log(args.join);
// function
};
// 2. rest 可以配合箭头函数使用，达到取得所有参数的目的
const getOptions =
(...args) => {
console.log(args);
// array
};
// 3. spread 可以用于解构时，聚合所得的值
const [opt1, ...opts] = [
'one',
'two',
'three',
'four'];
// 4. spread 可以用于数组定义
const opts = [
'one',
'two',
'three',
'four'];
const config = [
'other', ...opts];
|
类与模块 Class & Modules
class 定义一个类
|
//定义类
class Point {
//构造函数
constructor(x, y) {
//实例属性
this.x = x;
this.y = y;
}
//get和set用于对实例属性自定义存取行为
get prop() {
return
'getter';
}
set prop(value) {
console.log(
'setter: '+value);
}
//实例方法
toString() {
return
'(' +
this.x +
', ' +
this.y +
')';
}
//静态方法
static classMethod() {
return
'hello';
}
//静态属性
static get HuaChen(){
return
'jelly';
}
}
|
使用 extend 关键字实现类的继承
|
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
// 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return
this.color +
' ' +
super.toString();
// 调用父类的toString()
}
}
|
import 模块引入的方式
|
import name
from
"module-name"
import *
as name
from
"module-name"
import { member }
from
"module-name"
import { member
as alias }
from
"module-name"
import { member1 , member2 }
from
"module-name"
import { member1 , member2
as alias2 , [...] }
from
"module-name"
import defaultMember, { member [ , [...] ] }
from
"module-name"
import defaultMember, *
as alias
from
"module-name"
import defaultMember
from
"module-name"
import
"module-name"
|
export 模块导出或对外提供接口的方式
|
export
var firstName =
'Michael';
export
var lastName =
'Jackson';
export
var year =
1958;
// 等同于
var firstName =
'Michael';
var lastName =
'Jackson';
var year =
1958;
export {firstName, lastName, year};
// 有defautl 与 无default
// 输出
export
default
function crc32() {
// ...
}
// 输入
import crc32
from
'crc32';
// 输出
export
function crc32() {
// ...
};
// 输入
import {crc32}
from
'crc32';
// 设置别名
function add(x, y) {
return x * y;
}
export {add
as
default};
|
export default命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。
|
// 正确
export
var a =
1;
// 正确
var a =
1;
export
default a;
// 错误
export
default
var a =
1;
|
Promise
Promise 为异步编程提供统一的解决方案，比传统的回调和事件更加合理有效。
|
// 1. 多个异步任务同时执行用 Promise.all，顺序执行使用链式调用
// Promise.all
Promise
.all([jsBuildPromise, cssBuildPromise])
.then(
() => {
...
});
// 2. Promise 的链式调用需要每一个过程返回一个 Promise 对象才能保证顺序执行
gitPromise
.then(
() => git.add())
// 正确，箭头函数简写
.then(
() => {
git.commit();
// 错误，函数返回 undefined，会立即执行下一过程
})
.then(
() => {
return git.log();
// 正确
});
// 3. Promise 需要调用 catch 方法来捕获错误，而且过程内的错误不会阻塞后续代码执行
new
Promise(
() => {
f;
// not define error !
})
.catch(
(err) => {
console.log(err)
// show 'f is not define'
});
console.log(
'error test');
// 此行可以被正常执行
现在ES6有着广泛的应用，ES6对ES5有着大量的语法更新和改动，掌握ES6相关特性是前端的必要技能，有利于学习掌握新的知识，提升编码效率和质量。 |