ES6学习(新特性简要提纲)

前言

ES6准确的定义来说应该是ES2015,但是更多情况下,被广义的代表为ES5之后的所有版本。因为ES5到ES6这个版本的跨越很大,有非常多的新语法和api诞生,就像是1949年的中国,截止1949年都之前的都称为旧中国,1949年之后就是新中国。一个道理,就是一个里程碑的代名词而已。

新特性汇总

变量的命名方式let和const

避免var带来的一些问题

javascript">//es5
var a = 1

//es6
let b = 2
const c = 3

解构赋值

更为方便的取值

javascript">//数组
let [name,age,work] = ['wjt',28,'coder']

//对象
let {name,age} = {age:28,name:'wjt'}

模板字符串

字符串拼接的优化

javascript">let name = 'wjt'
let age = 28
//ES5

var str2 = '我叫'+str1+',我今年'+age+'岁'

//ES6
let str3 = `我叫${name},我今年${age}岁`

Symbol类型

通过Symbol函数命名,生成一个独一无二的值

javascript">let s1 = Symbol('wjt');

set容器

结构类似于数组,但是内部成员唯一不重复

javascript">const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

Map容器

键值对映射的容器

javascript">const map = new Map([
  ['name', 'wjt'],
  ['age', 28]
]);

map.get('name') //'wjt'
map.get('age') // 28

元编程方法Proxy

可以实现对api本身重写,拦截,代理,意义重大

javascript">var proxy = new Proxy(target, handler);

Promise

专门用来处理异步编程的api

javascript">const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Iterator迭代器和for..of方法

访问各种结构数据的必要方法

javascript">const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

Generator

异步函数的解决方案

javascript">function* asyncJob() {
  // ...其他代码
  var f = yield readFile(fileA);
  // ...其他代码
}

async await

Generator函数的语法糖

javascript">async function timeout(ms) {
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

class类

看上去更符合面向对象的一种语法糖,实则是构造函数的另一种写法

javascript">        /**构造函数的语法*/

        function Person(name,age){
            this.name = name
            this.age = age
        }
        Person.prototype.getString = function(){
            return `${this.name}的年龄是${this.age}`
        }

        /**class的语法*/
         class Person{
             name = null
             age = null
             constructor(name,age){
                 this.name = name
                 this.age = age
             }
             getString(){
                return `${this.name}的年龄是${this.age}`
            }
         }