1.let 命令

let 用來申明變量, 但與傳統(tǒng)的var有所不同

• 變量不能重復(fù)申明

let star='羅志祥';
let star='小豬'  //error

• let 有塊級作用域

{
    let girl='周揚青'
}
console.log(girl) //error

• 不存在變量提前

console.log(song)   //error
let song='戀愛達人'

• 不影響作用域鏈

let school='abc'
function fn(){
    console.log(school) //abc
}

在雙層for循環(huán)中 , 及時計數(shù)器相同,也能互不影響

let arr = [1,2,3]

for(let i = 0;i < arr.length; i++){
    for(let i = 0;i < arr.length; i++){
        console.log(i)
        //打印9 次 , 一次為012012012
    }
}

2.const

const 一般用于申明常量

• 一定要賦初始值
• 一般常量使用大寫（潛規(guī)則）
• 也具有塊級作用域(與let一樣)
• 常量的值不能修改

const a = 1
a = 2 //error

但是可以修改原有屬性中的屬性值

const obj = {
  name: '張三',
  car: {
    pace: '100W',
    name: '奧迪rs7',
  },
}

obj.name = '李四' 

2.解構(gòu)賦值

ES6 允許按照一定模式從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構(gòu)賦值。

• 數(shù)組的解構(gòu)

const F4 = ['小沈陽', '劉能', '趙四', '宋小寶']
let [a, b, c, d] = F4
console.log(a) //小沈陽
console.log(b) //劉能
console.log(c) //趙四
console.log(d)  //宋小寶

• 對象的解構(gòu)

const F4 = {
  name: '趙本山',
  age: '不詳',
  xiaopin: function () {
    console.log('我可以演小品')
  },
}
let { name, age, xiaopin } = F4
console.log(name) //趙本山
console.log(age) //不詳
console.log(xiaopin) //[Function: xiaopin]

3.模板字符串

• 采用 `` 的形式定義字符串
  申明

let str = `我也是一個字符串`
console.log(str, typeof str) //我也是一個字符串 string

內(nèi)容中可以直接出現(xiàn)換行符

let str = `<ul>
            <li>冉海鋒</li>
            <li>冉海鋒</li>
           </ul>`；

變量拼接

let lovest = '冉海鋒';
let out = `${lovest}是最帥的`;
console.log(out)  //冉海鋒是最帥的

4.對象的簡化寫法

• ES6允許在大括號里面，直接寫入變量和函數(shù)，作為對象的屬性和方法,這樣的書寫更加簡潔

let name = 'aaa'
let change = function () {
  console.log('aaa')
}

const school = {
  name,
  change,
  improve() {
    console.log('bbb')
  },
}
console.log(school)
/**
 * {
    name: 'aaa',
    change: [Function: change],
    improve: [Function: improve]
  }
 */

5. 箭頭函數(shù)

• ES6允許使用箭頭（=>）定義函數(shù)
  箭頭函數(shù)中不會創(chuàng)建自己的this,始終指向上一層作用域

function A() {
  console.log(this.name)
}

let B = () => {
  console.log(this.name)
}

name = '拉鉤教育'
const school = {
  name: 'lagou',
}

//直接調(diào)用
A() //拉鉤教育
B() //undefined

• 不能作為構(gòu)造實例化對象

let A = (name, age) => {
  this.name = name
  this.age = age
}
let me = new A('xiao', 123) //error

• 不能使用arguments變量

let fn = () => {
  console.log(arguments)
}
fn(1, 2, 3) //error

省略小括號，當(dāng)形參有且只有一個的時候

let add = n => {
    return n + 1;
}

省略花括號，當(dāng)代碼體只有一條語句的時候，此時return也必須省略

let add = n => n+1;

6.函數(shù)參數(shù)默認值

• 可以給形參賦初始值，一般位置要靠后（潛規(guī)則）

function add(a,b,c=12){
    return a+b+c; 
}
let result = add (1,2);
console.log(result) // 15

與解構(gòu)賦值結(jié)合

function A({host='127.0.0.1',username,password,port}){
    console.log(host+username+password+port)
}
A({
    username:'ran',
    password:'123456',
    port:3306
})

7.rest參數(shù)

let fn = (...args) => {
  console.log(args) // [ 1, 2, 3 ]
}

fn(1, 2, 3)

rest參數(shù) 一般放在最后

