React预备知识

本章内容是对前面JS基础知识的复习，复习内容主要涉及到React中常用且容易犯错产生疑惑的点。

如果你已经对JS基础知识掌握的非常牢固了，完全可以跳过本章。

变量声明

var & let

JS中声明变量（常量）的方式有三种：var、let、const（常量）。

var是JS中最古老的声明变量的方式，可谓历史悠久。但是现在的前端项目中并不推荐使用var关键字来声明变量，这其中最重要的原因是var声明的变量没有块作用域，以下列代码为例：

代码1-1：

for(var i=0; i<4; i++){
    // 随便写点什么
}
console.log(i); // 输出 4

代码1-2：

if(true){
    var a = 10;
}
console.log(a); // 输出10

代码1-3：

if(false){
    var a = 10;
}
console.log(a); // undefined

由于var声明的变量没有块作用域，所以代码1-1中的变量i虽然声明在了for循环中，但在for循环的外部依然可以访问到。代码1-2和代码1-3将变量声明在了if语句中，同样由于没有块作用域，在if语句的外部可以访问到变量a。代码1-3的条件表达式是为false，赋值（a = 10）并不会执行，但由于var是没有块作用域的，所以并不影响变量的声明，在外部依然可以打印出undefined。

和var不同，let声明的变量都具有块作用域，如果将上述三个代码中的var换成let，则通通都会报找不到变量的错误。这是因为，使用let声明的变量只在当前代码块中有效，在代码块外部无法访问。let的出现有效的隔离了代码块内外的变量，使得代码的结构更清晰，维护起来更加容易。要知道，在没有let的日子里，我们只能通过闭包来模拟块作用域。

总之，对于let和var来说，能用let绝对不用var！

const

const在JS中用来声明常量，所谓常量就是只能赋值一次的变量。在JS中对const的使用是非常频繁的，当一个变量用来保存一个对象时（函数或其他对象），为了避免变量被修改通常会使用const来声明。

三种声明方式中，第一优先使用的是const，如果希望变量被改变则使用let，至于var最好不要在代码中出现！

解构和展开

解构赋值

通过解构赋值可以直接将数组中的元素，对象中的属性赋值给其他的变量。

代码1-4（数组解构）：

let a, b, rest;
[a, b] = [10, 20]; // 第一个元素给a，第二个元素给b
console.log(a); // 10
console.log(b); // 20
​
[a, , b] = [10, 20, 30]; // 第一个元素给a，第三个元素给b，中间空出一个
console.log(a); // 10
console.log(b); // 30
​
[a, b, ...rest] = [10, 20, 30, 40, 50]; // 第一个元素给a，第二个元素给b，剩下的给rest
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
​
const [d, e, f] = [40, 50, 60] // 可以在赋值时直接声明变量
console.log(d); // 40
console.log(e); // 50
console.log(f); // 60
​
[a=5, b=7] = [1]; // 赋值是可以指定默认值
console.log(a); // 1
console.log(b); // 7

代码1-5 （对象解构）

let a, b;
({ a, b } = { a: 10, b: 20 }); //属性a赋值给变量a，属性b赋值给变量b
console.log(a); // 10
console.log(b); // 20
​
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); //属性a赋值给变量a，属性b赋值给变量b，其余的保存到rest中
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
​
({a = 10, b = 5} = {a: 3}); // 可以指定默认值
console.log(a); // 3
console.log(b); // 5
​
const {name, age} = {name:'孙悟空', age:18}; // 对象解构时如果使用const、let、var开头，可以不加()
console.log(name); // 孙悟空
console.log(age); // 18
​
const {len: width} = {len:100}; // 将对象的len属性值赋值给变量width
console.log(width); // 100
​
const {inner:{size}} = {a: 10, b: 20, inner:{size: 5}}; // 将对象中inner.size赋值给变量size
console.log(size) // 5
​
const {inner:{size:mySize}} = {a: 10, b: 20, inner:{size: 5}}; // 将对象中inner.size赋值给变量mySize
console.log(mySize); // 5
​

