一.熟悉项目遇到的问题

1.技术遇到的问题

1.static是什么

类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。静态方法调用直接在类上进行，不能在类的实例上调用。静态方法通常用于创建实用程序函数。

调用静态方法

从另一个静态方法

静态方法调用同一个类中的其他静态方法，可使用 this 关键字。

class StaticMethodCall {
    static staticMethod() {
        return 'Static method has been called';
    }
    static anotherStaticMethod() {
        return this.staticMethod() + ' from another static method';
    }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'

从类的构造函数和其他方法

非静态方法中，不能直接使用 this 关键字来访问静态方法。而是要用类名来调用：CLASSNAME.STATIC_METHOD_NAME() ，或者用构造函数的属性来调用该方法： this.constructor.STATIC_METHOD_NAME().

class StaticMethodCall {
    constructor() {
        console.log(StaticMethodCall.staticMethod());
        // 'static method has been called.'
        console.log(this.constructor.staticMethod());
        // 'static method has been called.'
    }
    static staticMethod() {
        return 'static method has been called.';
    }
}

小结：具有静态成员的类，可以被子类化、不能被实例对象直接调用

2.静态方法是什么

了解静态方法之前我们要知道什么是静态属性。

静态属性不能被实例对象调用如

function Foo(){
  this.age = 28
};
Foo.name = function(){console.log("hello")}
var a = new Foo();
alert(a.age);//28
alert(a.name);//undifined

只能用Foo.name调用而不能用它的实例对象a.name调用。

了解了这个我们来看静态方法，为什么要有静态方法。
有些东西不需要实例，只需要有类就行了，例如Array.isArray(obj)。判断一个对象是不是数组，如果这个方法是数组才有，那就没法判断了。

3.JS中的fetch方法

fetch()方法定义在Window对象以及WorkerGlobalScope对象上，用于发起获取资源的请求，其返回一个Promise对象，这个Promise对象会在请求响应后被resolve，并传回Response对象。

简而言之就是一个跟axios、ajax差不多的向后台发送http请求的方法。返回的是一个Promise，成功时获得一个response对象。

补充：

fetch与jQuery.ajax区别

当接收到一个代表错误的HTTP状态码时，从fetch()返回的Promise不会被标记为 reject，即使响应的HTTP状态码是404或500，其会将Promise状态标记为 resolve，但是返回的Promise会将resolve的返回值的ok属性设置为false，仅当网络故障时或请求被阻止时，才会标记为reject。
fetch()不会接受跨域cookies，你也不能使用fetch()建立起跨域会话，其他域的Set-Cookie头部字段将会被无视。
fetch()不会发送cookies，除非使用了credentials的初始化选项。

var headers = new Headers({
    "accept": "application/javascript" 
});
headers.append("accept", "application/xml");
headers.set("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36");
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js", {
    method: "GET",
    headers: headers,
    cache: 'no-cache',
})
.then(res => console.log(res))

4.用Object.prototype.toString.call(obj)检测对象类型

typeof 不能准确判断一个对象变量，答案是否定的，null 的结果也是 object，数组的结果也是 object。需要纯粹的object对象。

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

可以用 Object.prototype.toString.call(obj).slice(8,-1)获取具体的对象类型

5.react中的运算符&&的使用

在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

6.！！的用法

第一个！将值转化为布尔值并取反，第二个！取反。即快速得到值得布尔值类型

7.React中this.state的坑：

假如react中的this.state里有一个ShopDetail:[]用来存储门店信息，在componentDidMount里从后端state里有一个ShopDetail获取门店信息。返回的获取门店信息中有Goods商品值为一个对象如{id:1,name:'xx',attribute:'yy'}，如果需要获取this.state.ShopDetail.Goods.length !== 0判断是否有Goods。会报错：Cannot read property 'length'

这是因为刚渲染的时候就直接去访问this.state.ShopDetail,这时候是没有Goods只是一个空数组，自然会报错.

解决方案：做判断时多加一层判断是否有值有的话再判断length长度例：：

    this.state.ShopDetail.Goods && this.state.ShopDetail.Goods.length !== 0 ......

2.浏览器补充的知识

1.JS中的Hearers对象

Headers.append(): 给现有的header添加一个值, 或者添加一个未存在的header并赋值。
Headers.delete(): 从Headers对象中删除指定header。
Headers.entries(): 以迭代器的形式返回Headers对象中所有的键值对。
Headers.get(): 以ByteString的形式从Headers对象中返回指定header的全部值。
Headers.has(): 以布尔值的形式从Headers对象中返回是否存在指定的header。
Headers.keys(): 以迭代器的形式返回Headers对象中所有存在的header名。
Headers.set(): 替换现有的header的值, 或者添加一个未存在的header并赋值。
Headers.values(): 以迭代器的形式返回Headers对象中所有存在的header的值。

2.Response对象的相关属性与方法：

Response.headers: 只读，包含此Response所关联的Headers对象。
Response.ok: 只读，包含了一个布尔值，标示该Response成功，HTTP状态码的范围在 200-299。
Response.redirected: 只读，表示该Response是否来自一个重定向，如果是的话，它的URL列表将会有多个条目。
Response.status: 只读，包含Response的状态码。
Response.statusText: 只读，包含了与该Response状态码一致的状态信息。
Response.type: 只读，包含Response的类型，例如basic、cors。
Response.url: 只读，包含Response的URL。
Response.useFinalURL: 包含了一个布尔值，来标示这是否是该Response的最终URL。
Response.clone(): 创建一个Response对象的克隆。
Response.error(): 返回一个绑定了网络错误的新的Response对象。
Response.redirect(): 用另一个URL创建一个新的Response。

Response实现了Body接口，相关属性与方法可以直接使用：

Body.body: 只读，一个简单的getter，用于暴露一个ReadableStream类型的body内容。
Body.bodyUsed: 只读，包含了一个布尔值来标示该Response是否读取过Body。
Body.arrayBuffer(): 读取Response对象并且将它设置为已读，并返回一个被解析为ArrayBuffer格式的Promise对象，Responses对象被设置为了stream的方式，所以它们只能被读取一次。
Body.blob():读取Response对象并且将它设置为已读，并返回一个被解析为Blob格式的Promise对象。
Body.formData():读取Response对象并且将它设置为已读，并返回一个被解析为FormData格式的Promise对象。
Body.json():读取Response对象并且将它设置为已读，并返回一个被解析为JSON格式的Promise对象。
Body.text():读取Response对象并且将它设置为已读，并返回一个被解析为USVString格式的Promise对象。

项目遇到的问题