let fn = (a, ...args) => {
  console.log(a) //1
  console.log(args) // [  2, 3 ]
}

fn(1, 2, 3)

如果不是放在最后則會報錯

let fn = (...args,a) => { //error
  console.log(a) 
  console.log(args)
}
fn(1, 2, 3)

可以對rest 參數(shù)重新賦值

let fn = (...args) => {
  args = 1
  console.log(args) //1
}
fn(1, 2, 3)

8.擴展運算符

• 擴展運算符與rest參數(shù)一樣 都是用...表示
  擴展運算符是能將數(shù)組展開

let arr = [1, 2, 3]
console.log(...arr) //1 2 3

數(shù)組的合并

const A = ['aa','bb'];
const B = ['cc','dd'];
const C = [...A,...B];
console.log(C)   //[aa,bb,cc,dd]

數(shù)組的克隆

const A = ['a','b','c'];
const B = [...A];
console.log(B)   //[a,b,c]

將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組

const A = documents.querySelectorAll('div');
const B = [...A];
console.log(B) // [div,div,div]

擴展運算符,也可以用來展開對象和字符串等, 方法與數(shù)組類似
值得注意的是, 擴展運算符在拷貝對象時為部分只有第一層是深拷貝其他層級為淺拷貝

let person = {
  name: '張三',
  age: 18,
  car: {
    name: '奧迪RS7',
  },
}

let person2 = { ...person }

person.name = '李四'
console.log(person) //{ name: '李四', age: 18, car: { name: '奧迪RS7' } }
console.log(person2) // { name: '張三', age: 18, car: { name: '奧迪RS7' } }

person.car.name = 'AMG c63'
console.log(person) //{ name: '李四', age: 18, car: { name: 'AMG c63' } }
console.log(person2) // { name: '李四', age: 18, car: { name: 'AMG c63' } }

9. Symbol

ES6引入了一種新的原始數(shù)據(jù)類型 Symbol，表示獨一無二的值。它是JavaScript語言的第七種數(shù)據(jù)類型，是一種類似于字符串的數(shù)據(jù)類型。

Symbol特點：

• Symbol的值是唯一的，用來解決命名沖突的問題
• Symbol值不能與其他數(shù)據(jù)進行運算
• Symbol定義的對象屬性不能使用for…in循環(huán)遍歷，但是可以使用Reflect.ownKeys或來獲取對象的所有鍵名,或者通過Object.getOwnPropertySymbols來獲取所有Symbol鍵名
  創(chuàng)建

let s = Symbol('aa');
let s2= Symbol('aa');
console.log(s===s2)   //false

let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
comsole.log(s3===s4) ///true

不能與其他數(shù)據(jù)進行運算

let result = s + 100  //error
let result = s > 100  //error
let result = s + s  //error

Symbol內(nèi)置值

class Person {
    static [Symbol.hasInstance](param){
        console.log(param);
        console.log("我被用來檢測了")；
        return false;
    }
}
let o = {};
console.log(o instanceof Person); //我被用來檢測了，false

給對象添加方法方式一：

let game = {
  name: 'ran',
}
let methods = {
  up: Symbol(),
  down: Symbol(),
}
game[methods.up] = function () {
  console.log('aaa')
}
game[methods.down] = function () {
  console.log('bbb')
}
console.log(game) // name: 'ran',Symbol(),Symbol()

給對象添加方法方式二

let youxi = {
  name: '狼人殺',
  [Symbol('say')]: function () {
    console.log('阿薩德')
  },
}
console.log(youxi) // name:'狼人殺',Symbol(say)

10.迭代器

• 迭代器(lterator)是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制。任何數(shù)據(jù)結(jié)構(gòu)只要部署lterator接口，就可以完成遍歷操作。
• 原理：創(chuàng)建一個指針對象，指向數(shù)據(jù)結(jié)構(gòu)的起始位置，第一次調(diào)用==next（）==方法，指針自動指向數(shù)據(jù)結(jié)構(gòu)第一個成員，接下來不斷調(diào)用next（），指針一直往后移動，直到指向最后一個成員，沒調(diào)用next（）返回一個包含value和done屬性的對象

const arr = ['AA', 'BB', 'CC', 'DD']
let iterator = arr[Symbol.iterator]()
console.log(iterator.next()) //{{value:'AA'，done:false}}
console.log(iterator.next()) //{{value:'BB'，done:false}}

