最近封装一个网络请求库的时候，观摩别人的代码时候发现用到了很多ES6语法，确实很实用，总结如下：
- 变量的解构赋值(对象的解构赋值，别名，默认值)
# 析构赋值让我们从 Object 或 Array 里取部分数据存为变量。
// 对象
const user = { name: 'guanguan', age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`); // guanguan : 2
// 数组
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo); // 1
# 我们也可以析构传入的函数参数。
const add = (state, { payload }) => {
return state.concat(payload);
};
# 析构时还可以配 alias，让代码更具有语义。
const add = (state, { payload: todo }) => {
return state.concat(todo);
};
- let与const（块级作用域、let注意事项：不存在变量提升、暂时性死区、不允许重复声明）
const DELAY = 1000;
let count = 0;
count = count + 1;
- 箭头函数（注意this的指向，在何处声明this就指向何处，区别于普通函数中this指向代码运行时指向）
[1, 2, 3].map(x => x + 1); // [2, 3, 4]
等同于：
[1, 2, 3].map((function(x) {
return x + 1;
}).bind(this));
- Promise（注意ie10以下对promise不支持）
# Promise 用于更优雅地处理异步请求。比如发起异步请求：
fetch('/api/todos')
.then(res => res.json())
.then(data => ({ data }))
.catch(err => ({ err }));
# 定义 Promise 。
const delay = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
};
delay(1000).then(_ => {
console.log('executed');
});
- Async/Await（配合Promise使用，解决回调地狱；ES2017才支持）
参考：http://es6.ruanyifeng.com/#docs/async#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95
- Class的使用（注意Class的本质：构造函数）
参考：http://es6.ruanyifeng.com/#docs/class
- ES6中模块的导入导出（import、export、export default）
// 引入全部
import dva from 'dva';
// 引入部分
import { connect } from 'dva';
import { Link, Route } from 'dva/router';
// 引入全部并作为 github 对象
import * as github from './services/github';
// 导出默认
export default App;
// 部分导出，需 import { App } from './file'; 引入
export class App extend Component {};
- 字符串的拓展（字符串模板）
const user = 'world';
console.log(`hello ${user}`); // hello world
// 多行
const content = `
Hello ${firstName},
Thanks for ordering ${qty} tickets to ${event}.
`;
- 函数的拓展（参数默认值、rest参数[使用了展开运算符Spread Operator]）
// 参数默认值
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
// rest参数
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
- 对象的拓展（属性的简洁表示法、定义方法可以省略function关键字、assign）
# 属性的简洁表示法
let birth = '2000/01/01';
const Person = {
name: '张三',
//等同于birth: birth
birth,
# 定义方法可以省略function关键字
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
# assign
// Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
// Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
// 注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
- Spread Operator 展开运算符（类似python中的
*/**功能）
# Spread Operator 即 3 个点 `...`，有几种不同的使用方法。
# 可用于组装数组。
const todos = ['Learn dva'];
[...todos, 'Learn antd']; // ['Learn dva', 'Learn antd']
# 也可用于获取数组的部分项。
const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest; // ['b', 'c']
// With ignore
const [first, , ...rest] = arr;
rest; // ['c']
# 还可收集函数参数为数组。
function directions(first, ...rest) {
console.log(rest);
}
directions('a', 'b', 'c'); // ['b', 'c'];
# 代替 apply。
function foo(x, y, z) {}
const args = [1,2,3];
// 下面两句效果相同
foo.apply(null, args);
foo(...args);
# 对于 Object 而言，用于组合成新的 Object 。(ES2017 stage-2 proposal)
const foo = {
a: 1,
b: 2,
};
const bar = {
b: 3,
c: 2,
};
const d = 4;
const ret = { ...foo, ...bar, d }; // { a:1, b:3, c:2, d:4 }
此外，在 JSX 中 Spread Operator 还可用于扩展 props，详见 [Spread Attributes](https://github.com/dvajs/dva-knowledgemap#spread-attributes)。
- Generators 迭代器（简直就是照抄Python过来的）
# dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器，通过 yield 关键字实现暂停功能。
# 这是一个典型的 dva effect，通过 yield 把异步逻辑通过同步的方式组织起来。
app.model({
namespace: 'todos',
effects: {
*addRemote({ payload: todo }, { put, call }) {
yield call(addTodo, todo);
yield put({ type: 'add', payload: todo });
},
},
});
- 未完...待续
ES6沿用了好多Python的语法，JS前景一片光明。
网友评论