JavaScript-React-1

箭头函数

---

限制:

• 只有一个参数的函数 参数 => 返回值

• 多个参数使用括号 (a,b) => 返回值

• 返回值必须是一个表达式

• 返回值是对象必须带括号

• 如需写语句，在后添加代码块

隐含参数arguments-表示当前函数的实参 arguments.lenth 获取实参数。剩余参数…args

特性:

• 箭头函数中没有arguments，可以使用…args

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

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

• 箭头函数无法作为构造函数，无法new

模块化

---

默认情况下，script标签中不能使用import语句，必须设置script的type属性为module

导出:

• 默认导出

  export default xxx;

一个模块里只有一个默认导出

• 命名导出

  export {a,b,c}

导入:

• 默认导入

  import xxx from './m1.js';

导入默认模块时，变量名可以自主制定，无需使用模块中的变量名

• 命名导入

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

类

特殊方法

• 构造函数

  constructor(){}

构造函数中，可以通过this来引用当前的对象

constructor(name, age){
    this.name = name;
    this.age = age;
}

模式

• 严格模式

  “use strict”

  1. 类中的所有代码都会在严格模式下执行

  2. 函数的this不再是window,而是undefined

     const test = mc.fn

以方法形式调用时, this就是当前的实例。以函数形式调用, this是undefined

constructor(){
    this.fn = this.fn.bind(this) //将fn方法的this绑定为当前实例
}

可以限制this绑定在自身

也可以使用箭头函数的形式调用，永远绑定为本身

constructor(){
   fn = () => {}
}

继承

class Animal{}
class Dog extends Animal{}

在子类中重写父类构造函数时，应该在子类中第一时间调用父类构造函数，否则报错

constructor(name, age){
    super(name, age); //调用父类构造函数，并且需要加入父类参数
}

属性

• 动态属性

  需要首先new一个实例才能使用

• 静态属性

  class MyClass{
      static name = 'aaa'
      // 静态方法this不是实例对象而是当前类对象
      static fn = () => {
          console.log('aaa')
      }
  }

可以直接使用MyClass.name

数组

---

• map()

  1. 可以根据原有的数组返回一个新数组

  2. 需要一个回调函数作为参数, 回调函数返回值会成为新数组中的元素

     用法:

     let result = arr.map((item, index, array) => {
         return item+2
     }) 
     // 第一个参数 当前元素
     // 第二个参数 当前元素索引
     // 第三个参数 当前数组

• filter()

  过滤器

  result = arr.filter((item) => item % 2 === 0)

  根据条件过滤元素

  • find()

    找第一个被过滤条件通过的元素

• reduce()

  整合数组

  arr.reduce((prev, curr) => {}, 0) 
  // 0的位置是定义第一次prev的值, prev 上一次合并后值, curr 当前值