一 ECMAScript介绍

ECMAScript只提供了最基本的语法，JavaScript实现了ECMAScript的标准，是ECMAScript的扩展语言。在浏览器环境下，JavaScript就是ECMAScript加上web api（dom、bom）；在node环境JavaScript就是ECMAScript加上node apis(fs、net等)；JavaScript语言本身就是指ECMAScript；从ECMAScript2015开始，一年一迭代；
任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。
一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

  • Stage 0 - Strawman（展示阶段）
  • Stage 1 - Proposal（征求意见阶段）
  • Stage 2 - Draft（草案阶段）
  • Stage 3 - Candidate（候选人阶段）
  • Stage 4 - Finished（定案阶段）

ES2015 及之后的版本也称ES6是相对于以前ES5的统称
ES6的入门看参考阮老师的博客https://es6.ruanyifeng.com/

二 常用的ES2015语法

1 块级作用域
let；先声明后引用，不会变量提示；for循环中的循环变量和循环体中变量可以同名，且互不影响；
2 const关键词
const声明时必须赋值；不改变内存地址；
3 数组解构

  1. const arr = [1,2,3,4,5];
  3. const a2 = [a,b,c,d,e=100,f = 'default'] = arr;
  4. const a3 = [a,...rest] = arr;
  6. console.log(a,b,c)
  7. console.log(e)
  8. console.log(f)
  9. console.log(rest)

4 对象解构

  1. const obj = {name: 'jason', age: 20};
  2. const {age} = obj;
  3. // 解构属性
  4. console.log(age);
  6. const name = 'tom';
  7. // 通过制定属性获取时，重复了，就用别名
  8. const {name: objName} = obj;
  9. // 默认值
  10. const {highSchool = 'NYPD'} = obj;
  11. console.log(highSchool);
  13. // 场景
  14. const {log} = console;
  16. log('11')

5 模板字符串-插值表达式

  1. const str = `Hello there, what,s up, 
  3. there is a \`string\``;
  4. // 支持直接换行
  5. console.log(str)
  7. // 插值表达式
  8. const name = 'Lee';
  9. const msg = `hello, ${name}, are you ${20 * 1.5} yarns old? you got ${ Math.floor(Math.random() * 5)} children?`;
  11. console.log(msg)

6 模板字符串-模板函数

  1. // const str = console.log `Hello World`;
  3. const name = 'jason';
  4. const gender = true;
  6. function myTagFunc (string, name ,gender) {
  7.     // console.log(string, name, gender)
  8.     // return '123'
  9.     const sex = gender?'man':'women';
  10.     return string[0] + name + string[1] + sex + string[2]
  11. }
  13. const result = myTagFunc `Hey, ${name} is a ${gender}.`;
  14. console.log(result)

7 字符串的扩展方法
includes()、startsWith()、endsWith()、

  1. const msg = 'Error: foo is not defined';
  3. console.log(
  4.     msg.startsWith('Error'),
  5.     msg.endsWith('defined'),
  6.     msg.includes('is not')
  7. )

8 参数默认值

  1. //判断默认值
  2. function foo(flag) {
  3.     flag = flag === undefined ? true: false;
  4.     console.log(flag)
  5. }
  6. // 给定默认值
  7. function foo(flag = true, ss) {
  8.     console.log(flag, ss)
  9. }
  11. foo(undefined,1)

9 剩余参数

  1. function foo() {
  2.     console.log(arguments)
  3. }
  4. // 只能放在形参的最后，且只能用一次
  5. function foo1(first,...rest) {
  6.     console.log(rest)
  7. }
  9. foo(1,2,3,4,5)
  10. foo1(1,2,3,4,5)

10 数组展开

  1. const arr = ['jason', 'rich', 'jim'];
  2. // 参数确定
  3. console.log(
  4.     arr[0],
  5.     arr[1],
  6.     arr[2],
  7. );
  9. // 参数不确定
  10. console.log.apply(console, arr);
  12. console.log(...arr)

