測試ES6語法的小例子
'use strict';
import React, {
StyleSheet,
Text,
View,
TextInput,
TouchableHighlight,
Platform,
Component
} from 'react-native';
class ECMAScript6Sample extends React.Component {
constructor(props){
super(props);
this.state = {
name : '初始值' ,
};
}
render() {
return (<View style = {styles.container}>
<ConsoleView name = {this.state.name}></ConsoleView>
<View style = {styles.btnContainer}>
<TouchableHighlight style = {styles.button} underlayColor = {'#00FF00'} onPress = {() => this.test001()}>
<Text style = {styles.text} >循環</Text>
</TouchableHighlight>
<TouchableHighlight style = {styles.button} underlayColor = {'#00FF00'} onPress = {() => this.test002(2,3,4)}>
<Text style = {styles.text} >函數rest參數</Text>
</TouchableHighlight>
<TouchableHighlight style = {styles.button} underlayColor = {'#00FF00'} onPress = {() => this.test003(2,3,4)}>
<Text style = {styles.text} >動態字符串</Text>
</TouchableHighlight>
</View>
</View>
);
}
/*
* ES6引入了for ... of循環作為遍歷所有數據結構的統一方法。一個數據結構只要部署了Symbol.iterator屬性，就被視為具有Iterator接口，就可以用for
* ... of 循環遍歷它的成員。
*/
test001(){
const arr = ['red' , 'green' ,'blue'];
let str = '';
for(let v of arr){
str += v;
}
this.log(str);
}
/**
* ES6引入了rest參數（形式為"... 變量名"）
*/
test002(...values){
let sum = 0 ;
for(var v of values){
sum += v;
}
this.log(sum);
}
/**
* 測試動態字符串
*/
test003(...values){
let sum = 0 ;
for(var v of values){
sum += v;
}
this.log(`test(...values){
let sum = 0 ;
for(var v of values){
sum += v;
}
console.log(sum);
}
sum = ${sum}`);
}
/**
* 重置狀態導致頁面重新渲染
*/
log(str : string){
this.setState({name : str});
}
}
class ConsoleView extends React.Component{
render(){
return(
<View style = {styles.consoleContainer}>
<Text>{this.props.name}</Text>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
backgroundColor: '#FFFFFF',
marginTop : 64 ,
},
btnContainer: {
flex : 1 ,
backgroundColor : '#FFFFFF' ,
padding : 10 ,
},
consoleContainer :{
height : 200 ,
backgroundColor : '#F0F0F0' ,
padding : 10 ,
margin : 10 ,
borderWidth : 2 ,
borderColor : 'blue' ,
borderRadius : 10 ,
},
button : {
height : 50 ,
backgroundColor : '#2438d2',
borderRadius : 6 ,
alignItems : 'center' ,
marginBottom : 10 ,
justifyContent : 'center' ,
},
text : {
color : 'white',
fontSize : 16 ,
},
})
module.exports = ECMAScript6Sample;
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