代码1-6（交换变量值）

let a = 1;
let b = 3;
​
[a, b] = [b, a]; // 交换变量a和b的值
console.log(a); // 3
console.log(b); // 1
​
const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]]; // 交换数组中两个元素的位置
console.log(arr); // [1,3,2]

代码1-7（解构函数返回值）

function f() {
  return [1, 2];
}
​
let [a, b] = f();
console.log(a); // 1
console.log(b); // 2

代码1-8（嵌套解构）

const props = [
  { id: 1, name: '孙悟空'},
  { id: 2, name: '猪八戒'},
  { id: 3, name: '沙和尚'}
];
​
const [,, { name }] = props;
​
console.log(name); // "沙和尚"

展开

展开可以在函数调用时，将数组（或字符串）展开为函数的参数，也可以在通过字面量创建数组（或对象）时，直接将其他数组（或对象）在新数组（或对象）中展开（类似于浅拷贝）。

语法：

myFunction(...iterableObj); // 展开数组传参
​
[...iterableObj, '4', 'five', 6]; // 创建数组时展开其他数组
​
let objClone = { ...obj }; // 将一个对象中的所有键值对展开到一个新对象中（浅拷贝）

代码1-9（将数组中的元素解构为函数的参数）

function fn(x, y, z) {
    console.log('x =', x);
    console.log('y =', y);
    console.log('z =', z);
}
​
const numbers = [1, 2, 3];
​
fn(...numbers);
/*
输出：
    x = 1
    y = 2
    z = 3
*/
​
function myFunction(v, w, x, y, z) { }
let args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

代码1-10 （创建数组时展开其他数组）

const arr = [0, 1, 2];
const newArr = [...arr, 12];
console.log(newArr); // [0, 1, 2, 12]
​
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
//  ["head", "shoulders", "knees", "and", "toes"]
​
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
​
let obj1 = { name: '孙悟空', age: 18 };
let obj2 = { name: '猪八戒', address: '高老庄' };
​
let clonedObj = { ...obj1 }; // 浅拷贝对象
// Object { name: '孙悟空', age: 18 }
​
let mergedObj = { ...obj1, ...obj2 }; // 合并两个对象
// Object {name: '猪八戒', age: 18, address: '高老庄'}

箭头函数

箭头函数是传统函数表达式的简写方式，它简化了函数的编写，也带来了一些限制导致在一些场景下它无法使用。

特点：

1. 箭头函数没有自己的this
2. 箭头函数中没有arguments
3. 不能作为构造函数调用
4. 无法通过call、apply、bind指定函数的this

代码1-10 （箭头函数语法）

// 基本语法
param => expression
​
// 多个参数时，参数需要使用()括起来
(param1, paramN) => expression
​
// 多条语句时，语句需要使用{}括起来，同时使用return设置返回值
param => {
  let a = 1;
  return a + param;
}
​
// 返回值是一个对象时，对象需要加()
params => ({foo: "a"})
​
//多余参数、默认参数和传统函数无异
(a, b, ...r) => expression
(a=400, b=20, c) => expression
​

模块化

初期的JavaScript项目是非常小的，并不需要引入模块化来对其进行处理。但是随着前端项目复杂度的提高，项目中的代码越来越多，引入模块化成为一个迫在眉睫的问题。

所谓的模块化指将一个大的项目拆分成一个一个小的模块。拆分模块的好处有很多，比如使代码变得结构清晰、易于维护、提高复用度等。传统的JS中引入外部的脚本也可以当成是一种初级的模块化方式，但那种方式存在着很多不足，对我们开发人员来说并不十分友好。所以有一些前辈开始设计新的模块化方法来对JS进行扩展，像CommonJS、AMD、ReauireJS等模块系统都是很好的尝试。CommonJS现在依然是Node.js中默认的模块化方式。