11 箭头函数

  1. // function foo(n) {
  2. //     return n * 1
  3. // }
  5. const foo = n => n * 1

12 箭头函数this指针 指向当前作用域

  1. const person = {
  2.     name: 'Jason',
  3.     say: function () {
  4.         console.log(`hi, this is ${this.name}`)
  5.     },
  6.     sayArrow:  () => {
  7.         console.log(`hi, this is ${this.name}`)
  8.     },
  9.     sayAsync: function() {
  10.         setTimeout(function() {
  11.             console.log(this.name)
  12.         }, 1000);
  13.     },
  14.     sayAsyncArrow: function() {
  15.         setTimeout(() =>{
  16.             console.log(this.name)
  17.         }, 1000);
  18.     }
  19. }
  20. person.say(); // hi, this is Jason
  21. person.sayArrow() // hi, this is undefined
  22. person.sayAsync() // undefined
  23. person.sayAsyncArrow() // Jason

13 对象字面量增强

  1. const bar = '123';
  3. const foo = {
  4.     // bar: bar
  5.     bar, // 省略同名属性
  6.     // may: function() {
  7.     //     console.log('11')
  8.     // }
  9.     may() { // 省略冒号和function
  10.         console.log('11');
  11.         console.log(this)
  12.     },
  13.     [Math.random()]:'222' // 计算属性
  14. }
  16. foo.may()

14 对象扩展方法

  1. // Object.assign方法
  2. const source = {
  3.     a:123,
  4.     b:123
  5. }
  7. const target = {
  8.     a: 456,
  9.     c: 789
  10. }
  12. Object.assign(target, source);
  14. console.log(target) // { a: 123, c: 789, b: 123 }
  15. console.log(source) // { a: 123, b: 123 }
  17. // Object.is方法
  19. console.log(
  20.     0 == false,
  21.     0 === false,
  22.     -0 === +0,
  23.     Object.is(+0, -0),
  24.     Object.is(NaN, NaN)
  25. )

15 代理proxy

  1. const person = {
  2.     name:'Jason',
  3.     age: 20 
  4. }
  6. const personProxy = new Proxy(person, {
  7.     get(target, prop) {
  8.         console.log(target, prop);
  9.         // return 100
  10.         return prop in target ? target[prop]: 'has no prop'
  11.     },
  12.     set(target, prop, value) {
  13.         console.log(target, prop, value);
  14.         if(prop === 'age') {
  15.             if(!Number.isInteger(value)) {
  16.                 throw new TypeError(`${value} is not int`)
  17.             }
  18.         }
  19.         target[prop] = value;
  20.     }
  21. });
  23. console.log(personProxy.name) // Jason
  24. console.log(personProxy.hight) // Jason
  26. // personProxy.age = '222'; // TypeError: 222 is not int
  27. personProxy.age = 22; // { name: 'Jason', age: 20 } age 22
  28. personProxy.height = '199cm'; // { name: 'Jason', age: 22 } height 199cm

16 proxy和defineProperty区别

  1. // object.defineProperty
  2. const man = {};
  4. Object.defineProperty(man, 'name', {
  5.     get() {
  6.         console.log('name visited')
  7.         return man._name
  8.     },
  9.     set(value) {
  10.         console.log('name setted')
  11.         man._name = value;
  12.     }
  13. })
  14. Object.defineProperty(man, 'age', {
  15.     get() {
  16.         console.log('age visited')
  17.         return man._age
  18.     },
  19.     set(value) {
  20.         console.log('age setted')
  21.         man._age = value;
  22.     }
  23. });
  24. man.name = 'jack';
  25. console.log(man.name);
  26. // name setted
  27. // name visited
  28. // jack
  29. // ----------------------------------proxy--------------------------
  30. // 对象的更多操作可以监视到
  31. // 更好的对数组对象的监视 之前想实现必须重写数组的方法
  32. // 非侵入的方式监视对象
  33. // delete也可以监视到
  34. const person = {
  35.     name:'Jason',
  36.     age: 20 
  37. }
  38. const personProxy =  new Proxy(person, {
  39.     deleteProperty(target, prop) {
  40.         console.log('delete ', prop)
  41.         delete target[prop]
  42.     }
  43. })
  45. delete personProxy.age;
  47. console.log(person) // { name: 'Jason' }
  49. // 对数组更好的监视
  50. const list = [];
  52. const listProxy = new Proxy(list, {
  53.     set(target, prop, value) {
  54.         console.log('set :', prop, value);
  55.         target[prop] = value;
  56.         return true; // 表示设置成功
  57.     }
  58. })
  60. listProxy.push('sss') // set : 0 sss set : length 1

