es 知識(shí)點(diǎn)解讀

LoftySoul 發(fā)布于2019-08-21 16:46 / 883人閱讀

摘要：返回的遍歷器對(duì)象，可以依次遍歷函數(shù)內(nèi)部的每一個(gè)狀態(tài)。以后，每次調(diào)用遍歷器對(duì)象的方法，就會(huì)返回一個(gè)有著和兩個(gè)屬性的對(duì)象。由于函數(shù)就是遍歷器生成函數(shù)，因此可以把賦值給對(duì)象的屬性，從而使得該對(duì)象具有接口。

let 和 const 作用域的概念

全局作用域

函數(shù)作用域

塊作用域
如何使用let和const

使用let

1、形成塊級(jí)作用域
2、es6下強(qiáng)制開啟嚴(yán)格模式,而在es5下，需要"use strice"才能開啟嚴(yán)格模式；

const

1、聲明的常量不能修改；但是對(duì)象可以修改，因?yàn)閷?duì)象是對(duì)地址的引用，我們可以在內(nèi)存空間中更改對(duì)象

function last() {
           const k={
               a:1
           };
           k.a=123;
           console.log(k)
}

2、聲明的時(shí)候，必須賦值；
3、const也有塊作用域的概念；

Symbol Symbol的概念：用這種方式聲明的數(shù)據(jù)類型，永遠(yuǎn)是獨(dú)一無二的值；

Symbol的作用：避免屬性名相同的問題
注意：對(duì)象中，有用到symbol做key值的話，是取不到的；即let...of只能拿到非Symbol對(duì)象的值；

    let a1=Symbol.for("abc");
    let obj={
        [a1]:"123",
        "abc":345,
        "c":456
    };
    console.log(obj)
    for(let [key,value] of Object.entries(obj) ){
        console.log("let of",key,value)
    }

解決辦法：通過以下代碼可以取到Symbol的值；Object.getOwnPropertySymbols可以拿到Symbol對(duì)象的值；

    Object.getOwnPropertySymbols(obj).forEach(function (item) {
        console.log(obj[item])
    })

返回了所有key和value值；通過es6最增的Reflect.ownKeys(obj)

    Reflect.ownKeys(obj).forEach(function (item) {
        console.log(item,obj[item])
    });//返回了所有key和value值；

Set的用法

Set的用法：set數(shù)據(jù)類型的元素，必須是唯一的；添加重復(fù)的元素不會(huì)報(bào)錯(cuò)，只是不會(huì)生效；

他在轉(zhuǎn)換元素的時(shí)候，不會(huì)進(jìn)行數(shù)據(jù)類型的隱式轉(zhuǎn)換；
可以用它來去重；

let arr=[1,2,3,4,2,1,2,3,2];
let list=new Set(arr);
console.log(list)

Set()實(shí)例的方法：

1、add() 添加元素
2、delete() 移出
3、clear() 清空
4、has() 判斷元素中是否有某個(gè)內(nèi)容

let arr=["add","delete","clear","has"];
let list=new Set(arr);
console.log(list.has("add"))
console.log(list.delete("add"),list)
console.log(list.clear(),list)

Set實(shí)例的遍歷

//1:遍歷屬性名

for(let key of list.keys()){
    console.log(key)
}

//2:遍歷屬性值
for(let value of list.values()){
    console.log(value)
}
//3:遍歷屬性名和屬性值

for(let [key,value] of list.entries()){
    console.log(key,value)
}

Set實(shí)例的 forEach

list.forEach(function (item) {
    console.log(item)
})

WeakSet的用法

let weakList=new WeakSet()

WeakSet和set的區(qū)別：

1、WeakSet和set支持的數(shù)據(jù)類型不一樣；
2、WeakSet中的對(duì)象都是若引用；不會(huì)檢測(cè)地址是否被垃圾回收掉；
3、他的屬性，沒有size屬性，沒有clear方法，不能遍歷；

Map的用法

map的屬性名可以是任意數(shù)據(jù)類型；
map增加值，用set，獲取值用get
map的兩種寫法
//第一種寫法：
let map=new Map();
let arr=["123"];
map.set(arr,456);
console.log("map",map,map.get(arr))

//第二種寫法
let map=new Map([["a",123],["b",456]])
console.log(map)
map常用的屬性值和方法
map.size 長(zhǎng)度
set設(shè)置，get獲取
delete() 刪除； clear()清空
WeakMap的用法

weakMap和map的區(qū)別：

前者接收的值只能是對(duì)象
他沒有set屬性，不能使用clear()
不能遍歷；跟weakSet和set的區(qū)別一樣；

