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
相关文章
|
4天前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
6天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
5天前
|
JavaScript 前端开发 API
vue和react的区别是什么
vue和react的区别是什么
13 2
|
22天前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
26 0
|
29天前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
1月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
1月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
24 1
|
1月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
14 3
|
1月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
11 0

相关产品

  • 云迁移中心