ECMAScript

ECMAScript 与JavaScript

  • 浏览器环境中 JavaScript —— ECMAScript + Web apis(BOM, DOM)

  • node环境中国 JavaScript —— ECMAScript + Node apis(fs, net, etc)
    JavaScript中语言本身指的就是ECMAScript

ES2015相较之前的变化

  • 对原有语法进行增幅 (解构,展开, 参数默认值, 模版字符串)
  • 解决了原有语法的一些问题或者缺陷 ( let const 块级作用域)
  • 全新的对象, 全新的方法, 全新的功能 (promise, obj.assign)
  • 全新的数据类型和数据结构( Symbol, set, map)

ESMAScript新特性

let const

  • es2015之前(全局作用域, 函数作用域)
  • 块级作用域 ( 代码中 {} 包裹起来的范围)

let

  • let声明的成员只会在所声明的块中生效
  • let在for循环中的表现——可以利用var和let作用域不同,在双for循环中区分计数器.
  • let 应用场景: 循环绑定事件, 事件处理函数中获取正确索引
  • for循环会产生两层作用域
  • let 修复了变量声明提升现象

const

  • 声明恒量/常量,相比let,特点是只读

const只读:

声明的成员不能被修改的意思是,不允许在声明过后重新指向新的内存地址,并不是不能修改属性中的恒量成员

  1. // const name = 'zce'
  2. // name = 'jack'
  3. // 恒量声明过后不允许重新赋值
  5. // const name
  6. // name = 'zce'
  7. // 恒量要求声明同时赋值
  9. // const obj = {}
  10. // obj.name = 'zce'  // success
  11. // 恒量只是要求内层指向不允许被修改
  12. // 对于数据成员的修改是没有问题的
  14. // obj = {} // error  赋值会改变内存指向

最佳实践: 不用 var , 主要用 const , 配合 let

解构

数组的解构

  1. // 数组的解构
  3. const arr = [100, 200, 300]
  5. // 通过下标定位解构
  6. // const foo = arr[0]
  7. // const bar = arr[1]
  8. // const baz = arr[2]
  9. // console.log(foo, bar, baz) => [100, 200, 300]
  11. // 按照顺序填写变量名, 不需要项可以删除, 但要保留逗号
  12. // const [foo, bar, baz] = arr
  13. // console.log(foo, bar, baz) => [100, 200, 300]
  15. // const [, , baz] = arr
  16. // console.log(baz) => 300
  18. // ... 表示提取从当前位置往后的所有成员,会放在一个数组当中(rest),但只能在解构最后一个位置使用
  19. // const [foo, ...rest] = arr
  20. // console.log(rest)  => [200, 300]
  23. // const [foo, bar, baz, more] = arr
  24. // console.log(more) => undefined
  26. // 给解构的数据设置默认值
  27. // const [foo, bar, baz = 123, more = 'default value'] = arr
  28. // console.log(bar, more)
  30. const path = '/foo/bar/baz'
  31. // const tmp = path.split('/')
  32. // const rootdir = tmp[1]
  34. const [, rootdir] = path.split('/')
  35. console.log(rootdir)

对象的解构

  1. const obj = { name: 'zce', age: 18 }
  3. // 通过属性名定位解构
  4. // const { name } = obj
  5. // console.log(name)
  7. // 外部变量名与要解构的属性名重复的情况下可以重命名
  8. // name : onjname  
  9. // 冒号左边是重复的属性名, 右边是重命名之后的属性名
  10. // const name = 'tom'
  11. // const { name: objName } = obj
  12. // console.log(objName)
  14. // 设置默认值
  15. // const name = 'tom'
  16. // const { name: objName = 'jack' } = obj
  17. // console.log(objName)
  19. const { log } = console
  20. log('foo')
  21. log('bar')
  22. log('123')

模版字符串 ``

  • 反引号包裹
  • 允许换行
  • 可以通过 ${} 插入表达式, 表达式的执行结果将会输出到相应位置

带标签的模版字符串

  1. // 模版字符串的标签就是一个特殊的函数,使用这个标签就是调用这个函数 
  2. // const str = console.log`hello world`
  4. const name = 'tom'
  5. const gender = false
  7. function myTagFunc (strings, name, gender) {
  8.   // console.log(strings, name, gender)
  9.   // return '123'
  10.   const sex = gender ? 'man' : 'woman'
  11.   return strings[0] + name + strings[1] + sex + strings[2]
  12. }
  14. const result = myTagFunc`hey, ${name} is a ${gender}.`
  16. console.log(result)
  • 可以实现文本的多语言转换
  • 检查文本字符串中是否存在一些不安全的字符
  • 小型的模版引擎