const banji = {
  name: '終極一班',
  stus: ['aa', 'bb', 'cc', 'dd'],
  [Symbol.iterator]() {
    let index = 0
    let _this = this
    return {
      next: () => {
        if (index < this.stus.length) {
          const result = { value: _this.stus[index], done: false }
          //下標(biāo)自增
          index++
          //返回結(jié)果
          return result
        } else {
          return { value: undefined, done: true }
        }
      },
    }
  },
}
for (let v of banji) {
  console.log(v) // aa bb cc dd
}

11.生成器

• 生成器函數(shù)是ES6提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同，是一種特殊的函數(shù)

function* gen() {
  //函數(shù)名和function中間有一個 *
  yield '耳朵' //yield是函數(shù)代碼的分隔符
  yield '尾巴'
  yield '真奇怪'
}
let iterator = gen()
console.log(iterator.next())
//{value:'耳朵',done:false} next（）執(zhí)行第一段，并且返回yield后面的值
console.log(iterator.next()) //{value:'尾巴',done:false}
console.log(iterator.next()) //{value:'真奇怪',done:false}

生成器函數(shù)的參數(shù)傳遞

function* gen(args) {
  console.log(args)
  let one = yield 111
  console.log(one)
  let two = yield 222
  console.log(two)
  let three = yield 333
  console.log(three)
}

let iterator = gen('AAA')
console.log(iterator.next()) //AAA  { value: 111, done: false }
console.log(iterator.next('BBB')) //BBB  { value: 111, done: false }
console.log(iterator.next('CCC')) //ccc  { value: 111, done: false }
console.log(iterator.next('DDD')) //DDD  { value: undefined, done: true }

用生成器函數(shù)的方式解決回調(diào)地獄問題

function one() {
  setTimeout(() => {
    console.log('111')
    iterator.next()
  }, 1000)
}
function two() {
  setTimeout(() => {
    console.log('222')
    iterator.next()
  }, 2000)
}
function three() {
  setTimeout(() => {
    console.log('333')
    iterator.next()
  }, 3000)
}

function* gen() {
  yield one()
  yield two()
  yield three()
}

let iterator = gen()
iterator.next() // 111 222 333

模擬異步獲取數(shù)據(jù)

function one() {
  setTimeout(() => {
    let data = '用戶數(shù)據(jù)'
    iterator.next(data)
  }, 1000)
}
function two() {
  setTimeout(() => {
    let data = '訂單數(shù)據(jù)'
    iterator.next(data)
  }, 2000)
}
function three() {
  setTimeout(() => {
    let data = '商品數(shù)據(jù)'
    iterator.next(data)
  }, 3000)
}

function* gen() {
  let users = yield one()
  console.log(users)
  let orders = yield two()
  console.log(orders)
  let goods = yield three()
  console.log(goods)
}

let iterator = gen()
iterator.next() // 用戶數(shù)據(jù) 訂單數(shù)據(jù) 商品數(shù)據(jù)

12.Promise

成功回調(diào)

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    let data = '數(shù)據(jù)庫數(shù)據(jù)'
    // resolve(data);
    reject(data)
  })
})

p.then(
  function (value) {
    //成功則執(zhí)行第一個回調(diào)函數(shù)，失敗則執(zhí)行第二個
    console.log(value) //數(shù)據(jù)庫數(shù)據(jù)
  },
  function (reason) {
    console.error(reason)
  }
)

失敗回調(diào)

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    let data = '數(shù)據(jù)庫數(shù)據(jù)'
    resolve(data)
    // reject(data)
  })
})

p.then(
  function (value) {
    //成功則執(zhí)行第一個回調(diào)函數(shù)，失敗則執(zhí)行第二個
    console.log(value)
  },
  function (reason) {
    console.error(reason) //數(shù)據(jù)庫數(shù)據(jù)
  }
)

使用promise封裝ajax請求

function ajax (data) {
  return new Promise((resolve, rejects) => {
    // 創(chuàng)建一個XMLHttpRequest對象去發(fā)送一個請求
    const xhr = new XMLHttpRequest()
    // 判斷請求類型，請求的地址就是參數(shù)傳遞的url
    if(data.methods==="post"){
       xhr.open(data.methods, data.url, true);
          xhr.send(JSON.stringify(data.param));
       }else{
          xhr.open(data.methods, data.url, true);
          xhr.send();
       }
     }
    // 設(shè)置返回的類型是json，是HTML5的新特性
    // 我們在請求之后拿到的是json對象，而不是字符串
    xhr.responseType = 'json'
    // html5中提供的新事件,請求完成之后（readyState為4）才會執(zhí)行
    xhr.onload = () => {
      if(this.status === 200) {
        // 請求成功將請求結(jié)果返回
        resolve(this.response)
      } else {
        // 請求失敗，創(chuàng)建一個錯誤對象，返回錯誤文本
        rejects(new Error(this.statusText))
      }
    }
    // 開始執(zhí)行異步請求
    xhr.send()
  })
}

//發(fā)送請求
let data = {
  url: '', //請求地址
  methods: 'post',
  param: formData,
}
let p = ajax(data)
p.then(
  (res) => {
    //請求成功
    res.data.forEach((val, index) => {
      cent.innerHTML += `<span id='' class='zxz-portry_content_span'>${val}</span>`
    })
  },
  (reason) => {
    //請求失敗
    alert(reason.msg)
  }
)

