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]();//遍历mapconst 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  chenyuSettingsInterface  V  invalidate [system]: current 633 != cached 0ReactNativeJS  I  10I  10I  10I  0I  1I  6I  first is helloI  second is worldI  1 + 2:3I  3 + 4:7I  100, 'chenyu', [ 100, 200 ]I  5I  5I  5I  5I  5I  0I  1I  2I  3I  4I  5

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

[RN] React Native 错误 Module does not exist in the module map
React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index ...
ES6/06/ES6简介，ES6新增语法，let声明变量，const声明常量，var,let和const总结，数组解构，对象解构，箭头函数，剩余参数
ES6简介 ES全称:ECMAScript ; 由ECMA国际化组织制定的标准脚本语言的标准化规范: 为什么使用ES6? 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也 ...
React Native之React速学教程
本文出自<React Native学习笔记>系列文章. React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识.虽然官方也有相 ...
React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解React Native与iOS之间的通信交互. 本篇主要分为两部分讲解:(关于其中讲解的OC语法等不介绍,不懂的请自行 ...
Airbnb 弃用之后，我们还应该用 React Native 吗？
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 在过去几年,当人们谈到 React Native 时,都会马上联想到 Airbnb 在这方面 ...
Taro3.2 适配 React Native 之运行时架构详解
导读由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了.目前发布了多个体验版,也将在3月底迎来正式版.基于 Taro 的良好架构演变,适配 React N ...
React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...
React Native Animated 动画详解 - 实例篇 (这篇就够了)
之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例.学习完本篇相信大家对于动画库的基本使用应该是没有问题 ...

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

1 var和let区别

2 简单解构

3 map对象遍历

4 可变顺序参数和不可以变顺序参数函数

5 测试代码

6 运行结果

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

最新文章

热门文章