JavaScript | 再读ES6文档

再读ES6文档的相关笔记

ES6 (ECMAScript 6.0) 发布于2015年6月,泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018、ES2019、ES2020

1. let const 替代之前的var, const定义常量, let为js新增了块级作用域,

   ES6 申明变量的6种方法: var / function / let / const / import / class

   顶层对象 window / global , 在不同平台获取顶层对象通用 globalThis

2. 模版字符串 “xx” + this.xx + “xx” 可替代为 ‘xx${this.xx}xx’

3. 函数的拓展

   1.可设置函数默认值 若调用方法没有传值,则使用设置的默认值
   	function animal (name, type = 'cat') {}
   2.rest参数,用于获取多余参数,将变量的多余参数防暑数组中,rest 参数之后不能再有其他参数
   	function add (...values) { values // [2,5,3] }
   	add(2,5,3)
   3.name属性
   	function foo() {}
   	foo.name // 'foo'
   4.箭头函数,及箭头函数的this对象绑定
   5.尾递归 
   6.复制数组 let a =[1,2] let b = [...a]
   7.合并数组 [...arr1, ...arr2, ...arr3]
   8.拆分数组 [a, ...rest] = arr
   9.[...'hello'] // ['h','e','l','l','o']
   10.类似数组对象转数组(含 set,Map)
   	let oj = {"0":"a","1":"b","2":"c",length:3}
   	var arr = Array.from(oj) // ['a','b','c']
   	Array.from([1, 2, 3], (x) => x * x) // [1,4,9]
   11.copyWithin
   	[1, 2, 3, 4, 5].copyWithin(0, 3) // [4,5,3,4,5]
   12.find // findIndex
   	[1, 4, -5, 10].find((n, index, arr) => n < 0) // -5 返回符合要求的第一个数值
   	[1, 4, -5, 10].findIndex((n, index, arr) => n < 0) // 2 返回符合要求的第一个数值的数组编号
   13.填充数组 fill  
   	new Arry(3).fill(7) => [7,7,7] // 填充全部
   	['a','b','c'].fill(7,1,2) => ['a',7,'c'] // 填充指定区间
   14.entries()，keys() 和 values()	
   	keys() 键名 values() 键值 entries() 键值对
   15.includes() | indexOf()
   16. flat() | flatMap()
   	[1,2,[3,4]].flat() // [1,2,3,4]
   	flat只拉平一层 [1,2,[3,[4,5]]].flat() // [1,2,3,[4,5]]
   	要全部拉平则需要 [1,2,[3,[4,5]]].flat(Infinity) // [1,2,3,4,5]
   	flatMap() 方法对原数组的每个成员执行一个函数
   	[2,3,4].flatMap((x)=> [x,x*2]) // [2,4,3,6,4,8]

4. 对象的新增方法

   1.assign 同于对象的合并
   	const target = {a:1}
   	const source = {b:2}
   	const source = {c:3}
   	Object.assign(target,source1,source2)
   	target // {a:1,b:1,c:3}
   	目标对象于源对象有同名属性,后面的属性会覆盖前面的属性
   	浅拷贝 :
   	const obj1 = {a:{b:1}}
   	const obj2 = Object.assign({},obj1)
   	处理数组: Object.assign([1,2,3],[4,5])  // [4,5,3]
   2.

5. 扩展运算符

   let a = [1,2,3]
   console.log(a) // [1,2,3]
   console.log(...a) // 1 2 3
   let b = {a: 1, b: 2}
   console.log({c:3, ... b}) // {a: 1,b: 2,c: 3}

6. apply 和 call

   都是对象本身没有某个属性或者方法,去引用其他对象的属性或方法
   apply this指向是 参数数组
   call this的指向是 参数1,参数2,参数3
   eg:
   obj.work.apply(window,[x1,x2,x3])
   obj.work.call(window,x1,x2,x3)

7. 表达式解构

   let cat = 'ken'
   let dog = 'lili'
   let zoo = {cat: cat, dog: dog}
   可直接写成
   let zoo = {cat, dog}
   反过来可这么用
   let {cat, dog} = zoo

8. 新增数据类型 Set(集) 和 WeakSet(弱集)

   Set 中不能包含相同元素
   WeakSet 使用对元素有严格要求,必须是Object,所以在使用的时候要使用
   let wk = new WeakSet()
   let foo = new String("bar")
   let pi = new Number("3.14")
   只能add这样的对象
   wk.add(foo)
   wk.add(pi)
   wk.has(foo) // => true
   如果元素的引用已被全部解除，则该元素就会被删除
   foo = null
   wk.has(foo)
   wk.delete(pi)
   wk.clear()
   .keys() .values() .entries()
   使用Set来进行数组去重 let arr1 = [...new Set(arr)]

9. 新增数据类型Map和weakMap

   以 key/Value 的键值对结构,相比Object对象来说,key 必须是字符串或者数组,Map不存在这个限制,可以使用任意对象作为key
   set / has / get 
   WeakMap 和 WeakSet 很类似，只不过 WeakMap 的键和值都会检查变量引用，只要其一的引用全被解除，该键值对就会被删除。
   .size 返回Map结构的成员总数

10. 以语法糖来定义类

class xx {
  	constructor (x,y,z) {
      this.x = x
      this.y = y
      this.z = z
  	}
  	
  	doWrok() {
      ...
  	}
}

11. 继承

12. class yy extens xx {
          constructor(x1, y1, z1) {
              super(x1,y1,z1)
          }
    }
    13. ES6的类机制依然存在问题
    1.不支持私有属性
    2.不支持前置属性定义,但是可用get和set实现
    3.不支持多重继承
    3.没有类似协议或者接口等概念
    14. 生成器(Generator)
    function *work() {}
    可以看作为与JavaScript主线程分离运行时,可以随时被yield切回主线程(生成器不影响主线程)
    每一次生成器运行时都能被yield带出一个值,使其回到主线程中
    eg:
    function* fibo() {
      let [a, b] = [1, 1]
      yield a
      yield b
      while (true) {
        [a, b] = [b, a + b]
        yield b
      }
    }
    let gen = fibo()
    let arr = []
    for (let i = 0; i < 10; i++) {
      arr.push(gen.next().value)
    }
    console.log(arr) //=> [ 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 ]
    15. 模块化
    1.每个模块只加载一次,每个JS只执行一次,如果下次再去加载同目录下的文件,直接从内存中读取,一个模块就是一个单例
    2.每个模块内申明的变量都是局部变量,不回污染全局作用域
    3.模块内部的变量可以通过export导出
    4.一个模块可以导入别的模块
    16. Promise
    用于解决函数无限嵌套的工具之一
    function dowork() {
          return new Promise((resolve, reject) => {
              if (xx) {
              resolve(value)
              } else {
              reject(err)
              }
          })
    }
    promise对象的三种状态 pending(进行中),fulfilled(已成功),rejected(已失败)
    API: 
    Promise.resolve()
    Promise.reject()
    Promise.prototype.then()
    Promise.prototype.catch()
    Promise.all() // 所有的完成
    Promise.rece() // 竞速,完成一个即可
    Promise.then()
    Promise.finally()
    
    somePromise().then(()=>{}).catch(()=>{})
    17. 头部补全,尾部补全
    'x'.padStart(5,'ab') // 'ababx'
    'x'.padEnd(5,'ab') // 'xabab'
    'x'.padStart(4) // '    x' 此时用空格补全
    '12'.padStart(10,'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10,'YYYY-MM-DD') // "YYYY-09-12"
    18. 数值的拓展
    二进制新写法,前缀0b  eg: 0b111110111 === 503
    Number('0b111') // 7
    Number.isFinite()  // 是否有限
    Number.isNaN() // 是否为NaN
    Number.parseInt()
    Number.parseFloat()
    Number.isInteger() // 判断一个数是否为整数
    Number.EPSILON // js能表示的最小精度
    Number.isSafeInteger() // 是否在-2^53到2^53之间（不含两个端点）
    19. Math的拓展
    Math.trunc() 去掉一个数的小数部分,返回整数部分
    Math.sign() 判断一个数是正数(返回+1),负数(返回-1)还是0(返回0)
    Math.cbrt() 计算一个数的立方根
    Math.hypot(3,4) // 5 返回所有的参数的平方和的平方根
    Math.log10(100) // 2 返回以10为底数的x的对数
    Math.log2(4) // 2 返回以2为底数的x的对数
    指数运算符
    2 ** 2 = 4
    2 ** 3 = 8
    2 ** 3 ** 2 => 2 ** (3 ** 2) 特点之一是右结合,多个指数运算符连用从最右边的开始计算
    a **= 2 => a = a ** 2
    20. 额外
    async await 是ES7 
    String.raw() 方法
    String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'