学react之ES6前置知识

模版字符串

${}

变量的结构赋值

注意嵌套结构的分解： let { hj: {a,b} ,hj} = obj;

// 在函数参数里面， 可以直接结构
function logNames({firstName, lastName}, n) {
    console.log(`${firstName} ${lastName} ${n}`);
}

logNames( {firstName: 'ahjk', lastName: 'b'}, 889 );

spread-rest

1. 在函数参数里面展开一个数组

fn(...arr);
fn(...[2,3,4]);

1. 在一个对象中展开另一个对象，后面的会覆盖前面的：

let obj = {a:1,b:2, c:3, d:4};

console.log(
    {
        a: 89,
        name: 'flowke',
        ...obj,
        a: 67
    }
);

1. 在函数形参里面使用rest

function fun2(a, dd, ...b) {
    console.log(a, dd, b);
}

fun2(1, 2, 3,4);

类和类的继承

1. 使用extends可以继承父类所有属性和方法；
2. 当我们要给对象的一个内置方法制造身外化身时，这个化身里的这个方法的this将会变成undefined

class NormalMan extends Human{
    constructor(name='Flowke'){
        // 调用一下父类的构造函数
        // 当你继承了另外一个类的时候， 你必须用
        super(1000, 2000);
        // this.eyes = 100;
        // this.hands = 200;
        this.feet = 2;
        this.name = name;

        this.singing = this.singing.bind(this);
    }

    // 重写父类继承过来的方法
    singing(){
        // console.log(this);
        console.log(`${this.name} can sing`);
    }
    run(){
        console.log('NormalMan can run');
    }

}

let b = new NormalMan('Mike');

console.log(b);

b.singing();
b.run();


// 关于类里面方法的 this 指向
let fnn = b.singing;

fnn();

模块化语法-ES6

导入导出

默认导入导出

1. 语法：

//导出
export default function cF(){
    console.log("c这个东西是什么？");
} 

//导入
import cg from "./modules/c.js"
cg();

1. 接收默认导出的时候， import之后的东西可以任意命名
2. 默认导出时, 导出的 东西 可以没有名字
3. 只能使用一次

非默认导入导出

1. 语法：

// 可以使用多次 export 来导出
export let num = 789;
export let bvc = 123;

import {num} from './modules/a';

1. 导出时必须有名字
2. 导入时变量名放在花括号里面

模块化语法-CommonJs

语法：
module.exports = 123 ;//导出了一个数字，可以不要名字

//导入
const aac = require('./modules/common');
 console.log(aac, 'aac');

数组

map
filter
some
every
reduce