成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6常用知識(shí)（二）

StonePanda / 1588人閱讀

摘要：這個(gè)類繼承自，很多功能就可以直接用了有兩種傳參方式，一種是字符串，另外一種是表達(dá)式，當(dāng)傳字符串之外的類型的時(shí)候，用表達(dá)式組件嵌套簡寫這個(gè)類繼承自，很多功能就可以直接用了先用參數(shù)擴(kuò)展，在把參數(shù)展開到里面去。

七.2 面相對象的應(yīng)用 （react）

react：
1，組件化 -class
2，jsx
jsx==babel==browser.js




    
    Document





class Test extends React.Component{

    constructor(...args){
    
        super(...args)  
    
        render(){ 
    
    return 123
    
        }
    }
}

2 組件的嵌套




    
    Document





class Item extends React.Component{

    constructor(...args){
    
        super(...args)  
    
        render(){ 
    
    return 
  • {this.props.str}
    • 
    
        }
    }
}
class List extends React.Component{

    constructor(...args){
        super(...args)  
        render(){ 
        let aItems=[]
        for (let i=0;i)
        }
        return 
      
        {aItems}
        
    
    
        }
    }
}

    組件嵌套 簡寫1

    


    
    Document





class Item extends React.Component{

    constructor(...args){
    
        super(...args)  
    
        render(){ 
    
    return 
  • {this.props.str}
    • 
    
        }
    }
}
class List extends React.Component{

    constructor(...args){
        super(...args)  
        render(){ 
        
        let aItems=this.props.arr.map(a=>)
        return 
      
        {aItems}
        
    
    
        }
    }
}

    
    



3，更簡寫



    
    Document





class Item extends React.Component{

    constructor(...args){
    
        super(...args)  
    
        render(){ 
    
    return 
  • {this.props.str}
    • 
    
        }
    }
}
class List extends React.Component{

    constructor(...args){
        super(...args)  
        render(){ 
        
        不需要墊上aItems，直接寫在return里
        return 
      
        {this.props.arr.map(a=>)}
        
    
    
        }
    }
}
    八. json

    1.把真正的json對象轉(zhuǎn)為為字符串形式的json。
    例：如果想把對象{a:12,b:5}拼到url上就需要json的串行化

    let json={a:12,b:5}
let str="https://www.baidu.com/"+json;
alert(str)
錯(cuò)誤的 
結(jié)果是 https://www.baidu.com/[object Object]


let json={a:12,b:5}
// JSON有一個(gè)stringify  字符串化方法,其實(shí)就是串行化
let str="https://www.baidu.com/"+JSON.stringify(json);
alert(str)
// 錯(cuò)誤的 
// 結(jié)果是 https://www.baidu.com/{"a":12,"b":5}



let json={a:12,b:5}
// JSON有一個(gè)stringify  字符串化方法,其實(shí)就是串行化
let str="https://www.baidu.com/"+encodeURIComponent(JSON.stringify(json));
alert(str)
// 正確的 
// 結(jié)果是 https://www.baidu.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D

    2.
    把字符串"{a:12,b:24,c:"abc"}"轉(zhuǎn)為真正的json對象
    json的標(biāo)準(zhǔn)寫法是
    1，只能用雙引號(hào) 例如c:"abc"
    2,所以的名字都必須用引號(hào)包起來

    let str="{a:12,b:24,c:"abc"}"
let json=JSON.parse(str)
console.log(json)
錯(cuò)誤 ，因?yàn)閖son的標(biāo)準(zhǔn)寫法是
1，只能用雙引號(hào) 例如c:"abc"
2,所以的名字都必須用引號(hào)包起來

    正確寫法是如下

    let str="{"a":12,"b":24,"c":"abc"}"
let json=JSON.parse(str)
console.log(json)

正確了，結(jié)果是{a: 12, b: 24, c: "abc"}

    json 簡寫
    1.名字一樣可簡寫
    2，方法簡寫

    let a=12;
b=5;
let json ={a:a,b:b,c:12}
console.log(json)
{a: 12, b: 5, c: 12}

    簡寫：名字一樣可簡寫

    let a=12;
b=5;
let json ={a,b,c:112}
console.log(json)
{a: 12, b: 5, c: 112}

    json里有方法

    let  json={
    a:12,
    show:function(){
        alert(this.a)
    }
}
json.show()

    簡寫：方法可簡寫

        let  json={
        a:13,
        show(){
            alert(this.a)
        }
    }
    json.show()

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

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107735.html

    相關(guān)文章

    • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

      摘要：特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

      princekin 評論0 收藏0

    • [ ES6 ] 快速掌握常用 ES6 （二）

      摘要：本系列文章適合快速掌握入門語法，想深入學(xué)習(xí)的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個(gè)補(bǔ)充，可以使代碼更簡潔函數(shù)參數(shù)默認(rèn)值在傳統(tǒng)語法中如果想設(shè)置函數(shù)默認(rèn)值一般我們采用判斷的形式在新的語法中我們可以在參數(shù)聲明的同時(shí)賦予默認(rèn)值參數(shù) 本系列文章適合快速掌握 ES6 入門語法，想深入學(xué)習(xí) ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》 本篇文章是對之前文章...

      hidogs 評論0 收藏0

    • 前端基礎(chǔ)進(jìn)階（十四）：es6常用基礎(chǔ)合集

      摘要：在繼承的構(gòu)造函數(shù)中，我們必須如上面的例子那么調(diào)用一次方法，它表示構(gòu)造函數(shù)的繼承，與中利用繼承構(gòu)造函數(shù)是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實(shí)際開發(fā)中，ES6已經(jīng)非常普及了。掌握ES6的知識(shí)變成了一種必須。盡管我們在使用時(shí)仍然需要經(jīng)過babel編譯。 ES6徹底改變了前端的編碼風(fēng)格，...

      Ryan_Li 評論0 收藏0

    • [譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

      摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時(shí)關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個(gè)問題，剛才提到的比較麻煩的元素選擇這個(gè)動(dòng)作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

      roadtogeek 評論0 收藏0

    發(fā)表評論

    0條評論

    StonePanda

    男|高級講師

    TA的文章

    閱讀更多
    最新活動(dòng)
    閱讀需要支付1元查看
    <