5分钟快速了解es6常用特性

let与const

let也是用来声明变量的关键字,与var的区别是

  • 代码块内有效
  • 不存在变量提升
  • 不允许重复声明

代码块里有效

1
2
3
4
5
6
7
{
let a = 10;
var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

不存在变量提升

1
2
3
4
5
6
7
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

不允许重复声明

1
2
3
4
5
6
7
8
9
10
11
// 报错
function func() {
let a = 10;
var a = 1;
}

// 报错
function func() {
let a = 10;
let a = 1;
}

const用来声明常量

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动

Destructuring(解构)

定义:按照一定模式,从数组和对象中提取值,对变量进行赋值

1
let [a, b, c] = [1, 2, 3];

模板字符串

通常情况下,我们拼接字符串是这样的

1
2
var a="变量";
console.log("这是一个"+a);

在es6中我们可以这样,变量多的时候很省事有木有

1
2
var a="变量";
console.log(`这是一个${a}`);

symbol简介

新的原始数据类型Symbol,表示独一无二的值

Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

1
2
3
4
5
6
7
8
9
10
11
// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

1
2
3
4
// 数组去重简直不要太6
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

Map

它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键

1
2
3
4
5
6
7
8
9
const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

Promise

Promise 是异步编程的一种解决方案

三种状态

  • pending(进行中)
  • fulfilled(已成功)
  • rejected(已失败)

两种过程

  • pending -> fulfilled
  • pending -> rejected

一个常用方法then

1
2
3
4
5
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});

三二一帮助记忆O(∩_∩)O哈哈~

class

ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

原型链的写法

1
2
3
4
5
6
7
8
9
10
function Point(x, y) {
this.x = x;
this.y = y;
}

Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

类的写法

1
2
3
4
5
6
7
8
9
10
11
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}

module

我们知道开发大型的应用都需要模块,而es5是没有模块体系的。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。

es6的模块主要是两个命令

  • import
  • export

export类似于modules.exports

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

export {firstName, lastName, year};

import类似于require

1
2
3
4
5
6
// main.js
import {firstName, lastName, year} from './profile.js';

function setName(element) {
element.textContent = firstName + ' ' + lastName;
}

参考资料