React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)

简介: 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 运行结果

20170724223902569.png

点击上面的 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
相关文章
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
21 1
|
1月前
|
存储 JavaScript 前端开发
Set、Map、WeakSet 和 WeakMap 的区别
在 JavaScript 中,Set 和 Map 用于存储唯一值和键值对,支持多种操作方法,如添加、删除和检查元素。WeakSet 和 WeakMap 则存储弱引用的对象,有助于防止内存泄漏,适合特定场景使用。
|
2月前
ES6中map对象的使用,确实比Object好使哈
ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。
32 1
ES6中map对象的使用,确实比Object好使哈
|
1月前
|
存储 缓存 Java
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
38 1
|
2月前
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件,将其内容转化为JSON对象,并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程,并提供了一个封装函数,用于在发起请求前动态生成配置化的URL地址。
81 1
WK
|
2月前
|
Python
map和filter的区别是什么
`map()`和`filter()`均为Python中的高阶函数,前者针对可迭代对象中的每个元素执行指定操作,如数值翻倍或字符串转大写;后者则筛选出符合条件的元素,例如仅保留偶数或非空字符串。两者均返回迭代器,并可通过`list()`等函数转换为所需的数据结构。具体使用时,应依据实际需求和场景选择合适的函数。
WK
19 1
WK
|
2月前
map和filter的区别是什么
在编程中,`map` 和 `filter` 是处理数组或集合时常用的两个函数。`map` 用于将每个元素通过指定函数转换后生成新的数组,而 `filter` 则根据条件筛选出符合条件的元素组成新数组。两者的主要区别在于:`map` 的返回数组长度与原数组相同,但元素被转换;`filter` 的返回数组长度可能不同,只包含符合条件的元素。
WK
31 2
|
2月前
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
3月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。
|
3月前
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。
下一篇
无影云桌面