前言

  1. 这里的 "ES6" 泛指 ES5 之后的新语法
  2. 这里的 "完全" 是指本文会不断更新
  3. 这里的 "使用" 是指本文会展示很多 ES6 的使用场景
  4. 这里的 "手册" 是指你可以参照本文将项目更多的重构为 ES6 语法

此外还要注意这里不一定就是正式进入规范的语法。

1. let 和 const

在我们开发的时候,可能认为应该默认使用 let 而不是 var,这种情况下,对于需要写保护的变量要使用 const。

然而另一种做法日益普及:默认使用 const,只有当确实需要改变变量的值的时候才使用 let。这是因为大部分的变量的值在初始化后不应再改变,而预料之外的变量的修改是很多 bug 的源头。

// 例子 1-1

// bad
var foo = 'bar'; // good
let foo = 'bar'; // better
const foo = 'bar';

2. 模板字符串

1. 模板字符串

需要拼接字符串的时候尽量改成使用模板字符串:

// 例子 2-1

// bad
const foo = 'this is a' + example; // good
const foo = `this is a ${example}`;

2. 标签模板

可以借助标签模板优化书写方式:

// 例子 2-2

let url = oneLine `
www.taobao.com/example/index.html
?foo=${foo}
&bar=${bar}
`; console.log(url); // www.taobao.com/example/index.html?foo=foo&bar=bar

oneLine 的源码可以参考 《ES6 系列之模板字符串》

3. 箭头函数

优先使用箭头函数,不过以下几种情况避免使用:

1. 使用箭头函数定义对象的方法

// 例子 3-1

// bad
let foo = {
value: 1,
getValue: () => console.log(this.value)
} foo.getValue(); // undefined

2. 定义原型方法

// 例子 3-2

// bad
function Foo() {
this.value = 1
} Foo.prototype.getValue = () => console.log(this.value) let foo = new Foo()
foo.getValue(); // undefined

3. 作为事件的回调函数

// 例子 3-3

// bad
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log(this === window); // => true
this.innerHTML = 'Clicked button';
});

4. Symbol

1. 唯一值

// 例子 4-1

// bad
// 1. 创建的属性会被 for-in 或 Object.keys() 枚举出来
// 2. 一些库可能在将来会使用同样的方式,这会与你的代码发生冲突
if (element.isMoving) {
smoothAnimations(element);
}
element.isMoving = true; // good
if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) {
smoothAnimations(element);
}
element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true; // better
var isMoving = Symbol("isMoving"); ... if (element[isMoving]) {
smoothAnimations(element);
}
element[isMoving] = true;

2. 魔术字符串

魔术字符串指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。

魔术字符串不利于修改和维护,风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

// 例子 4-1

// bad
const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE' // good
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol() function handleFileResource(resource) {
switch(resource.type) {
case TYPE_AUDIO:
playAudio(resource)
break
case TYPE_VIDEO:
playVideo(resource)
break
case TYPE_IMAGE:
previewImage(resource)
break
default:
throw new Error('Unknown type of resource')
}
}

3. 私有变量

Symbol 也可以用于私有变量的实现。

// 例子 4-3

const Example = (function() {
var _private = Symbol('private'); class Example {
constructor() {
this[_private] = 'private';
}
getName() {
return this[_private];
}
} return Example;
})(); var ex = new Example(); console.log(ex.getName()); // private
console.log(ex.name); // undefined

5. Set 和 Map

1. 数组去重

// 例子 5-1

[...new Set(array)]

2. 条件语句的优化

// 例子 5-2
// 根据颜色找出对应的水果 // bad
function test(color) {
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
} test('yellow'); // ['banana', 'pineapple']
// good
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
}; function test(color) {
return fruitColor[color] || [];
}
// better
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']); function test(color) {
return fruitColor.get(color) || [];
}

6. for of

1. 遍历范围

for...of 循环可以使用的范围包括:

  1. 数组
  2. Set
  3. Map
  4. 类数组对象,如 arguments 对象、DOM NodeList 对象
  5. Generator 对象
  6. 字符串

2. 优势

ES2015 引入了 for..of 循环,它结合了 forEach 的简洁性和中断循环的能力:

// 例子 6-1

for (const v of ['a', 'b', 'c']) {
console.log(v);
}
// a b c for (const [i, v] of ['a', 'b', 'c'].entries()) {
console.log(i, v);
}
// 0 "a"
// 1 "b"
// 2 "c"

3. 遍历 Map

// 例子 6-2

let map = new Map(arr);

// 遍历 key 值
for (let key of map.keys()) {
console.log(key);
} // 遍历 value 值
for (let value of map.values()) {
console.log(value);
} // 遍历 key 和 value 值(一)
for (let item of map.entries()) {
console.log(item[0], item[1]);
} // 遍历 key 和 value 值(二)
for (let [key, value] of data) {
console.log(key)
}

