ES6 聲明與表達(dá)式 let 作用域在塊里面 var 全局 注意 函數(shù)有自己的作用域 const 常量 常量的值 是不能被更改的 可以使用const 來(lái)做預(yù)定義 處理 應(yīng)用場(chǎng)景 1.私有協(xié)議 即時(shí)通訊 與硬件通訊 2.預(yù)定義數(shù)據(jù)值 網(wǎng)絡(luò)接口 解構(gòu)賦值 定義 解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展婉宰。他是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配，然后對(duì)其中的變量進(jìn)行賦值独令。在代碼書寫上簡(jiǎn)潔且易讀，語(yǔ)義更加清晰明了竣蹦；也方便了復(fù)雜對(duì)象中數(shù)據(jù)字段獲取 數(shù)組格式的解構(gòu)賦值 基本 let [a,b] = [2,3]; let [username,age] = ["小明",2] 可嵌套 let [username,[boy,girl],age] = ["小明",["小貓","小花"],12]; 可省略 ? /*? ? * 可以省略部分變量名? ? * */? ? let [a,,,b] = [1,3,5,6];? ? console.log(a)? ? console.log(b) 不完全解構(gòu) 如果有變量 不需要初始化值 就可以使用不完全解構(gòu) let [view = document.createElement("div"),timer] = []; 剩余運(yùn)算符 var [timer,...views] = [0,[document.createElement("div"),document.createElement("div")]]? ? console.log(views[0][0]); 字符串 let [a, b, c, d, e] = 'hello';// a = 'h'// b = 'e'// c = 'l'// d = 'l'// e = 'o' 對(duì)象模型的解構(gòu)（Object） 基本 let { foo, bar } = { foo: "哈哈哈", bar: 'bbb' };? ? console.log(foo,bar); 可嵌套 {? ? ? ? let {a:[b,c]} = {a:[22,33]}? ? ? ? console.log(b)? ? ? ? console.log(c)? ? ? ? let {key:[name1,name2]} = {key:["屬性1的值","屬性2的值"]}? ? ? ? console.log(name1)? ? ? ? console.log(name2)? ? ? ? let {? ? ? ? ? ? listener:[? ? ? ? ? ? ? ? click,? ? ? ? ? ? ? ? dlclick,? ? ? ? ? ? ? ? tapstart? ? ? ? ? ? ],? ? ? ? ? ? event:[ce,de,te]? ? ? ? } = {? ? ? ? ? ? listener:[? ? ? ? ? ? ? ? function () {? ? ? ? ? ? ? ? ? ? console.log("click")? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? function () {? ? ? ? ? ? ? ? ? ? console.log("dlclick")? ? ? ? ? ? ? ? }? ? ? ? ? ? ],? ? ? ? ? ? event:[{name:"點(diǎn)擊"},{name:"雙擊"}]? ? ? ? }? ? ? ? click();? ? ? ? console.log(ce)? ? ? ? /*? ? ? ? * 定義接口文件 http? ? ? ? *? ? ? ? * 主機(jī)地址 host:"api.bianmazhe.com"? ? ? ? * 測(cè)試環(huán)境 evn:true? ? ? ? * api:? ? ? ? *? login:"/login"? ? ? ? *? register:"/register"? ? ? ? * */? ? ? ? let {http:[host,evn,api]} = {? ? ? ? ? ? http:["api.bianmazhe.com",false,{login:"/login",register:"/register"}]? ? ? ? }? ? ? ? console.log(api.login)? ? ? ? let {http:[host1,evn1,[login,register]]} = {? ? ? ? ? ? http:["api.bianmazhe.com",false,["/login","/register"]]? ? ? ? }? ? ? ? console.log(login);? ? } 可省略 let {key:[]} = {key:[2,3]}? ? ? ? let {key:[]} = {key:[2,3],key2:"dfk"}? ? ? ? let {} = {key:[2,3]} 不完全解構(gòu) let obj = {p: [{y: 'world'}] };let {p: [{ y }, x ] } = obj;// x = undefined// y = 'world' 剩余運(yùn)算符 let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};// a = 10// b = 20// rest = {c: 30, d: 40} Symbol 用于定義一個(gè)獨(dú)一無(wú)二的屬性 通過(guò)Symbol創(chuàng)建出來(lái)的兩個(gè)屬性是不相同的 ? ? let n1 = Symbol(2);? ? let n2 = Symbol(2);? ? console.log(n1 === n2); 數(shù)據(jù)類型 string 模板字符串 `` 允許換行 ? ? var container = document.querySelector(".container");? ? container.innerHTML? = `? ? <div>? ? ? ? <ul>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? </ul>? ? </div>? ? `; 支持嵌入變量 ? ? var item = "標(biāo)題";? ? var container = document.querySelector(".container");? ? container.innerHTML? = `? ? <div>? ? ? ? <ul>? ? ? ? ? ? <li>${item}</li>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? ? ? <li></li>? ? ? ? </ul>? ? </div>? ? `; 新增方法 includes()：返回布爾值抄谐，判斷是否找到參數(shù)字符串。 startsWith()：返回布爾值约巷，判斷參數(shù)字符串是否在原字符串的頭部记某。 endsWith()：返回布爾值司训，判斷參數(shù)字符串是否在原字符串的尾部。 字符串重復(fù) repeat console.log("Hello,".repeat(2));? // "Hello,Hello," 字符串補(bǔ)全 padStart padEnd console.log("h".padStart(5,"o"));? // "ooooh"console.log("h".padEnd(5,"o"));? ? // "hoooo"console.log("h".padStart(5));? ? ? // "? ? h" array 創(chuàng)建數(shù)組 Array.of() Array.from() 查找符合的元素 find ? ? var arr = [33,4,2,99];? ? var v = arr.find(function (item) {? ? ? ? return item<10;? ? });? ? console.log(v); 查找符合元素的下標(biāo) findIndex() ? ? var index = arr.findIndex(function (item) {? ? ? ? return item < 10;? ? })? ? console.log(index); 填充 fill(要填充的值液南，填充的位置壳猜，可選（填充結(jié)束的位置）)? 返回一個(gè)填充好的數(shù)組 let arr = Array.of(1, 2, 3, 4);// 參數(shù)1：用來(lái)填充的值// 參數(shù)2：被填充的起始索引// 參數(shù)3(可選)：被填充的結(jié)束索引，默認(rèn)為數(shù)組末尾console.log(arr.fill(0,1,2)); // [1, 0, 3, 4] 嵌套數(shù)組（多維）轉(zhuǎn)一維數(shù)組 flat ? ? var arr5 = [[[[1,4,5]],[55,77]],[3,9]]? ? //Infinity 無(wú)窮數(shù)? ? var arr6 = arr5.flat(Infinity);? ? console.log(arr6); 合并數(shù)組 ? ? var arr7 = [3,4,88];? ? console.log([1,...arr7]); set 類似數(shù)組 set里面的數(shù)據(jù) 都是唯一的 初始化 new Set() 存取值 存值 add(); 數(shù)組去重 ? ? var arr7 = [77,55,77,99,55];? ? var set2 = new Set(arr7);? ? console.log(set2); map 類似Object 一個(gè) Object 的鍵只能是字符串或者 Symbols滑凉，但一個(gè) Map 的鍵可以是任意值统扳。 Map 中的鍵值是有序的（FIFO 原則），而添加到對(duì)象中的鍵則不是畅姊。 Map 的鍵值對(duì)個(gè)數(shù)可以從 size 屬性獲取咒钟，而 Object 的鍵值對(duì)個(gè)數(shù)只能手動(dòng)計(jì)算。 Object 都有自己的原型若未，原型鏈上的鍵名有可能和你自己在對(duì)象上的設(shè)置的鍵名產(chǎn)生沖突朱嘴。 初始化 new Map() 存取之 存 set(key,value) 取 get(key) 長(zhǎng)度 size 遍歷 for in ? ? for (let key in map){? ? ? ? console.log(map.get(key));? ? } for of ? ? for ( let [key,value] of map){? ? ? ? console.log(key,value);? ? } forEach ? ? map.forEach(function (item,key) {? ? ? ? console.log(item,key)? ? }) 函數(shù) 可以給函數(shù)的形參 添加默認(rèn)值 ? ? function f(a=1,b=3) {? ? } 箭頭函數(shù) 作用 語(yǔ)法簡(jiǎn)潔 var fun2 = function () {? ? ? ? console.log("...");? ? }? ? var fun2 = ()=>{? ? ? ? console.log("....");? ? }? ? fun2();? ? //傳參數(shù) 簡(jiǎn)化寫法? ? var fun3 = a => {? ? ? ? console.log(a);? ? }? ? var fun4 = (a,b) => {? ? ? ? console.log(a,b);? ? }? ? //函數(shù)體比較簡(jiǎn)單 省略花括號(hào)? ? var sum = (a,b) => a+b;? ? var sum = function (a,b) {? ? ? ? return a+b;? ? } 無(wú)需在箭頭函數(shù)中 再去設(shè)置this指向 ? function View() {? ? ? ? this.title = "標(biāo)題";? ? ? ? var self = this;? ? ? ? this.dom = document.querySelector(".container");? ? ? ? this.dom.onclick = function () {? ? ? ? ? ? alert(self.title)? ? ? ? }? ? ? ? this.dom.onclick =? ()=> {? ? ? ? ? ? alert(this.title)? ? ? ? }? ? }? ? new View(); 對(duì)象 簡(jiǎn)寫 屬性 var obj = {uname,uage}; 方法 var obj = {? ? ? ? run(){}? ? } 使用...合并對(duì)象 var obj1 = {a:1,b:3}var obj2 = {...obj1}; is 類方法（靜態(tài)方法） ? ? var obj3 = {};? ? var obj4 = {};? ? var obj5 = obj3;? ? console.log(Object.is(obj3,obj4));? ? console.log(Object.is(obj3,obj5)); assign 淺拷貝 是一個(gè)靜態(tài)方法 ? ? var tObj = {}? ? var sObj = {a:1,b:2};? ? Object.assign(tObj,sObj);? ? console.log(tObj); 類 class關(guān)鍵字 定義類 ? /*? ? * class 關(guān)鍵字 創(chuàng)建類? ? * */? ? class Person{} constructor 構(gòu)造函數(shù) 注意： 1.構(gòu)造函數(shù) 是一個(gè)特殊的函數(shù) 在實(shí)例化對(duì)象（new）的時(shí)候 就會(huì)自動(dòng)調(diào)用這個(gè)函數(shù) 2.不一定必須實(shí)現(xiàn)構(gòu)造函數(shù)->可以省略 如 ? /*? ? * class 關(guān)鍵字 創(chuàng)建類? ? * */? ? class Person{}? ? /*? ? * ES6 構(gòu)造函數(shù)? ? * */? ? class Animation{? ? ? ? constructor(...args) {? ? ? ? ? ? console.log(args);? ? ? ? }? ? }? ? new Animation(1,2);? ? new Person(); 屬性 原型屬性 實(shí)例屬性 ? class ImageView{? ? ? ? //原型屬性? ? ? ? path = "";? ? ? ? constructor() {? ? ? ? ? ? this.ttt = "實(shí)例屬性"? ? ? ? }? ? ? ? ? ? } set get 方法 防止類中的set get方法的遞歸調(diào)用 ? ? ? ? get hname(){? ? ? ? ? ? return this.hname;? ? ? ? }? ? ? ? set hname(_name){? ? ? ? ? ? console.log(_name);? ? ? ? ? ? this.hname = _name;? ? ? ? } 注意 使用set get方法的屬性名前 添加_ ? class Hero {? ? ? ? constructor(_name) {? ? ? ? ? ? this.hname = _name;? ? ? ? }? ? ? ? get hname(){? ? ? ? ? ? return this._hname;? ? ? ? }? ? ? ? set hname(_name){? ? ? ? ? ? console.log(_name);? ? ? ? ? ? this._hname = _name;? ? ? ? }? ? } 靜態(tài)屬性 靜態(tài)方法 需要使用 static 關(guān)鍵字 ? class Weapon{? ? ? ? static type = "魔法裝";? ? ? ? static att(){? ? ? ? ? ? console.log("攻擊")? ? ? ? }? ? }? ? console.log(Weapon.type);? ? Weapon.att(); 繼承 使用extends 實(shí)現(xiàn)繼承 super 調(diào)用父類的構(gòu)造函數(shù) 如 ? ? class Student{? ? ? ? constructor() {? ? ? ? ? ? console.log("我要學(xué)到很多知識(shí)");? ? ? ? }? ? ? ? study(){console.log("好好學(xué)習(xí)")}? ? }? ? //extends 關(guān)鍵字? 可用于繼承? ? class TangZhi extends Student{? ? ? ? constructor() {? ? ? ? ? ? //使用父類的構(gòu)造函數(shù)? ? ? ? ? ? super();? ? ? ? ? ? console.log("我得學(xué)好了 找個(gè)合心的工作");? ? ? ? }? ? }? ? let haoXueSheng = new TangZhi();? ? haoXueSheng.study(); 模塊 把具有相同功能的代碼 組織到一起 ->這一塊 代碼 就可以看成一個(gè)模塊 ES6 1.引入js 需要添加type屬性 屬性值是module <script src="StringTool.js" type="module"></script> 2.導(dǎo)出模塊 導(dǎo)入模塊 導(dǎo)出模塊 export 1. export {obj999，obj777} 可以同時(shí)導(dǎo)出多個(gè) 對(duì)象 2.導(dǎo)出一個(gè)模塊 export default StringTool; 導(dǎo)入模塊 import 1.? ? import {obj999,obj777} from "./StringTool.js"? 可以同時(shí)導(dǎo)入多個(gè)對(duì)象? ? console.log(obj999) 2.導(dǎo)入一個(gè)模塊 import StringTool from "./StringTool.js"; as 給模塊 重命名 export {StringTool as ST} import {ST} from "./StringTool"; 異步編程 Promise 允諾 承諾 完成 then 出現(xiàn)意外 catch 創(chuàng)建 new Promise(function(success,fail){}) new Promise((success,fail)=>{}) async 異步 函數(shù) 會(huì)得到一個(gè)promise對(duì)象 await 可以讓修飾的部分 等待執(zhí)行（必須與異步函數(shù)配合使用） 如果promise對(duì)象有結(jié)果的時(shí)候 再執(zhí)行 ? ? function fun() {? ? ? ? return new Promise(success=>setTimeout(()=>success(111),1000))? ? }? ? async function fun2() {? ? ? ? let a = await fun();? ? ? ? console.log(a);? ? ? ? console.log("fun2")? ? }? ? fun2() 如果等待的是promise對(duì)象，先等待promise有回應(yīng)了 并且解析要傳遞出來(lái)的數(shù)據(jù) 才會(huì)繼續(xù)執(zhí)行 js實(shí)現(xiàn)同步 Generator 函數(shù) 定義 一是在 function 后面萍嬉，函數(shù)名之前有個(gè) * 乌昔； 就可以定義成 一個(gè)生成器類型的函數(shù) 函數(shù)內(nèi)部有 yield 表達(dá)式。 調(diào)用 使用生成器里面的每一個(gè)模塊 let f = fun();//得到生成器對(duì)象f.next();//可以執(zhí)行通過(guò)yield分成的模塊f.next();f.next();//如果f.next();done：true已經(jīng)執(zhí)行完所有的模塊 注意： 不要每一次調(diào)用next函數(shù) 都是用一個(gè)新的生成器對(duì)象調(diào)用 這樣執(zhí)行的永遠(yuǎn)都是第一個(gè)模塊的內(nèi)容 fun().next();//可以執(zhí)行通過(guò)yield分成的模塊fun().next();fun().next();//如果f.next();done：true已經(jīng)執(zhí)行完所有的模塊 next會(huì)返回一個(gè)對(duì)象 value done 迭代器 核心概念 迭代器是一個(gè)統(tǒng)一的接口壤追，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可被便捷的訪問(wèn)磕道，它是通過(guò)一個(gè)鍵為Symbol.iterator 的方法來(lái)實(shí)現(xiàn)。 迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素的指針（如數(shù)據(jù)庫(kù)中的游標(biāo) 如 ? ? let arr = [1,2,3,45,7,5];? ? let it = arr[Symbol.iterator]();? ? console.log(it.next()); 代理行冰、映射 代理 幫別人干某些事 Proxy 可以對(duì)目標(biāo)對(duì)象的讀取溺蕉、函數(shù)調(diào)用等操作進(jìn)行攔截，然后進(jìn)行操作處理资柔。它不直接操作對(duì)象焙贷，而是像代理模式撵割，通過(guò)對(duì)象的代理對(duì)象進(jìn)行操作贿堰，在進(jìn)行這些操作時(shí)，可以添加一些需要的額外操作 如 ? ? //想找代理的人? ? let xiaoMao = {? ? ? ? username:"小毛",? ? ? ? age:18? ? }? ? //幫忙干事的人（做代理的人）? ? let handler = {? ? ? ? get(target,key){? ? ? ? ? ? console.log("收100元");? ? ? ? ? ? //...? ? ? ? ? ? return target[key];? ? ? ? },? ? ? ? set(target,key,value){? ? ? ? ? ? console.log("收500元");? ? ? ? ? ? //..? ? ? ? ? ? target[key] = value;? ? ? ? }? ? };? ? //組織兩人關(guān)系的地方? ? let py = new Proxy(xiaoMao,handler);? ? console.log(py.username);? ? py.age = 30; 映射 反射 Reflect Reflect.get(target, name, receiver)