{"id":15479496,"url":"https://github.com/nealyang/es6_practice","last_synced_at":"2025-04-22T15:13:55.658Z","repository":{"id":89427001,"uuid":"115601371","full_name":"Nealyang/ES6_practice","owner":"Nealyang","description":":ant: es6 practice","archived":false,"fork":false,"pushed_at":"2018-01-05T10:19:23.000Z","size":340,"stargazers_count":55,"open_issues_count":0,"forks_count":64,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T15:13:50.780Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nealyang.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-28T08:16:01.000Z","updated_at":"2023-03-13T01:28:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"7fc2ab64-3f71-4e55-b660-2c81c373ee0b","html_url":"https://github.com/Nealyang/ES6_practice","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"040b7159f698ed6ff1ee2afbf9ded6b376d4a1b2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FES6_practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FES6_practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FES6_practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FES6_practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nealyang","download_url":"https://codeload.github.com/Nealyang/ES6_practice/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250264913,"owners_count":21402004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T04:21:40.612Z","updated_at":"2025-04-22T15:13:55.650Z","avatar_url":"https://github.com/Nealyang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## ES6 PRATICE\n\n### let const\n\nlet const 存在块作用域的概念\n\n必须先声明后使用，且不能重复声明\n\nconst 只能声明常量。这个常量对于引用型来说只是指针不能变。\n\n### 解构赋值\n左边一种结构，右边一种结构，左右一一对应，完成赋值。\n\n分类：\n\n数组解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值\n\n```javascript\n{\n    let a,b,reset;\n    [a,b] = [1,2]\n    console.log(a,b)\n}\n{\n    let a,b,reset;\n    [a,b,...reset] = [1,3,2,4,5,6];\n    console.log(a,b,reset)\n}\n{\n    let a,b;\n    ({a,b} = {a:1,b:3});\n    console.log(a,b)\n}\n{\n    //如果未找到配对值，就是undefined，默认值就是为了解决这个问题的\n    let a,b,c;\n    ({a,b,c=3} = {a:1,b:3});\n    console.log(a,b)\n}\n{\n    // 变量交换or获取函数返回值\n    let a = 1,b = 2;\n    [a,b] = [b,a];\n    console.log(a,b)\n}\n{\n    //选择性接受想要的值\n    function f() {\n        return [1,2,3,4,5]\n    }\n    let a,b;\n    [a,,...b] = f();\n    console.log(a,b);\n}\n{\n    //选择性接受想要的值\n    function f() {\n        return [1,2,3,4,5]\n    }\n    let a,b;\n    [a,...b] = f();\n    console.log(a,b);\n}\n{\n    let o = {p:12,q:'ewe'};\n    let {p,q,z = 2} = o;\n    console.log(p,q,z);\n}\n{\n    let metaData = {\n        title:'abc',\n        test:[{\n            title:'test',\n            desc:'description'\n        }]\n    }\n    let {title:esTitle,test:[{title:cnTitle}]} = metaData\n    console.log(esTitle,cnTitle)\n}\n```\n\n### 正则表达式\n```javascript\n{\n    // #构造函数#\n    let regex = new RegExp('xyz', 'i'); //第一个参数是字符串，第二个是修饰符\n    let regex2 = new RegExp(/xyz/i); //第一个参数是正则表达式，不接受第二个参数，否则会报错\n    console.log(regex.test('xyz123'), regex2.test('xyz123'));\n    console.log(regex.test('xyZ123'), regex2.test('xyZ123'));\n\n    let regex3 = new RegExp(/abc/ig, 'i');\n    console.log(regex3.flags); //原有正则对象的修饰符是ig，它会被第二个参数i覆盖\n\n}\n\n// 字符串对象的4个使用正则表达式的方法： match(),replace(),search(),split()这四个方法全部调用RegExp的实例的方法。\n\n{\n    let regex = new RegExp('xyz', 'ig');\n    console.log(regex.test('xyz0XYZ1xyz2'), regex.exec('xyz0XYZ1xyz2'));\n}\n\n{\n    // y修饰符\n    let s = 'bbbb_bbb_bb_b';\n    var a1 = /b+/g;\n    var a2 = /b+/y;\n\n    console.log(a1.exec(s), a2.exec(s)); // [\"bbbb\"],[\"bbbb\"]\n    console.log(a1.exec(s), a2.exec(s)); // [\"bbb\"],null\n\n    console.log(a1.sticky, a2.sticky); //表示是否开启了粘连模式\n}\n\n{\n    console.log('u修饰符',/^\\uD83D/.test('\\uD83D\\uDC2A')); // true\n    console.log('u修饰符',/^\\uD83D/u.test('\\uD83D\\uDC2A')); // false\n    // 大括号表示Unicode字符，只有加上u才能识别\n    console.log(/\\u{61}/.test('a')); // false\n    console.log(/\\u{61}/u.test('a')); // true\n    console.log(/\\u{20BB7}/u.test('𠮷')); // true\n    // 点（.）字符不能识别码点大于0xFFFF的Unicode字符，必须加上u修饰符。\n    let s = '𠮷';\n    console.log('大于0xFFFF的Unicode字符',/^.$/.test(s)); // false\n    console.log('使用u字符',/^.$/u.test(s)); // true\n\n    // 使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符。\n    console.log('量词',/a{2}/.test('aa')); // true\n    console.log('量词',/a{2}/u.test('aa')); // true\n    console.log('量词',/𠮷{2}/.test('𠮷𠮷')); // false\n    console.log('量词',/𠮷{2}/u.test('𠮷𠮷')); // true\n}\n\n{\n    // #正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是行终止符（line terminator character）除外\n    // U+000A 换行符（\\n）\n    // U+000D 回车符（\\r）\n    // U+2028 行分隔符（line separator）\n    // U+2029 段分隔符（paragraph separator）\n    // 只是一个提案目前还不支持\n    // let reg=/test.go/s;\n    // console.log(reg.test('test\\ngo'));\n    // console.log(reg.test('test\\ngo'));\n    console.log('s变通方法',/foo.bar/.test('foo\\nbar'));\n    console.log('s变通方法',/foo[^]bar/.test('foo\\nbar'));\n}\n\n```\n\n### 字符串扩展\n字符串中处理Unicode方法，遍历接口，模板字符串，新增方法（10个）\n\n```javascript\n{\n  console.log('a',`\\u0061`);\n  console.log('s',`\\u20BB7`);\n\n  console.log('s',`\\u{20BB7}`);\n\n\n}\n\n\n{\n  let s='𠮷';\n  console.log('length',s.length);\n  console.log('0',s.charAt(0));\n  console.log('1',s.charAt(1));\n  console.log('at0',s.charCodeAt(0));\n  console.log('at1',s.charCodeAt(1));\n\n  let s1='𠮷a';\n  console.log('length',s1.length);\n  console.log('code0',s1.codePointAt(0));\n  console.log('code0',s1.codePointAt(0).toString(16));\n  console.log('code1',s1.codePointAt(1));\n  console.log('code2',s1.codePointAt(2));\n}\n\n{\n  console.log(String.fromCharCode(\"0x20bb7\"));\n  console.log(String.fromCodePoint(\"0x20bb7\"));\n}\n\n{\n  let str='\\u{20bb7}abc';\n  for(let i=0;i\u003cstr.length;i++){\n    console.log('es5',str[i]);\n  }\n  for(let code of str){\n    console.log('es6',code);\n  }\n}\n\n{\n  let str=\"string\";\n  console.log('includes',str.includes(\"c\"));\n  console.log('start',str.startsWith('str'));\n  console.log('end',str.endsWith('ng'));\n}\n\n{\n  let str=\"abc\";\n  console.log(str.repeat(2));\n}\n\n{\n  let name=\"list\";\n  let info=\"hello world\";\n  let m=`i am ${name},${info}`;\n  console.log(m);\n}\n\n{\n  console.log('1'.padStart(2,'0'));\n  console.log('1'.padEnd(2,'0'));\n}\n\n{\n  let user={\n    name:'list',\n    info:'hello world'\n  };\n  console.log(abc`i am ${user.name},${user.info}`);\n  function abc(s,v1,v2){\n    console.log(s,v1,v2);\n    return s+v1+v2\n  }\n}\n\n{\n  console.log(String.raw`Hi\\n${1+2}`);\n  console.log(`Hi\\n${1+2}`);\n}\n\n```\n\n### 数值扩展\n\n```javascript\n{\n  console.log('B',0B111110111);\n  console.log(0o767);\n}\n\n{\n  console.log('15',Number.isFinite(15));\n  console.log('NaN',Number.isFinite(NaN));\n  console.log('1/0',Number.isFinite('true'/0));\n  console.log('NaN',Number.isNaN(NaN));\n  console.log('0',Number.isNaN(0));\n\n}\n\n{\n  console.log('25',Number.isInteger(25));\n  console.log('25.0',Number.isInteger(25.0));\n  console.log('25.1',Number.isInteger(25.1));\n  console.log('25.1',Number.isInteger('25'));\n}\n\n{\n  console.log(Number.MAX_SAFE_INTEGER,Number.MIN_SAFE_INTEGER);\n  console.log('10',Number.isSafeInteger(10));\n  console.log('a',Number.isSafeInteger('a'));\n}\n\n{\n  console.log(4.1,Math.trunc(4.1));\n  console.log(4.9,Math.trunc(4.9));\n}\n\n{\n  console.log('-5',Math.sign(-5));\n  console.log('0',Math.sign(0));\n  console.log('5',Math.sign(5));\n  console.log('50',Math.sign('50'));\n  console.log('foo',Math.sign('foo'));\n}\n\n\n{\n  console.log('-1',Math.cbrt(-1));\n  console.log('8',Math.cbrt(8));\n}\n\n```\n\n### 数组扩展\n\n```javascript\n{\n  let arr = Array.of(3,4,7,9,11);\n  console.log('arr=',arr);\n\n  let empty=Array.of();\n  console.log('empty',empty);\n}\n\n{\n  let p=document.querySelectorAll('p');\n  let pArr=Array.from(p);\n  pArr.forEach(function(item){\n    console.log(item.textContent);\n  });\n\n  console.log(Array.from([1,3,5],function(item){return item*2}));\n}\n\n{\n  console.log('fill-7',[1,'a',undefined].fill(7));\n  console.log('fill,pos',['a','b','c'].fill(7,1,3));\n}\n\n{\n  for(let index of ['1','c','ks'].keys()){\n    console.log('keys',index);\n  }\n  for(let value of ['1','c','ks'].values()){\n    console.log('values',value);\n  }\n  for(let [index,value] of ['1','c','ks'].entries()){\n    console.log('values',index,value);\n  }\n}\n\n{\n  console.log([1,2,3,4,5].copyWithin(0,3,4));\n}\n\n{\n  console.log([1,2,3,4,5,6].find(function(item){return item\u003e3}));\n  console.log([1,2,3,4,5,6].findIndex(function(item){return item\u003e3}));\n}\n\n{\n  console.log('number',[1,2,NaN].includes(1));\n  console.log('number',[1,2,NaN].includes(NaN));\n}\n\n```\n\n### 函数的扩展\n\n```javascript\n{\n  //  默认值后面不能没有默认值的变量\n  function test(x, y = 'world'){\n    console.log('默认值',x,y);\n  }\n  test('hello');\n  test('hello','kill');\n}\n\n{\n  //  y获取的是传入的形参的x，如果前面没有x，那么y取test的那个x\n  let x='test';\n  function test2(x,y=x){\n    console.log('作用域',x,y);\n  }\n  test2('kill');\n}\n\n{\n  //  都转为数组，类似于arguments\n  function test3(...arg){\n    for(let v of arg){\n      console.log('rest',v);\n    }\n  }\n  test3(1,2,3,4,'a');\n}\n\n{\n  //  扩展运算符  数组展开符\n  console.log(...[1,2,4]);\n  console.log('a',...[1,2,4]);\n}\n\n{\n  let arrow = v =\u003e v*2;\n  let arrow2 = () =\u003e 5;\n  console.log('arrow',arrow(3));\n  console.log(arrow2());\n\n}\n\n{\n  function tail(x){\n    console.log('tail',x);\n  }\n  function fx(x){\n    return tail(x)\n  }\n  fx(123)\n}\n\n```\n\n### 对象的扩展\n\n```javascript\n{\n  // 简洁表示法\n  let o=1;\n  let k=2;\n  let es5={\n    o:o,\n    k:k\n  };\n  let es6={\n    o,\n    k\n  };\n  console.log(es5,es6);\n\n  let es5_method={\n    hello:function(){\n      console.log('hello');\n    }\n  };\n  let es6_method={\n    hello(){\n      console.log('hello');\n    }\n  };\n  console.log(es5_method.hello(),es6_method.hello());\n}\n\n{\n  // 属性表达式\n  let a='b';\n  let es5_obj={\n    a:'c',\n    b:'c'\n  };\n\n  let es6_obj={\n    [a]:'c'\n  }\n\n  console.log(es5_obj,es6_obj);\n\n}\n\n{\n  // 新增API\n  console.log('字符串',Object.is('abc','abc'),'abc'==='abc');\n  console.log('数组',Object.is([],[]),[]===[]);\n\n  console.log('拷贝',Object.assign({a:'a'},{b:'b'}));\n\n  let test={k:123,o:456};\n  for(let [key,value] of Object.entries(test)){\n    console.log([key,value]);\n  }\n}\n\n{\n  // 扩展运算符\n  // let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};\n  // c={\n  //   c:'ddd',\n  //   d:'ccc'\n  // }\n}\n\n```\n\n### Symbol\n\n声明不重复不相等的变量，保证唯一性\n\n```javascript\n{\n  // 声明\n  let a1=Symbol();\n  let a2=Symbol();\n  console.log(a1===a2);\n  let a3=Symbol.for('a3');\n  let a4=Symbol.for('a3');\n  console.log(a3===a4);\n}\n\n{\n  let a1=Symbol.for('abc');\n  let obj={\n    [a1]:'123',\n    'abc':345,\n    'c':456\n  };\n  console.log('obj',obj);\n\n  for(let [key,value] of Object.entries(obj)){\n    console.log('let of',key,value);\n  }\n\n  Object.getOwnPropertySymbols(obj).forEach(function(item){\n    console.log(obj[item]);\n  })\n\n  Reflect.ownKeys(obj).forEach(function(item){\n    console.log('ownkeys',item,obj[item]);\n  })\n}\n```\n\n### Set、Map\n\n```javascript\n{\n  let list = new Set();\n  list.add(5);\n  list.add(7);\n\n  console.log('size',list.size);\n}\n\n{\n  let arr = [1,2,3,4,5];\n  let list = new Set(arr);\n\n  console.log('size',list.size);\n}\n\n{\n  let list = new Set();\n  list.add(1);\n  list.add(2);\n  list.add(1);\n\n  console.log('list',list);\n\n  let arr=[1,2,3,1,'2'];\n  let list2=new Set(arr);\n\n  console.log('unique',list2);\n}\n\n{\n  let arr=['add','delete','clear','has'];\n  let list=new Set(arr);\n\n  console.log('has',list.has('add'));\n  console.log('delete',list.delete('add'),list);\n  list.clear();\n  console.log('list',list);\n}\n\n{\n  let arr=['add','delete','clear','has'];\n  let list=new Set(arr);\n\n  for(let key of list.keys()){\n    console.log('keys',key);\n  }\n  for(let value of list.values()){\n    console.log('value',value);\n  }\n  for(let [key,value] of list.entries()){\n    console.log('entries',key,value);\n  }\n\n  list.forEach(function(item){console.log(item);})\n}\n\n\n{\n  let weakList=new WeakSet();\n\n  let arg={};\n\n  weakList.add(arg);\n\n  // weakList.add(2);\n\n  console.log('weakList',weakList);\n}\n\n{\n  let map = new Map();\n  let arr=['123'];\n\n  map.set(arr,456);\n\n  console.log('map',map,map.get(arr));\n}\n\n{\n  let map = new Map([['a',123],['b',456]]);\n  console.log('map args',map);\n  console.log('size',map.size);\n  console.log('delete',map.delete('a'),map);\n  console.log('clear',map.clear(),map);\n}\n\n{\n  let weakmap=new WeakMap();\n\n  let o={};\n  weakmap.set(o,123);\n  console.log(weakmap.get(o));\n}\n\n{\n  // 数据结构横向对比，增，查，改，删\n  let map=new Map();\n  let array=[];\n  // 增\n  map.set('t',1);\n  array.push({t:1});\n\n  console.info('map-array',map,array);\n\n  // 查\n  let map_exist=map.has('t');\n  let array_exist=array.find(item=\u003eitem.t);\n  console.info('map-array',map_exist,array_exist);\n\n  // 改\n  map.set('t',2);\n  array.forEach(item=\u003eitem.t?item.t=2:'');\n  console.info('map-array-modify',map,array);\n\n  // 删\n  map.delete('t');\n  let index=array.findIndex(item=\u003eitem.t);\n  array.splice(index,1);\n  console.info('map-array-empty',map,array);\n}\n\n{\n  // set和array的对比\n  let set=new Set();\n  let array=[];\n\n  // 增\n  set.add({t:1});\n  array.push({t:1});\n\n  console.info('set-array',set,array);\n\n  // 查\n  let set_exist=set.has({t:1});\n  let array_exist=array.find(item=\u003eitem.t);\n  console.info('set-array',set_exist,array_exist);\n\n  // 改\n  set.forEach(item=\u003eitem.t?item.t=2:'');\n  array.forEach(item=\u003eitem.t?item.t=2:'');\n  console.info('set-array-modify',set,array);\n\n  // 删\n  set.forEach(item=\u003eitem.t?set.delete(item):'');\n  let index=array.findIndex(item=\u003eitem.t);\n  array.splice(index,1);\n  console.info('set-array-empty',set,array);\n}\n\n{\n  // map,set,object对比\n  let item={t:1};\n  let map=new Map();\n  let set=new Set();\n  let obj={};\n\n  // 增\n  map.set('t',1);\n  set.add(item);\n  obj['t']=1;\n\n  console.info('map-set-obj',obj,map,set);\n\n  // 查\n  console.info({\n    map_exist:map.has('t'),\n    set_exist:set.has(item),\n    obj_exist:'t' in obj\n  })\n\n  // 改\n  map.set('t',2);\n  item.t=2;\n  obj['t']=2;\n  console.info('map-set-obj-modify',obj,map,set);\n\n  // 删除\n  map.delete('t');\n  set.delete(item);\n  delete obj['t'];\n  console.info('map-set-obj-empty',obj,map,set);\n}\n\n```\n\n### Proxy和reflect\n\n与业务解耦\n\n```javascript\n{\n  let obj={\n    time:'2017-03-11',\n    name:'net',\n    _r:123\n  };\n\n  let monitor=new Proxy(obj,{\n    // 拦截对象属性的读取\n    get(target,key){\n      return target[key].replace('2017','2018')\n    },\n    // 拦截对象设置属性\n    set(target,key,value){\n      if(key==='name'){\n        return target[key]=value;\n      }else{\n        return target[key];\n      }\n    },\n    // 拦截key in object操作\n    has(target,key){\n      if(key==='name'){\n        return target[key]\n      }else{\n        return false;\n      }\n    },\n    // 拦截delete\n    deleteProperty(target,key){\n      if(key.indexOf('_')\u003e-1){\n        delete target[key];\n        return true;\n      }else{\n        return target[key]\n      }\n    },\n    // 拦截Object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames\n    ownKeys(target){\n      return Object.keys(target).filter(item=\u003eitem!='time')\n    }\n  });\n\n  console.log('get',monitor.time);\n\n  monitor.time='2018';\n  monitor.name='mukewang';\n  console.log('set',monitor.time,monitor);\n\n  console.log('has','name' in monitor,'time' in monitor);\n\n  // delete monitor.time;\n  // console.log('delete',monitor);\n  //\n  // delete monitor._r;\n  // console.log('delete',monitor);\n  console.log('ownKeys',Object.keys(monitor));\n\n}\n\n{\n  let obj={\n    time:'2017-03-11',\n    name:'net',\n    _r:123\n  };\n\n  console.log('Reflect get',Reflect.get(obj,'time'));\n  Reflect.set(obj,'name','mukewang');\n  console.log(obj);\n  console.log('has',Reflect.has(obj,'name'));\n}\n\n\n{\n  function validator(target,validator){\n    return new Proxy(target,{\n      _validator:validator,\n      set(target,key,value,proxy){\n        if(target.hasOwnProperty(key)){\n          let va=this._validator[key];\n          if(!!va(value)){\n            return Reflect.set(target,key,value,proxy)\n          }else{\n            throw Error(`不能设置${key}到${value}`)\n          }\n        }else{\n          throw Error(`${key} 不存在`)\n        }\n      }\n    })\n  }\n\n  const personValidators={\n    name(val){\n      return typeof val==='string'\n    },\n    age(val){\n      return typeof val === 'number' \u0026\u0026 val\u003e18\n    },\n    mobile(val){\n      \n    }\n  }\n\n  class Person{\n    constructor(name,age){\n      this.name=name;\n      this.age=age;\n      this.mobile='1111';\n      return validator(this,personValidators)\n    }\n  }\n\n  const person=new Person('lilei',30);\n\n  console.info(person);\n\n  person.name='Han mei mei';\n\n  console.info(person);\n}\n\n```\n\n### 类\n\n```javascript\n{\n  // 基本定义和生成实例\n  class Parent{\n    constructor(name='mukewang'){\n      this.name=name;\n    }\n  }\n  let v_parent=new Parent('v');\n  console.log('构造函数和实例',v_parent);\n}\n\n{\n  // 继承\n  class Parent{\n    constructor(name='mukewang'){\n      this.name=name;\n    }\n  }\n\n  class Child extends Parent{\n\n  }\n\n  console.log('继承',new Child());\n}\n\n{\n  // 继承传递参数\n  class Parent{\n    constructor(name='mukewang'){\n      this.name=name;\n    }\n  }\n\n  class Child extends Parent{\n    constructor(name='child'){\n      super(name);\n      this.type='child';\n    }\n  }\n\n  console.log('继承传递参数',new Child('hello'));\n}\n\n{\n  // getter,setter\n  class Parent{\n    constructor(name='mukewang'){\n      this.name=name;\n    }\n\n    get longName(){\n      return 'mk'+this.name\n    }\n\n    set longName(value){\n      this.name=value;\n    }\n  }\n\n  let v=new Parent();\n  console.log('getter',v.longName);\n  v.longName='hello';\n  console.log('setter',v.longName);\n}\n\n{\n  // 静态方法\n  class Parent{\n    constructor(name='mukewang'){\n      this.name=name;\n    }\n\n    static tell(){\n      console.log('tell');\n    }\n  }\n\n  Parent.tell();\n\n}\n\n{\n  // 静态属性\n  class Parent{\n    constructor(name='mukewang'){\n      this.name=name;\n    }\n\n    static tell(){\n      console.log('tell');\n    }\n  }\n\n  Parent.type='test';\n\n  console.log('静态属性',Parent.type);\n\n\n}\n\n```\n\n### promise\n\n```javascript\n{\n  // 基本定义\n  let ajax=function(callback){\n    console.log('执行');\n    setTimeout(function () {\n      callback\u0026\u0026callback.call()\n    }, 1000);\n  };\n  ajax(function(){\n    console.log('timeout1');\n  })\n}\n\n{\n  let ajax=function(){\n    console.log('执行2');\n    return new Promise(function(resolve,reject){\n      setTimeout(function () {\n        resolve()\n      }, 1000);\n    })\n  };\n\n  ajax().then(function(){\n    console.log('promise','timeout2');\n  })\n}\n\n{\n  let ajax=function(){\n    console.log('执行3');\n    return new Promise(function(resolve,reject){\n      setTimeout(function () {\n        resolve()\n      }, 1000);\n    })\n  };\n\n  ajax()\n    .then(function(){\n    return new Promise(function(resolve,reject){\n      setTimeout(function () {\n        resolve()\n      }, 2000);\n    });\n  })\n    .then(function(){\n    console.log('timeout3');\n  })\n}\n\n{\n  let ajax=function(num){\n    console.log('执行4');\n    return new Promise(function(resolve,reject){\n      if(num\u003e5){\n        resolve()\n      }else{\n        throw new Error('出错了')\n      }\n    })\n  }\n\n  ajax(6).then(function(){\n    console.log('log',6);\n  }).catch(function(err){\n    console.log('catch',err);\n  });\n\n  ajax(3).then(function(){\n    console.log('log',3);\n  }).catch(function(err){\n    console.log('catch',err);\n  });\n}\n\n{\n  // 所有图片加载完再添加到页面\n  function loadImg(src){\n    return new Promise((resolve,reject)=\u003e{\n      let img=document.createElement('img');\n      img.src=src;\n      img.onload=function(){\n        resolve(img);\n      }\n      img.onerror=function(err){\n        reject(err);\n      }\n    })\n  }\n\n  function showImgs(imgs){\n    imgs.forEach(function(img){\n      document.body.appendChild(img);\n    })\n  }\n\n  Promise.all([\n    loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),\n    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),\n    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')\n  ]).then(showImgs)\n\n}\n\n{\n  // 有一个图片加载完就添加到页面\n  function loadImg(src){\n    return new Promise((resolve,reject)=\u003e{\n      let img=document.createElement('img');\n      img.src=src;\n      img.onload=function(){\n        resolve(img);\n      }\n      img.onerror=function(err){\n        reject(err);\n      }\n    })\n  }\n\n  function showImgs(img){\n    let p=document.createElement('p');\n    p.appendChild(img);\n    document.body.appendChild(p)\n  }\n\n  Promise.race([\n    loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),\n    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),\n    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')\n  ]).then(showImgs)\n\n}\n\n```\n### Iterator\n\n```javascript\n{\n  let arr=['hello','world'];\n  let map=arr[Symbol.iterator]();\n  console.log(map.next());\n  console.log(map.next());\n  console.log(map.next());\n}\n\n{\n  let obj={\n    start:[1,3,2],\n    end:[7,9,8],\n    [Symbol.iterator](){\n      let self=this;\n      let index=0;\n      let arr=self.start.concat(self.end);\n      let len=arr.length;\n      return {\n        next(){\n          if(index\u003clen){\n            return {\n              value:arr[index++],\n              done:false\n            }\n          }else{\n            return {\n              value:arr[index++],\n              done:true\n            }\n          }\n        }\n      }\n    }\n  }\n  for(let key of obj){\n    console.log(key);\n  }\n}\n\n{\n  let arr=['hello','world'];\n  for(let value of arr){\n    console.log('value',value);\n  }\n}\n\n```\n\n### Generator\n\n异步编程的一种解决方案\n\n```javascript\n{\n  // genertaor基本定义\n  let tell=function* (){\n    yield 'a';\n    yield 'b';\n    return 'c'\n  };\n\n  let k=tell();\n\n  console.log(k.next());\n  console.log(k.next());\n  console.log(k.next());\n  console.log(k.next());\n}\n\n{\n  let obj={};\n  obj[Symbol.iterator]=function* (){\n    yield 1;\n    yield 2;\n    yield 3;\n  }\n\n  for(let value of obj){\n    console.log('value',value);\n  }\n}\n\n{\n  let state=function* (){\n    while(1){\n      yield 'A';\n      yield 'B';\n      yield 'C';\n    }\n  }\n  let status=state();\n  console.log(status.next());\n  console.log(status.next());\n  console.log(status.next());\n  console.log(status.next());\n  console.log(status.next());\n}\n\n// {\n//   let state=async function (){\n//     while(1){\n//       await 'A';\n//       await 'B';\n//       await 'C';\n//     }\n//   }\n//   let status=state();\n//   console.log(status.next());\n//   console.log(status.next());\n//   console.log(status.next());\n//   console.log(status.next());\n//   console.log(status.next());\n// }\n//\n\n{\n  let draw=function(count){\n    //具体抽奖逻辑\n    console.info(`剩余${count}次`)\n  }\n\n  let residue=function* (count){\n    while (count\u003e0) {\n      count--;\n      yield draw(count);\n    }\n  }\n\n  let star=residue(5);\n  let btn=document.createElement('button');\n  btn.id='start';\n  btn.textContent='抽奖';\n  document.body.appendChild(btn);\n  document.getElementById('start').addEventListener('click',function(){\n    star.next();\n  },false)\n}\n\n{\n  // 长轮询\n  let ajax=function* (){\n    yield new Promise(function(resolve,reject){\n      setTimeout(function () {\n        resolve({code:0})\n      }, 200);\n    })\n  }\n\n  let pull=function(){\n    let genertaor=ajax();\n    let step=genertaor.next();\n    step.value.then(function(d){\n      if(d.code!=0){\n        setTimeout(function () {\n          console.info('wait');\n          pull()\n        }, 1000);\n      }else{\n        console.info(d);\n      }\n    })\n  }\n\n  pull();\n}\n\n```\n\n### Decorator\n是一个函数，修改类的行为，扩展类的功能，只在类的范畴中有用\n```javascript\n{\n  let readonly=function(target,name,descriptor){\n    descriptor.writable=false;\n    return descriptor\n  };\n\n  class Test{\n    @readonly\n    time(){\n      return '2017-03-11'\n    }\n  }\n\n  let test=new Test();\n\n  // test.time=function(){\n  //   console.log('reset time');\n  // };\n\n  console.log(test.time());\n}\n\n\n{\n  let typename=function(target,name,descriptor){\n    target.myname='hello';\n  }\n\n  @typename\n  class Test{\n\n  }\n\n  console.log('类修饰符',Test.myname);\n  // 第三方库修饰器的js库：core-decorators; npm install core-decorators\n}\n\n{\n  let log=(type)=\u003e{\n    return function(target,name,descriptor){\n      let src_method=descriptor.value;\n      descriptor.value=(...arg)=\u003e{\n        src_method.apply(target,arg);\n        console.info(`log ${type}`);\n      }\n    }\n  }\n\n  class AD{\n    @log('show')\n    show(){\n      console.info('ad is show')\n    }\n    @log('click')\n    click(){\n      console.info('ad is click');\n    }\n  }\n\n  let ad=new AD();\n  ad.show();\n  ad.click();\n}\n\n```\n\n### 模块化\n\n```javascript\n// export let A=123;\n//\n// export function test(){\n//   console.log('test');\n// }\n//\n// export class Hello{\n//   test(){\n//     console.log('class');\n//   }\n// }\n\nlet A=123;\nlet test=function(){\n  console.log('test');\n}\nclass Hello{\n  test(){\n    console.log('class');\n  }\n}\n\nexport default {\n  A,\n  test,\n  Hello\n}\n```\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnealyang%2Fes6_practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnealyang%2Fes6_practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnealyang%2Fes6_practice/lists"}