ES6典型语法示例(ReactNative语法入门)

ReactNative的语法基础要求JS,JSX,ES6.其中ES6是这三种语法的核心.系统学习ES6的语法是ReactNative编程的基本要求.下面记录ES6的典型语法的示例,以方便编程中的随时查用.
1定义变量, 关键字const, var, let. let定义的变量,作用域为代码块;var定义的变量,作用域能穿透后面代码块;const修改的变量不可修改;
let a = 1;
var b = 'string';
const c = 2;

let和var在for循环使用中的区别:

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

2变量的解构赋值.对变量复制时,当等号左边定义的变量和等号右边的赋值形式一致时,能够对变量自动赋值;
let {a, b} = {a:"x", b:"y"};
//a = x, b = y;
let [a, b] = [0, 1, 2, 3];
//a=0, b = 1;
let [a, ...b] = [0, 1, 2, 3];
//a=0, b = [1,2,3];
3操作字符串.
(1)遍历

for(i of 'hello') {
      console.log(i);
 }
//
[info][tid:com.facebook.react.JavaScript] h
[info][tid:com.facebook.react.JavaScript] e
[info][tid:com.facebook.react.JavaScript] l
[info][tid:com.facebook.react.JavaScript] l
[info][tid:com.facebook.react.JavaScript] o

(2)引用

var a = 'hello'
    var ch =  a.charAt(1);
    console.log(ch);
//e

(3)判断

var a = 'hello'
    a.startsWith('he')//true
    a.startsWith('lo')//true
    a.includes('ll')//true

(4)引用(使用右上顿号)

var a = 'Hello'
    console.log(`${a} world!`)

4操作数值
(1)判断

//是否是非无穷大
Number.isFinite(15)//true
Number.isFinite('a')//true
Number.isFinite(NaN)//false
//是否是整数
Number.isInteger(15)//true
Number.isInteger('15')//false

(2)转化

Number.parseInt("12.34") // 12
Number.parseFloat('123.45#') // 123.45

(3)Math应用

//去除小数部分
Math.trunc(1.2)//1
Math.trunc(-1.2)//-1
//数字符号,正数为+1,负数为-1,0位0
Math.sign(-1)//-1
Math.sign(1)//+1
Math.sign(0)//0

5操作数组

(1)创建
var arr = ['a', 'b', 'c'];
var arr1 = Array.from('a', 'b', 'c');//['a', 'b', 'c']
var arr2 = Array.from({ 0: "a", 1: "b", 2: "c"});//['a', 'b', 'c']
var arr3 = Array.of('a', 'b', 'c')//['a', 'b', 'c']
(2)查找
var arr = [0, 1, 2, 3];
    //返回第一个满足条件的值
    var result = arr.find((value, index, arr) => {
      return value > 1;
    })
    console.log(result);//2
//返回第一个满足条件值的索引
    var resultIndex = arr.findIndex((value, index, arr) => {
      return value > 2;
    });
    console.log(resultIndex);//3
(3)遍历
    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
// 0
// 1

    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
// 'a'
// 'b'

    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
// 0 "a"
// 1 "b"

6操作对象

(1)定义
var obj = {
      name: 'Lily',

      speak(){
        console.log(`My name is `+ this.name);
      }
    }
    obj.speak();//My name is Lily
(2)添加属性和方法
obj['age'] = 10;
    console.log(obj['age']);
obj.speakAge = function(){
      console.log('My age is ' + this.age);
    }
    obj.speakAge();

7定义函数

(1)一般定义方式
function foo() {
      console.log('first function');
    }
(2)简化定义方式(ES6推荐写法)
var foo = () => {
      console.log('another function');
    }
(3)函数的rest参数
var foo = (x, y, ...z) => {
      console.log(x, y, z);
    }

    foo(1,2,3,4,5);
//1, 2, [ 3, 4, 5 ]

8Set和Map数据类型
类似OC中的NSSet和NSDictionary,是ReactNative中两种常用的基本数据类型.

(1)Set能保证里面元素的唯一性
>1 定义
let setOne = new Set();
//接受数组参数
let setTwo = new Set([0, 1, 2, 2]);//[0, 1, 2]
>2 属性和方法
setTwo.size;//3 获取元素个数
setTwo.add(3);//添加
setTwo.delete(3);//删除
setTwo.has(2);//true查找
>3 遍历
    for (i of setTwo.keys()) {
      console.log('keys:  ' + i);
    }

    for (i of setTwo.values()) {
      console.log('values:  ' + i);
    }

    for ([key, value] of setTwo.entries()) {
      console.log('key:  ' + key +  '   value   ' + value);
    }
