React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
生活随笔
收集整理的這篇文章主要介紹了
React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1 var和let區(qū)別
?? let左右范圍在塊里面,var定義的變量可提升,用let聲明的變量不可以聲明2次
?
?
?
2 簡單解構(gòu)
let [a, b, c] = [1, 2, 3];?
?
3? map對象遍歷
const map = new Map();map.set('first', 'hello');map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value);}?
?
4 可變順序參數(shù)和不可以變順序參數(shù)函數(shù)
//參數(shù)是{}格式這種調(diào)用可以無序,一般參數(shù)都是鍵值對形式進(jìn)行傳遞
?//參數(shù)是[]格式需要有順序
?
?
?
5 測試代碼
/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react'; import {Platform, ScrollView, StyleSheet, Text, View, TextInput, NativeModules, DeviceEventEmitter, Image, Button, AppRegistry, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback} from 'react-native';const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',android:'Double tap R on your keyboard to reload,\n' +'Shake or press menu button for dev menu', });export default class App extends Component<Props> {render() {return (<View style={styles.container}><View style={styles.buttonContainer}><Button onPress={() => this.ff()} title="press me"/></View> <View style={styles.buttonContainer}><Button onPress={this.ff} title="press me" color="#841584"/></View> <View style={styles.buttonContainer}><TouchableHighlight onPress={this.showMsg} underlayColor="white"><View style={styles.button}><Text style={styles.text}>{this.move1({x: 3, y: 4})}</Text></View></TouchableHighlight></View> <View style={styles.buttonContainer}><TouchableOpacity onPress={this.showMsg}><View style={styles.button}><Text style={styles.text}>{this.move3([3, 4, 5])}</Text></View></TouchableOpacity></View> <View style={styles.buttonContainer}><TouchableNativeFeedback onPress={this.showMsg}><View style={styles.button}><Text style={styles.text}>{this.move2({y: 4, x: 3})}</Text></View></TouchableNativeFeedback></View> <View style={styles.buttonContainer}><TouchableWithoutFeedback onPress={this.showMsg}><View style={styles.button}><Text style={styles.text}>{this.move4([3, 4, 5])}</Text></View></TouchableWithoutFeedback></View> <View style={styles.buttonContainer}><TouchableWithoutFeedback onLongPress={this.showMsg}><View style={styles.button}><Text style={styles.text}>onLongPress me</Text></View></TouchableWithoutFeedback></View> <View style={styles.layoutButtonContainer}><Button onPress={this.showMsg} title="onLongPress me"/><Button onPress={this.showMsg} title="onLongPress me" color="#841584"/></View> </View>);}//參數(shù)是{}格式這種調(diào)用可以無序,一般參數(shù)都是鍵值對形式進(jìn)行傳遞move1({x = 0, y = 0} = {}) {return x + y;}//參數(shù)是{}格式這種調(diào)用可以無序,一般參數(shù)都是鍵值對形式進(jìn)行傳遞move2 = ({x, y} = {x: 0, y: 0}) => {return x + y;}//參數(shù)是[]格式需要有順序,move3([x, y, z]) {return x + y + z;}//參數(shù)是[]格式需要有順序,move4 = ([x, y ,z]) => {return x + y + z;}//記得這里調(diào)用的時候不需要加上()showMsg() {console.log("chenyu"); for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 0);}for (let j = 0; j < 6; j++) {setTimeout(function() {console.log(j);}, 0);}var a = [];for (var k = 0; k < 10; ++k) {a[k] = function() {console.log(k);};}a[0]();a[1]();a[6]();var b = [];for (let j = 0; j < 10; j++) {b[j] = function() {console.log(j);};}b[0]();b[1]();b[6]();//遍歷mapconst map = new Map();map.set('first', 'hello');map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value);}var [c, d] = [[1, 2], [3, 4]].map(([a, b]) => a + b);console.log("1 + 2:" + c);console.log("3 + 4:" + d);let jsonData = {id: 100, name:"chenyu", data:[100, 200]};let {id, name, data:number} = jsonData;console.log(id, name, number);} }const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center'},buttonContainer: {margin:10},layoutButtonContainer: {margin:10,flexDirection: 'row',justifyContent: 'space-between'},button: {alignItems: 'center',backgroundColor: '#842534'},text: {padding: 10,color: 'white'} });?
?
?
?
?
?
6 運(yùn)行結(jié)果
手機(jī)界面效果如下
?
點(diǎn)擊上面的 7 按鈕 日志如下
ReactNativeJS I chenyuSettingsInterface V invalidate [system]: current 633 != cached 0ReactNativeJS I 10I 10I 10I 0I 1I 6I first is helloI second is worldI 1 + 2:3I 3 + 4:7I 100, 'chenyu', [ 100, 200 ]I 5I 5I 5I 5I 5I 0I 1I 2I 3I 4I 5?
總結(jié)
以上是生活随笔為你收集整理的React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: React Native之触摸事件(To
- 下一篇: Git之添加公钥之后git clone