數(shù)據(jù)結(jié)構(gòu)-和數(shù)組的對(duì)比 Map與Array的對(duì)比,從增刪改查出發(fā)

//數(shù)據(jù)結(jié)構(gòu)橫向?qū)Ρ?，增，查，改，刪
let map=new Map();
let ary=[];
//增
map.set("t",1);
ary.push({t:1});
//console.info("map-array",map,ary)
//查
let map_exits=map.has("t");
let ary_exites=ary.find(item=>item.t);
/*console.log(map_exits)  //返回true，表示存在
console.log(ary_exites) //返回當(dāng)前對(duì)象*/
//改
map.set("t",2);
ary.forEach(item=>item.t?item.t=2:"");
console.log(map,ary)
//刪除
map.delete("t");
let index=ary.findIndex(item=>item.t);
ary.splice(index,1);
console.log(map,ary)

Set與Array的對(duì)比

let set=new Set();
let ary=[];
let item={t:1};
//增加
set.add(item);
ary.push({t:1})
console.log(set,ary)
//查
let set_exist=set.has(item);
let ary_exist=ary.find(item=>item.t)
console.log(set_exist,ary_exist)
//改
set.forEach(item=>item.t?item.t=2:"");
ary.forEach(item=>item.t?item.t=2:"");
//刪
set.forEach(item=>item.t?set.delete(item):"");
let index=ary.findIndex(item=>item.t)
ary.splice(index,1)
console.log(set,ary)

數(shù)據(jù)結(jié)構(gòu)- 和對(duì)象Object的對(duì)比

###Map,Set與Object的對(duì)比

//map,set,object對(duì)比
let item={t:1};
let set=new Set();
let map=new Map();
let obj={};
//增
map.set("t",1);
set.add(item);
obj["t"]=1;
console.log("map-set-obj",map,set,obj)

//查
console.info({
    map_exist:map.has("t"),
    set_exist:set.has(item),
    obj_exist:"t" in obj
})
//改
map.set("t",2);
item.t=2;
obj["t"]=2;
console.log("map-set-obj",map,set,obj)
//刪
map.delete("t")
set.delete(item)
delete obj["t"];
console.log("map-set-obj",map,set,obj)

小總結(jié)：數(shù)據(jù)開發(fā)中，涉及數(shù)據(jù)結(jié)構(gòu)，能使用map，不使用數(shù)組；如果對(duì)數(shù)據(jù)要求比較高，比如數(shù)據(jù)唯一性，考慮使用

類 類的基本定義和生成實(shí)例: class

class Parent{
    constructor(name="leilei"){
        this.name=name;
    }
}
let v_parent=new Parent("ymy");
console.log(v_parent.name)

類的繼承: extends

class Parent{
    constructor(name="leilei"){
        this.name=name;
    }
}
class Child extends Parent{
    //繼承：子類怎么在自己的構(gòu)造函數(shù)中傳遞參數(shù)
    constructor(name="child"){
        super(name);//如果不傳參，子類使用的是父類默認(rèn)的參數(shù)；super一定放在構(gòu)造函數(shù)的第一行；
        this.type="child";
    }
}
console.dir(new Child("hello"))

類中的getter和setter

分別用來獲取屬性和設(shè)置屬性

class Parent{
  constructor(name="leilei"){
      this.name=name;
  }
  get longName(){
      return "ymy "+this.name;
  }
  set longName(value){
      this.name=value;
  }
}
// 創(chuàng)建實(shí)例
let p1=new Parent();
console.log(p1.longName) //獲取屬性
p1.longName="tangtang"; //設(shè)置屬性

給類中添加靜態(tài)方法 static

注意：static屬性只能用來設(shè)置類的靜態(tài)方法，不能用來設(shè)置類的靜態(tài)屬性
類的靜態(tài)屬性只能通過: 類.key=value;來設(shè)置
類的靜態(tài)方法，只有類能使用，實(shí)例不能使用，實(shí)例只能使用原型上的屬性和方法；

class Parent{
  constructor(name="leilei"){
      this.name=name;
  }
  //設(shè)置靜態(tài)方法
  static tell(){
      console.log("tell");
  }
}
Parent.sex="gril";  //設(shè)置類的靜態(tài)屬性
Parent.tell() //調(diào)用類的靜態(tài)方法；

es6 Iterator 和 for...of 循環(huán) 什么是Iterator接口

