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新语法,继续深入学习,可以详细翻阅.
喜欢和关注都是对我的支持和鼓励~
网友评论