React 前置知识储备 笔记

React 前置知识储备 ES6

参考b站 李立超老师

1. 变量声明

var 没有 块级作用域

undefined （变量创建了，但是没有赋值）

var 会提升，在所有代码执行前，先执行，所以 b 已经创建，但是没有赋值罢了。

1. 闭包 （麻烦）

立即执行函数：
因为 var 没有块级作用域，使用闭包，外部就 不能访问 此变量了。

2. let 有块级作用域，const 是常量（只赋值一次）

const 变量名 最好都大写

3. 优先用 const

有可能会改变的，用let。
var 最好就别使用了。

2. 解构（简化 变量赋值）

1. 变量 声明 和 赋值 同时进行（变量解构）

变量的 声明 和 赋值 一起进行

2. 用 函数返回值 赋值（函数解构）

以 函数返回值的形式，去 解构赋值 给变量a，b新的值

3. 有选择的赋值 （跳过，多个）（变量解构）

想跳过中间一个，只要后一个变量（, ,）跳过赋值

想要把 后面的元素 全部给 c，（剩余操作符 … ）c 就是数组了。
（剩余元素必须放在最后一个）

相对使用较少

4. 对象的解构

name:a 不建议写，影响代码的可读性。
const {a,b,c} = obj，建议写，简化代码的同时，也保证了可读性。

利用数组的解构，交换两个变量的值。（和 python 好像）

传统的交换（java）

数组的解构，交换变量的值

3. 展开（。。。少写一些数组遍历，可以接收多个参数）

1. 传统

写起来有些麻烦

2. … 展开

是可以遍历的数据，就可以展开（数组居多）

数组里的元素，展开为参数，传入js函数。
在新数组里，展开其他数组，把其他数组的元素复制到新数组中

3. 展开数组

4. 浅复制、浅拷贝（数组）

5. 对象

4. 箭头函数

1. 一个参数、没有参数、多个参数（箭头函数的语法）

2. 箭头后面的值（就是函数的返回值）

返回值必须是个表达式（有值的语句）

返回值是对象，必须加（）

3. 在箭头函数中定义逻辑，需要在箭头后跟 { }

{ } 代码块中的语法和普通函数没有区别

5. 箭头函数的特点

少用 this，但是还是得用。

1.箭头函数中，没有 arguments。但是可以用剩余参数

2. 箭头函数 没有自身的 this

全局作用域的 this 是 window

箭头函数的 this 总是 外层作用域的 this

此时，this 是 hello

3. 箭头函数中的 this 无法通过 call() , apply() , bind() 修改

无法通过 call() , apply() , bind() 修改

4. 箭头函数 无法作为 构造函数 使用（不让new）

无法作为 构造函数 使用（不让new）

6. 模块化（ES6的 官方模块化）

1. export

1. 默认导出

export default xxx;
一个模块中只有一个默认导出。

2. 命名导出

4. 统一导出

在代码的 最后导出，不会影响前面的命名导出。导出是堆加（前面的不会消失），不是覆盖。

export {obj, fn}

2. import

1. 在网页中引用，必须设置script标签中的type属性为module

在网页中：

1. 变量名可以自己定义。（一般情况下会 统一 变量名）
2. 模块路径要写完整，扩展名也要写完整。（nodejs 和 webpack 才会自动补全扩展名）
   

2. 导入指定内容

变量名必须和导出的一致，不然就找不到了。

import {b,c} from './m1.js'

使用 as 语句，把变量名更改 （python）

import {b as hello,c} from './m1.js'

7. 类 Class

（和 java中的思想差不多）语法不同

1. 内部定义了属性

2. new创建对象时，传参数，修改当前对象中的属性值

8. 类的 this

1. 严格模式

类中的所有代码，都会在严格模式下执行。
严格模式下，其中的一个特点就是，函数的 this 不在是 window，而是 undefined

2. bind方法

在开发时，某些场景下，希望方法中的this是固定的，不会因为调用方式不同而改变。

3. 用箭头函数解决 this 问题

9. 类的 继承 extends

1. 创建父类

有多个大部分代码都一样的类，想要创建一个模板，可以再次创作。

动物类 – 狗 - 蛇 --等。

2. 问题（重写方法 - 同名 不同内容 ）

效果一样。
属性可以一样，但是我们想要 sayHello（）方法 不一样
子类 继承 父类 后，将获得 父类中 的 所有属性和方法

也可以创建同名的属性或方法，来对父类进行 重写

3. 重写 必须调用 父类构造函数

super() 调用父类的构造函数，确保父类正常初始化

父类 构造函数中：

1. 有参数的，必须把参数传入 父类的构造函数super()

10. 类 - 静态属性 和 方法

实例 new

实例属性 和 实例方法，必须先创造实例，才能调用。

类属性（静态属性）（Math，random）

静态方法的 this, 是当前的类对象。

静态方法的 this 不是实例对象！

11.数组方法 补充

复习！React中使用的频率高一些。

1. map()

1. 回调函数作为map的参数

目前来看：无意义版

2. map中的参数（回调函数中 的 三个参数）

当前元素，元素索引，当前数组（item, index, array）

返回的 result 是新数组

const result = arr.map(item => "<li>"+item+"</li>");

2. filter()

当前元素，元素索引，当前数组（item, index, array）

从一个数组中，获得符合条件的元素。过滤
true：全部打印，false：都不打印

还可以自己写逻辑，筛选符合条件的元素，返回到新array中

3. find() 找一个（第一个）

4. reduce()

初始值没有指定，就会从第二个元素开始计算

reduce( (previousValue，currentValue)，初始值)
reduce( (previousValue， currentValue, currentIndex, array),initialValue)

arr = [1,2,3,4,5]