字符串的扩展方法

  • startsWith 是否以‘’开始
  • endsWith 是否以‘’结尾
  • includes 是否包含‘’

函数参数的默认值

  • 设置默认值使用 形参 = 默认值 方式设置
  • 多个形参, 默认值要写在形参列表最后
  • 默认值只在函数调用没有传实参的情况下生效
  1. function foo (enable = true) {
  2.   console.log('foo invoked - enable: ')
  3.   console.log(enable)
  4. }
  6. foo(false)

剩余参数

  2. // function foo () {
  3. //   console.log(arguments)
  4. // }
  6. // es2015
  7. function foo (first, ...args) {
  8.   console.log(args)
  9. }
  11. foo(1, 2, 3, 4) => [2, 3, 4]

展开数组参数

  1. const arr = ['foo', 'bar', 'baz']
  2. console.log(...arr)

箭头函数

  1. // function inc (number) {
  2. //   return number + 1
  3. // }
  5. // 最简方式
  6. // const inc = n => n + 1
  8. // 完整参数列表，函数体多条语句，返回值仍需 return
  9. const inc = (n, m) => {
  10.   console.log('inc invoked')
  11.   return n + 1
  12. }
  14. console.log(inc(100))
  16. const arr = [1, 2, 3, 4, 5, 6, 7]
  18. // arr.filter(function (item) {
  19. //   return item % 2
  20. // })
  22. // 常用场景，回调函数
  23. arr.filter(i => i % 2)
  • 箭头函数不会改变 this 指向
  1. const person = {
  2.   name: 'tom',
  3.   // sayHi: function () {
  4.   //   console.log(`hi, my name is ${this.name}`)
  5.   // }
  6.   sayHi: () => {
  7.     console.log(`hi, my name is ${this.name}`)
  8.     // name is undefined
  9.   },
  10.   sayHiAsync: function () {
  11.     // const _this = this
  12.     // setTimeout(function () {
  13.     //   console.log(_this.name)  // 取不到
  14.     // }, 1000)
  16.     console.log(this)
  17.     setTimeout(() => {
  18.       // console.log(this.name)
  19.       console.log(this)
  20.     }, 1000)
  21.   }
  22. }
  24. person.sayHiAsync()

对象字面量

  • 属性名与变量名相同, 可以省略 // bar: bar, => bar,
  • 方法可以省略 method1: function () {} => method1 () {}
  • 给对象添加动态属性名
  1. // Math.random() :  123   不被允许
  2. // 通过 [] 让表达式的返回值作为属性名
  3. const obj = {
  4.   bar: 123
  5. }
  6. obj[Math.random()] = 456

Object.assign

  • 将多个源对象中的属性复制到一个目标对象中
  1. const data1 = {
  2.   a: 123,
  3.   b: 123
  4. }
  5. const data2 = {
  6.   a: 4567,
  7.   b: 4567
  8. }
  9. const data = {
  10.   b: 087
  11.   c: 824,
  12.   d: 789
  13. }
  15. const reslut = Object.assign(data, data1, data2)
  16. const reslut2 = Object.assign({}, data1, data2)
  18. console.log(data)
  19. console.log(reslut === data)
  21. // 合并的结果和目标对象完全相同, 指向同一内存地址.改一个另一个同时改
  22. // 可以通过设置目标对象为空对象实现一个全新的对象, 修改就不会影响外部数据

Object.is

  • == 会默认转换类型进行比较
  • === 严格对比数值是否相同

=== 的两个缺陷

  • -0 === +0 => true
  • NaN === NaN => false
  1. // Object.is(+0, -0)       // => false
  2. // Object.is(NaN, NaN)     // => true

Proxy 对象

  1. // Proxy 对象
  3. // const person = {
  4. //   name: 'zce',
  5. //   age: 20
  6. // }
  8. // target 代理对象
  9. // property 监听变化的属性名
  10. // const personProxy = new Proxy(person, {
  11. //   // 监视属性读取
  12. //   get (target, property) {
  13. //     return property in target ? target[property] : 'default'
  14. //     // console.log(target, property)
  15. //     // return 100
  16. //   },
  17. //   // 监视属性设置
  18. //   set (target, property, value) {
  19. //     if (property === 'age') {
  20. //       if (!Number.isInteger(value)) {
  21. //         throw new TypeError(`${value} is not an int`)
  22. //       }
  23. //     }
  25. //     target[property] = value
  26. //     // console.log(target, property, value)
  27. //   }
  28. // })
  30. // personProxy.age = 100
  32. // personProxy.gender = true
  34. // console.log(personProxy.name)
  35. // console.log(personProxy.xxx)