ES6中內(nèi)置了一些Symbol，其中最重要的一個(gè)恐怕就是Symbol.iterator了，相當(dāng)于迭代器的接口，只有對(duì)象里有這個(gè)symbol的屬性，才可以認(rèn)為此對(duì)象是可迭代的。
我們先看一下規(guī)范中對(duì)這個(gè)symbol的描述：
A method that returns the default Iterator for an object. Called by the semantics of the for-of statement.
js中哪些對(duì)象里實(shí)現(xiàn)了這個(gè)接口呢？常見的有Array，String，arguments，還有后面高級(jí)的數(shù)據(jù)結(jié)構(gòu)，如Set，Map等。

Iterator的基本用法

for...of

for...of循環(huán)的過程，其實(shí)就是通過不斷調(diào)用Iterator接口來達(dá)到這種形式；
也就是說，不同的數(shù)據(jù)結(jié)構(gòu)，通過for...of這種統(tǒng)一的形式，來達(dá)到讀取不同數(shù)據(jù)結(jié)構(gòu)的目標(biāo)；但是背后的Iterator接口其實(shí)不同；
數(shù)組自動(dòng)幫我們帶了iterator接口

let arr=["hello","world"];
let map=arr[Symbol.iterator]();
console.log(map.next());
console.log(map.next());
console.log(map.next());

Object {value: "hello", done: false};done代表，是否做完了所有操作，true：代表是； false：代表無，還有其他操作；

Object對(duì)象不是一個(gè)iterator，那么如何把它變成一個(gè)iterator呢？

