在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

React Native之(var和let區(qū)別 )(簡單解構)(map對象遍歷)(可變順序參數和不可以變順序參數函數)

1 var和let區(qū)別

   let左右范圍在塊里面,var定義的變量可提升,用let聲明的變量不可以聲明2次

2 簡單解構

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 可變順序參數和不可以變順序參數函數

//參數是{}格式這種調用可以無序,一般參數都是鍵值對形式進行傳遞

 //參數是[]格式需要有順序

 
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>
        );
      }
     
        //參數是{}格式這種調用可以無序,一般參數都是鍵值對形式進行傳遞
        move1({x = 0, y = 0} = {}) {
            return x + y;
        }
        //參數是{}格式這種調用可以無序,一般參數都是鍵值對形式進行傳遞
        move2 = ({x, y} = {x: 0, y: 0}) => {
        return x + y;
        }
        //參數是[]格式需要有順序,
        move3([x, y, z]) {
        return x + y + z;
        }
        //參數是[]格式需要有順序,
        move4 = ([x, y ,z]) => {
        return x + y + z;
        }
            
     
        //記得這里調用的時候不需要加上()
        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]();
        //遍歷map
        const 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 運行結果

手機界面效果如下

點擊上面的 7 按鈕 日志如下

              ReactNativeJS  I  chenyu
          SettingsInterface  V  invalidate [system]: current 633 != cached 0
              ReactNativeJS  I  10
                             I  10
                             I  10
                             I  0
                             I  1
                             I  6
                             I  first is hello
                             I  second is world
                             I  1 + 2:3
                             I  3 + 4:7
                             I  100, 'chenyu', [ 100, 200 ]
                             I  5
                             I  5
                             I  5
                             I  5
                             I  5
                             I  0
                             I  1
                             I  2
                             I  3
                             I  4
                             I  5

作者：chen.yu
深信服三年半工作經驗，目前就職游戲廠商，希望能和大家交流和學習,
微信公眾號：編程入門到禿頭 或掃描下面二維碼
零基礎入門進階人工智能(鏈接)