第三方的模块化进行的如火如荼，ECMA官方当然不能袖手旁观，于是就有了ES6的模块化方案。ES6的模块化分成两个部分：export和import。

export（导出）

在创建JS模块时，我们通过export向模块外部暴露内容（函数、对象、原始值）。在其他模块中可以通过import引入这些内容。使用了export的模块会自动开启严格模式。

export导出的方式有两种：

1. 默认导出
2. 命名导出

代码1-11（export语法）

// 导出变量（命名导出）
export let name1, name2, …, nameN; 
export let name1 = …, name2 = …, …, nameN; 
​
// 导出函数（命名导出）
export function functionName(){...}
​
// 导出类（命名导出）
export class ClassName {...}
​
// 导出一组
export { name1, name2, …, nameN };
​
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
​
// 解构赋值后导出
export const { name1, name2: bar } = o;
​
// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
​
// 聚合模块
export * from …; // 将其他模块中的全部内容导出（除了default）
export * as name1 from …; // ECMAScript® 2O20 将其他模块中的全部内容以指定别名导出
export { name1, name2, …, nameN } from …; // 将其他模块中的指定内容导出
export { import1 as name1, import2 as name2, …, nameN } from …; // 将其他模块中的指定内容重命名导出
export { default, … } from …; 
​

import（引入）

import用来引入其他模块中导出的内容，注意！只有通过export导出的内容才能够通过import引入。和export一样，使用了import的模块会自动启用严格模式。

代码1-12（import语法）

// 引入默认导出
import defaultExport from "module-name";
​
// 将所有模块导入到指定命名空间中
import * as name from "module-name";
​
// 引入模块中的指定内容
import { export1 } from "module-name";
import { export1 , export2 } from "module-name";
​
// 以指定别名引入模块中的指定内容
import { export1 as alias1 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
​
// 引入默认和其他内容
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
​
// 引入模块
import "module-name";

类（class）

类是对象的模板，类中定义了对象中包含了哪些属性和方法。也可以直接通过function来定义类，但这两种定义方式并不是完全通用。

代码1-13（简单的类）

class Person {
    //属性
    name = "孙悟空";
    // 属性
    age = 18; 
    // 方法
    sayHello() { 
        console.log(`大家好，我是${this.name}`);
    }
}
const p = new Person(); // 创建对象
p.sayHello(); // 调用方法

代码1-14（在构造函数中初始化属性）

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    // 使用箭头函数定义方法
    say = ()=>{
        console.log(this.name);  
    };
}

代码1-15（继承）

class Animal {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
​
    say() {
        console.log('哈哈，我是' + this.name);
    }
}
​
// Dog类继承Animal类
class Dog extends Animal {
    constructor(name, age) {
        // 调用父类构造函数
        super(name, age);
        this.legs = 4;
    }
    // 重写父类方法
    say() {
        console.log('汪汪汪！我是' + this.name);
    }
}
​
// Snake继承Animal类
class Snake extends Animal{
    constructor(name, age, len) {
        // 调用父类构造函数
        super(name, age);
        this.len = len;
    }
    // 重写父类方法
    say(){
        console.log('嘶嘶嘶~ 我是' + this.name);
    }
}

数组的方法

map()，可以根据已有数组返回一个新的数组。map需要一个函数作为参数，并且会对数组中的每一个元素调用该函数，并将函数每次执行时所返回的结果作为新数组中的元素。

// Arrow function
map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })
​
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
​

filter()，可以将数组中符合条件的元素返回。filter同样需要一个函数作为参数，它会对数组中的每一个元素调用函数，如果函数返回true，则该元素会放入到新数组中。如果返回false，则新数组中不会出现该元素。

// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )
​
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
​

reduce()，用来整合数组。它可以对数组中的值进行计算，最终将数组中的所有元素合并为一个值。

// Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)
​
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);
console.log(sumWithInitial);
// expected output: 10