ECMAScript-2015 快速入门

ES6 快速入门

let 块级作用域

1
2
3
4
5
var a = 1;
{
let a = 2;
}
console.log(a); // 1

const 常量

无法重新赋值

1
2
3
4
5
6
const a = 1;
const a = 2; // 错误
const b = [];
b.push(1);
console.log(b); // [1]

解构赋值

1
2
3
4
5
6
7
8
9
function arr(){
return [1, 2, 3]
}
let [a, b, c] = arr();
a // 1
b // 2
c // 3

对象解构赋值

1
2
3
4
5
6
7
8
9
10
11
function obj(){
return {
a: 1,
b: 2,
c: 3
}
}
let {a: a, b: b, c: c} = obj();
console.log(a, b, c); // 1, 2, 3

模板字符串

1
2
3
4
let name = 'Max';
let age = 24;
let info = `我的名字是${name},今年${age}岁了!`;
info // '我的名字是Max,今年24岁了!'

标签模板

1
2
3
4
5
6
7
8
let name = 'Max';
let age = 24;
let info = outPut`我的名字是${name},今年${age}岁了!`;
function outPut(strings, ...values){
console.log(strings); // ['我的名字是', ',今年', '岁了!']
console.log(values); // [Max, 24]
}

新的字符串方法

1
2
3
4
5
var info = '我的名字是Max,今年24岁了!';
info.startsWith('我'); // true ,是否以‘我’开头
info.endsWith('了!'); // true ,是否以‘了!’结尾
info.inclueds('的'); // true,是否包含‘的’

函数默认值

1
2
3
4
5
6
function breakfast(name = 'Max', age = 24){
return `${name} ${age}`;
}
breakfast() // 'Max 24'
breakfast('MaxMeng', '18') // 'MaxMeng 18'

spread操作符

1
2
3
4
5
6
let arr1 = [1, 2],
arr2 = [0, ...arr1];
console.log(arr1); // [1, 2]
console.log(...arr1); // 1, 2
console.log(arr2); // [0, 1, 2]

rest操作符

1
2
3
4
function breakfast(a, b, ...arr){
console.log(a, b, arr);
}
breakfast(1, 2, 3, 4); // 1, 2, [3, 4]

解构参数

1
2
3
4
function breakfast(a, b, {c, d} = {}){
console.log(a, b, c, d);
}
breakfast(1, 2, {c: 3, d: 4}); // 1, 2, 3, 4

函数名字

1
2
3
4
function breakfast(){
//
}
breakfast.name // breakfast

箭头函数

1
2
3
4
5
let breakfast = (name, age) => name + age;
let breakfast = (name, age) => {
return name + age;
};

对象字面量简洁表示法

1
2
3
4
5
6
7
8
9
10
11
12
let name = 'max',
age = 24;
let info = {
name,
age,
breakfast(){
return this.name;
}
}
info; // {name: 'max', age: 24}

object-prop-name

1
2
3
4
5
6
let info = {};
let name = 'first name';
info[name] = 'max';
info.age = 24;
info // {'first name': 'max', age: 24}

object-is

1
2
Object.is(NaN, NaN); // true
Object.is(+0, -0); // false

object-assign

1
2
3
4
5
6
7
let breakfast = {};
Object.assign(
breakfast,
{name: 'max'},
{age, 24}
);
breakfast // {name: 'max', age: 24}

setprototyeof

proto

super

iterators

generators

classes

get-set

static

extends

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Person{
constructor(name, age) {
this.name = name;
this.age = age;
}
msg() {
alert(name);
}
}
class Chef extends Person {
constructor(name, age) {
super(name, age);
}
}
let max = new Chef('Max', 24);
max.msg();

Set

1
2
3
4
5
6
7
8
9
10
11
12
13
let desserts = new Set('123');
desserts.add(4);
console.log(desserts); // {'1', '2', '3', 4}
console.log(desserts.size); // 4
console.log(desserts.has('1')); // true
desserts.delete('1');
console.log(desserts); {'2', '3', 4}
desserts.forEach(dessert => {
console.log(dessert);
});
desserts.clear();
console.log(desserts.size);

Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let food = new Map();
let fruit = {}, cook = function(){}, dessert = '甜点';
food.set(fruit, '柠檬');
food.set(cook, '刀叉');
food.set(dessert, '汉堡');
console.log(food);
// Map{
bject {} => '柠檬',
function function => '刀叉',
'甜点' => '汉堡'
}
console.log(food.size); // 3
console.log(food.get(fruit)); // '柠檬'
console.log(food.get(cook)); // '刀叉'
food.delete(dessert);
console.log(food.has(dessert)); // false
food.forEach((value, key) => {
console.log(`${key} = ${value}`);
});
food.clear();

module

1
2
3
4
5
6
7
8
9
10
11
12
13
// a.js
let name = 'Max';
let age = 24;
let gender = 'man';
export {name, age, gender};
// b.js
// 只导入需要的东西
import {name, age} from './a';
console.log(name);
// 或导入全部东西
import * as msg form './a';
console.log(msg.name);

rename

1
2
3
4
5
6
7
8
9
10
11
// a.js
let name = 'Max';
let age = '24';
function alertName(name, age){
alert(`${name},今年${age}岁了`);
}
export {name, age, alertName as sayName};
// b.js
import {name, age, sayName as alertName} from './a';
alertName(name,age);

export default

模块默认要导出的东西

1
2
3
4
5
6
7
8
9
10
export default function alertName(name){
alert(name);
}
// 或
function alertName(name){
alert(name);
}
export {alertName as default};