let? 作用域在塊里面
var? 全局? 注意 函數(shù)有自己的作用域? ?
const? 常量? ? ?常量的值? 是不能被更改的可以使用
可以使用const 來(lái)做預(yù)定義 處理
應(yīng)用場(chǎng)景
1.私有協(xié)議? 即時(shí)通訊? ? 與硬件通訊
2. 預(yù)定義數(shù)據(jù)值? ?網(wǎng)絡(luò)接口
結(jié)構(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 [a,,,b] = [1,3,5,6];
? ? console.log(a)
? ? console.log(b)
不完全結(jié)構(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ì)象模型的結(jié)構(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]}
不完全結(jié)構(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
? ? ? ? ? ? ? ? ? ? ? ?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ù)組? ? ?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)生沖突。
初始化? ? newMap()
存取之? ?
存? ??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)鍵字
定義類
classPerson{}
conetructor
構(gòu)造函數(shù)
注意
1.構(gòu)造函數(shù) 是一個(gè)特殊的函數(shù)
在實(shí)例化對(duì)象 （new） 的時(shí)候 就會(huì)自動(dòng)調(diào)用這個(gè)函數(shù)
不一定必須實(shí)現(xiàn)構(gòu)造函數(shù)->可以省略
/*
* class 關(guān)鍵字? 創(chuàng)建類
**/
class Person{}
/*
* Es6? 構(gòu)造函數(shù)
**/
calss Animation{
console.log(...args){
console.log(args);
}
}
new Anmation(1,2);
new Person;
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.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
允諾 承諾? ?
完成 done
出現(xiàn)意外? catch
創(chuàng)建??
new promise(function(success,fail){})
new Promise((success,fail)=>{})
js實(shí)現(xiàn)同步? ? ? ? ?幫別人干某些事
代理 映射
代理??
Proxy 可以對(duì)目標(biāo)對(duì)象的讀取、函數(shù)調(diào)用等操作進(jìn)行攔截，然后進(jìn)行操作處理。它不直接操作對(duì)象，而是像代理模式，通過(guò)對(duì)象的代理對(duì)象進(jìn)行操作，在進(jìn)行這些操作時(shí)，可以添加一些需要的額外操作。
Reflect 可以用于獲取目標(biāo)對(duì)象的行為，它與 Object 類似，但是更易讀，為操作對(duì)象提供了一種更優(yōu)雅的方式。它的方法與 Proxy 是對(duì)應(yīng)的。
let g =
function *tasks() {
console.log(taskks());
}
//想找代理的人
var 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
