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

作者：chen.yu
深信服三年半工作经验，目前就职游戏厂商，希望能和大家交流和学习,
微信公众号：编程入门到秃头 或扫描下面二维码
零基础入门进阶人工智能(链接)