//
keys:  0
keys:  1
keys:  2
values:  0
values:  1
values:  2
key:  0   value   0
key:  1   value   1
key:  2   value   2
(2)Map是key和value一一对应的键值对
>1定义
    let m = new Map();
    let m2 = new Map([['name', 'Lily'], ['age', 10]]);
>2属性和方法
    m2.get('name');//Lily
    m2.set('name', 'Json');
    m2.size;//2
    m2.has('name');//true
    m2.delete('name');//true
    m2.clear();
//
keys:  name
keys:  age
values:  Lily
values:  10
key:  name   value   Lily
key:  age   value   10

9Generator函数
通过在函数名前添加*和在方法中添加yield关键字来定义,控制函数的顺序执行.

function *genFun() {
      yield 'Lily';
      yield 'Json';
      return 'Niu';
    }
    let gen = genFun();
    genFun().next();//{value: 'Lily', done: false}
    genFun().next();//{value: 'Json', done: false}
    genFun().next();//{value: 'Niu', done: true}
//可以使用for of 语句来遍历
for (i of gen) {
      console.log(i);
    }
//return后的元素,不会被遍历到
Lily
Json

10Promise对象
通过定义Promise和关键字then的结合,可以方便实现函数的成功回调和失败回调.

(1)定义
    var prom = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('download success')
        resolve('success');
      }, 1000);
    });

    prom.then((flag) => {
      console.log('success block:' + flag);
    }, (error) => {
      console.log('failure block:' + error);
    })
(2)async关键字和Promise实例相结合,实现多个异步线程的顺序执行;
    async function foo() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 5000);
      });

      console.log('await function completed');
    }
    foo();
//打印消息会在5s后resolve回调执行后,才执行;

11Class和Module
弱模块一直是JS令人诟病的地方.现在ES6中,可以通过import命令,可以方便引用其他Module.

<1>class的定义
    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      set personName(name) {
        this.name = name;
      }

      get personName() {
        return this.name;
      }

      speak() {
        console.log(`My name is ${this.name}, my age is ${this.age}`);
      }
    }
<2>class的继承
    class Student extends Person {
      constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
      }

      speak() {
        super.speak();
        console.log(`My grade is ${this.grade}`);
      }
    }
<3>class的静态方法
    class Person {
      static eat() {
        console.log('I eat every day!');
      }
    }
    Person.eat();
module模块的导入
//person.js文件
export var firstName = 'Json';
export var secondName = 'Frank';
export var age = 18;

export  default function speak () {
    console.log('I am a Person');
}
//main.js文件中导入
import speak, {firstName, secondName, age} from './person';
//将对象导出,只需要在前面加上关键字export即可.由于export default默认导出的设置,speak名字可以不同,如下:
import speakAnother, {firstName, secondName, age} from './person';

以上语法是结合对项目进行ReactNative改造后,总结出来的需要掌握的基本语法.掌握以上语法,对一个简单ReactNative项目,能够更快理解和上手操作,希望帮助到需要的小伙伴.
以上内容均节选自电子书ES6新语法,继续深入学习,可以详细翻阅.

喜欢和关注都是对我的支持和鼓励~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,539评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,911评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,337评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,723评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,795评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,762评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,742评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,508评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,954评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,104评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,736评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2赞 352

推荐阅读更多精彩内容

  • 你不懂JS：ES6与未来 第二章：语法（上）
    官方中文版原文链接 感谢社区中各位的大力支持，译者再次奉上一点点福利：阿里云产品券，享受所有官网优惠，并抽取幸运大...
    HetfieldJoe阅读 3,032评论 3赞 37
  • 第二章：语法 1
    特别说明，为便于查阅，文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 567评论 0赞 0
  • ES6的let 和 const 命令
    let 和 const 命令 let 命令 块级作用域 const 命令 顶层对象的属性 gl...
    安小明阅读 980评论 0赞 0
  • 学习
    新事物很多 很多 不要以为拥有一样新事物你就以为真的拥有 大意失荆州？ 没这么严重 往往会有一些小惩罚 教会我要正...
    翘首比肩阅读 211评论 0赞 0