17 reflect对象，类似math对象，静态类不能通过new新建，内部封装了对对象底层的操作方法； reflect成员方法就是prox处理对象的默认实现

  1. const person = {
  2.     name: 'Jason',
  3.     age: 20
  4. }
  6. const personProxy = new Proxy(person, {
  7.     get(target, prop) {
  8.         console.log('watch prop get logic')
  9.         return Reflect.get(target, prop)
  10.     }
  11. });
  13. console.log(personProxy.age);
  16. // 提供了统一一套对对象的操作api 13个方法
  18. console.log('name' in person);
  19. console.log(delete person.name);
  20. console.log(Object.keys(person));
  23. console.log(Reflect.has(person, 'name'))
  24. console.log(Reflect.deleteProperty(person, 'name'))
  25. console.log(Reflect.ownKeys(person))

18 class相关

  1. // 以前
  2. // es6之前继承 参考博文地址 https://www.cnblogs.com/humin/p/4556820.html
  3. function Person(name, age) {
  4.     this.name = name; // 通过this访问当前的实例对象
  5.     this.age = age; // 通过this访问当前的实例对象
  6.     // 实例方法
  7.     this.hello = function() {
  8.         console.log('hello there, my name is ' + this.name)
  9.     }
  10. }
  11. // 原型方法
  12. // 如果要给当前所有的实例之间共享成员，需要借助成员的原型prototype
  13. Person.prototype.say = function() {
  14.     console.log(`I am ${this.age} yarns old`)
  15. }
  16. // 继承
  17. // 1 将父类的实例作为子类的原型
  18. function Man (){};
  19. Man.prototype = new Person();
  20. Man.prototype.name = 'man';
  21. Man.prototype.age = 20;
  23. var man = new Man();
  24. console.log(man.name)
  25. console.log(man.say())
  26. console.log(man.hello())
  28. console.log('---------------');
  29. // 2 使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
  30. function Women(name, age) {
  31.     Person.call(this);
  32.     this.name = name||'women';
  33.     this.age = age || 18;
  34. }
  35. var woman = new Women();
  36. console.log(woman.name)
  37. console.log(woman.hello())
  38. console.log('---------------');
  39. // console.log(woman.say()) // 报错
  40. // 3 实例继承 为父类实例添加新特性，作为子类实例返回
  42. function NormalMen (name, age) {
  43.     var instance = new Person();
  44.     instance.name = name || 'normalMen';
  45.     instance.age = age || 18;
  46.     return instance;
  47. }
  48. var normalMen = new NormalMen();
  49. console.log(normalMen.name)
  50. console.log(normalMen.hello())
  51. console.log(normalMen.say())
  52. console.log('---------------');
  53. // 4 拷贝继承
  55. function innormalMen(name) {
  56.     var person = new Person();
  57.     for(var key in person) {
  58.         innormalMen[key] = person[key]
  59.     }
  60.     this.name = name|| 'Tom';
  61. }
  63. var innormalMen = new innormalMen();
  64. console.log(innormalMen.name)
  65. // console.log(innormalMen.say()) // 不可枚举方法不存在
  66. // console.log(innormalMen.hello()) // 不可枚举方法不存在
  68. console.log('---------------');
  69. // 5 组合继承 通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
  71. function WhiteMan(name) {
  72.     Person.call(this);
  73.     this.name = name || 'jim';
  74. }
  75. WhiteMan.prototype = new Person();
  76. WhiteMan.prototype.constructor = WhiteMan; // 修复构造函数指向
  78. var whiteMan = new WhiteMan('white');
  79. console.log(whiteMan.name)
  80. console.log(whiteMan.hello())
  81. console.log(whiteMan.say())
  82. // 6 寄生组合继承 通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
  84. function YellowMan(name){
  85.     Person.call(this);
  86.     this.name = name || 'Tom';
  87.   }
  88.   (function(){
  89.     // 创建一个没有实例方法的类
  90.     var Super = function(){};
  91.     Super.prototype = Person.prototype;
  92.     //将实例作为子类的原型
  93.     YellowMan.prototype = new Super();
  94.   })();
  96. console.log('---------------------------------------------------------------');
  97. // class
  99. class Student {
  100.     constructor(name) {
  101.         this.name = name;
  102.     }
  103.     // 实例方法
  104.     say() {
  105.         console.log(`my name is ${this.name}`)
  106.     }
  107.     // 静态方法
  108.     static create(name) {
  109.         return new Person(name)
  110.     }
  111. }
  112. // 继承
  114. class GirlStudent extends Student {
  115.     constructor(name, num) {
  116.         super(name); // 调用父类的构造函数
  117.         this.num = num;
  118.     }
  120.     hello() {
  121.         super.say();
  122.         console.log(`my student number is ${this.num}`)
  123.     }
  124. }
  126. const s = new GirlStudent('lili', 2222);
  127. s.hello()