7. Promise

1. 基本示例

// 例子 7-1

// bad
request(url, function(err, res, body) {
if (err) handleError(err);
fs.writeFile('1.txt', body, function(err) {
request(url2, function(err, res, body) {
if (err) handleError(err)
})
})
}); // good
request(url)
.then(function(result) {
return writeFileAsynv('1.txt', result)
})
.then(function(result) {
return request(url2)
})
.catch(function(e){
handleError(e)
});

2. finally

// 例子 7-2

fetch('file.json')
.then(data => data.json())
.catch(error => console.error(error))
.finally(() => console.log('finished'));

8. Async

1. 代码更加简洁

// 例子 8-1

// good
function fetch() {
return (
fetchData()
.then(() => {
return "done"
});
)
} // better
async function fetch() {
await fetchData()
return "done"
};
// 例子 8-2

// good
function fetch() {
return fetchData()
.then(data => {
if (data.moreData) {
return fetchAnotherData(data)
.then(moreData => {
return moreData
})
} else {
return data
}
});
} // better
async function fetch() {
const data = await fetchData()
if (data.moreData) {
const moreData = await fetchAnotherData(data);
return moreData
} else {
return data
}
};
// 例子 8-3

// good
function fetch() {
return (
fetchData()
.then(value1 => {
return fetchMoreData(value1)
})
.then(value2 => {
return fetchMoreData2(value2)
})
)
} // better
async function fetch() {
const value1 = await fetchData()
const value2 = await fetchMoreData(value1)
return fetchMoreData2(value2)
};

2. 错误处理

// 例子 8-4

// good
function fetch() {
try {
fetchData()
.then(result => {
const data = JSON.parse(result)
})
.catch((err) => {
console.log(err)
})
} catch (err) {
console.log(err)
}
} // better
async function fetch() {
try {
const data = JSON.parse(await fetchData())
} catch (err) {
console.log(err)
}
};

3. "async 地狱"

// 例子 8-5

// bad
(async () => {
const getList = await getList();
const getAnotherList = await getAnotherList();
})(); // good
(async () => {
const listPromise = getList();
const anotherListPromise = getAnotherList();
await listPromise;
await anotherListPromise;
})(); // good
(async () => {
Promise.all([getList(), getAnotherList()]).then(...);
})();

9. Class

构造函数尽可能使用 Class 的形式

// 例子 9-1

class Foo {
static bar () {
this.baz();
}
static baz () {
console.log('hello');
}
baz () {
console.log('world');
}
} Foo.bar(); // hello
// 例子 9-2

class Shape {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() {
return this._width * this._height;
}
} const square = new Shape(10, 10);
console.log(square.area); // 100
console.log(square._width); // 10

10.Decorator

1. log

// 例子 10-1

class Math {
@log
add(a, b) {
return a + b;
}
}

log 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

2. autobind

// 例子 10-2

class Toggle extends React.Component {

  @autobind
handleClick() {
console.log(this)
} render() {
return (
<button onClick={this.handleClick}>
button
</button>
);
}
}

autobind 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

3. debounce

// 例子 10-3

class Toggle extends React.Component {

  @debounce(500, true)
handleClick() {
console.log('toggle')
} render() {
return (
<button onClick={this.handleClick}>
button
</button>
);
}
}

debounce 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

4. React 与 Redux

// 例子 10-4

// good
class MyReactComponent extends React.Component {} export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent); // better
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};

11. 函数

1. 默认值

// 例子 11-1

// bad
function test(quantity) {
const q = quantity || 1;
} // good
function test(quantity = 1) {
...
}
// 例子 11-2

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });

// bad
function doSomething(config) {
const foo = config.foo !== undefined ? config.foo : 'Hi';
const bar = config.bar !== undefined ? config.bar : 'Yo!';
const baz = config.baz !== undefined ? config.baz : 13;
} // good
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
...
} // better
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
...
}
// 例子 11-3

// bad
const Button = ({className}) => {
const classname = className || 'default-size';
return <span className={classname}></span>
}; // good
const Button = ({className = 'default-size'}) => (
<span className={classname}></span>
); // better
const Button = ({className}) =>
<span className={className}></span>
} Button.defaultProps = {
className: 'default-size'
}
// 例子 11-4

const required = () => {throw new Error('Missing parameter')};

const add = (a = required(), b = required()) => a + b;

add(1, 2) // 3
add(1); // Error: Missing parameter.

12. 拓展运算符

1. arguments 转数组

// 例子 12-1

// bad
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
} // good
const sortNumbers = (...numbers) => numbers.sort();

2. 调用参数

// 例子 12-2

// bad
Math.max.apply(null, [14, 3, 77]) // good
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

