ES6简明教程

A_大白

symbol

作用:生成唯一的标识。
特点:一种新的Js基本类型。
用法:


let s1 = Symbol('foo');
let s2 = Symbol('bar');
s1 === s2 // false
// 此处s1与s2不等。可以作为变量属性,不会重复

// 如果需要复用symbol值,可以使用Symbol.for('key');
let student = new Student();
let s3 = Symbol.for('studentId');
student.id = s3;
// 一堆其他操作
if(student.id === Symbol.for('studentId')) {
    // 做一些操作
}

Proxy

作用:代理一个对象的读写等操作
注意:只能代理对象的浅层级属性(深浅拷贝的浅)
用法:

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

Reflect

作用:将一些属于语言内部的方法,从Object抽离到Reflect,单独封装,以便双方职责更加明确。
特点: in操作 -> has方法, delete操作 -> delete方法等。
用法:

var target = {};
var loggedObj = new Proxy(target, {
  get(target, name) {
    console.log('get', target, name);
    return Reflect.get(target, name);
  },
  deleteProperty(target, name) {
    console.log('delete' + name);
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    console.log('has' + name);
    return Reflect.has(target, name);
  }
});

Promise

作用:异步编程的一种解决方案,语言层面提供的强力支持,比传统的解决方案——回调函数和事件——更合理和更强大。
特点:需多异步场景都可以包装成promise处理,在异常处理领域也有许多方便之处。通用性好。
用法:

const myPromise = new Promise((resolve, reject) => {

 // setTimeout模仿异步操作,比如ajax请求

 setTimeout(() => {

     // 数据回来后通过resolve透出数据。

     resolve('hello world');

   }, 3000)

})

  

myPromise.then((resolveArgs) => {

  // 如果promise被resolve

  console.log(resolveArgs)

},() => {

  // 如果promise被reject

}).catch(() => {
  // 错误兜底。
 
})

Iterator 和 for...of 循环

作用:为现有的&自建的数据结构,通过Iterator提供统一的遍历接口,供for...of循环使用。
注意:遍历器返回的{done: true}的这次,其对应的value属性不会被消费。
用法:

let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for(let item of obj) {
  console.log(item);
}
// 第一次输出hello,第二次输出world

未完待续

阅读 180

Alibaba-高德,信息前端持续招人中,如果你是本科三年及其以上的前端Dev,欢迎私信我,或者钉钉pws019。

933 声望
52 粉丝
0 条评论
你知道吗?

Alibaba-高德,信息前端持续招人中,如果你是本科三年及其以上的前端Dev,欢迎私信我,或者钉钉pws019。

933 声望
52 粉丝
宣传栏