19 set对象

  1. const s = new Set();
  3. // 添加
  4. s.add(1).add(2).add(3).add(4).add(2);
  6. console.log(s) // Set { 1, 2, 3, 4 }
  7. // 遍历
  8. s.forEach(i => {
  9.     console.log(i)
  10. });
  11. // 1
  12. // 2
  13. // 3
  14. // 4
  15. // 长度
  16. console.log(s.size)
  17. // 4
  18. // 删除
  19. console.log(s.delete(3))
  20. // true
  21. // 清除
  22. s.clear();
  23. console.log(s)
  24. // Set {}
  26. const arr = [1,2,3,4,2,1]
  27. // 去重
  28. const aa = new Set(arr);
  29. // 生成新数组
  30. const rr = Array.from(new Set(arr))
  31. // 解构新数组
  32. const dd = [...new Set(arr)]
  34. console.log(aa)
  35. // Set { 1, 2, 3, 4 }
  36. console.log(rr)
  37. // [ 1, 2, 3, 4 ]
  38. console.log(dd)
  39. // [ 1, 2, 3, 4 ]

20 map对象

  1. // map 可以用任意类型的数据作为key
  2. const m = new Map();
  3. const tom = {a :'1'};
  5. // 添加
  6. m.set(tom,10);
  8. console.log(m) //Map { { a: '1' } => 10 }
  9. // 获取
  10. console.log(m.get(tom)) // 10
  11. // 删除
  12. m.delete(tom);
  13. console.log(m) // Map {}
  15. m.set(tom,20);
  16. // 查找
  17. console.log(m.has(tom)) // true
  18. // 遍历
  19. m.forEach((value, key) => {
  20.     console.log(value, key)
  21. })
  22. // 20 { a: '1' }
  23. // 清空
  24. m.clear();
  25. console.log(m) // Map {}

