ES6知识点总结

一些ES6新增的知识点，非全部，主要是不熟悉且常用的。

1. let和const

let 块级作用域造成的暂时性死区，let声明的变量在块内不仅不提升而且块内也不受外部影响，

而且使用typeof也会报Uncaught ReferenceError: Cannot access 'temp' before initialization，代码不会继续执行了。

此时typeof也会变得不安全了，但是对从未声明过的变量typeof时却不会报错

var temp = 123;
if (true) {
  console.info(temp) //Uncaught ReferenceError: Cannot access 'temp' before initialization
  let temp = 456
}

注：在es5时代没有块级作用域，如果有全局变量，花括号内(非函数)在变量声明前使用的时全局变量，"局部变量"只是对已有变量的重新赋值：

var temp = 123;
if(true){
 console.info(temp) // 123
 var temp = 456
 console.info(temp) // 456
}
console.info(temp) // 456

而在函数内部则会提升，在声明前使用局部变量其值为undefined：

var temp = 123;
function fn(){
 console.info(temp) // undefined
 var temp = 456
}
fn()
console.info(temp) // 123

let 要点就是不提升、暂时性死区、块级作用域、不允许重复声明

const 声明时必须初始化，不允许改变值(本质是不允许改变变量指向的内存地址，所有引用类型就不能控制不该更改了)

另外引入全局对象globalThis，可以在任何位置拿到

console.info(globalThis === window) // true

2.变量解构赋值

 声明变量时通过解构方式赋初始值，可以用数组或对象给变量提供默认值，可以不完全结构；

字符串也可以结构为单个字符；

函数参数的解构等；

3.对字符串的一些扩展

3.1 增加遍历器接口

也就是可以使用for of:

for (let c of 'world') {
  console.info(c)  
}

 3.2 引入模板字符串

