React Native之(var和let差別 )(簡單解構)(map對象周遊)(可變順序參數和不可以變順序參數函數)

1 var和let差別

   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