20 symbol数据类型
js中基本的数据类型 string, number, boolean, null, undefined, object, symbol, bigInt(es2019)

  1. // symbol 数据类型 表示一个独一无二的值 主要用在给对象添加一个唯一属性名
  2. // 基本的数据类型 string, number, boolean, null, undefined, object, symbol, bigInt(es2019)
  3. const cache = {};
  4. // 在a.js中 定义一个对象值
  5. cache['foo'] = Math.random();
  6. // 在b.js中 定义同名的值导致会被覆盖
  7. cache['foo'] = '123';
  9. console.log(cache) // { foo: '123' }
  12. const ss = Symbol();
  13. console.log(ss);
  14. console.log(typeof ss)
  15. // Symbol()
  16. // symbol
  18. console.log(Symbol('a'))
  19. console.log(Symbol('b'))
  20. console.log(Symbol('c'))
  21. // Symbol(a)
  22. // Symbol(b)
  23. // Symbol(c)
  25. const a = {};
  26. // 以symbol为key
  27. a[Symbol()] = '1'
  28. a[Symbol()] = '2'
  29. console.log(a)
  30. // { [Symbol()]: '1', [Symbol()]: '2' }
  31. // 计算属性
  32. const obj = {
  33.     [Symbol()]: 123
  34. };
  35. console.log(obj)
  36. // { [Symbol()]: 123 }
  38. // 私有成员
  39. const name = Symbol();
  40. const person = {
  41.     [name] : 'Jason',
  42.     say() {
  43.         console.log(this.name)
  44.     }
  45. }
  47. person.say(); // undefined
  49. console.log(
  50.     Symbol() === Symbol(), // false
  51.     Symbol('foo') === Symbol('foo'), // false
  52. )
  54. // 相同的symbol值 for方法接受字符串，如果true和'true'，则是同一个
  55. const s1 = Symbol.for('foo')
  56. const s2 = Symbol.for('foo')
  57. console.log(s1 === s2) // true
  59. // 内置的symbol常量
  60. console.log(Symbol.hasInstance) // Symbol(Symbol.hasInstance)
  61. console.log(Symbol.iterator); // Symbol(Symbol.iterator)
  63. // 自定义对象标签
  64. const xobj = {
  65.     [Symbol.toStringTag] : 'XObject'
  66. }
  67. console.log(xobj.toString()) // [object XObject]
  68. // symbol 定义的key是无法用for...in循环得到的 无法用Object.keys获取，也会被JSON.stringify忽略
  69. const yobj = {
  70.     [Symbol()]: 'Symbol',
  71.     foo: 11
  72. }
  73. for(let key in yobj) {
  74.     console.log(key)
  75. }
  76. console.log(Object.keys(yobj))
  77. console.log(JSON.stringify(yobj))
  78. // 想要获取 getOwnPropertySymbol() 只能获取到symbol属性
  79. console.log(Object.getOwnPropertySymbols(yobj))

21 for…of循环

  1. // for...of循环是一种数据遍历的统一方式
  2. const arr = [100, 200, 300, 400];
  4. for (let item of arr) {
  5.     console.log(item);
  6.     if (item > 100) {
  7.         break;
  8.     }
  9. }
  10. // 100
  11. // 200
  12. // forEach无法break
  13. console.log('---------------')
  14. const s = new Set(arr);
  16. for(const item of s) {
  17.     console.log(item)
  18. }
  19. // 100
  20. // 200
  21. // 300
  22. // 400
  23. console.log('---------------')
  24. const m = new Map();
  25. m.set('top', 1)
  26. m.set('bottom', 2)
  28. for(const item of m) {
  29.     console.log(item)
  30. }
  31. // [ 'top', 1 ]
  32. // [ 'bottom', 2 ]
  33. for(const [key, value] of m) {
  34.     console.log(key, value)
  35. }
  36. // top 1
  37. // bottom 2
  38. console.log('---------------')
  40. const o = {a: 1, b: 2, c: 3};
  42. for(const item of o) {
  43.     console.log(item)
  44. }
  45. // TypeError: o is not iterable