13.Set集合

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)set(集合）。它類似于數(shù)組，但成員的值都是唯一的，集合實現(xiàn)了iterator接口，所以可以使用「擴展運算符』和「 for…of…』進行遍歷，集合的屬性和方法:

• size返回集合的元素個數(shù)
• add增加一個新元素，返回當(dāng)前集合
• delete刪除元素，返回boolean值has檢測集合中是否包含某個元素，返回boolean值

let s = new Set()
let s2 = new Set(['A', 'B', 'C', 'D'])

//元素個數(shù)
console.log(s2.size) //4

//添加新的元素
s2.add('E')

//刪除元素
s2.delete('A')

//檢測
console.log(s2.has('C')) //true

//清空
s2.clear()

console.log(s2) //Set(0) {}

Set 常用與數(shù)組去重

let arr = [1, 2, 3, 4, 5, 1, 2]

console.log(new Set(arr)) //Set(5) { 1, 2, 3, 4, 5 }

得到的是個Set集合, 如要轉(zhuǎn)換成數(shù)組,可通過擴展運算符

let arr = [1, 2, 3, 4, 5, 1, 2]

console.log([...new Set(arr)]) //[ 1, 2, 3, 4, 5 ]

深度數(shù)組去重

let arr = [{ name: '123' }, { name: '123' }, { name: '234' }]

//先將數(shù)組中的元素全部轉(zhuǎn)為字符串
let arr2 = arr.map((item) => JSON.stringify(item))
//將數(shù)組去重后轉(zhuǎn)為對象
let arr3 = [...new Set(arr2)].map((item) => JSON.parse(item))
console.log(arr3) // [ { name: '123' }, { name: '234' } ]

14. Map集合

ES6提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對象，也是鍵值對的集合。但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。Map也實現(xiàn)了iterator接口，所以可以使用『擴展運算符』和「for…of…』進行遍歷。Map的屬性和方法。

let m = new Map()
m.set('name', 'ran')
m.set('change', () => {
  console.log('改變！')
})
let key = {
  school: 'atguigu',
}
m.set(key, ['成都', '西安'])

//size
console.log(m.size) //3

//刪除
m.delete('name')

//獲取
console.log(m.get('change')) //[Function (anonymous)]

// //清空
// m.clear()

//遍歷
for (let v of m) {
  console.log(v)
  //[ 'change', [Function (anonymous)] ]
  //  [ { school: 'atguigu' }, [ '成都', '西安' ] ]
}

15. Class

ES6提供了更接近傳統(tǒng)語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關(guān)鍵字，可以定義類?；旧希珽S6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。

class person {
  constructor(brand, price) {
    this.brand = brand
    this.price = price
  }

  call() {
    console.log('我可以打電話')
  }
}

let A = new person('1+', 1999)
console.log(A) //person { brand: '1+', price: 1999 }

靜態(tài)成員

class Person {
  static name = '手機'
}
let nokia = new Person()
//靜態(tài)成員無法通過實例化訪問
console.log(nokia.name) //undefined

console.log(Person.name) //手機

構(gòu)造函數(shù)繼承

function Phone(brand, price) {
  this.brand = brand
  this.price = price
}
Phone.prototype.call = function () {
  console.log('我可以打電話')
}
function SmartPhone(brand, price, color, size) {
  Phone.call(this, brand, price)
  this.color = color
  this.size = size
}

//設(shè)置子級構(gòu)造函數(shù)原型
SmartPhone.prototype = new Phone()
SmartPhone.prototype.constructor = SmartPhone

//聲明子類方法
SmartPhone.prototype.photo = function () {
  console.log('我可以玩游戲')
}
const phone = new SmartPhone('錘子', 2499, '黑色', '5.5inch')
console.log(phone) //SmartPhone { brand: '錘子', price: 2499, color: '黑色', size: '5.5inch' }

類的繼承

class Phone {
  constructor(brand, price) {
    this.brand = brand
    this.price = price
  }
  //父類的成員屬性
  call() {
    console.log('我可以打電話')
  }
}
class SmartPhone extends Phone {
  constructor(brand, price, color, size) {
    super(brand, price)
    this.color = color
    this.size = size
  }
  photo() {
    console.log('拍照')
  }

  playGame() {
    console.log('打游戲')
  }
}
const phone = new SmartPhone('小米', 1999, '黑色', '4.7inch')
phone.call() //我可以打電話
phone.photo() //拍照
phone.playGame() //打游戲

子類對父類方法的重寫

class Phone {
  constructor(brand, price) {
    this.brand = brand
    this.price = price
  }
  //父類的成員屬性
  call() {
    console.log('我可以打電話')
  }
}
class SmartPhone extends Phone {
  constructor(brand, price, color, size) {
    super(brand, price)
    this.color = color
    this.size = size
  }
  photo() {
    console.log('拍照')
  }

  playGame() {
    console.log('打游戲')
  }

  //重寫！
  call() {
    console.log('我可以進行視頻通話')
  }
}
const phone = new SmartPhone('小米', 1999, '黑色', '4.7inch')
phone.call() //我可以進行視頻通話
phone.photo() //拍照
phone.playGame() //打游戲

get 和set的設(shè)置

class Phone {
  get price() {
    console.log('價格被讀取了')
    return 'I LOVE YOU'
  }

  set price(val) {
    console.log('價格被修改了')
    return val
  }
}

//實例化對象
let s = new Phone()
s.price = 12 //價格被修改了
console.log(s.price) //價格被讀取了  I LOVE YOU

16.數(shù)值擴展

// Number.EPSILON是 JavaScript的最小精度，屬性的值接近于 2.22044...E-16
function equal(a, b) {
  if (Math.abs(a - b) < Number.EPSILON) {
    return true
  } else {
    return false
  }
}

console.log(equal(0.1 + 0.2 === 0.3)) //false
console.log(equal(0.1 + 0.2, 0.3)) //true

//二進制和八進制
let b = 0b1010 //2進制
let o = 0o777 //8進制
let d = 100 //10進制
let x = 0xff //16進制
console.log(x) //255

//檢測一個數(shù)是否為有限數(shù)
console.log(Number.isFinite(100)) //true
console.log(Number.isFinite(100 / 0)) //false
console.log(Number.isFinite(Infinity)) //false

//檢測一個數(shù)值是否為NaN
console.log(Number.isNaN(123)) //false

//字符串轉(zhuǎn)整數(shù)
console.log(Number.parseInt('5213123love')) //5213123
console.log(Number.parseFloat('5.123123神器')) //5.123123

//判斷是否為整數(shù)
console.log(Number.isInteger(5)) //true
console.log(Number.isInteger(2.5)) //false

//將小數(shù)部分抹除
console.log(Math.trunc(3.45345345345)) //3

//檢測一個數(shù)到底是正數(shù)、負數(shù)、還是0
console.log(Math.sign(100)) //1
console.log(Math.sign(0)) //0
console.log(Math.sign(-123)) //-1

17. 對象方法擴展

//1.Object.is 判斷兩個值是否完全相等
console.log(Object.is(120, 120)) //true
console.log(Object.is(NaN, NaN)) //false

//2.Object.assign 對象的合并
const a = {
  name: 'ran',
  age: 12,
}
const b = {
  pass: 'i love you',
}
console.log(Object.assign(a, b)) //{name:'ran',age:'12',pass:'i love you'}

//3.Object.setPrototypeOf 設(shè)置原型對象 Object.getPrototypeof
const school = {
  name: '拉鉤教育',
}
const cities = {
  city: ['北京', '上海'],
}
Object.setPrototypeOf(school, cities) //{ name: 'ran', age: 12, pass: 'i love you' }
console.log(Object.getPrototypeOf(school)) //{ city: [ '北京', '上海' ] }
console.log(school) //{ name: '拉鉤教育' }

18.模塊化

• 模塊化是指將一個大的程序文件,拆分成許多小的文件，然后將小文件組合起來。
• 模塊化的好處：
  1.防止命名沖突
  2.代碼復(fù)用
  3.高維護性
  4.模塊化規(guī)范產(chǎn)品
• ES6之前的模塊化規(guī)范有：
  1.CommonJS ====> NodeJS、Browserify
  2.AMD ====> requireJS
  3.CMD ====> seaJS

模塊功能主要有兩個命令構(gòu)成：export和inport

• export命令用于規(guī)定模塊的對外接口
• inport命令用于輸入其他模塊提供的功能

// src/js/m1.js
export let school = '拉鉤教育'
export function teach(){
    console.log('教技能')
}

import * as m1 from "./src/js/m1.js";
    console.log(m1);

暴露語法匯總

1. 統(tǒng)一暴露

//統(tǒng)一暴露
let school = '拉鉤教育';
function findjob(){
    console.log('找工作吧');
}
//export {school,findjob}

2.默認暴露

//默認暴露
export default {
    school:'lagou',
    change:function(){
        console.log('我們可以改變你')
    }
}

引入語法匯總

1.通用方式引入

import * as m1 from "./src/js/m1.js"
import * as m2 from "./src/js/m2.js"
import * as m3 from "./src/js/m3.js"

2.解構(gòu)賦值方式

import {school,teach} from "./src/js/m1.js"
import {school as lagou,findJob} from "./src/js/m2.js"
import {default as m3 } from "./src/js/m3.js"

import m3 from "./src/js/m3.js"

19 . ECMAscript2016 中的新特性

• Array.prototype.includes：用來檢測數(shù)組中是否包含某個元素，返回布爾類型值
• 在ES7中引入指數(shù)操作符**，用來實現(xiàn)冪運算，功能與Math.pow結(jié)果相同

//include
const mingzhu = ['西游記', '紅樓夢', '水滸傳', '三國演義']
console.log(mingzhu.includes('西游記')) //true
console.log(mingzhu.includes('金瓶梅')) //false

//**
console.log(2 ** 10) // 1024

20 . ECMAscript2017 中的新特性

20.1async函數(shù)

async和await兩種語法結(jié)合可以讓異步代碼像同步代碼一樣

async函數(shù)：

• async函數(shù)的返回值為promise對象
• async返回的promise對象的結(jié)果值由async函數(shù)執(zhí)行的返回值決定

async function fn(){
   //1.如果返回的是一個非Promise的對象，則fn（）返回的結(jié)果就是成功狀態(tài)的Promise對象，值為返回值
   //2.如果返回的是一個Promise對象，則fn（）返回的結(jié)果與內(nèi)部Promise對象的結(jié)果一致
   //3.如果返回的是拋出錯誤，則fn（）返回的就是失敗狀態(tài)的Promise對象
   return new Promise((resolve,reject)=>{
       resolve('成功的數(shù)據(jù)');
   });
}
const result = fn();
result.then(value=>{
   console.log(value)  //成功的數(shù)據(jù)
},reason=>{
   console.log(reason)
})

20.2await表達式

• await必須放在async函數(shù)中
• await右側(cè)的表達式一般為promise對象
• await可以返回的是右側(cè)promise成功的值
• await右側(cè)的promise如果失敗了，就會拋出異常，需要通過try…catch捕獲處理

//創(chuàng)建Promise對象
    const p = new Promise((resolve, reject) => {
        // resolve("成功的值")
        reject("失敗了")
    })

    //await 必須放在async函數(shù)中
    async function main() {
        try {
            let res = await p;
            console.log(res);
        } catch (e) {
            console.log(e);
        }
    }

    //調(diào)用函數(shù)
    main()  //失敗了

發(fā)送ajax請求

//ajax請求返回一個promise
    function sendAjax(url){
        return new Promise((resolve, reject) => {

            //創(chuàng)建對象
            const x =new XMLHttpRequest();

            //初始化
            x.open('GET',url);

            //發(fā)送
            x.send();

            //時間綁定
            x.onreadystatechange = ()=>{
                if(x.readyState === 4 ){
                    if(x.status >= 200 && x.status < 300){
                        //成功
                        resolve(x.response)
                    }else {
                        //失敗
                        reject(x.status)
                    }
                }
            }
        })
    }

   //async 與 await 測試
    async function main(){
        let result = await sendAjax("https://api.apiopen.top/getJoke")
        console.log(result);
    }
    main()

20.3 對象方法擴展

const school = {
  name: '拉鉤',
  cities: ['北京', '上海', '深圳'],
  xueke: ['前端', 'Java', '大數(shù)據(jù)', '運維'],
}

//獲取對象所有的鍵
console.log(Object.keys(school)) // [ 'name', 'cities', 'xueke' ]

//獲取對象所有的值
console.log(Object.values(school)) //[ '拉鉤', [ '北京', '上海', '深圳' ], [ '前端', 'Java', '大數(shù)據(jù)', '運維' ] ]

//entries,用來創(chuàng)建map
console.log(Object.entries(school))
/**
 * [
    [ 'name', '拉鉤' ],
    [ 'cities', [ '北京', '上海', '深圳' ] ],
    [ 'xueke', [ '前端', 'Java', '大數(shù)據(jù)', '運維' ] ]
   ]
 */
console.log(new Map(Object.entries(school)))
/**
 * Map(3) {
    'name' => '拉鉤',
    'cities' => [ '北京', '上海', '深圳' ],
    'xueke' => [ '前端', 'Java', '大數(shù)據(jù)', '運維' ]
  }   
 */

//對象屬性的描述對象
console.log(Object.getOwnPropertyDescriptor(school))

//二維數(shù)組
const res = Object.fromEntries([
  ['name', '張三'],
  ['cities', '成都', '武漢'],
])
console.log(res) //  { name: '張三', cities: '成都' }

//Map
const m = new Map()
m.set('name', 'zhangSan')
const result = Object.fromEntries(m)
console.log(result) //{ name: 'zhangSan' }

21.字符串?dāng)U展方法

//trim
   let str= ' asd  '
   console.log(str) //asd
   console.log(str.trimStart()) //asd  清空頭空格
   console.log(str.trimEnd()) //  asd  清空尾空格

22.flat

flat 可降低數(shù)組的維度

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]
// console.log(arr.flat()) //[ 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ] ]
//參數(shù)為深度，是一個數(shù)字
console.log(arr.flat(2)) //[ 1, 2, 3, 4, 5, 6,  7, 8, 9  ]

22.Symbol的description

用來獲取Symbol的字符串描述

let s = Symbol('拉鉤教育');
console.log(s.description) //拉鉤教育

23.私有屬性

class Person {
  //公有屬性
  name
  //私有屬性
  #age
  #weight

  //構(gòu)造方法
  constructor(name, age, weight) {
    this.name = name
    this.#age = age
    this.#weight = weight
  }
  intro() {
    console.log(this.name)
    console.log(this.#age)
    console.log(this.#weight)
  }
}

//實例化
const girl = new Person('張三', 18, '45kg')
console.log(girl.#age) //error
console.log(girl) //Person{name: "張三", #age: 18, #weight: "45kg"}
girl.intro() // 冉 18  45kg

24.可選鏈操作符

//相當(dāng)于一個判斷符，如果前面的有，就進入下一層級
function main(config) {
  const dbHost = config?.db?.host
  console.log(dbHost) //192.168.1.100
}

main({
  db: {
    host: '192.168.1.100',
    username: 'root',
  },
  cache: {
    host: '192.168.1.200',
    username: 'admin',
  },
})

25.動態(tài)import

btn.onclick = function(){
    //使用之前并未引入，動態(tài)引入，返回的其實是一個Promise對象
    import('./hello.js').then(module=>{
        module.hello();
    })
}

26.BigInt類型

大整型

let n = 521n
console.log(n, typeof n) // 521n  n

函數(shù)

let n = 123
  console.log(BigInt(n)) // 123n  //不要使用浮點型，只能用int

大數(shù)值運算

//大數(shù)值運算
let max = Number.MAX_SAFE_INTEGER // 9007199254740991
console.log(max + 1) // 9007199254740992
console.log(max + 2) // 9007199254740992 出問題了
console.log(BigInt(max) + BigInt(1)) //9007199254740992n
console.log(BigInt(max) + BigInt(2)) //9007199254740993n

絕對全局對象 globalThis

console.log(globalThis) //window  //適用于復(fù)雜環(huán)境下直接操作window