Disallow specific global variables (no-restricted-globals) 禁止特殊的全局变量

碰到isNaN报错，查了eslint没有看懂，百度出了结果：一个会做Number类型转换，如果能转换成数字，就不是NaN，就会返回false。如果不能转换，就是NaN就返回true。 即：isNaN(x)等同于Number.isNaN(Number(x))。
因此，官方是希望让你能够更加明确这一行为，使用后者，而非让系统替你做Number转换。 参考:https://eslint.org/docs/rules/no-restricted-globals
https://www.javaear.com/question/46677774.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isNaN
https://www.cnblogs.com/Mrrabbit/p/10990218.html

Disallow Functions in Loops (no-loop-func) 禁止循环中的函数

改动过多，处于安全考虑，直接禁掉
参考：https://eslint.org/docs/rules/no-loop-func

Disallow use of Object.prototypes builtins directly (no-prototype-builtins) 禁止直接使用Object.prototypes内置函数

官方文档不建议直接调用对象的原型属性，而是用诸如Object.prototype.hasOwnProperty.call(foo, "bar")的形式代替。
因为对象可能会复写对象的原型属性，从而导致一些问题。目前觉得麻烦，禁掉。 参考：https://eslint.org/docs/rules/no-prototype-builtins

import/no-named-default 禁止重命名default

如果export default xxx，那么xxx是无效的，本质上是输出了一个default的变量或方法，且系统允许你为它任意取名字。且import {default as xxx} from 'xxx'等同于import xxx from 'xxx'
参考:https://github.com/benmosher/eslint-plugin-import/blob/v2.19.1/docs/rules/no-named-default.md

Disallow Unused Expressions (no-unused-expressions) 无未使用表达式

等待补充 参考：https://eslint.org/docs/rules/no-unused-expressions

Symbol

Reflect

数组

Array.from和sort()方法

参见：Array.from
Array.prototype.sort()

Array.from()

此方法从一个类似数组或可迭代（iterable）对象中创建一个新的，浅拷贝的数组。

这个方法有三个参数，第一个是必须的类数组(或可迭代)对象arrayLike，剩余两个分别是mapFn(回调函数)和thisArg(执行回调mapFn时的this)

这里的第二个参数mapFn回调函数相当于Array.from(arrayLike)后在执行一次map方法，即等价于Array.from(obj).map(mapFn,thisArg)，除非创建的不是可用的中间数组。

from()的length属性为1，即Array.from.length===1。 Array.from()可以通过两种方式来创建对象：

• 伪数组对象(拥有一个length属性和若干索引属性的任意对象，如下方栗子5中第二个)
• 可迭代对象(可以获取对象中的元素，如Map和Set等) 一些栗子:

/** 1.Array from a String */
Array.from('foo') //['f','o','o']

/** 2.Array from a Set    */
Array.from(new Set(['foo',window]))    // ['foo',window]

/** 3.Array from a Map    */
Array.from(new Map([1,2],[2,4],[4,8])) // [[1, 2], [2, 4], [4, 8]]

/** 4.Array from an Array-like object (arguments)    */
function f(){return Array.from(arguments)};
f(1,2,3);   //[1,2,3]

/** 5.在Array.from中使用箭头函数 */
Array.from([1,2,3],x=>x+x)        //  Array [2, 4, 6]
Array.from({length:5},(v,i)=>i);  //[0,1,2,3,4]

这个方法的去重的例子参见常用函数中的数组函数中的例子1。

Array.prototype.sort()

sort()对数组元素进行排序，并返回数组(数组已原地排序，并且不进行复制)。默认排序是将元素转换为字符串，然后比较它们的UFT-16代码单元值序列。 这个函数接收一个可选的函数作为参数。如果省略，元素按照转换为字符串的各个字符的Unicode位点进行排序。 栗子：

//  1. 未指明compareFunction
[1,30,100000].sort();   // [1,100000,30]   由于没有指定比较函数，所以会将number转为字符串然后比较Unicode
//  2. 指明compareFunction
[1,30,100000].sort((a,b)=>a-b);  // [1,30,100000]

对于compareFunction：

• compareFunction(a,b)，小于0，排序结果：a,b
• compareFunction(a,b)，等于0，a,b位置不变
• compareFunction(a,b)，大于0，排序结果：b,a 结果是从小到大升序排序，如果想降序把a,b交换传入 这个两个函数一起的例子参见常用函数002

in

参见:in

参数可以是一个字符串或者symbol类型的属性名或者数组索引。

• 如果是数组索引index，会查找数组里是否有这个索引。感觉没有太多用处
• 如果是字符串，会查找对象或者其原型链里是否包含该字符串命名的对象，比如:

