Android：ReactNative語法基礎（上）

ES6特性

• 類
• 模塊化
• 箭頭函數
• 函數參數默認值
• 模板字符串
• 解構賦值
• 延展操做符
• 對象屬性簡寫
• Promise
• Let與Const

一、類

引入類的概念，讓其具備面向對象的開發

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
}
複製代碼

二、模塊化

模塊之間的相互調用關係是經過export來規定模塊對外暴露的接口，經過import來引用其它模塊提供的接口

export var name = 'Rainbow';                        //導出變量
export const sqrt = Math.sqrt;                      //導出常量

var name = 'Rainbow';                               //導出多個變量
var age = '24';
export {name, age};

export function myModule(someArg) {                 //導出函數
  return someArg;
}

export default class MyComponent extends Componet{  //導出組件
    render(){
        <Text>自定義組件</Text>
    }
}
複製代碼

定義好模塊的輸出之後就能夠在另一個模塊經過import引用

import {myModule} from 'myModule';    //導入函數
import {name,age} from 'test';        //導入變量
import MyComponent from 'MyComponent' //導入組件
複製代碼

三、箭頭函數

箭頭函數與包圍它的代碼共享同一個this,能幫你很好的解決this的指向問題

()=>{
    alert("foo");
}
複製代碼

錯誤示範

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    
    }
}
複製代碼

正確示範

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
    
    }
}
複製代碼

四、函數參數默認值

function foo(height = 50, color = 'red'){}
複製代碼

五、模板字符串

var name = `Your name is ${firstname} ${lastname}`
複製代碼

六、解構賦值

從數組中獲取值

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
複製代碼

交換兩個變量的值

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
複製代碼

獲取對象中的值

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'
};

const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age);  // "18"
console.log(city); // "Shanghai"
複製代碼

七、延展操做符

延展操做符...，能夠對數組、對象、string進行展開操做

myFunction(...iterableObj);             //對函數展開
[...iterableObj, '4', ...'hello', 6];   //對數組展開
let objClone = { ...obj };              //對對象展開
複製代碼

對數組展開

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2]; // 將 arr2 中全部元素附加到 arr1 後面並返回
複製代碼

對對象展開

var params = {
	name: '123',
	title: '456',
	type: 'aaa'
}

var { type, ...other } = params;

<CustomComponent type='normal' number={2} {...other} />
//等同於
<CustomComponent type='normal' number={2} name='123' title='456' />
複製代碼

八、對象屬性簡寫

簡寫前

const name='Ming',age='18',city='Shanghai';

const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);
複製代碼

簡寫後

const name='Ming',age='18',city='Shanghai';

const student = {
    name,
    age,
    city
};
console.log(student);
複製代碼

九、Promise

Promise是異步編程的一種解決方案，在不使用Promise的時候須要嵌套多層代碼

setTimeout(function()
{
    console.log('Hello'); // 1秒後輸出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒後輸出"Hi"
    }, 1000);
}, 1000);
複製代碼

使用Promise後，只須要經過then操做符進行操做

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
        console.log("Hello"); // 1秒後輸出"Hello"
        return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒後輸出"Hi"
    });
複製代碼

十、Let與Const

const與let都是塊級做用域

{
  var a = 10;   // 全局做用域
}
console.log(a); // 輸出10

{
  let a = 10;   // const或let，塊級做用域
}
console.log(a); //-1 or Error「ReferenceError: a is not defined」
複製代碼

ES7特性

• includes()
• 指數操做符

一、includes()

includes()函數用來判斷一個數組是否包含一個指定的值

arr.includes(x)
//等同於
arr.indexOf(x) >= 0   
複製代碼

二、指數操做符

引入了指數運算符**，** 具備與**Math.pow(..)**等效的計算結果

console.log(Math.pow(2, 10)); // 輸出1024
console.log(2**10);           // 輸出1024
複製代碼

ES8特性

• async/await
• Object.values()
• Object.entries()
• String padding
• 函數參數列表結尾容許逗號
• Object.getOwnPropertyDescriptors()

一、async/await

async/await是異步函數，結合Promise，在使用上使整個代碼看起來很簡潔

//登錄用戶
login(userName) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('1001');
        }, 600);
    });
}
//獲取用戶數據
getData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === '1001') {
                resolve('Success');
            } else {
                reject('Fail');
            }
        }, 600);
    });
}

// 不使用async/await
doLogin(userName) {
    this.login(userName)
        .then(this.getData)
        .then(result => {
            console.log(result)
        })
}

// 使用async/await
async doLogin(userName) {
    const userId=await this.login(userName);
    const result=await this.getData(userId);
}
doLogin('Hensen').then(console.log); //經過then獲取異步函數的返回值
複製代碼

async/await支持併發操做，咱們經過Promise.all來實現await的併發調用

async function charCountAdd(data1, data2) {
    const [d1,d2]=await Promise.all([charCount(data1),charCount(data2)]);
    return d1+d2;
}

charCountAdd('Hello','Hi')
    .then(console.log)
    .catch(console.log); //捕捉整個async/await函數的錯誤

function charCount(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data.length);
        }, 1000);
    });
}
複製代碼

二、Object.values()

遍歷對象的全部值

const obj = {a: 1, b: 2, c: 3};

const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]

const values=Object.values(obj1);
console.log(values);//[1, 2, 3]
複製代碼

三、Object.entries()

遍歷對象的全部key和value

Object.keys(obj).forEach(key=>{
	console.log('key:'+key+' value:'+obj[key]);
})

for(let [key,value] of Object.entries(obj1)){
	console.log(`key: ${key} value:${value}`)
}
複製代碼

四、String padding

PadStart和PadEnd函數可向左、右填充字符串（如空格），若是目標長度過短則不填充，若是目標長度有多餘的空位，則填補參數padString的值

// String.prototype.padStart(targetLength [, padString])
'hello'.padStart(10); // ' hello'
'hello'.padStart(10, '0'); // '00000hello'
'hello'.padStart(); // 'hello'
'hello'.padStart(6, '123'); // '1hello'
'hello'.padStart(3); // 'hello'
'hello'.padStart(3, '123'); // 'hello';

// String.prototype.padEnd(targetLength [, padString])
'hello'.padEnd(10); // 'hello '
'hello'.padEnd(10, '0'); // 'hello00000'
'hello'.padEnd(); // 'hello'
'hello'.padEnd(6, '123'); // 'hello1'
'hello'.padEnd(3); // 'hello'
'hello'.padEnd(3, '123'); // 'hello';
複製代碼

五、函數參數列表結尾容許逗號

var f = function(a,b,c,d,) {}
複製代碼

六、Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()獲取一個對象的全部自身屬性的描述符

const obj2 = {
	name: 'Jine',
	get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
複製代碼