ES6
聲明與表達(dá)式
let
作用域在塊里面
var
全局
注意 函數(shù)有自己的作用域
const
常量
常量的值 是不能被更改的
可以使用const 來做預(yù)定義 處理
應(yīng)用場景
1.私有協(xié)議
即時(shí)通訊
與硬件通訊
2.預(yù)定義數(shù)據(jù)值
網(wǎng)絡(luò)接口
解構(gòu)賦值
定義
解構(gòu)賦值是對賦值運(yùn)算符的擴(kuò)展沸柔。
他是一種針對數(shù)組或者對象進(jìn)行模式匹配揩页，然后對其中的變量進(jìn)行賦值眷细。
在代碼書寫上簡潔且易讀味廊，語義更加清晰明了；也方便了復(fù)雜對象中數(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'
對象模型的解構(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"
? ? ? ? * 測試環(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ú)一無二的屬性
通過Symbol創(chuàng)建出來的兩個(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：用來填充的值
// 參數(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 無窮數(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 原則），而添加到對象中的鍵則不是症歇。
Map 的鍵值對個(gè)數(shù)可以從 size 屬性獲取郎笆，而 Object 的鍵值對個(gè)數(shù)只能手動(dòng)計(jì)算。
Object 都有自己的原型忘晤，原型鏈上的鍵名有可能和你自己在對象上的設(shè)置的鍵名產(chǎn)生沖突宛蚓。
初始化
new Map()
存取之
存
set(key,value)
取
get(key)
長度
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ù)
作用
語法簡潔
var fun2 = function () {
? ? ? ? console.log("...");
? ? }
? ? var fun2 = ()=>{
? ? ? ? console.log("....");
? ? }
? ? fun2();
? ? //傳參數(shù) 簡化寫法
? ? var fun3 = a => {
? ? ? ? console.log(a);
? ? }
? ? var fun4 = (a,b) => {
? ? ? ? console.log(a,b);
? ? }
? ? //函數(shù)體比較簡單 省略花括號(hào)
? ? var sum = (a,b) => a+b;
? ? var sum = function (a,b) {
? ? ? ? return a+b;
? ? }
無需在箭頭函數(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();
對象
簡寫
屬性
var obj = {uname,uage};
方法
var obj = {
? ? ? ? run(){}
? ? }
使用...合并對象
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í)例化對象（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è) 對象
2.導(dǎo)出一個(gè)模塊
export default StringTool;
導(dǎo)入模塊
import
1.? ? import {obj999,obj777} from "./StringTool.js"? 可以同時(shí)導(dǎo)入多個(gè)對象
? ? 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對象
await
可以讓修飾的部分 等待執(zhí)行（必須與異步函數(shù)配合使用）
如果promise對象有結(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對象设塔，先等待promise有回應(yīng)了 并且解析要傳遞出來的數(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();//得到生成器對象
f.next();//可以執(zhí)行通過yield分成的模塊
f.next();
f.next();//如果f.next();done：true已經(jīng)執(zhí)行完所有的模塊
注意：
不要每一次調(diào)用next函數(shù) 都是用一個(gè)新的生成器對象調(diào)用
這樣執(zhí)行的永遠(yuǎn)都是第一個(gè)模塊的內(nèi)容
fun().next();//可以執(zhí)行通過yield分成的模塊
fun().next();
fun().next();//如果f.next();done：true已經(jīng)執(zhí)行完所有的模塊
next會(huì)返回一個(gè)對象
value
done
迭代器
核心概念
迭代器是一個(gè)統(tǒng)一的接口痕钢，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可被便捷的訪問图柏，它是通過一個(gè)鍵為Symbol.iterator 的方法來實(shí)現(xiàn)。
迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素的指針（如數(shù)據(jù)庫中的游標(biāo)
如
? ? let arr = [1,2,3,45,7,5];
? ? let it = arr[Symbol.iterator]();
? ? console.log(it.next());
代理任连、映射
代理
幫別人干某些事
Proxy 可以對目標(biāo)對象的讀取蚤吹、函數(shù)調(diào)用等操作進(jìn)行攔截，然后進(jìn)行操作處理随抠。它不直接操作對象距辆，而是像代理模式，通過對象的代理對象進(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)