3. 构建对象

剔除部分属性,将剩下的属性构建一个新的对象

// 例子 12-3
let [a, b, ...arr] = [1, 2, 3, 4, 5]; const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4, e: 5 };

有条件的构建对象

// 例子 12-4

// bad
function pick(data) {
const { id, name, age} = data const res = { guid: id } if (name) {
res.name = name
}
else if (age) {
res.age = age
} return res
} // good
function pick({id, name, age}) {
return {
guid: id,
...(name && {name}),
...(age && {age})
}
}

合并对象

// 例子 12-5

let obj1 = { a: 1, b: 2,c: 3 }
let obj2 = { b: 4, c: 5, d: 6}
let merged = {...obj1, ...obj2};

4. React

将对象全部传入组件

// 例子 12-6

const parmas =  {value1: 1, value2: 2, value3: 3}

<Test {...parmas} />

13. 双冒号运算符

// 例子 13-1

foo::bar;
// 等同于
bar.bind(foo); foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上面。

// 例子 13-2

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo; let log = ::console.log;
// 等同于
var log = console.log.bind(console);

14. 解构赋值

1. 对象的基本解构

// 例子 14-1

componentWillReceiveProps(newProps) {
this.setState({
active: newProps.active
})
} componentWillReceiveProps({active}) {
this.setState({active})
}
// 例子 14-2

// bad
handleEvent = () => {
this.setState({
data: this.state.data.set("key", "value")
})
}; // good
handleEvent = () => {
this.setState(({data}) => ({
data: data.set("key", "value")
}))
};
// 例子 14-3

Promise.all([Promise.resolve(1), Promise.resolve(2)])
.then(([x, y]) => {
console.log(x, y);
});

2. 对象深度解构

// 例子 14-4

// bad
function test(fruit) {
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
} // good
function test({name} = {}) {
console.log (name || 'unknown');
}
// 例子 14-5

let obj = {
a: {
b: {
c: 1
}
}
}; const {a: {b: {c = ''} = ''} = ''} = obj;

3. 数组解构

// 例子 14-6

// bad
const spliteLocale = locale.splite("-");
const language = spliteLocale[0];
const country = spliteLocale[1]; // good
const [language, country] = locale.splite('-');

4. 变量重命名

// 例子 14-8

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // "aaa"

5. 仅获取部分属性

// 例子 14-9

function test(input) {
return [left, right, top, bottom];
}
const [left, __, top] = test(input); function test(input) {
return { left, right, top, bottom };
}
const { left, right } = test(input);

15. 增强的对象字面量

// 例子 15-1

// bad
const something = 'y'
const x = {
something: something
} // good
const something = 'y'
const x = {
something
};

动态属性

// 例子 15-2

const x = {
['a' + '_' + 'b']: 'z'
} console.log(x.a_b); // z

16. 数组的拓展方法

1. keys

// 例子 16-1

var arr = ["a", , "c"];

var sparseKeys = Object.keys(arr);
console.log(sparseKeys); // ['0', '2'] var denseKeys = [...arr.keys()];
console.log(denseKeys); // [0, 1, 2]

2. entries

// 例子 16-2

var arr = ["a", "b", "c"];
var iterator = arr.entries(); for (let e of iterator) {
console.log(e);
}

3. values

// 例子 16-3

let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values(); for (let letter of eArr) {
console.log(letter);
}

4. includes

// 例子 16-4

// bad
function test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}
} // good
function test(fruit) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}
}

5. find

// 例子 16-5

var inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
]; function findCherries(fruit) {
return fruit.name === 'cherries';
} console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

6. findIndex

// 例子 16-6

function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
} console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

更多的就不列举了。

17. optional-chaining

举个例子:

// 例子 17-1

const obj = {
foo: {
bar: {
baz: 42,
},
},
}; const baz = obj?.foo?.bar?.baz; // 42

同样支持函数:

// 例子 17-2

function test() {
return 42;
}
test?.(); // 42 exists?.(); // undefined

需要添加 @babel/plugin-proposal-optional-chaining 插件支持

18. logical-assignment-operators

// 例子 18-1

a ||= b;

obj.a.b ||= c;

a &&= b;

obj.a.b &&= c;

Babel 编译为:

var _obj$a, _obj$a2;

a || (a = b);

(_obj$a = obj.a).b || (_obj$a.b = c);

a && (a = b);

(_obj$a2 = obj.a).b && (_obj$a2.b = c);

出现的原因:

// 例子 18-2

function example(a = b) {
// a 必须是 undefined
if (!a) {
a = b;
}
} function numeric(a = b) {
// a 必须是 null 或者 undefined
if (a == null) {
a = b;
}
} // a 可以是任何 falsy 的值
function example(a = b) {
// 可以,但是一定会触发 setter
a = a || b; // 不会触发 setter,但可能会导致 lint error
a || (a = b); // 就有人提出了这种写法:
a ||= b;
}