22 可迭代接口 实现了iterable接口就可以被for…of遍历；在之前的可以被for…of循环例子中，这些对象原型方法上都有Symbol.iterator方法

  1. const set = new Set(['Jason', 'Jhon', 'Jim', 'Tom']);
  3. const iterator = set[Symbol.iterator]();
  5. console.log(iterator.next());
  6. console.log(iterator.next());
  7. console.log(iterator.next());
  8. console.log(iterator.next());
  9. console.log(iterator.next());
  10. console.log(iterator.next());
  11. // { value: 'Jason', done: false }
  12. // { value: 'Jhon', done: false }
  13. // { value: 'Jim', done: false }
  14. // { value: 'Tom', done: false }
  15. // { value: undefined, done: true }
  16. // { value: undefined, done: true }
  19. // 如何实现可迭代接口
  20. const obj = { // iterable
  21.     store: ['Jason', 'Jhon', 'Jim', 'Tom'],
  22.     [Symbol.iterator]: function() {
  23.         let index = 0;
  24.         const self = this;
  25.         return { // iterator
  26.             next: function() {
  27.                 const result =  { // iterationResult
  28.                     value: self.store[index],
  29.                     done: index>=self.store.length
  30.                 }
  31.                 index ++;
  32.                 return result;
  33.             }
  34.         }
  35.     }
  36. }
  38. for(const item of obj) {
  39.     console.log(item)
  40. }

23 迭代器的意义

  1. // 迭代器接口的意义
  2. const todoList = {
  3.     today: ['1','2','3','4'],
  4.     tomorrow: ['6','7','8','9'],
  5.     afterTomorrow: ['11','12','13','14'], // 后续增加了
  6.     forEach: function(callback) { // 提供统一forEach接口
  7.         const arr = [].concat(this.today, this.tomorrow,this.afterTomorrow)
  8.         for(const item of arr) {
  9.             callback(item)
  10.         }
  11.     },
  12.     [Symbol.iterator]: function() {
  13.         const arr = [...this.today, ...this.tomorrow, ...this.afterTomorrow];
  14.         let index = 0;
  15.         return {
  16.             next: function() {
  17.                 return {
  18.                     value: arr[index],
  19.                     done: index++>=arr.length
  20.                 }
  21.             }
  22.         }
  23.     }
  25. }
  26. // 要遍历
  27. for(const item of todoList.today) {
  28.     console.log(item)
  29. }
  30. // 要遍历
  31. for(const item of todoList.tomorrow) {
  32.     console.log(item)
  33. }
  34. // 此时如果todoList中增加了afterTomorrow就必须重新写
  35. for(const item of todoList.tomorrow) {
  36.     console.log(item)
  37. }
  38. // 如果添加了统一的forEach方法就可以减少耦合
  39. todoList.forEach(function(item){
  40.     console.log(item)
  41. });
  42. console.log('------------------------------')
  43. // 用迭代器实现
  44. for(const item of todoList) {
  45.     console.log(item)
  46. }

24 生成器函数 generator

  1. // 生成器函数
  2. function* foo() {
  3.     console.log('foo start')
  4.     return 100
  5. }
  6. // 第一次执行初始化一个生成器对象
  7. const result = foo();
  8. console.log(result) // Object [Generator] {}
  9. console.log(result.next())
  11. console.log('------------------------')
  12. // foo start
  13. // { value: 100, done: true }
  14. // 调用生成器对象的next方法，才会走下一步，生成器函数也实现了iteratable接口
  15. // 配合yield使用
  16. function* fn() {
  17.     console.log('1')
  18.     yield 100;
  19.     console.log('2')
  20.     yield 200;
  21.     console.log('3')
  22.     yield 300;
  23. }
  25. const fnResult = fn();
  26. console.log(fnResult.next())
  27. console.log(fnResult.next())
  28. console.log(fnResult.next())
  29. console.log(fnResult.next())
  30. console.log('------------------------')
  31. // 1
  32. // { value: 100, done: false }
  33. // 2
  34. // { value: 200, done: false }
  35. // 3
  36. // { value: 300, done: false }
  37. // { value: undefined, done: true }
  38. // 惰性执行
  39. // 案例1 
  40. function* createIdMaker() {
  41.     let id = 0;
  42.     while(true) {
  43.         yield id++;
  44.     }
  45. }
  46. const idMaker = createIdMaker();
  47. console.log(idMaker.next())
  48. console.log(idMaker.next())
  49. console.log(idMaker.next())
  50. console.log(idMaker.next())
  51. console.log('------------------------')
  52. // 案例2 
  53. const todoList = {
  54.     today: ['1', '2', '3', '4'],
  55.     tomorrow: ['6', '7', '8', '9'],
  56.     afterTomorrow: ['11', '12', '13', '14'], // 后续增加了
  57.     forEach: function (callback) {
  58.         // 提供统一forEach接口
  59.         const arr = [].concat(this.today, this.tomorrow, this.afterTomorrow);
  60.         for (const item of arr) {
  61.             callback(item);
  62.         }
  63.     },
  64.     // [Symbol.iterator]: function() {
  65.     //     const arr = [...this.today, ...this.tomorrow, ...this.afterTomorrow];
  66.     //     let index = 0;
  67.     //     return {
  68.     //         next: function() {
  69.     //             return {
  70.     //                 value: arr[index],
  71.     //                 done: index++>=arr.length
  72.     //             }
  73.     //         }
  74.     //     }
  75.     // }
  76.     // 用生成器函数代替
  77.     [Symbol.iterator]: function* () {
  78.         const arr = [...this.today, ...this.tomorrow, ...this.afterTomorrow];
  79.         for(const item of arr) {
  80.             yield item
  81.         }
  82.     },
  83. };
  85. for(const item of todoList) {
  86.     console.log(item)
  87. }

