ES6重度学习 demo实例

let 与 const

// 并非真正的常量

// const 的本质: const 定义的变量并非常量，并非不可变，

// 它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

// 下面的代码并不会报错：

// 创建常量对象

const car = {type:"Fiat", model:"500", color:"white"};

// 修改属性:

car.color = "red";

// 添加属性

car.owner = "Johnson";

// 创建常量数组

const cars = ["Saab", "Volvo", "BMW"];

// 修改元素

cars[0] = "Toyota";

// 添加元素

cars.push("Audi");

结构赋值

{ // 变量值交换 在之前我们得使用一个中间变量来存储

  let a = 1;

  let b = 2;

  [a, b] = [b, a];

  console.log(a, b); // 2 1

}

{

  function f(){ // 取出函数返回的两个值 例如: 商品单价 商品数量

    return [1, 2]

  }

  let a, b

  [a, b] = f()

  console.log(a, b) // 1 2

} 

{

  function f() { // 返回多个值时 选择性的接受某几个变量 忽略不想要的

    return [1, 2, 3, 4, 5]

  }

  let a, b, c;

  [a, , , b] = f()

  console.log(a, b); //1 4

} 

{

  function f() {

    return [1, 2, 3, 4, 5]

  }

  let a, b, c;

  [a, , , ...b] = f()

  console.log(a, b); //1 [4, 5]

}

字符串的扩展

{

  let str = '\u{20bb7}abc'

  for (let i = 0; i < str.length; i++) {

    console.log(str[i]) // � � a b c

  }

  for(let code of str){

    console.log(code) // ? a b c

  }

}

对象的扩展

{

  // 新增API

  console.log('字符串', Object.is('abc', 'abc'), 'abc' === 'abc'); // 字符串 true true

  console.log('数组', Object.is([], []), [] === []); // 数组 false false

  console.log('拷贝', Object.assign({a: 'a'}, {b: 'b'})); // 浅拷贝  拷贝 {a: "a", b: "b"}

}

目前，ES7有一个提案，引入了跟Object.keys配套的Object.values和Object.entries。ES7兼容插件 import 'babel-polyfill';

symbol

{

  let a1 = Symbol.for('abc')

  let obj = {

    [a1]: '123',

    'abc': 345,

    'c': 456

  }

  console.log('obj', obj); // obj {abc: 345, c: 456, Symbol(abc): "123"}

  for(let i in obj){ //循环不到Symbol

    console.log(i);    // abc c

  }

  console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(abc)]

  Object.getOwnPropertySymbols(obj).forEach(item => {

    console.log(obj[item]);    // 123

  })

  Reflect.ownKeys(obj).forEach(item => {

    console.log(item, obj[item]);    // abc 345   c 456   Symbol(abc) "123"

  })

}

set和map数据结构

set

 { // 数组去重

  let list = [2, 3, 5, 4, 5, '2', 2]

  let list2 = new Set(list)

  console.log(list2);   // Set(5) {2, 3, 5, 4, "2"}

 }



{ // 增删清查

 let arr = ['add', 'delete', 'clear', 'has']

 let list = new Set(arr)

 console.log('has', list.has('add'), list.entries());

 // has true SetIterator {"add", "delete", "clear", "has"}

 console.log('delete', list.delete('delete'), list.entries());

 // delete true SetIterator {"add", "clear", "has"}

 console.log('clear', list.clear('clear'), list.entries());

 // clear undefined SetIterator {}

 console.log('add', list.add('add'), list.entries());

 // add Set(1) {"add"} SetIterator {"add"}

}

WeakSet

WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set有两个区别。
- 首先，WeakSet的成员只能是对象，而不能是其他类型的值。
- 其次，WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于WeakSet之中。这个特点意味着，无法引用WeakSet的成员，因此WeakSet是不可遍历的。

map

{ // 删清查

  let map = new Map([

    ['a', 123],

    ['b', 456]

  ])

  console.log('map', map); // map Map(2) {"a" => 123, "b" => 456}

  console.log('size', map.size); // size 2

  console.log('delete', map.delete('a'), map); // delete true Map(1) {"b" => 456}

  console.log('clear', map.clear(), map); // clear undefined Map(0) {}

}

WeakMap

{

  let weakmap = new WeakMap()

  let o = {}

  weakmap.set(o, 123)

  console.log(weakmap); // WeakMap {{…} => 123}__proto__: WeakMap[[Entries]]: Array(0)length: 0

}

map-set与数组和对象的比较

Proxy 和 Reflect