需要 @babel/plugin-proposal-logical-assignment-operators 插件支持

19. nullish-coalescing-operator

a ?? b

// 相当于

(a !== null && a !== void 0) ? a : b

举个例子:

var foo = object.foo ?? "default";

// 相当于

var foo = (object.foo != null) ? object.foo : "default";

需要 @babel/plugin-proposal-nullish-coalescing-operator 插件支持

20. pipeline-operator

const double = (n) => n * 2;
const increment = (n) => n + 1; // 没有用管道操作符
double(increment(double(5))); // 22 // 用上管道操作符之后
5 |> double |> increment |> double; // 22

其他

新开了 知乎专栏,大家可以在更多的平台上看到我的文章,欢迎关注哦~

参考

  1. ES6 实践规范
  2. babel 7 简单升级指南
  3. 不得不知的 ES6 小技巧
  4. 深入解析 ES6:Symbol
  5. 什么时候你不能使用箭头函数?
  6. 一些使 JavaScript 更加简洁的小技巧
  7. 几分钟内提升技能的 8 个 JavaScript 方法
  8. [[译] 如何使用 JavaScript ES6 有条件地构造对象](https://juejin.im/post/5bb47d...
  9. 5 个技巧让你更好的编写 JavaScript(ES6) 中条件语句
  10. ES6 带来的重大特性 – JavaScript 完全手册(2018版)

ES6 系列

ES6 系列目录地址:https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右,旨在加深 ES6 部分知识点的理解,重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。

原文地址:https://segmentfault.com/a/1190000017171866

ES6 完全使用手册的更多相关文章

  1. ES6背记手册

    ES6规范 阮一峰的ES6在线教程 在线图书--Exploring ES6 ES6 tutorials babel在线教程--https://babeljs.io/docs/en/learn.html ...

  2. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...

  3. Vue知识点超快速学习

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  4. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

  5. 【转】ES6 手册

    目录 var 和 let/const 的比较 用块级作用域代替 IIFES 箭头函数 字符串 解构 模块 参数 类 Classes Symbols Maps WeakMaps Promises Gen ...

  6. ES6速记手册

    1.三元操作符 这是一个很好的节省代码当你想要编写一个如果. . else语句在一线. 普通写法: const x = 20;let big;if (x > 10) { 速记: const bi ...

  7. ES6 手册

    不用就忘, 把阮大大的地址列在这儿: http://es6.ruanyifeng.com/#README

  8. es6入门教程完整版

    ECMAScript 6入门 <ECMAScript 6入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript 6新引入的语法特性. 作者:阮一峰 授权:署名-非商用 ...

  9. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

随机推荐

  1. java 遍历String

    Java字符串是一系列的Unicode字符序列,但是,它却常常被误认为是char序列.于是,我们经常这样来遍历字符串: package testchar; public class TestChar2 ...

  2. VC++显示文件或文件夹属性

    When you select a file or folder in Explorer window, and choose 'Properties' from the menu, you get ...

  3. OpenCV 常用汇总

    cv::Rect矩形类用法 typedef struct CvRect { int x; /* 方形的左上角的x-坐标 */ int y; /* 方形的左上角的y-坐标*/ int width; /* ...

  4. 标C编程笔记day05 函数声明、文件读写、联合类型、枚举类型

    函数声明:     1.隐式声明:在没有声明的情况下,系统可依据參数类型推断去调用函数(有可能出错)     2.显式声明:声明在被调用之前.如:double add(double,double);  ...

  5. 《ASP.NET 1200例》ref关键字与out关键字

    REF关键字 ref 关键字会导致通过引用传递的参数,而不是值. 通过引用传递的效果是在方法中对参数的任何改变都会反映在调用方的基础参数中. 引用参数的值与基础参数变量的值始终是一样的. 不要将“通过 ...

  6. zoj3659(经典并查集)

    这种思想很经典. 从最小的边选择,那么可以知道的是,在除去这条边的另外两个联通块,选其中一块中的点做为源点到另一块所得到的费用和. 如果你已经知道了这两个联通块内部选一个点时的最大费用和.那么这题就可 ...

  7. Leetcode-Convert Sorted List to BST.

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  8. iOS微信打开App

    传统的方式是通过URL Scheme的方式,但是iOS9以后又出了新的更完美的方式Universal Links. 传统的URL Scheme方式微信内置的浏览器都是封锁了所有它投资的公司之外的,只有 ...

  9. 【Python之路】第十八篇--MySQL(一)

    一.概述 1.什么是数据库 ? 答:数据的仓库. 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? 答:他们均是一个软件,都有两个主要的功能: a. ...

  10. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...