React编程-ES6语法简介

两种方式

• 单页面应用
• 多页面应用

知识点

开始–> 下一代的JS语法 --> react基础语法 --> debugging --> styling component

–> component deep dive --> http request --> routing --> forms and validation --> redux

–> authentication --> testing introduction --> deployment --> Bonus(Animation Next steps)

Key Points

1. code along
2. check my source code
3. practice practice practice

下一代JS语法

1. let&const

推荐使用let和const, 不用var
let-->变量
const --> 常量

2.箭头函数

//老式语法

function add(number) {
    return number+1;
}

//新式语法

const add = (number) => {
    return number +1;
};

const add = number => number +1 ;

箭头函数没有this的烦恼

3. 导入导出

3.1 导出

export default  person;
export const data = [1,2,3]

import person from './person.js';

import ps from './person.js';

//导出default都是导入的person, 尽管名字不一样

import {data} from './person.js';

import {data as d } from './person.js'；
//导入特定的东西

4. 理解类

以下为ES6推荐写法

class Person{
    name = "zoe";
    getName = () => this.name;
}

class Man extends Person{
    age = 29;
    getInfo = () => {
        console.log(this.name);
        console.log(this.age);
    }
}

5. Spread & Rest Operator

const A = [1, 2 ,3, 4]

const newA = [...A, 12, 34]

const o = {
    name: "taojian",
    age: 12,
}

const newO = {...o, color:'blue'}

6. Destructuring

const a = [1, 2, 3, 4, 5];
const [b, c] = a;

const o = {
    name: 'zoe',
    age: 12,
}
const {name} = o;

Destructuring在function中非常好用，如果不使用，那么将传入一个总的object,不太好

比如

const printName = ({name}) => {
    console.log(name);
}

const o = {
    name: 'zoe',
    age: 27,
};
printName(o)

7. primitive type和reference type

7.1 primitive type

int
float
string

7.2 reference type

object
json_dict

const person = {
    name: 'max'
}

const secondPerson = person;
// copy the references, pointing to the object
// anything changes in the copy, changes the original 

const secondPerson = {...person}
// copy all the properties of this person object
// anything changes in the copy, dont change the original

8. Array Functions

const numbers = [1, 2, 4]

const doubleNumberArray = numbers.map((num) => {
    return num*2;
})

const doubleNumberArray = numbers.map((number) => number*2);

Particularly important in this course are:

map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
findIndex() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
filter() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
reduce() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
concat() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
slice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
splice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice