爆料：華為 Mate X2 摺疊屏手機將推出素皮版，麒麟 9000 5G 晶片、預裝鴻蒙系統

阿新 • • 發佈：2021-10-19

ES6

ES全程EcmaScript，是指令碼語言的規範，而平時經常編寫的JavaScript，是EcmaScript的一種實現，所以ES

新特性指的就是JavaScript的新特性。

現在ES11了。

1、什麼是ESMA && 定義成員變數

European Computer Manufacts Association ：歐洲計算機制造協會

bable 可以把es6轉換為es5. 主要使用在ie

var 和let的區別，一個是全域性的，一個不是。

const 是常量，賦初始值之後不能修改了。都是塊級作用域。

let一定要賦初始值，const不用

一般常量使用大寫，值不能修改，但是陣列可以push新的值

2、解構賦值

const zhao = {
  name:'zhaobenshan',
  age:'buxinag',
  xiaopin:function(){
    console.log('jaja')
  }
}
let {name,age,xiaopin} = zhao
console.log(name);
console.log(age);
console.log(xiaopin)
xiaopin();

好像還是方法用的多。

3、新的宣告字串的方式 ``

ES6 引入新的宣告字串的方式 [``] 而ES5採用的[' '] 和[" "]

常用的是模版字串的拼接

let str = `我也是字串`;
// 內容中可以直接出現換行符
let str2 = `
a
b
c
`;
// 變數拼接
let lovest = 'elly';
let me = 'jesse';
let answer = `${me}love${lovest}the most`;
console.log(answer)

4、簡化物件寫法

es6允許在打括號裡面，直接寫入變數和函式，作為物件的屬性和方法。書寫更加簡潔

let name = 'jesse';
let change = ()=>{
  console.log('esma')
}
// 等同於 
let change2 = function(){
  console.log('chang2Esma')
}
const hha  = {
  name,
  change,
  change2,
}
console.log(hha.name);
hha.change();
hha.change2();

5、arrow function

1、簡單定義

let fn = (a,b)=>{
  return a+b;
}
let result = fn(1,2);
console.log(result);

2、this的作用域（我的理解是指向外層作用域）

    function getName(){
      console.log(this.name)
    }
    // this 是靜態的，this始終指向函式宣告時所在作用域
    let getName2 = ()=>{
      console.log(this.name)
    }
    let person = {
      name:'1'
    }
    window.name = "window"
    getName();
    getName2();

    // call 方法呼叫
    getName2.call(person);
    getName.call(person)

3、更加簡寫

//1) 省略小括號，當形參只有一個的時候
let add = n=>{
  return n+n;
}
//2)省略花括號,當代碼體只有一條語句，return 也必須省略
let pow = n=> n * n;

5.1、arrow function 實戰

// 有在style中通過id定義 css樣式
// 需求1:點選div 2s後顏色變成「粉色」
// old version ==》
let ad = document.getElementById("ad");
ad.addEventListener("click",function(){
  let _this = this; // 這個this指向ad
  setTimeout(function(){
    _this.style.background = 'pink'
  },2000) //這是個回撥函式，即2s結束後，再改變顏色
})
// new Verison i use arrow Function
let av = document.getElementById("av");
av.addEventListener("click",function(){
  setTimeout(()=>{
    this.style.background = 'green'
  },2000)
})

5.2、

// 需求2：從陣列返回偶數的元素
const arr = [1,6,9,10,100,25];
const res = arr.filter(item=> item%2===0);
console.log(res)

6、rest引數

// es5使用arguments 獲取物件的實慘
function data(){
  console.log(arguments)
}
data('elly','jesse','love');
//es6使用rest引數，用於獲取函式的實參 類似java可變引數哈..
    function data2(a,b,...args){
      console.log(args);
    }
data2('elly', 'jesse', 'love');

7、spread擴充套件運算子

spread = 「...」

// 「...」擴充套件運算子能將「陣列」轉換為逗號分隔的「引數序列」
const higherBrothers = ['masiwei','knowknow','melo','psyp'];
// => 'masiwei','knowknow'···
function hippop(){
  console.log(arguments)
}
hippop(...higherBrothers);

== 2 \ 連線陣列

// 1 陣列的合併
const higherBrothers = ['masiwei','knowknow','melo','psyp'];
const cdc = ['mengzi','ty'];
// 以前這麼寫的
const legend = higherBrothers.concat(cdc);
// 現在
const legendh = [...higherBrothers,...cdc]
console.log(legend);
console.log(legendh)

3、最常用的陣列克隆

const a = ['e','g','m'];
const b =[...a];
console.log(b);

8、Symbol基本使用

前言：js6大資料型別

string number object Boolean null undefined

Es6 推出了新的型別叫Symbol

let s = Symbol();
console.log(s,typeof s);

9、iterator

使用了迭代器和增強for的方式

    const higherBrothers = ['masiwei','knowknow','melo','psyp'];
    // v 為下標
    for (let v in higherBrothers){
      console.log(v);
    }
    // v為值
    for (let v of higherBrothers){
      console.log(v);
    }
    // 和jvav一樣的
    higherBrothers.forEach((a)=>{
      console.log(a);
    })
    // 使用迭代器
    let iterator = higherBrothers[Symbol.iterator]();
    // 呼叫物件的next方法
    while (true){
      let a = iterator.next();
      if (!a.done){
        console.log(a.value)
      }else{
        break;
      }
    }

10、generator

    // yield 執行緒暫時掛起
    function * gen(){
            console.log(111);
      yield '1';
            console.log(222);
      yield '2';
            console.log(333);
      yield '3';
            console.log(444);
      yield '4';
    }
    let iterator = gen();
    iterator.next();
      iterator.next();
      iterator.next();
      iterator.next();

11、promise

一直以來，JavaScript處理非同步都是以callback的方式，在前端開發領域callback機制幾乎深入人心，近幾年隨著JavaScript開發模式的逐漸成熟，CommonJS規範順勢而生，其中就包括提出了Promise規範，Promise完全改變了js非同步程式設計的寫法，讓非同步程式設計變得十分的易於理解，同時Promise也已經納入了ES6，而且高版本的chrome、firefox瀏覽器都已經原生實現了Promise，只不過和現如今流行的類Promise類庫相比少些API

Promise包括以下幾個規範

一個promise可能有三種狀態：等待（pending）、已完成（fulfilled）、已拒絕（rejected）
一個promise的狀態只可能從“等待”轉到“完成”態或者“拒絕”態，不能逆向轉換，同時“完成”態和“拒絕”態不能相互轉換
promise必須實現then方法（可以說，then就是promise的核心），而且then必須返回一個promise，同一個promise的then可以呼叫多次，並且回撥的執行順序跟它們被定義時的順序一致
then方法接受兩個引數，第一個引數是成功時的回撥，在promise由“等待”態轉換到“完成”態時呼叫，另一個是失敗時的回撥，在promise由“等待”態轉換到“拒絕”態時呼叫，同時，then可以接受另一個promise傳入，也接受一個“類then”的物件或方法，即thenable物件

在使用Promise時，我們需要檢測一些瀏覽器是否支援Promise

看看同步與非同步的區別吧：

https://www.cnblogs.com/Yellow-ice/p/10433423.html

init：非同步程式設計：io 網路檔案操作使用

promise 是es6引入的非同步程式設計的新解決方案。語法上promise是一個建構函式，

用來封裝非同步操作並可以獲取成功或失敗的結果。

11.1、使用promise非同步讀取檔案

const fs = require("fs");

// 使用promise封裝
const p = new Promise((resolve, reject) => {
  fs.readFile("./data.txt", (err, data) => {
    if (err) reject(err);
    else resolve(data.toString() + "success");
  });
});
p.then(
  value => {
    console.log(value);
  },
  error => {
    console.log(error);
  }
);

11.2、使用promise封裝ajax

    const p = new Promise((resolve,reject)=>{
      const xhr = new XMLHttpRequest();
      xhr.open("GET","https://api.apiopen.top/getJoke");
      xhr.send();
      xhr.onreadystatechange = ()=>{
        if (xhr.readyState===4){
          if (xhr.status>=200 && xhr.status<300){
            resolve(xhr.response);
          }else{
            reject(xhr.response);
          }
        }
      }
    })
    p.then(response=>{
      console.log(response)
    },err=>{
      console.log(err)
    })

12、promise的then

    p.then(response=>{
      console.log(response)
    },err=>{
      console.log(err)
    })

13、promise的catch

    p.catch(err=>{
      console.log(err)
    })

14、set

    let arr = ['1','2','3','3','3'];
    let arr2 = ['1', '4'];
    let set = new Set(arr);
    set.add('4');
    set.delete('1');
    console.log(set.has('2'));
    for(let v of set){
      console.log(v)
    }
    //2、陣列去重
    let result = [...new Set(arr)];
    //3、交集
    // 4、並集
    let union = [...new Set([...arr,...arr2])];
    console.log(union)

15、map

no more introduce

16、模組化

1）export

命令用於規定模組的對外介面

1) 分別暴露
export let school = "hujesse";
export let teach = () => {
  console.log("schoolexpo");
};
2)整體暴露
...
export {school,teach}
3)預設暴露
 export default{
  school = "hujesse",
  teach = () => {
  console.log("schoolexpo");
  }
}

2）import

命令用於輸入其他模組提供的功能

//1 、通用的匯入方式
import * as m1 from "./m1.js"
//2、解構賦值形式
import {school,teach} from "./m1.js"
import {school as ntu,teach} from "./m1.js"
import {default as m1} from "./m1.js"
// 3、預設暴露只針對預設暴露
import m1 from "./m1.js

js裡面引入時使用require，html引入使用import

ES7

陣列的方法 includes 檢測陣列中是否包含某個元素，返回boolean

const a = [1,2,3]
a.includes(1)

2、冪運算 **

conosle.log (2**2) // 4

ES8

1.async 和await

async 和await 二種語法結合可以讓非同步程式碼像同步程式碼一樣。

1.async函式返回值為promise物件

fun = async()=>{
  return "haha";
}
const result = fun();
console.log(result)

2.await 簡化promise

const p = new Promise((reslove,reject)=>[
  reslove("使用者資料")
])
let fun = async()=>{
  let result = await p;
  console.log(result)
}
fun();
// 解釋一下。reslove改變了p的狀態，p狀態成功的值修改成了“使用者資料”.
// await 返回的結果返回的是成功狀態的值
==============
// 使用try catch捕獲錯誤
    const p = new Promise((reslove,reject)=>[
      reject("失敗啦")
    ])
let fun = async()=>{
  try{
    let result = await p;
    console.log(result)
  }catch(e){
    console.log(e)
  }
}
fun();

2.async和await實戰demo1

let fun = () => {
  return new Promise((resolve, reject) => {
    fs.readFile("./data1.txt", (err, data) => {
      if (err) reject(err);
      resolve(data);
    });
  });
};

let res = async () => {
  try {
    let result = await fun();
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};
res();

3.async和await傳送ajax請求

    let fun = (url)=>{
      return new Promise((reslove,reject)=>{
        const x = new XMLHttpRequest();
        x.open('GET',url);
        x.send();
        x.onreadystatechange = ()=>{
          if (x.onreadystatechange ===4){
            if (x.status>=200 && x.status<300){
              reslove(x.response);
            }else{
              reject(x.status);
            }
          }
        }
      })
    }
    let res = async()=>{
          const result = await fun("https://api.apiopen.top/getJoke");
          console.log(result)
    }
    res();

My question Here

1、物件定義函式

    const hha  = {
      hahFunc = ()=>{
        console.log('i use arrow function');
      },
    }

為啥會錯