脚本宝典收集整理的这篇文章主要介绍了es6常用知识（二），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
七.2 面相对象的应用 （react）
react：
1，组件化 -class
2，jsx
jsx==babel==browser.js
<!DOCTYPE htML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Test extends React.COMponent{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
<!-- 1,先用参数扩展 -->
super(...args)
<!-- 2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
render(){
<!-- react组件里什么都可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
return <span>123</span>
}
}
}
<script >
window.onload=function(){
let oDiv=document.getElementById('div1')
ReactDOM.render(
<Test></Test>,
oDiv
)
}
</script>
<div id="div1"></div>
<body>2 组件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<;meta charset="UTF-8">
<title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Item extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
<!-- 1,先用参数扩展 -->
super(...args)
<!-- 2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
render(){
<!-- react组件里什么都方法可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
return <li>{this.props.str}</li>
}
}
}
class List extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
super(...args)
render(){
let aItems=[]
for (let i=0;i<this.props.arr.length;i++){
aItems.push(<Item str={this.props.arr}></Item>)
}
return <ul>
{aItems}
</ul>
}
}
}
<script >
window.onload=function(){
let oDiv=document.getElementById('div1')
ReactDOM.render(
<List arr={['abc','bbb','afw']}></List>,
// react有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式{}
oDiv
)
}
</script>
<div id="div1"></div>
<body>
组件嵌套 简写1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Item extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
<!-- 1,先用参数扩展 -->
super(...args)
<!-- 2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
render(){
<!-- react组件里什么都方法可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
return <li>{this.props.str}</li>
}
}
}
class List extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
super(...args)
render(){
<!-- 实际上就是把['abc','bbb','afw']映射为<Item str='abc'></Item><Item str='bbb'></Item><Item str='afw'></Item> -->
let aItems=this.props.arr.map(a=><Item str={a}></Item>)
return <ul>
{aItems}
</ul>
}
}
}
<script >
window.onload=function(){
let oDiv=document.getElementById('div1')
ReactDOM.render(
<List arr={['abc','bbb','afw']}></List>,
// react有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式{}
oDiv
)
}
</script>
<div id="div1"></div>
<body>
3，更简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Item extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
<!-- 1,先用参数扩展 -->
super(...args)
<!-- 2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
render(){
<!-- react组件里什么都方法可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
return <li>{this.props.str}</li>
}
}
}
class List extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
constructor(...args){
super(...args)
render(){
<!-- 实际上就是把['abc','bbb','afw']映射为<Item str='abc'></Item><Item str='bbb'></Item><Item str='afw'></Item> -->
不需要垫上aItems，直接写在return里
return <ul>
{this.props.arr.map(a=><Item str={a}></Item>)}
</ul>
}
}
}
<script >
window.onload=function(){
let oDiv=document.getElementById('div1')
ReactDOM.render(
<List arr={['abc','bbb','afw']}></List>,
// react有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式{}
oDiv
)
}
</script>
<div id="div1"></div>
<body>
八. 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()以上是脚本宝典为你收集整理的es6常用知识（二）全部内容，希望文章能够帮你解决es6常用知识（二）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。