Proxy 对比 Object.defineProperty() ===============

  1. // 优势1：Proxy 可以监视读写以外的操作 --------------------------
  3. // const person = {
  4. //   name: 'zce',
  5. //   age: 20
  6. // }
  8. // const personProxy = new Proxy(person, {
  9. //   deleteProperty (target, property) {
  10. //     console.log('delete', property)
  11. //     delete target[property]
  12. //   }
  13. // })
  15. // delete personProxy.age
  16. // console.log(person)
  18. // 优势2：Proxy 可以很方便的监视数组操作 --------------------------
  20. // const list = []
  22. // const listProxy = new Proxy(list, {
  23. //   set (target, property, value) {
  24. //     console.log('set', property, value)
  25. //     target[property] = value
  26. //     return true // 表示设置成功
  27. //   }
  28. // })
  30. // listProxy.push(100)
  31. // listProxy.push(100)
  33. // 优势3：Proxy 不需要侵入对象 --------------------------
  35. // const person = {}
  37. // Object.defineProperty(person, 'name', {
  38. //   get () {
  39. //     console.log('name 被访问')
  40. //     return person._name
  41. //   },
  42. //   set (value) {
  43. //     console.log('name 被设置')
  44. //     person._name = value
  45. //   }
  46. // })
  47. // Object.defineProperty(person, 'age', {
  48. //   get () {
  49. //     console.log('age 被访问')
  50. //     return person._age
  51. //   },
  52. //   set (value) {
  53. //     console.log('age 被设置')
  54. //     person._age = value
  55. //   }
  56. // })
  58. // person.name = 'jack'
  60. // console.log(person.name)
  62. // Proxy 方式更为合理
  63. const person2 = {
  64.   name: 'zce',
  65.   age: 20
  66. }
  68. const personProxy = new Proxy(person2, {
  69.   get (target, property) {
  70.     console.log('get', property)
  71.     return target[property]
  72.   },
  73.   set (target, property, value) {
  74.     console.log('set', property, value)
  75.     target[property] = value
  76.   }
  77. })
  79. personProxy.name = 'jack'
  81. console.log(personProxy.name)

Reflect 对象

  • 统一提供一套用于操作对象的api
  • proxy 内部get方法不设置默认用reflect.get
  1. // const proxy = new Proxy(obj, {
  2. //   get (target, property) {
  3. //     return Reflect.get(target, property)
  4. //   }
  5. // })
  7. // console.log('name' in obj)
  8. // console.log(delete obj['age'])
  9. // console.log(Object.keys(obj))
  11. // 统一方法, 避免方法和操作符混用带来的不便
  12. // console.log(Reflect.has(obj, 'name'))
  13. // console.log(Reflect.deleteProperty(obj, 'age'))
  14. // console.log(Reflect.ownKeys(obj))

promise

class 关键字

  1. // class 关键词
  3. // function Person (name) {
  4. //   this.name = name
  5. // }
  7. // 创建共享方法
  8. // Person.prototype.say = function () {
  9. //   console.log(`hi, my name is ${this.name}`)
  10. // }
  12. class Person {
  13.   constructor (name) {
  14.     this.name = name
  15.   }
  17.   say () {
  18.     console.log(`hi, my name is ${this.name}`)
  19.   }
  20. }
  22. const p = new Person('tom')
  23. p.say()

static

实例方法 - 通过这个类型构造的实例对象去调用

静态方法 - 直接通过类型本身调用

  • 以前实现静态方法: 直接在构造函数对象上去挂载方法
  • ES2015中新增添加静态成员static的关键词

this问题: 因为static构建的静态方法是挂载在类上面的,所以静态方法的this就不会指向实例对象,而是指向当前的类型

  1. class Person {
  2.   constructor (name) {
  3.     this.name = name
  4.   }
  6.   say () {
  7.     console.log(`hi, my name is ${this.name}`)
  8.   }
  10.   static create (name) {
  11.     // this 指向当前类 person
  12.     return new Person(name)
  13.   }
  14. }
  16. const tom = Person.create('tom')
  17. tom.say()

