简单回顾总结一下使用ES6的知识点。详细教程请看阮一峰的教程

<– more –>

1. let&const

  • 在块级作用域内有效;
  • 不存在变量提升,声明后才能使用;
  • 不可重复声明;
  • 在全局作用域下,不会被添加到全局对象中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var b =[];
// ES5写法
for(var i =0;i<5;i++){
b[i] = function(i){
return function(){
console.log(i)
}
}(i)
}

// ES6写法
for(let i =0;i<5;i++){
b[i] = function(){
console.log(i)
}
}


b[0](); //0
b[1](); //1
b[2](); //2
b[3](); //3

2. 箭头函数

  • 常用于函数表达式,将箭头函数赋给变量;
  • 取定义时上下文的this值;
  • 简写语法;
1
2
3
4
5
6
7
8
9
10
11
12
13
// 简写
const sayHello = name => `hello, ${name}`;
console.log(sayHello('jack')) // hello, jack

// 闭包
const people = {
name : 'jack',
getName() {
return () => {console.log(this.name)}
}
}
const printName = people.getName();
printName(); //jack
  1. 函数
  • 参数默认值写法
  • 参数使用扩展符
  • 解构赋值取值
1
2
3
4
5
6
function box(content='apple', color='black', ...rest){ // 默认值和扩展符...
const [width, height] = rest; //解构
console.log(`${content} -> ${color} ->${width} -> ${height}`)
}
box('origin'); // origin -> black ->undefined -> undefined
box('origin','red',20,10) // origin -> red ->20 -> 10

4. 循环 & 遍历

  • for of (数组的项、对象的值)
  • for in (数组的下标、对象的键) 遍历可枚举属性

5. Map & Set

  • Map 键值对数组。new Map -> .set(key,value);
    .get(key); .size(); .has(key) .key(); .value()
  • Set 唯一值数组。 new Set([array]) -> .add(value);
    .has(value)

6. 类

  • 简单的语法糖,更像面向对象的编程;
  • 静态属性和方法,只有类和它的子类能调用;
  • getter 和 setter,用直接取值赋值替代使用方法操作实例的属性;
  • 继承 extends 。 super()调用父类构造方法,super.fn()调用父类声明的方法

7. Promise

  • 异步编程 padding resolved rejected
  • new Promise(fn(resolve,reject)) -> .then -> .catch
  • async await async函数返回Promise对象,可正常调用后使用then或catch 处理。await 调用Promise对象也可使用then和catch单独处理。
  • 避免滥用await ,使用 Promise.all([promise1,promise2]).then(function(resolve1,resolve2))

8. 数组

  • map 对数组元素依次进行操作,并将返回值组成一个新的数组。操作函数格式为fn(element,index,array){return newelement}
  • filter 以某个条件依次过滤数组元素,将返回true表示满足条件的数组组成新数组,返回false的元素被过滤掉。操作函数格式为fn(element,index,array){return true or false}
  • reduce 聚合数组,操作后最终返回一个值。

9. 模板字符串。

  • 字符串拼接
  • 保留格式(空格、换行、引号)
  • 动态获取变量

10. 导入导出。

  • import
  • export、 export default