es6常用知识（二）

StonePanda 发布于2019-08-26 11:52 / 1484人阅读

摘要：这个类继承自，很多功能就可以直接用了有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式组件嵌套简写这个类继承自，很多功能就可以直接用了先用参数扩展，在把参数展开到里面去。

七.2 面相对象的应用（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对象转为为字符串形式的json。
例：如果想把对象{a:12,b:5}拼到url上就需要json的串行化

let json={a:12,b:5}
let str="https://www.baidu.com/"+json;
alert(str)
错误的 
结果是 https://www.baidu.com/[object Object]


let json={a:12,b:5}
// JSON有一个stringify  字符串化方法,其实就是串行化
let str="https://www.baidu.com/"+JSON.stringify(json);
alert(str)
// 错误的 
// 结果是 https://www.baidu.com/{"a":12,"b":5}



let json={a:12,b:5}
// JSON有一个stringify  字符串化方法,其实就是串行化
let str="https://www.baidu.com/"+encodeURIComponent(JSON.stringify(json));
alert(str)
// 正确的 
// 结果是 https://www.baidu.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D

2.
把字符串"{a:12,b:24,c:"abc"}"转为真正的json对象
json的标准写法是
1，只能用双引号例如c:"abc"
2,所以的名字都必须用引号包起来

let str="{a:12,b:24,c:"abc"}"
let json=JSON.parse(str)
console.log(json)
错误 ，因为json的标准写法是
1，只能用双引号 例如c:"abc"
2,所以的名字都必须用引号包起来

正确写法是如下

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

正确了，结果是{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()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107735.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》本篇文章是对之前文章...

hidogs 2019-08-23 14:07 评论0 收藏0
前端基础进阶（十四）：es6常用基础合集

摘要：在继承的构造函数中，我们必须如上面的例子那么调用一次方法，它表示构造函数的继承，与中利用继承构造函数是一样的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格，...

Ryan_Li 2019-08-21 18:31 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0