extends 继承

  1. class Person {
  2.   constructor (name) {
  3.     this.name = name
  4.   }
  6.   say () {
  7.     console.log(`hi, my name is ${this.name}`)
  8.   }
  9. }
  11. class Student extends Person {
  12.   constructor (name, number) {
  13.     super(name) // 通过super调用父类构造函数
  14.     this.number = number
  15.   }
  17.   hello () {
  18.     super.say() // 通过super调用父类构造函数
  19.     console.log(`my school number is ${this.number}`)
  20.   }
  21. }
  23. const s = new Student('jack', '100')
  24. s.hello()

Set 数据结构

const newSet = new Set();

  • newSet.forEach(i => console.log(i))
  • for (let i of newSet) { console.log(i) }
  • newSet.has(value) // 集合中是否有特定值
  • newSet.size // 集合的长度
  • newSet.delete(value) // 删除特定值, 删除成功返回true
  • newSet.clear() // 清除集合中的全部内容

数组去重

const arr = [1, 2, 1, 4, 5, 2, 5]

  • const result = Array.from(new Set(arr))
  • const result = […new Set(arr)]

map 数据结构

  • 可以存储任意类型作为键
  • object - 字符串 / 值
  • map - 值 / 值
  1. const m = new Map()
  3. const tom = { name: 'tom' }
  5. m.set(tom, 90)
  7. console.log(m)
  9. console.log(m.get(tom))
  11. // m.has()
  12. // m.delete()
  13. // m.clear()
  15. m.forEach((value, key) => {
  16.   console.log(value, key)
  17. })

Symbol 数据类型

  • 两个 Symbol 永远不会相等
  • Symbol 可以传入字符串作为描述文本

  • 使用 Symbol 为对象添加用不重复的键

    • object键类型 ( 字符串、 Symbol )
  • 也可以在计算属性名中使用
  • Symbol 模拟实现私有成员
  1. // 两个 Symbol 永远不会相等
  3. // console.log(
  4. //   Symbol() === Symbol()
  5. // )
  7. // Symbol 描述文本
  9. // console.log(Symbol('foo'))
  10. // console.log(Symbol('bar'))
  11. // console.log(Symbol('baz'))
  13. // 使用 Symbol 为对象添加用不重复的键
  15. // const obj = {}
  16. // obj[Symbol()] = '123'
  17. // obj[Symbol()] = '456'
  18. // console.log(obj)
  20. // 也可以在计算属性名中使用
  22. // const obj = {
  23. //   [Symbol()]: 123
  24. // }
  25. // console.log(obj)
  27. // =========================================================
  29. // 案例2：Symbol 模拟实现私有成员
  31. // a.js ======================================
  33. const name = Symbol()
  34. const person = {
  35.   [name]: 'zce',
  36.   say () {
  37.     console.log(this[name])
  38.   }
  39. }
  40. // 只对外暴露 person
  42. // b.js =======================================
  44. // 由于无法创建出一样的 Symbol 值，
  45. // 所以无法直接访问到 person 中的「私有」成员
  46. // person[Symbol()]
  47. person.say()

Symbol 补充

  1. // Symbol 补充
  3. // console.log(
  4. //   // Symbol() === Symbol()
  5. //   Symbol('foo') === Symbol('foo')
  6. // )
  8. // Symbol 全局注册表 ----------------------------------------------------
  10. // const s1 = Symbol.for('foo')
  11. // const s2 = Symbol.for('foo')
  12. // console.log(s1 === s2)
  14. // Symbol 内部维护了一个字符串对应Symbol的一个注册表, 是一一对应的
  15. // 对传入的值会默认转换成字符串类型
  16. // console.log(
  17. //   Symbol.for(true) === Symbol.for('true')
  18. // )
  20. // 内置 Symbol 常量 ---------------------------------------------------
  22. // console.log(Symbol.iterator)
  23. // console.log(Symbol.hasInstance)
  25. // const obj = {
  26. //   [Symbol.toStringTag]: 'XObject'
  27. // }
  28. // console.log(obj.toString())
  30. // Symbol 属性名获取 ---------------------------------------------------
  32. const obj = {
  33.   [Symbol()]: 'symbol value',
  34.   foo: 'normal value'
  35. }
  37. // 获取不到
  38. // for (var key in obj) {
  39. //   console.log(key)
  40. // }
  41. // console.log(Object.keys(obj))
  42. // console.log(JSON.stringify(obj))
  44. // 获取的正确姿势
  45. console.log(Object.getOwnPropertySymbols(obj))