const trees=new Array('bay');
0 in trees // true
'bay' in trees //false
Symbol.iterator in trees // true 数组可迭代，是其__proto__上的一个属性

const mycar={make:'Honda'};
'make' in mycar //true
'Honda' in mycar //false

in的右边必须是一个对象。比如:

const c1=new String('green');
const c2="coral";
'length' in c1; // true
'length' in c2; // false

具体代码参考：

准备知识

关于static

static关键字在后端中相信没人陌生，修饰一个字段或者方法时，表示该字段/方法是类的成员而非类所创建的实例的成员。即不能通过类new出来的实例调用。
在javascript中的作用也差不多。大概补充几点：

• 同一个类中静态方法可以用过this调用其它静态方法/字段
• 同一类中非静态方法可以用过class(类本身)/this.constructor来调用静态方法/字段。这里补充一点，this.constructor打印出来其实是指类，而不是类里面的构造函数。
• 类中静态方法中的this指向这个类本身，new Class()等价于new this()
• 类中非静态方法(包括constructor)指向类创建的实例，因为这些方法属于实例所有
• 调用静态方法的时候，constructor不会执行
• 一句话，属于类的成员(静态方法)中的this的指向类，所以可以直接调用其它静态方法/成员。属于类的实例(非静态方法,construtor())的this指向类创建的实例，因此不可以调用静态方法/字段。但可以调用其它实例所有的方法（其它非静态方法）。 栗子：

class StaticExample {
  static _static = 10;

  constructor() {
    console.log('constructor中的this：')
    console.log('this.constructor：', this.constructor);
    console.log(this);
    // console.log(this.A())//error
    // console.log(this.constructor.A()); //可以调用但是死循环，A中调用B，B又会通过constructor调用A
  }

  static A() {
    console.log('1.静态方法B中的this：\t', this)
    console.log('2.静态方法调用静态字段\t', this._static);
    console.log('3.静态方法调用非静态方法B：');
    new this().B();
  }
  B(instance) {
    if (!instance) return;
    console.log(instance === this); //true
    console.log('1.非静态方法B中的this：\t', this)  // 非静态方法指向类创建的实例
    console.log('2.非静态方法用this.contructor调用静态字段\t', this.constructor._static);
    console.log('3.非静态方法用class调用静态字段\t', StaticExample._static);
    this.C();
  }
  C() {
    console.log('1.非静态方法C');
  }
}
StaticExample.A();
let instance = new StaticExample();
instance.B(instance);

class StaticExample {
  static _static = 10;

  constructor(instance) {
    if (!instance) return;
    console.log('constructor中的this：', this) //指向类的实例
    console.log('this.constructor：', this.constructor);//指向类
    console.log(instance === this.constructor);//指向类

  }
}
new StaticExample(new StaticExample().constructor)

补充：在了解this.constructor的过程中，聊着聊着又聊到底层去了，所以要学的还有好多啊。当务之急还是先熟悉react和ts，然后去补充自己的底层基础。

具体实现

首先，在点击按钮中添加点击事件，点击事件会调用类的静态函数，这个类有三个静态函数入口，分别表示正常信息，错误信息，成功信息。以Toast.info为例这个函数接收3个参数，分别是msg:string(信息),duration(延迟),onClose(回调)。

Toast.info

这个静态函数只是一个包装，里面调用this._notice，把接收到的参数，加上类型传入进去，即： this._notice('info',msg,duration,onClose);

_notice

这个静态函数里面有两个步骤，第一步是执行_create();这个函数不接收任何参数，作用是创建一个遮罩的DOM元素。之后执行this._ins.addNotice，这个函数是创建真正的提示信息。这里有个不明白的点是，this._ins明明指向类，却能调用非静态addNotice方法。

_create

这个静态函数用于创建一个DOM遮罩，首先检查有没有_ins这个静态字段，如果有，直接返回。如果没有。创建一个DIV元素，zIndex设置为9999，并添加到body的最后。然后通过React.render渲染Toast这个组件，并通过组件上的ref把组件自身存到this._ins中

addNotice

这个非静态函数负责改变state里的值，把传入的参数进行处理后，通过setState进行更新。这个函数还有一个作用是销毁组件，在经过duration秒后，调用_removeNotice并传入notices的key

_removeNotice

这个函数用来在duration秒后销户组件，把notices数组中的每一项进行过滤，如果找到了传入的key对应的消息，就检查这个消息是否携带回调，如果携带，就执行，然后return false过滤掉这一项。之后再通过setState来更新新的消息数组，当数组长度为0的时候，说明遮罩内没有消息了，此时销毁最外层的遮罩容器