{ // 代理校验

  function validator(target, validator) {

    return new Proxy(target, {

      _validator: validator,

      set(target, key, value, proxy) {

        if (target.hasOwnProperty(key)) {

          let va = this._validator[key]

          if (!!va(value)) {

            return Reflect.set(target, key, value, proxy)

          } else {

            throw Error(`不能设置${key}到${value}`)

          }

        } else {

          throw Error(`${key}不存在`)

        }

      }

    })

  }

  const personValidators = {

    name(val) {

      return typeof val === 'string'

    },

    age(val) {

      return typeof val === 'number' && val > 18

    }

  }

  class Person {

    constructor(name, age) {

      this.name = name

      this.age = age

      return validator(this, personValidators)

    }

  }

  const person = new Person('lilei', 30)

  console.info(person)

  // person.name = 48 //报错: 不能设置name到48

  // person.sex = '男' // sex不存在

  person.name = 'han meimei'

  console.info(person) // Proxy {name: "lilei", age: 30}

}

class

{

  // 基本定义和生成实例

  class Parent {

    constructor(name = 'zhangsan') {

      this.name = name

    }

  }

  let v_parent = new Parent('v')

  console.log('构造函数和实例', v_parent) // 构造函数和实例 Parent {name: "v"}

}

{

  // 继承

  class Parent {

    constructor(name = 'lisi') {

      this.name = name

    }

  }

  class Child extends Parent {

    constructor(name = 'child') {

      // this.type = 'child' // 报错

      super(name) // 子类想父类传递参数

      this.type = 'child'

    }

  }

  console.log('继承', new Child) // 继承 Child {name: "child", type: "child"}

}

{

  // getter, setter

  class Parent {

    constructor(name = 'wanger') {

      this.name = name

    }

    get longName() {

      return 'mk' + this.name

    }

    set longName(value) {

      this.name = value

    }

  }

  let v = new Parent()

  console.log('getter', v.longName) // getter mkwanger

  v.longName = 'hello'

  console.log('setter', v.longName) // setter mkhello

}

{

  // 静态方法

  class Parent {

    constructor(name = 'zhaowu') {

      this.name = name

    }

    static tell() {

      console.log('tell')

    }

  }

  Parent.tell() // tell

}

{

  // 静态属性

  class Parent{

    constructor(name = 'sunshangxiang'){

      this.name = name

    }

    static tell (){

      console.log('tell')

    }

  }

  Parent.type = 'test'

  console.log('静态属性', Parent.type) // 静态属性 test

}

promise对象

{

  // 所有图片加载完再添加到页面

  function loadImg(src) {

    return new Promise(function (resolve, reject) {

      let img = document.createElement('img')

      img.src = src

      img.onload = function () {

        resolve(img)

      }

      img.onerror = function (err) {

        reject(err)

      }

    })

  }

  function showImgs(imgs) {

    imgs.forEach(img => {

      document.body.appendChild(img)

    });

  }

  Promise.all([ // 所有图片加载完后执行

    loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),

    loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),

    loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png')

  ]).then(showImgs)

}

{

  // 多个图片服务器, 加载最快的一个

  // 有一个图片加载完成就添加到页面

  function loadImg(src) {

    return new Promise((resolve, reject) => {

      let img = document.createElement('img')

      img.src = src

      img.onload = function () {

        resolve(img)

      }

      img.onerror = function () {

        reject(err)

      }

    })

  }

  function showImg(img){

    document.body.appendChild(img)

  }

  Promise.race([ // 谁先请求到 就显示谁

    loadImg('http://img2.imgtn.bdimg.com/it/u=234634259,4236876085&fm=26&gp=0.jpg'),

    loadImg('http://img4.imgtn.bdimg.com/it/u=2153937626,1074119156&fm=26&gp=0.jpg'),

    loadImg('http://img1.imgtn.bdimg.com/it/u=1483033257,4287748004&fm=26&gp=0.jpg')

  ]).then(showImg)

}

修饰器

{

  // 函数属性为只读

  /**

   * 修饰器基本用法

   * 1 修饰器是一个函数

   * 2 修改的行为

   * 3 修改类的行为

   */

  let readonly = function (target, name, descriptor) {

    descriptor.writable = false

    return descriptor

  }

  class Test {

    @readonly

    time() {

      return '2019-0526'

    }

  }

  let test = new Test()

  test.time = function () {

    console.log('rest time')

  }

  console.log(test.time())

  // cannot assign to read only property 'time' of object '#<Test>'

}

第三方库修饰器的js库: core-decorators

巴特西

ES6重度学习 demo实例

let 与 const

结构赋值

字符串的扩展

对象的扩展

symbol

set和map数据结构

set

WeakSet

map

WeakMap

map-set与数组和对象的比较

Proxy 和 Reflect

class

promise对象

修饰器

最新文章

热门文章