for…of 循环

  • for 适合遍历普通的数组
  • for…in 适合遍历键/值对
  • 数组对象的forEach 无法跳出循环, for…of 可以使用 break 关键字
  1. // 遍历 Map 可以配合数组结构语法，直接获取键值
  3. // const m = new Map()
  4. // m.set('foo', '123')
  5. // m.set('bar', '345')
  7. // for (const [key, value] of m) {
  8. //   console.log(key, value)
  9. // }
  11. // 普通对象不能被直接 for...of 遍历
  13. // const obj = { foo: 123, bar: 456 }
  15. // for (const item of obj) {
  16. //   console.log(item)
  17. // }

迭代器 ( Iterator )

总结

  • 所有可以直接被for…of遍历的数据类型,都必须实现了统一的Iterable接口( 内部必须挂载iterator方法, 这个方法会返回一个带有next方法的对象,不断调用这个next方法就可以实现遍历, next方法返回的对象内部的value 为当前遍历的键值对. done表示循环是否结束 )
  2. const set = new Set(['foo', 'bar', 'baz'])
  4. const iterator = set[Symbol.iterator]()
  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())
  12. while (true) {
  13.   const current = iterator.next()
  14.   if (current.done) {
  15.     break // 迭代已经结束了，没必要继续了
  16.   }
  17.   console.log(current.value)
  18. }

实现可迭代接口（Iterable）

  1. // const obj = {
  2. //   [Symbol.iterator]: function () {
  3. //     return {
  4. //       next: function () {
  5. //         return {
  6. //           value: 'zce',
  7. //           done: true
  8. //         }
  9. //       }
  10. //     }
  11. //   }
  12. // }
  14. const obj = {
  15.   store: ['foo', 'bar', 'baz'],
  17.   [Symbol.iterator]: function () {
  18.     let index = 0
  19.     const self = this
  21.     return {
  22.       next: function () {
  23.         const result = {
  24.           value: self.store[index],
  25.           done: index >= self.store.length
  26.         }
  27.         index++
  28.         return result
  29.       }
  30.     }
  31.   }
  32. }
  34. for (const item of obj) {
  35.   console.log('循环体', item)
  36. }

迭代器设计模式

  2. // 场景：你我协同开发一个任务清单应用
  4. // 我的代码 ===============================
  6. const todos = {
  7.   life: ['吃饭', '睡觉', '打豆豆'],
  8.   learn: ['语文', '数学', '外语'],
  9.   work: ['喝茶'],
  11.   // 提供统一遍历访问接口
  12.   each: function (callback) {
  13.     const all = [].concat(this.life, this.learn, this.work)
  14.     for (const item of all) {
  15.       callback(item)
  16.     }
  17.   },
  19.   // 提供迭代器（ES2015 统一遍历访问接口）
  20.   [Symbol.iterator]: function () {
  21.     const all = [...this.life, ...this.learn, ...this.work]
  22.     let index = 0
  23.     return {
  24.       next: function () {
  25.         return {
  26.           value: all[index],
  27.           done: index++ >= all.length
  28.         }
  29.       }
  30.     }
  31.   }
  32. }
  34. // 你的代码 ===============================
  36. // for (const item of todos.life) {
  37. //   console.log(item)
  38. // }
  39. // for (const item of todos.learn) {
  40. //   console.log(item)
  41. // }
  42. // for (const item of todos.work) {
  43. //   console.log(item)
  44. // }
  46. todos.each(function (item) {
  47.   console.log(item)
  48. })
  50. console.log('-------------------------------')
  52. for (const item of todos) {
  53.   console.log(item)
  54. }

Generator 函数

  • 在函数方法名前加星号( * )
  • yield会暂停执行, 后面的值会作为构造器next()方法返回
  2. // function * foo () {
  3. //   console.log('zce')
  4. //   return 100
  5. // }
  7. // const result = foo()
  8. // console.log(result.next())
  10. function * foo () {
  11.   console.log('1111')
  12.   yield 100
  13.   console.log('2222')
  14.   yield 200
  15.   console.log('3333')
  16.   yield 300
  17. }
  19. const generator = foo()
  21. console.log(generator.next()) // 第一次调用，函数体开始执行，遇到第一个 yield 暂停
  22. console.log(generator.next()) // 第二次调用，从暂停位置继续，直到遇到下一个 yield 再次暂停
  23. console.log(generator.next()) // 。。。
  24. console.log(generator.next()) // 第四次调用，已经没有需要执行的内容了，所以直接得到 undefined

