简单回顾总结一下使用ES6的知识点。详细教程请看阮一峰的教程
1. let&const
- 在块级作用域内有效；
- 不存在变量提升，声明后才能使用；
- 不可重复声明；
- 在全局作用域下，不会被添加到全局对象中。
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值；
- 简写语法；
// 简写
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
- 函数
- 参数默认值写法
- 参数使用扩展符
- 解构赋值取值
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