let obj={
   start:[1,3,2],
    end:[7,8,9],
    [Symbol.iterator](){
        let self=this;
        let index=0;
        let arr=self.start.concat(self.end);
        let len=arr.length;
        return {
            next (){
                if(index
let...of的使用
let arr=["hello","world"];
for(let value of arr){
   console.log(value);
}
Generator
基本概念
Generator函數(shù)有多種理解角度。從語(yǔ)法上，首先可以把它理解成，Generator函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)。
執(zhí)行Generator函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，也就是說，Generator函數(shù)除了狀態(tài)機(jī)，還是一個(gè)遍歷器對(duì)象生成函數(shù)。返回的遍歷器對(duì)象，可以依次遍歷Generator函數(shù)內(nèi)部的每一個(gè)狀態(tài)。
形式上Generator函數(shù)是一個(gè)普通函數(shù)，但是有兩個(gè)特征。
function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)*；
函數(shù)體內(nèi)部使用yield語(yǔ)句，定義不同的內(nèi)部狀態(tài)（yield語(yǔ)句在英語(yǔ)里的意思就是“產(chǎn)出”）。
let tell=function* () {
    yield "a";
    yield "b";
    yield "c";
};
let k=tell();
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
上面代碼定義了一個(gè)Generator函數(shù)tell，它內(nèi)部有三個(gè)yield語(yǔ)句"a"，"b"和"c" ; 即該函數(shù)有三個(gè)狀態(tài)："a"，"b"和"c"語(yǔ)句（結(jié)束執(zhí)行）。
總結(jié)一下，調(diào)用Generator函數(shù)，返回一個(gè)遍歷器對(duì)象，代表Generator函數(shù)的內(nèi)部指針。以后，每次調(diào)用遍歷器對(duì)象的next方法，就會(huì)返回一個(gè)有著value和done兩個(gè)屬性的對(duì)象。value屬性表示當(dāng)前的內(nèi)部狀態(tài)的值，是yield語(yǔ)句后面那個(gè)表達(dá)式的值；done屬性是一個(gè)布爾值，表示是否遍歷結(jié)束。true：表示遍歷結(jié)束，false：表示遍歷沒結(jié)束；
yield
需要注意的是，yield語(yǔ)句后面的表達(dá)式，只有當(dāng)調(diào)用next方法、內(nèi)部指針指向該語(yǔ)句時(shí)才會(huì)執(zhí)行，因此等于為JavaScript提供了手動(dòng)的“惰性求值”（Lazy Evaluation）的語(yǔ)法功能。
function* gen() {
  yield  123 + 456;
}
上面代碼中，yield后面的表達(dá)式123 + 456，不會(huì)立即求值，只會(huì)在next方法將指針移到這一句時(shí)，才會(huì)求值。
yield語(yǔ)句注意事項(xiàng)
yield語(yǔ)句不能用在普通函數(shù)中，否則會(huì)報(bào)錯(cuò)。
yield語(yǔ)句如果用在一個(gè)表達(dá)式之中，必須放在圓括號(hào)里面。
console.log("Hello" + yield); // SyntaxError
console.log("Hello" + yield 123); // SyntaxError
console.log("Hello" + (yield)); // OK
console.log("Hello" + (yield 123)); // OK
yield語(yǔ)句用作函數(shù)參數(shù)或賦值表達(dá)式的右邊，可以不加括號(hào)。
foo(yield "a", yield "b"); // OK
let input = yield; // OK
暫緩執(zhí)行函數(shù)
Generator函數(shù)可以不用yield語(yǔ)句，這時(shí)就變成了一個(gè)單純的暫緩執(zhí)行函數(shù)。
function* f() {
  console.log("執(zhí)行了！")
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);
上面代碼中，函數(shù)f如果是普通函數(shù)，在為變量generator賦值時(shí)就會(huì)執(zhí)行。但是，函數(shù)f是一個(gè)Generator函數(shù)，就變成只有調(diào)用next方法時(shí)，函數(shù)f才會(huì)執(zhí)行。
Generator 與 Iterator接口的關(guān)系
任意一個(gè)對(duì)象的Symbol.iterator方法，等于該對(duì)象的遍歷器生成函數(shù)，調(diào)用該函數(shù)會(huì)返回該對(duì)象的一個(gè)遍歷器對(duì)象。
由于Generator函數(shù)就是遍歷器生成函數(shù)，因此可以把Generator賦值給對(duì)象的Symbol.iterator屬性，從而使得該對(duì)象具有Iterator接口。
//generator對(duì)象的新應(yīng)用：給obj對(duì)象部署Iterator;
let obj={};
obj[Symbol.iterator]=function* () {
    yield 1;
    yield 2;
    yield 3;
};
for(let value of obj){
    console.log(value);
}
用Generator寫抽獎(jiǎng)
let draw=function (count) {
    //具體抽獎(jiǎng)邏輯
    console.info(`剩余${count}抽獎(jiǎng)次數(shù)`);
};
let residue=function* (count) {
    while(count>0){
        count--;
        yield draw(count);
    }
};
let star=residue(5);
let btn=document.createElement("button");
btn.innerHTML="點(diǎn)擊抽獎(jiǎng)";
document.body.appendChild(btn);
btn.onclick=function () {
    star.next();
}
前端定時(shí)的去接收服務(wù)端的變化
兩種辦法：1）websocket-兼容性不好 ； 2)常輪詢-看如下代碼
let ajax=function* () {
    yield new Promise((resolve,reject)=>{
        setTimeout(function () {
            resolve({code:0})
        },200)
    })
};
let pull=function () {
    let generator=ajax();
    let step=generator.next();
    //拿回后臺(tái)的數(shù)據(jù)
    step.value.then(function (d) {
        if(d.code!=0){
            setTimeout(function () {
                console.info("wait");
                pull();
            },1000)
        }else{
            console.log(d);
        }
    })
};
pull();

云服務(wù)器 GPU云服務(wù)器報(bào)告解讀解讀源碼解讀解讀3

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88702.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LoftySoul

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow可視化網(wǎng)絡(luò)

閱讀 2477·2023-04-26 02:54
C語(yǔ)言static關(guān)鍵字

閱讀 2412·2021-10-14 09:43
云主機(jī)如何配置-云主機(jī)怎么使用？

閱讀 3511·2021-09-22 15:19
css3偽類和偽元素你都懂了嗎

閱讀 2905·2019-08-30 15:44
CSS3中的flexbox

閱讀 2767·2019-08-30 12:54
響應(yīng)式布局【flex】

閱讀 1052·2019-08-29 18:43
關(guān)于我

閱讀 1999·2019-08-29 17:12
sublime配置及使用技巧

閱讀 1389·2019-08-29 16:40

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

es 知識(shí)點(diǎn)解讀

相關(guān)文章

新上課程推薦：TypeScript完全解讀(總26課時(shí)）

1月份前端資源分享

ES規(guī)范解讀之賦值操作符&屬性訪問器

【用故事解讀 MobX 源碼（四）】裝飾器和 Enhancer

從用 void 0 代替 undefined 說起

發(fā)表評(píng)論

0條評(píng)論

LoftySoul

男|高級(jí)講師

TA的文章

tensorflow可視化網(wǎng)絡(luò)

C語(yǔ)言static關(guān)鍵字

云主機(jī)如何配置-云主機(jī)怎么使用？

css3偽類和偽元素你都懂了嗎

CSS3中的flexbox

響應(yīng)式布局【flex】

關(guān)于我

sublime配置及使用技巧

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

es 知識(shí)點(diǎn)解讀

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！