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