用反引号（`）标识

可以多行字符串

可以在字符串中嵌入变量

3.3 新增方法

includes、startWith / endsWith、repeat、padStart / padEnd

4. 正则扩展

字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()；

具名组名

5.对数值的扩展

5.1Number上新增方法

Number上增加Number.isFinite()、Number.isNaN()、Number.isInterger()、Number.EPSILON(极小值，JS的精度)

Number.isSafeInterger()

将全局方法parseInt()和parseFloat，移植到Number对象上面

5.2 对Math对象的一些扩展

Math.trunc()   --去掉小数部分

Math.sign()    --判断符号，返回 1、-1、0、-0、NaN

Math.cbrt()    --计算立方根

6.对数组的扩展

增加fill、find、findIndex、entries()、keys()、values()

includes()

flat(n)  -- 将嵌套数组展开，n参数为展开层数，可用Infinity

7.函数的扩展

7.1 新变化

可以使用默认参数，rest参数，函数内部使用strict严格模式，增加name属性；

参数可以使用尾逗号，和数组与对象一致；

catch可以省略()及参数

7.2 箭头函数

简洁，简化回调函数

箭头函数有几个使用注意点：

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

 8.对象扩展

8.1 简洁表示方式

允许大括号内直接使用变量和函数；

可以使用...扩展运算符，将对象的属性拷贝到当前对象中；

链接判断运算符  ?

let user = {
  name: 'xcvu',
  age: 27
}
// ES5判断一个对象的某属性是否存在,需要逐层判断
user && user.hobby && user.hobby.sleep || 'default'
// ES6可以这样写
console.info(user?.name || 'pig')
console.info(user?.hobby?.sleep || 'yes')

 null 判断运算符 ??

// 使用 || 判断时属性值为false就会使用默认值，这样不能输出0、false
 console.info(obj.a || 'a ||') // a ||
 console.info(obj.b || 'b ||') // b ||
 console.info(obj.c || 'c ||') // c ||
 console.info(obj.d || 'd ||') // d ||
// 使用 ?? 判断时属性值为null或undefined时才会使用默认值，这样可以能输出0、false
 console.info(obj.a ?? 'a ??') // fasle
 console.info(obj.b ?? 'b ??') // 0
 console.info(obj.c ?? 'c ??') // 注:输出为空格
 console.info(obj.d ?? 'd ??') // d ??

8.2 对象新增方法

增加了Object.is()   严格相等 ===

Object.assign(target, source1, source2) 合并对象，浅拷贝(source的某属性为对象是，target得到的是引用)，同名属性替换。

Object.keys()、Object.values()、Object.entries()

Object.fromEntries()从键值对数组创建对象；

super关键字指向原型对象

 9.Symbol

独一无二的值，是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

Symbol作为属性名时不能通过for...in、for...of遍历，也不能通过Object.keys()、Object.getOwnPropertyNames获取到。

可以通过Object.getOwnPropertySymbols()方法获取所有的Symbol属性名

10. Set和Map

10.1 Set

类似数组，但值不会重复

let s = new Set([4, 5, 6])
s.add(1)
s.add(2)
s.add(1)
console.info(s) // {4, 5, 6, 1, 2}
console.info(s.has(1)) // true
console.info(s.size) // 5
s.delete(2)
s.clear()
console.info(s.size) // 0
// 可以使用keys()，values()，entries()， forEach()

let arr = [...new Set([1, 2, 3, 4, '3', 2])] // 数组去重, 用严格相等===判断重复
console.info(arr) // [1, 2, 3, 4, "3"]
let str = 'asdfasdfredc'
str = [...new Set(str)].join('') // 字符串去重
console.info(str) // asdfrec

WeakSet 可以接受一个数组或类似数组的对象作为参数，对象为弱引用，不能遍历，不会造成内存泄漏。

10.2 Map

类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const fn = function(){}
const m = new Map().set(1, 'a').set(undefined, 'nah').set(fn, 'func')
console.info(m.get(fn)) // func
console.info(m.has(fn)) // true
console.info(m.size) // 3
// delete，clear，keys()，values()，entries()， forEach()

// 扩展运算符（...）转为数组
let arr = [...m]
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj)); // 对象转map

WeakMap不能遍历，无size属性，只接受对象作为键名(null除外)，不会造成内存泄漏。

11. 遍历器Iterator

 是一种接口，为各种不同的数据结构提供统一的访问机制，主要供for..of使用。

Array、Map、Set、String、TypedArray类型化数组、函数的Arguments参数、NodeList默认具有Iterator接口，对象默认没有Iterator接口

默认的 Iterator 接口部署在数据结构的Symbol.iterator属性上, 该属性返回当前数据结构默认的遍历器生成函数。

调用Iterator接口的一些情形：

(1) 对数组和Set结构进行解构赋值

let [x, y] = new Set([1, 2])

(2) 扩展运算符

[...'Hello']

(3) yield *

(4) 数组的遍历会调用遍历器接口

12. Generator、Promise、Async/Await

generator

用*表示函数为generator函数，内部用yield暂停代码的执行，调用时通过next()恢复执行，可以用来实现异步编程。

function * generator(){
  console.info('foo')
  let x = yield console.info('yield 1') // 第一次调用next()方法会执行到yield后面的语句
  console.info('x:' + x) // yield语句的返回值是下一个next()中传递的参数
  let y = yield 'b' // yield后面的值是 next()方法得到的返回值中的value，需要注意不是yield语句的返回值(yield语句赋值给变量的值)
  console.info('y:' + y)
  let z = yield 'c'
  console.info('z:' + z)
  return 'xxxx'
}
let g = generator()
console.info(g.next())   // { value: undefined, done: false }
console.info(g.next(123)) // yield语句后的值为next方法得到的返回值的value { value: 'b', done: false }
console.info(g.next(46)) // next方法传递的参数是上一个yield语句的返回值
console.info(g.next(78))
console.info(g.next(6))   // 执行完所有的yield语句后 done为true { value: undefined, done: true }

promise

Promise接受一个函数作为参数，这个函数有两个参数：resolve和reject。

resolve和reject也是函数，它们由Promise提供。

resolve函数将Promise对象的状态从pending变为resolved，在异步操作成功时调用，将异步操作结果作为参数传递出去；

reject函数将Promise对象的状态从pending变为rejected，在异步操作失败时调用，将异步操作报出的错误作为参数传递出去。

then方法：

Promise实例生成之后，可以使用then方法分别指定resolved和rejected状态的回调函数，

then方法接收两个回调函数，

第一个回调函数是Promise对象的状态变为resolved时调用，（也就是resolve函数调用之后调用，接收Promise传递出来的参数）

第二个回调函数是Promise对象的状态变为rejected时调用

Promise新建后就会立即执行：

 Promise会立即执行所以先输出‘I am in Promise’，

而then方法指定的回调会在所有同步任务执行完之后才执行。

Promise的结果可以多次获得。

async / await

是promise的语法糖

async function getUser() {
    let user = await fetchUser()
    retrun user
}

const user = getUser()
console.log(user)

下面是一个完整的async/await 封装异步请求的示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async / await</title>
</head>
<body>
  
</body>
<script>
  let url = 'https://api.github.com/repos/github/hub/git/ref/heads/2.7-stable'
  // 1.回调函数版
  function ajaxData(url, callback){
    let xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.send()
    xhr.onreadystatechange = () => {
      if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 304){
          callback(xhr.response)
        }
      }
    }
  }
  ajaxData(url, (data)=>{
    console.info(data)
  })

  // 2.promise版
  function ajaxDataPromise(url){
    return new Promise((resolve, reject)=>{
      let xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.send()
      xhr.onreadystatechange = () => {
        if(xhr.readyState == 4){
          if(xhr.status >= 200 && xhr.status < 304){
            resolve(xhr.response)
          }
        }
      }
      xhr.onerror = () => {
        reject(xhr.status)
      }
    })
  }
  ajaxDataPromise(url).then((value) => {
    console.info(value)
  })

  // 2.1 使用fetch简化的promise版
  // 因为fetch返回的是promise对象
  function fetchData(url){
    return fetch(url)
    .then(response => response.json())
  }

  fetchData(url).then(value => {
    console.info(value.object.sha)
  })

  // 3. async / await 版
  // await必须放在async函数中，不能直接将结果返回，因为是一个promise对象
  async function getDataAsync(url) {
    let result = await fetch(url).then(response => response.json())
    console.info(result)
    console.info(result.object.sha)
  }
  getDataAsync(url)
</script>
</html>