Generator 应用

  1. // 案例1：发号器
  3. function * createIdMaker () {
  4.   let id = 1
  5.   while (true) {
  6.     yield id++
  7.   }
  8. }
  10. const idMaker = createIdMaker()
  12. console.log(idMaker.next().value)
  13. console.log(idMaker.next().value)
  14. console.log(idMaker.next().value)
  15. console.log(idMaker.next().value)
  17. // 案例2：使用 Generator 函数实现 iterator 方法
  19. const todos = {
  20.   life: ['吃饭', '睡觉', '打豆豆'],
  21.   learn: ['语文', '数学', '外语'],
  22.   work: ['喝茶'],
  23.   [Symbol.iterator]: function * () {
  24.     const all = [...this.life, ...this.learn, ...this.work]
  25.     for (const item of all) {
  26.       yield item
  27.     }
  28.   }
  29. }
  31. for (const item of todos) {
  32.   console.log(item)
  33. }

ECMAScript 2016

  • Array.prototype.includes
  • 指数运算符
  2. // Array.prototype.includes -----------------------------------
  4. // const arr = ['foo', 1, NaN, false]
  6. // 找到返回元素下标
  7. // console.log(arr.indexOf('foo'))
  8. // 找不到返回 -1
  9. // console.log(arr.indexOf('bar'))
  10. // 无法找到数组中的 NaN
  11. // console.log(arr.indexOf(NaN))
  13. // 直接返回是否存在指定元素
  14. // console.log(arr.includes('foo'))
  15. // 能够查找 NaN
  16. // console.log(arr.includes(NaN))
  18. // 指数运算符 ---------------------------------------------------
  20. // console.log(Math.pow(2, 10))
  22. console.log(2 ** 10)

ECMAScript 2017

  • Object.values (值数组)
  • Object.entries (键值对数组)
  • Object.getOwnPropertyDescriptors
  • String.prototype.padStart / String.prototype.padEnd
  • 在函数参数中添加尾逗号
  • async/await
  2. // const obj = {
  3. //   foo: 'value1',
  4. //   bar: 'value2'
  5. // }
  7. // Object.values -----------------------------------------------------------
  9. // console.log(Object.values(obj))
  11. // Object.entries ----------------------------------------------------------
  13. // console.log(Object.entries(obj))
  15. // for (const [key, value] of Object.entries(obj)) {
  16. //   console.log(key, value)
  17. // }
  19. // console.log(new Map(Object.entries(obj)))
  21. // Object.getOwnPropertyDescriptors ----------------------------------------
  23. // const p1 = {
  24. //   firstName: 'Lei',
  25. //   lastName: 'Wang',
  26. //   get fullName () {
  27. //     return this.firstName + ' ' + this.lastName
  28. //   }
  29. // }
  31. // // console.log(p1.fullName)
  33. // // const p2 = Object.assign({}, p1)
  34. // // p2.firstName = 'zce'
  35. // // console.log(p2)
  37. // const descriptors = Object.getOwnPropertyDescriptors(p1)
  38. // // console.log(descriptors)
  39. // const p2 = Object.defineProperties({}, descriptors)
  40. // p2.firstName = 'zce'
  41. // console.log(p2.fullName)
  43. // String.prototype.padStart / String.prototype.padEnd  --------------------
  45. // const books = {
  46. //   html: 5,
  47. //   css: 16,
  48. //   javascript: 128
  49. // }
  51. // // for (const [name, count] of Object.entries(books)) {
  52. // //   console.log(name, count)
  53. // // }
  55. // for (const [name, count] of Object.entries(books)) {
  56. //   console.log(`${name.padEnd(16, '-')}|${count.toString().padStart(3, '0')}`)
  57. // }
  59. // 在函数参数中添加尾逗号  -----------------------------------------------------
  61. // function foo (
  62. //   bar,
  63. //   baz,
  64. // ) {
  66. // }
  68. // const arr = [
  69. //   100,
  70. //   200,
  71. //   300,
  72. // ]
  73. // const arr = [
  74. //   100,
  75. //   200,
  76. //   300,
  77. //   400,
  78. // ]
  79. // const arr = [
  80. //   100,
  81. //   200,
  82. //   300
  83. // ]
  84. // const arr = [
  85. //   100,
  86. //   200,
  87. //   300,
  88. //   400
  89. // ]