25 ES modules 模块化
26 es2016

  1. const arr = ['Jason', 'Tom', 'Jim', 'Rich'];
  3. // 判断是否存在foo 是否等于-1
  4. console.log(arr.indexOf('foo')); // -1
  5. console.log(arr.indexOf('Tom')); // 1
  6. // 在es2016中年引入了includes
  7. console.log(arr.includes('foo')); // false
  8. console.log(arr.includes('Tom')); // true
  10. // 指数运算
  11. let a = 2;
  12. console.log(Math.pow(a, 10)); // 1024
  13. // es2016中引入了** 为指数运算符
  14. console.log(2 ** 10); // 1024

27 es2017

  1. const foo = {
  2.     name: 'Jason',
  3.     age: 20
  4. }
  5. // 1 Object.values
  6. console.log(Object.values(foo)) // [ 'Jason', 20 ]
  8. // 2 Object.entries
  9. console.log(Object.entries(foo)) // [ [ 'name', 'Jason' ], [ 'age', 20 ] ]
  10. // 延伸 普通对象的for...of循环
  11. for(const [key, value] of Object.entries(foo)) {
  12.     console.log(key, value)
  13. }
  14. // name Jason
  15. // age 2
  16. // 普通对象转换为map对象
  17. console.log(new Map(Object.entries(foo)))
  18. //Map { 'name' => 'Jason', 'age' => 20 }
  19. // 3 Object.getOwnPropertyDescription
  20. const p1 = {
  21.     firstName: 'Lee',
  22.     lastName: 'Jason',
  23.     get fullName() {
  24.         return this.firstName + '.' + this.lastName
  25.     }
  26. }
  27. console.log(p1.fullName) // Lee.Jason
  28. // 用Object.assign复制属性后重置
  29. const p2 = Object.assign({}, p1)
  30. p2.lastName = 'Tom'
  31. // Object.assign 不能复制get/set属性
  32. console.log(p2) // { firstName: 'Lee', lastName: 'Tom', fullName: 'Lee.Jason' }
  33. // 如何解决？
  34. const des = Object.getOwnPropertyDescriptors(p1);
  35. // console.log(des);
  36. const p3 = Object.defineProperties({}, des);
  37. p3.lastName = 'Jim';
  38. console.log(p3.fullName) // Lee.Jim
  39. // 4 字符串方法 padStart/padEnd
  40. let a = '>';
  41. let b = '<';
  42. const logTitle = 'request log'
  44. console.log(`${a.padStart(16,'-')} ${logTitle} ${b.padEnd(16,'-')}`)
  45. // ---------------> request log <---------------
  46. // 5 数组末尾允许添加尾逗号
  47. const arr = [
  48.     1,
  49.     2,
  50.     3,
  51.     4,
  52.     5,
  53. ]
  54. // 6 async await