已经使用了一段时间 es6 了,感觉应该对其中的知识点进行总结,能够时常回顾,加深记忆。
#let&const
let
的主要作用是能够存在作用域,这一点是有别于var
的,举个例子
var a = [];
for (var i = 0; i < 3; i++) {
a[i] = function() {
return i;
};
}
a[0](); // 3
a[1](); // 3
a[2](); // 3
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
而 let 却没有这样的问题
let a = [];
for (let i = 0; i < 3; i++) {
a[i] = function() {
return i;
};
}
a[0](); // 0
a[1](); // 1
a[2](); // 2
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
const
一般情况下是不可变的,但这不是绝对的,例如数组,对象(我指的对象都是狭义上的对象)等
const arr = [1, 2, 3];
arr[0] = 3;
arr[0]; // 3
1
2
3
2
3
#箭头函数
在 es6 中我最偏爱的就是箭头函数了,它的简洁是我偏爱的最大原因,举个例子
// es5
var a = function() {
return 1;
};
// es6
const a = () => 1;
1
2
3
4
5
6
7
2
3
4
5
6
7
#解构赋值
const str = "hello";
const { length: len } = str;
len; // 5
1
2
3
2
3
const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [, , arr] = source;
arr; // [3,4,5,6,7,8,9,10]
1
2
3
2
3
#简洁函数声明
// es5
const person = {
name: "Taylor",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};
// es6
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#函数参数结构
const person = {
name: "nicegong",
sex: "man",
age: 100
};
function logPerson({ name, sex, age }) {
return `my name is ${name}, I am ${age} years old...`;
}
logPerson(person); // my name is nicegong, I am 100 years old...
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#构造函数
// es5
var Person = function(name) {
this.name = name;
};
var one = new Person("nicegong");
// es6
class Person {
construct(name) {
this.name = name;
}
}
const one = new Person("nicegong");
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
#export&import
export
是从文件中导出变量与函数,import
是从文件中引用变量与函数
// add.js
const add = (a, b) => {
return a + b;
};
export { add };
1
2
3
4
5
6
2
3
4
5
6
import { add } from "add.js";
add(2, 5); // 7
1
2
2