1、Number(null)
2、Number(undefined)
3、isNaN() 检测那些值为 true?
4、Number、parseInt、parseFloat 检测 空字符串 得到?
5、1+'2'+'2'
1+ +'2'+'2'
1+ -'1'+'2'
'A'-'B'+'2'
'A'-'B'+ 2
6、let i = 0, age = 30;
i++ + age;
++i + age;
7、 12.34 | 0;
12.43 >> 0;
8、null === undefined；

function bar(){
    console.log(myName);
}
function foo(){
    var myName = 'hi 坑';
    bar();
}
var myName = 'bye 坑';
foo();

// 2019.07 深拷贝和浅拷贝的区别？怎么实现深拷贝？
- 第二遍 -
基本类型：深拷贝、浅拷贝都是复制值的副本，修改新值不会影响原值
引用类型：浅拷贝复制的引用地址，修改新值会影响原值；深拷贝复制的引用地址指向的数据，修改新值不会影响原值
[...arr] arr.concat() arr.slice() Array.from(arr) {...obj} Object.assign({}, obj)
Json.parse(Json.stringify(obj))
const isObj = (t) => {
    const type = typeof t;
    return t !== null &&(type === 'function' || type === 'object');
}
function specificFun(t, type) {
    switch(type) {
        case '[object Date]':
            return new Date(t.getTime());
            break;
        case '[object RegExp]':
            return new RegExp(t.source, t.flags);
            break;
        case '[object Symbol]':
            return Symbol.for(t.description);
            break;
        default:
            const ctor = t.constructor;
            return new ctor(t);
    }
}
function clone(target, m = new WeakMap()) {
    if(!isObj){
        return target;
    }
    const type = Object.prototype.toString.call(target);
    const specificTypes = ['Map', 'Set', 'Array', 'Object'].map(it => `[object ${it}]`);
    if(!specificTypes.includes(type)){
        return specificFun(target, type);
    }
    const ctor = target.construcor;
    const res = new ctor();
    if(m.has(target)) {
        return target
    }
    m.set(target, res);
    
    if(type === '[object Map]') {
        target.forEach((value, key) => {
            res.set(key, clone(value, m));
        })
    } else if(type === '[object Set]') {
        target.forEach(it => {
            res.add(clone(it, m));
        })
    } else if(Array.isArray(target)) {
        target.forEach((it, index) => {
            res[index] = clone(it, m);
        })
    } else {
        for(let i in target) {
            res[i] = clone(target[i], m)
        }
    }
    return res;
}

- 第一遍 -
对于基础类型的数据深拷贝和浅拷贝都是数据的副本，修改新的数据不会影响原来的数据
对于引用类型的数据：浅拷贝拷贝指向数据的地址，修改后会影响原有数据；深拷贝的是引用地址指向的数据，修改新数据并不会影响原数据
浅拷贝：[...arr] Array.from(arr) arr.concat() arr.slice() {...obj} Object.assign({}, obj)
深拷贝：Json.parse(Json.stringify(obj))
function isObj(t) {
    const type = typeof t;
    return (t !== null) && (type === 'function' || type === 'object');
}
function handleNormal(t, type) {
    switch(type) {
        case '[object Date]':
            return new Date(t.getTime());
            break;
        case '[object RegExp]':
            return new RegExp(t.source, t.flag);
            ❌ // 1、正则类型的 t.flags
            break;
        case '[object Symbol]':
            return Symbol.for(t.description);
            break
        default:
            const ctor = t.constructor;
            return new ctor(t);
            break;
    }
}
function clone(target, m = new WeakMap()) {
    if(!isObj(target)) {
        return target;
    }
    
    const deepType = ['Map', 'Set', 'Array', 'Object'].map(it => `[object ${it}]`);
    const type = Object.prototype.toString.call(target);
    if(!deepType.includes(type)) {
        return handleNormal(target, type);
    }
    
    const ctor = target.constructor;
    let res = new ctor();
	if(m.has(target)) {
        return target
    }
    m.set(target, res);
    
    if(type === '[object Set]') {
        target.forEach(it => {
            res.add(clone(it, m));
        })
    }
    if(type === '[object Map]') {
        target.forEach((value, key) => {
            res.set(key, clone(value, m));
        })
    }
    if(Array.isArray(target)) {
        for(let i = 0, len = target.len; i<len;i++) {
            res[i] = clone(target[i], m);
        }
    } else {
        for(let i of target) {
            ❌ // 2、 object 不是可迭代对象，不能使用 for...of，这里应该改为 for...in
            res[i] = clone(target[i], m)
        }
    }
    return res;
}

// 2019.07 显示省略号
- 第二遍 -
.line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding: 8px;
    line-height: 30px;
    height: 82px;
}

- 第一遍 -
.line {
    overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}
.lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-direction: vertical; ❌ // 『不是 direction 是 orient: -webkit-box-orient: vertical;』
    -webkit-line-clamp: 3;
    // 解决 padding 带来的露出问题
    line-height: 30px;
    height: 90 - padding距离;
}

// 2019.07 数组去重（算法整理）
- 第二遍 -
arr = [1,1,2,2,2,3];
1、set: [...new Set(arr)]  // ⭐️ Array.from(new Set(arr))
2、filter+indexOf: arr.filter((it, index) => index === arr.indexOf(it))
3、hash:
function unique(arr) {
    let hash = {};
    return arr.filter((it) => hash[it] ? false : hash[it]=true);
}

- 第一遍 -
// ⭐️ 125最重要，其实 4 和 5 是一个逻辑， 3 和 2 很像
1、new Set([...arr]) // ❌ [...new Set(arr)] Array.from(new Set(arr))
2、arr.filter((it, index) => arr.indexOf(it) === index);
5、function unique(arr){
    let hash = {};
	return arr.filter(it => hash[it] ? false :  hash[it] = true)
}
3、function unique(arr) {
    return arr.reduce((pre, cur) => {
        if(!pre.includes[cur]) {
            pre.push(cur);
        }
        return pre;
    }, [])
}
4、function unique(arr) {
	let hash = {};
    let res = [];
    arr.forEach(it => {
        if(!hash[it]) {
            res.push(it);
            hash[it] = true;
        }
    })
    return res
}

// 2020.03 模块化
- 第二遍 -
CommonJS：同步加载，适用于服务端编码，输出的是值的拷贝，运行时输出，require+exports
AMD：RequireJS,异步加载，并行加载，依赖前置，加载完了立即执行调用，无法按序执行
	define(['a.js', 'b.js'], function(a, b) { a.cb();b.cb() })
CMD：SeaJS,异步加载，并行加载，依赖就近，加载后按序执行
	define(function(require, exports, module) { let a = require('a.js'); a.cb(); })
ES6模块化：异步加载，是客户端和服务端的通用解决方案，输出的是值的引用，编译时输出，import default as export from

- 第一遍 -
CommonJS：同步加载，适用于服务器端，输出的是值的拷贝，运行时加载，require + exports
AMD：异步加载，可以并行加载多个模块，依赖前置 define(['a.js', 'b.js'], function (a, b) {})
❌ // 少写了 ：加载模块后直接执行，无法保证执行顺序
CMD：异步加载，可以并行加载多个模块，依赖就近 define(function(require, exports, module){
    let a = require('a.js'); a.callback();
})
❌ // 少写了 ：加载后，直到调用才按需执行
ES6模块化：异步加载，是客户端和服务端的通用解决方案，输出的是值的引用，编译时加载， import as from default export

// 2021.04 25 HTTP/2 特性
- 第二遍 -
在语义上完全兼容，在语法上大力改造
①压缩头部信息，使用 HAPCK 字典表算法
②采用二进制帧 - 双向传输序列，虚拟的流 - 一个连接可以处理多个请求响应，多个请求响应之间没有了顺序关系 - 解决了队头阻塞的问题
③服务端推送数据
④设置请求优先级
⑤安全性升级：使用HTPPS

- 第一遍 -
和HTTP/1.1相比，语义层面完全兼容，语法层面大力改造
1、压缩头部信息，采用 HPACK 字典表算法
2、不再使用纯文本传送，而是二进制帧 - 双向传输序列 - 形成虚拟的流，在一个连接上可以处理多个请求响应（多路复用），多个请求响应之间没有了顺序，解决了队头阻塞
3、设置请求优先级
4、采用HTTPS
❌  // 少写一个 5、服务器推送

// 2021.05 29 WebSocket
- 第二遍 -
全双工双向通讯协议，由于 HTTP/1.1 的请求-应答模型限制，无法实现实时通讯
和 HTTP 差异
① 在语义、语法上完全不兼容，没有同源协议的限制，使用二进制帧
② 不再使用 ip+端口号 形式发现服务，而是 URI
③ 跑在 HTTP 基础上，GET 请求是发送 Connection:Update; 如果响应中带有 update:websocket; 则升级为 websocket
// ⭐️ 协议名称改为 ws:80 wss:443

- 第一遍 -
WebSocket和HTTP/1.1在语法、语义上完全不相同，HTTP/1.1因为请求-应答的模式无法实现实时通讯
❌ // 1、学名：全双工 - 双向通信协议
①使用不同的协议头 ws:80 wss:443
②使用不同的识别方式，websocket使用的是URI，HTTP使用的是IP+端口号
③websocket使用二进制帧，不受同源协议的限制
④websocket跑在HTTP协议之上，使用GET请求进行连接。请求头中携带Connection:upgrade，如果响应头中返回Upgrate:websocket 则建立连接

// 2021.05 XSS跨域脚本攻击 和 CSRF跨站请求伪造攻击
- 第二遍 -
网络攻击的根本，是因为浏览器给同源协议开的两个后门：①可以引入第三方资源->XSS②可以请求第三方数据->CSRF
XSS 跨域脚本攻击：在前端页面注入恶意代码，以修改界面或者服务端数据（存储、反射、映射
解决方法：①纯客户端渲染，服务端对数据进行转义和过滤
②渲染时禁止DOM执行js代码，例如 src/href 标签属性
③对 cookie 设置 HttpOnly，只有http协议能够访问cookie，浏览器 js 引擎会禁止访问 document.cookie
④CSP内容安全策略：设置白名单，规定那些资源是可以信任的，Content-Security-Policy 域名
// ⭐️ CSP 是从客户端角度讲：设置那些域名的资源是可以被信任的 srcipt-src 'self'
// ⭐️ CORS 是从服务端的角度讲：设置那些域名可以访问这个资源 Access-Control-Allow-Origin
CSRF 跨站请求伪造：仿造用户信息，获取服务端信任，修改服务端数据
解决方法：①校验请求头中的 referer ，确认请求来源
②对 cookie 设置 samesite，只有当前域名能够访问
③在请求中校验第三方请求无法伪造的 csrf token
④验证码

- 第一遍 -
网络攻击的根本原因是浏览器给同源策略开的两个后门：①可以引入第三方数据 ②通过CORS向第三方资源发起请求
❌ // 1、可以引用第三方资源
XSS跨域脚本攻击：定义-在前端页面中恶意注入恶意代码，修改服务器数据
解决方案 ①纯前端渲染，服务端对输入、存储进行转义、过滤
②对 cookie 设置 httpOnly，只有 http 协议可以访问 cookie，js 引擎会禁止 js 对 cookie 的访问，例如document.cookie
③浏览器提供了白名单CSP：content-security-policy 设置的是可以访问该资源的域名
❌ // 2、少了一项：在渲染时禁止标签执行JavaScript的代码，例如a标签script的标签
CSRF跨站请求伪造攻击：定义-冒用用户的cookie信息获取服务器的信任，修改服务器数据
①对请求来源进行校验，例如请求头中的 referer
②开启 cookie 中的 samesite 配置，禁止其他非同源页面对 cookie的访问
③CSRF token，在请求中校验第三方无法模拟的 token

// 2021.06 跨页面通信
- 第二遍 -
同源页面：
	- localStorage，只能处理非当前页面的传值[页面A传值 localStorage.setItem('a', 1); 页面B接收 window.onstorage=()=>{}]
	- new BroadCastChannel[页面A传值 let b1 = new BroadCastChannel('b1'); b1.postmessage('aa'); 页面B接收 let b1 = new BroadCastChannel('b1'); b1.onmessage=()=>{}]
非同源页面：
	- postMessage(H5 API)[页面A传值 let win = window.open('xxx');win.postmessage('aaa'); 页面B接收 window.onmessage=()=>{}]
	- iframe，将 origin 设置成同源域名，使用同源页面的两个方法通信
    
- 第一遍 -
同源页面：
1、localStorage:只能处理非当前页面
发送 localStorage.setItem(key, value) + 接收 window.onstorage
2、BroadChannel:❌ // 构造函数名字记错了：BroadCastChannel
发送 let b = new BroadChannel('one'); b.postMessage(value);
接收 创建同名频道，接收数据 b.onmessage
非同源页面：
3、postMessage(H5 API)
发送 let win = window.open(url); win.postMessage(value)
接收 在打开的页面中直接获取 window.onmessage
4、iframe：将 origin 设置为同源，然后使用方法1/2

// 2022.08 包管理工具
- 第二遍 -
npm:将安装包拍平提升到node_modules，package-lock.json(npm>5),.npmrc
yarn v1/Classic:将安装包拍平提升到node_modules，相对于npm早期版本，提供并行下载,yarn.lock,.yarnrc
pnpm:内存寻址存储，结构化存储 node_modules，只物理存储一次，节省安装空间,pnpm-lock.yml,.npmrc
yarn v2/Berry:不再有 node_modules，依赖查找表.pnp.cjs + .yarn/cache zip存储依赖,yarn-lock.yml,.yarnrc ❌❌ // 1、即插即用，且lock文件和配置文件分别为 yarn.lock + .yarnrc.yml

- 第一遍 -
npm：
	将依赖提升、拍平存储在node_modules；7.x有针对peer dependencies的break change；package-lock.json(npm>5) + .npmrc
yarn v1/classic：
	将依赖提升、拍平存储在node_modules;针对早期npm优化，可以并行加载多个依赖；yarn.lock + .yarnrc
pnpm：❌ // 「不是pnpm.yml，而是 pnpm-lock.yml」
	保留结构化的node_modules，采用内容寻址存储，只物理存储一次，节省空间；pnpm.yml + .npmrc
yarn v2/Berry： // ⭐️「即插即用」
	不再使用node_modules，使用依赖查找表 .pnp.cjs 和 /.yarn/cache 存储 zip文件；yarn.lock + .yarnrc.yml

// 2024.11 观察者模式 EventEmitter
- 第二遍 -
class EventEmitter {
    constructor() {
        this.events = {};
        this._max = 10;
    }
    add(event, listener) {
        if(!this.events[event]){
            this.events[event] = [];
        }
        !this.events[event].push(listener);
        if(this.events[event].length >= this._max) {
            throw Error('max exceed');
        }
    }
    remove(event, listener) {
        if(Array.isArray(this.events[event])) {
            if(!listener) {
                delete this.events[event];
            } esle {
                const index = this.events[event].indexOf(listener);
                ❌❌ // 1、这里要判断 index 存在才去删除：if(index>-1){ ... }
                this.events[event].splice(index, 1);
            }
        }
    }
    once(event, listener) {
        const onceFun = (...arg) => {
            listener(...args);
            this.remove(event, onceFun);
        }
        this.add(event, onceFun)
    }
    emit(event) {
        const args = arguments.slice(1);
        const list = this.events[event];
        ❌❌ // 2、不能直接赋值，要拷贝下来，才能避免 const list = [...this.events[event]];
        list.forEach((it, index) => {
            const arg = args[index];
            Array.isArray(arg) ? it(...arg) : it(arg);
        })
    }
}

- 第一遍 -
add remove emit once setMax
class EventEmitter() {
    constructor() {
        this.events = {};
        this._max = 10;
    }
    setMax(limit) {
        this._max = limit;
    }
    add(event, listener) {
        if(!this.events[event]) {
            this.events[event] = [];
        }
         ❌ // 4、少了计算监听事件数量 if(this.events[event].length > this._max) { throw Error('exceed') }
        this.events[event].push(listener);
    }
    remove(event, listener) {
        if(!listener) {
            delete this.events[event];
            return;
        }
        if(Array.isArray(this.events[event])) {
            let index = this.events[event].indexOf(listener);
            this.events[event].splice(index, 1);
            ❌ // 1、 这里要判断 index > -1，也就是 listener 存在才删除
        }
    }
    once(event, listener) {
        const onceFunc = (...args) => {
            listener(...args);
            this.remove(event, onceFunc);
        }
        this.add(event, onceFunc);
    }
    emit(event) {
        const argsList = arguments.slice(1);
        if(this.events[event]) {
            ❌ // 2、这里一定要注意，由于 once 的存在，this.events[event] 在执行过程是动态改变的
            ❌ // 所以这里一定要将 this.events[event] 拷贝下来再处理 let static = [...this.events[event]]
            this.events[event].forEach((it, index) => {
                const args = argsList[index];
                Array.isArray(args) ? it(...args) : it();
                 ❌ // 3、args 还是要传进函数的 Array.isArray(args) ? it(...args) : it(args)
            })
        } 
    }
}

// 2024.12 模拟实现promise
- 第二遍 -
const State = {
    pending: 'pending',
    resolve: 'fulfilled',
    reject: 'rejected'
}
class MyPromise { ❌❌ // 1、模拟 Promise 的时候，一般都是用函数
    constructor(executor) {
        this.state = State.pending;
        this.value = null;
        this.reason = null;
        this.resolveCalls = [];
        this.rejectCalls = [];

        const resolve = (value) => {
            if(this.state === State.pending) {
                this.state = State.resolve;
                this.value = value;
                this.resolveCalls.forEach(it => it(value));
            }
        }

        const reject = (reason) => {
            if(this.state === State.pending) {
                this.state = State.reject;
                this.reason = reason;
                this.rejectCalls.forEach(it => it(reason));
            }
        }
        try{
            executor(resolve, reject);
        }catch(e){
            reject(e);
        }
    }
}
MyPromise.prototype.then = function(onResolve, onReject) {
    onResolve = typeof onResolve === 'function' ? onResolve : v => v;
    onReject = typeof onReject === 'function' ? onReject : r => { throw r };
    let that = this;
    return new MyPromise((resolve, reject) => {
        const resolveFun = () => {
            setTimout(() => {
                const res = onResolve(that.value);
                resolve(res);
                ❌❌ // 2、遗漏捕获错误
                /**
                try{
                	const res = onResolve(that.value);
                	resolve(res);
                }catch(e){ reject(e) }
                */
            }, 0)
        }
        const rejectFun = () => {
            setTimeout(() => {
                const res = onReject(that.reason);
                reject(res);
                ❌❌ // 3、遗漏捕获错误 + onReject 返回的依旧是 resolve 的 promise
                /**
                try{
                	const res = onReject(that.reason);
                	resolve(res);
                }catch(e){ reject(e) }
                */
            }, 0)
        }
        switch(that.status) {
            case Status.pending:
                that.resolveCalls.push(resolveFun);
                that.rejectCalls.push(rejectFun);
                break;
            case Status.resolve:
                resolveFun();
                break;
            case Status.reject:
                rejectFun();
                break;
        }
    })
}
MyPromise.prototype.catch = function(onReject) {
    return this.then(null, onReject)
}
MyPromise.prototype.finally = function(cb) {
    return this.then(value => {cb(); return value;},
                     reason => {cb(); throw reason;})
}
MyPromise.resolve = function(value) {
    return new MyPromise((resolve, reject) => {
        if(value instanceof MyPromise) {
            value.then(resolve, reject);
        } else {
            resolve(value);
        }
    })
}
MyPromise.reject = function(reason) {
    return new MyPromise((resolve, reject) => reject(reason));
}
MyPromise.all = function(arr) {
    return new MyPromise((resolve, reject) => {
        arr.reduce((pre, cur, index) => {
            cur.then(res => {
                pre.push(res);
                if(index === arr.length) {
                    resolve(pre);
                }
            }, reject);
			return pre;
        }, [])
    })
}
MyPromise.race = function(arr) {
    return new MyPromise((resolve, reject) => {
        arr.forEach(it => MyPromise.resolve(it).then(resolve, reject));
    })
}

- 第一遍 -
then catch finally resolve reject all race
const Status = {
    pending: 'pending',
    resolve: 'fulfilled',
    reject: 'rejected'
}
function MyPromise(executor) {
    this.status = Status.pending;
    this.value = null;
    this.reason = null;
    this.callbacksResolve = [];
    this.callbacksReject = [];
    const resolve = (value) => {
        if(this.status === Status.pending) {
            this.status = Status.resolve;
            this.value = value;
            this.callbacksResolve.forEach(it => it(value));
        }
    }
    const reject = (reason) => {
        if(this.status === Status.pending) {
            this.status = Status.reject;
            this.reason = reason;
            this.callbacksReject(it => it(reason))
        }
    }
    
    try{
        executor(resolve, reject);
    }catch(e) {
        reject(e);
    }
}
MyPromise.prototype.then = function (onResolve, onReject) {
    onResolve = typeof onResolve === 'function' ? onResolve : v => v;
    onReject = typeof onReject === 'function' ? onReject : r => {throw r};
    return new MyPromise((resolve, reject) => {
        const resolveFun = () => {
			setTimeout(() => {
                try{
                    const res = onResolve(this.value);
                    resolve(res);
                }catch(reject);
            }, 0)
        }
        const rejectFun = () => {
            setTimeout(() => {
                try{
                    const res = onReject(this.reason);
                    resolve(res);
                }catch(reject);
            }, 0)
        }
        switch(this.status) {
            case Status.pending:
                this.callbacksResolve.push(() => resolveFun());
                this.callbacksReject.push(() => rejectFun());
                break;
            case Status.resolve:
                resolveFun();
                break;
            case Status.reject:
                rejectFun()
                break;
        }
    })
}
MyPromise.prototype.catch = function (onReject) {
    return this.then(null, onReject);
}
MyPromise.prototype.finally = function(callback) {
    return this.then((value) => { callback(); return value; },
                    (reason) => { callback(); throw reason; })
}
MyPromise.resolve = (value) => {
    return new MyPromise((resolve, reject) => {
        if(value instanceof MyPromise) {
            return value.then(resolve, reject);
        }
        resolve(value);
    })
    ⭐️ // 3、这里的 return 可以删除，不影响
}
MyPromise.reject = (reason) => {
    return new MyPromise((resolve, reject) => {
        reject(reason);
    })
    ⭐️ // 2、简写成 return new MyPromise((resolve, reject) => reject(reason));
}
MyPromise.all = function (arr) {
    return new MyPromise((resolve, reject) =>{
        return arr.reduce((pre, cur, index) => {
             ⭐️ // 4、这里的 return 可以删除，不影响
            cur.then(res => {
                pre.push(res);
                if(index === arr.length -1) {
                    resolve(pre);
                }
            }).catch(reject);
            ❌ // 1、reject 是作为 then 的第二个函数 -> }, reject)
            return pre;
        }, [])
    })
}
MyPromise.race = function (arr) {
    return new MyPromise((resolve, reject) => {
        arr.forEach(it => {
            return MyPromise.resolve(it).then(resolve, reject);
        })
        ⭐️ // 5、这里科利简写 arr.forEach(it => MyPromise.resolve(it).then(resolve, reject))
    })
}

// 作业79：地球四季的成因是什么？
地球绕着太阳公转轨迹是椭圆的，但是四季的成因和太阳与地球的距离没啥关系
主要是太阳直射点位置 + 夹角(大气层厚度)
⭐️ // 直射点的移动 + 太阳照射时间的长短；夹角，与地面角度的改变，包括改变了太阳辐射面积 + 经过大气的路程衰减的辐射能量强度

// 作业78：使一个标签看不见的几种样式及其区别
display: none; 不占位，直接移除 DOM 节点 v-if ❌ // 1、元素仍在 DOM 中，会触发回流+重绘； v-if 移除了 DOM 节点
opacity: 0; 依旧占位，但是透明、看不见节点，绑定的事件依旧可以触发 
visibility: hidden; 不占位，DOM 节点还在，但是看不见节点，绑定的事件无法触发 v-show ❌ // 2、依旧占位，不影响结构，会触发重绘

// 作业77：重绘和重排是什么？有什么区别？
浏览器渲染流程：解析DOM-计算样式表-布局树 layout-分层树-绘制-栅格化-合成
重绘：只需要重新修改每层的样式+合成
	- 不涉及到布局修改的样式：字体、背景、边框颜色
重排：需要重新计算布局+修改每层的样式+合成
	- 字体大小、padding/margin大小、激活伪类、style样式的修改、resize ⭐️ // 1、页面初始渲染 2、可见DOM的增删 3、位置、内容的修改 4、DOM 布局的查询

// 作业76：显卡的作用？
用于渲染帧
分成前后区，浏览器从前区获取显示的帧；在后区进行渲染，直到渲染完成，跟前区交换用于显示新帧
⭐️ // 作用：合成新的图像，并将图像保存到后缓存区

// 作业75：React 组件代码表达的是什么？hook怎么写才好，自定义hook会共享状态么？组件和hook的返回值有什么不同？在渲染时，他们是怎么个顺序？
- 第二遍 -
React 组件用于返回可以渲染的UI，一般是 JSX
	- 组件用于描述做什么，而不是怎么做
如果 hook 中没有 hooks ，则不建议抽离成 hook
	- hook 只是共享状态逻辑，并不是直接共享状态
    - hook 可以返回任何值
顺序：组件更新时，会按序执行所有 hooks

- 第一遍 -
React 组件用于复用 html 结构 - 清晰的输入和明确的输出，尽可能不要有副作用，写注释
hook：hook用于复用代码逻辑，内部没有 内置hook 可以不使用 hook 来复用，函数即可
// ❌修改下题目：React 组件代码表达的是什么？hook怎么写才好，自定义hook会共享状态么？组件和hook的返回值有什么不同？在渲染时，他们是怎么个顺序？
React 组件代码表达的是 目标，而不是具体实现 - 描述的是想要做什么，而不是怎么做
hook 中如果没有内置 hook，则不建议使用 hook
自定义 hook 只是共享状态逻辑，而不是状态本身 - 每次调用都有独立的状态
返回值：组件一般是返回一段 React 能够显示的内容，例如JSX结构，hook可以返回任何值
渲染：组件重新渲染时，会执行所有 hook 链表，所以组件一直可以接收到最新的 props 和 state

// 作业73：react 的 setState 是同步还是异步？为什么React有时候有两次 setState，却只执行一次？
- 第二遍 -
	在合成事件中的 setState 是异步的，setState 批量处理机制：在 react 中，对 setState 进行了优化处理，例如一个事件处理函数中，会把 setState 放到一个队列中，函数执行完毕后，统一处理 setState，更新一次 state，触发一次重新渲染
    ⭐️ // 批量更新机制
    ⭐️ // 异步：合成事件 + 生命周期函数；同步：原生事件，例如 addEventListener、setTimeout/setInterval
	在原生事件中的 setState 是同步的，不受 react 管控，原生事件 setState 一次，就会触发一次渲染

- 第一遍 -
合成事件中的 setState 是异步的，冒泡到顶层容器才触发
❌ // 1、除了合成事件，还有「生命周期函数」中都是异步，原因是 React 对多个 setState 调用进行合并，在一个事件处理函数中，收集多个 setState 到一个更新队列，这个事件处理函数结束后，根据合并后的状态，合并为一个更新，触发一次重新渲染
原生事件中的 setState 是同步的，不在 React 管控中，捕获时触发 ✅
⭐️ // 2、补充：原生事件，比如 addEventListener、setTimeout/setTimeInterval，在其中调用 setState，状态更新会立即生效，并且会触发组件的重新渲染
React 做了 setState 合并，在执行过程中，收集变更，执行完事件函数后再触发 setState 更新
⭐️ // 3、学名「批量更新机制」：为了减少不必要的重新渲染次数

// 作业72：react 的 生命周期有哪些，在不同生命周期中做什么事情？
- 第二遍 -
❌❌ // 1、不应该以渲染阶段(Render Phase:render-commit)来进行回答，应该以生命周期阶段(Lifecycle Phases:挂载-更新-卸载)来回答 
render：
	类组件 shouldComponentUpdate(nextProps, nextState) - 自定义是否需要更新
	❌❌ // 1、shouldComponentUpdate 不是在 render 阶段执行的，是在更新阶段，用于确定当前组件是否需要渲染
	按序执行所有 hooks
	函数组件 useEffect - 根据依赖是否变更，确定是否有副作用
commit：Diff 计算出的最小更新 UI 应用到真实 DOM 后，执行几个生命周期：
	执行副作用链表
	类组件 componentDidMount - 首次，挂载后执行 ⭐️ // 一般用于初始化数据
	类组件 componentDidUpdate - 更新，挂载后执行 ⭐️ // 参数是(prevProps, prevState) 一般用于操作 DOM 和执行副作用
	类组件 componentDidUnMount - 卸载前更新 ❌❌ // 2、不是 Did 是 Will，componentWillUnMount 清理定时器、取消监听，避免内存泄漏
    函数组件 useLayoutEffect - 和 useEffect 的唯一差别是时机，回调在挂载到 DOM 之后执行，并且是同步的，会阻塞渲染主线程
❌❌ /** 3、重新简单梳理下 类组件的三个生命周期阶段
	挂载阶段-创建组件+首次挂载到DOM：初始化constructor()、static getDerivedStateFromProps->纯函数render()->挂载后componentDidMount
	更新阶段-重新执行render构建新VDOM：static getDerivedStateFromProps->shouldComponentUpdate->render()->更新后componentDidUpdate()
	卸载阶段：卸载前componentWillUnMount
*/
❌❌ // 4、函数组件 主要是使用 hooks 来模拟实现生命周期 useEffect + useLayoutEffect
    
- 第一遍 -
react 的生命周期主要是针对 类组件 来讲的，函数组件通过 useEffect 等hooks 实现
❌ // 1、对也是对的，但是函数组件的生命周期还是可以「展开讲讲」
① componentDidMount - 首次渲染，在 commit 阶段，Diff 计算出的最小更新量 应用到真实 DOM 后触发，一般用于 初始化数据 ✅
② componentDidUpdate - 更新，commit 阶段，更新真实 DOM 后触发 ✅
❌ // componentDidUpdate(prevProps, prevState)，一般用于「操作DOM」和「执行副作用」
③ componentDidUnMount - 卸载组件之前调用，一般用于清理定时器、解除监听等，避免内存泄漏
❌ // componentWillUnMount
④ shouldComponentUpdate - 自定义组件是否重新渲染，传入的参数为 新的状态和属性 ✅
⭐️ // shouldComponentUpdate(nextProps, nextState)
❌ // 2、不止上面四个，还有 constructor()、render()，分三个阶段来描述：
// ⑤constructor - 类组件的构造函数，用于初始化组件状态 state + 绑定事件处理函数 + super(props) 传递 props
// ⑥render - 渲染函数，返回一个React元素
❌ // 3、分为三个阶段，分别执行对应的生命周期
// 挂载阶段：⑤constructor()、①componentDidMount、⑥render()
// 更新阶段：④shouldComponentUpdate、⑥render()、②componentDidUpdate
// 卸载阶段：③componentWillUnMount

❌ // 4、函数组件的生命周期
❌ // ① useEffect - 模拟了三个生命周期
// 模拟componentDidMount - 当组件首次渲染时，useEffect 内部的函数执行
// 模拟componentDidUpdate - 通过在 useEffect 的依赖数组中传入状态或属性，依赖发生变化时，内部函数再次执行
// 模拟componentWillUnMount - useEffect 可以 return 一个函数作为清理函数，会在组件卸载时执行
❌ // ② useLayoutEffect - [commit阶段]在DOM更新后，浏览器下一次重绘前，同步执行 - 会阻塞重绘
// 		   	   useEffect - [commit阶段]在DOM更新后，异步执行 - 适合不依赖DOM布局的副作用，例如数据获取、订阅事件等

// 作业71：React为什么要合成事件？和原生事件有什么不同？
React 的合成事件，其实是一个处理了浏览器兼容性的事件处理系统 ⭐️ // + 是对浏览器原生事件的封装
功能：①处理各个浏览器的差异，使用者可以只关注代码实现；
	 ②利用事件委托，所有的合成事件在构建时，统一冒泡到最外层，一般是 document 标签上绑定，大量减少了绑定事件的性能消耗
     ❌❌ // 1、不是在「构建时」，事件委托发生在「组件挂载时」
差异：
	事件对象：合成事件-统一了对象类型；原生事件-根据浏览器不同有一定差异
	事件执行机制：合成事件-由React内部事件系统统一管理执行，一般是在冒泡阶段执行；
				原生事件-捕获阶段就会触发，比合成事件早；同步执行，触发后直接执行；
	❌❌ // 2、少写了：事件绑定方式 合成事件-JSX中属性指定事件处理函数；原生事件 标签的onclick或者addEventListener

- 第一遍 -
合成事件的定义：React 统一了各个浏览器内核的原生 API 差异，抹平差异后，用户只需要关注功能实现，而不需要再关注宿主环境
合成事件是原生事件的高级集合
❌ // 1、内核是对的，不是“高级集合”，是「React对浏览器原生事件的封装」，是「一个跨浏览器兼容的事件系统」
// 优点/原因：① 跨浏览器兼容性 ②性能优化：通过事件委托到 document，减少大量事件绑定的开销
❌ // 2、“不同”需要具体的描述：
// ①事件对象(有一套标准的属性和方法，用于事件信息 VS 由浏览器提供，属性方法因浏览器而异)
// ②事件绑定方式(React中JSX属性中指定事件处理函数来绑定 VS 原生标签的 onclick/addEventListener)
// ③事件执行顺序(内部事件系统决定，冒泡执行，一般比原生晚 VS 先捕获再冒泡)

// 作业70：Vue 和 React 的 Diff 算法比较
- 第二遍 2025.1.13 -
React Diff: 
	比较虚拟 fiber 树和真实 UI 对应的 fiber 树，深度优先遍历
⭐️ // 是精确到单个节点属性级别的算法，适合大型复杂动态场景 
	分层同类型优先比较：如果同层级，标签相同，则更新当前节点属性即可；
    				如果标签不同，则标记重新渲染
                    如果同层级，标签相同，且 key 相同，则直接复用，移动到当前位置
                    ⭐️ // 「列表组件，根据 key 确定新老节点关系」
Vue Diff:
⭐️ // 是基于组件级别更新的算法，适合简单场景
	双端指针法：比较两棵 VDOM 树，分别从首尾双端进行比较，如果标签相同则修改属性；标签不同则重新渲染
❌❌ // 1、双端比较算法是直接找匹配节点，不进行 标签修改
    如果找不到匹配的 DOM 节点，则按 key 查找相同标签节点，进行复用
❌❌ // 2、key 是第三层比较逻辑，第二层比较逻辑是「索引」 - 若索引没有变化，则不更新当前节点；如果索引有变化，判断是否「同类型 + 同key」，移动到新位置
❌❌ // 3、性能优化，编译时标记的静态节点跳过 - 虽然老生常谈，但是这其实是一大优化


- 第一遍 -
React：
❌ // 1、简单描述下 React 的 Diff 算法是「精确到单个节点的属性级别」，适合「大型复杂场景」，例如大量动态组件和频繁更新的场景
1、从根节点开始比较，采用分层比较
❌ // 2、对，这里可以标题记忆 「① 分层比较 + 同类型比较优先策略」
2、同类型节点，则比较属性的变更；不同类型则停止比较，标记为需要重新渲染✅
3、同类型+同key 的节点进行复用
❌ // 3、这里主要是指：「列表组件」中，根据 key 确定新老树子节点的关系
❌ // 4、少写了「② DFS 深度优先遍历子节点」
Vue：
❌ // 5、描述：「更新基于组件级别」
1、比较新老两棵 VDOM 树，采用双指针，分别从新老两棵树的头尾开始比较，适用于小型应用快速计算出最小更新量 UI
❌ // 6、双指针其实很不明确，「双端比较算法-双向指针」
2、同类型+同key 的节点进行复用
❌ // 7、是会复用，但是场景是「双端比较法没有找到足够匹配的节点，就根据节点的索引进行比较」
// 8、检索「同类型+同key 的节点」，「索引位置」没有变化，就认为这个节点不需要更新；若有变化，就「移动到新位置」，「复用旧列表」
3、跳过比较静态编译标记的静态节点，加快比较速度✅

// 作业68：React hooks 的原理是什么？useEffect useState模拟实现
- 第三遍 2025.1.13 -
react 的每个组件都会将 hooks 链表存储在 fiberNode.memorizedState
组件有更新时，会按需全部执行全部 hooks，保证每次都可以获得最新的属性和状态
❌❌❌ // 1、这里描述的是 hooks 的执行过程 - 大虐，第一遍/第二遍的时候都记得是用于给函数组件添加功能用的，这一次反而完全没想起来
❌❌❌/** 记忆 React hooks原理
	先描述【目的】：16.8的新增功能，可以在不编写类组件的情况下「使用 state」及其他特性，「状态管理能力」、「生命周期替代能力」、逻辑复用能力
	再描述【实现上述目的的方法】，也就是【原理】：怎么用来「使用 state + 状态管理能力」 - ①主要是利用「闭包」，组件每次渲染时，使用闭包保持其状态；怎么用来「生命周期替代」 - ②使用链表保存一系列hooks，存储在 fiberNode 上，「在 Fiber 树更新时，能从 hook 中计算出最终输出的状态和需要执行的相关副作用」
*/

// useEffect(() => {}, []);
⭐️ /** 注意其实要写下 render 函数，因为 useEffect 触发 render 后，对应的游标要置0
	function render(){
		ReactDOM.render(<App />, document.getElementById('root'));
		count = 0;
	}
*/
const memorized = {};
let count = 0;
function fakeUseEffect(callback, array) {
    const lastArray = memorized[count];
    const hasChanged = lastArray && array.some((it, index) => it === lastArray[index]);❌❌❌ // 2、这里应该是判断「不等于」，有不相等的，代表依赖数组变化，需要更新：!Object.is(it, lastArray[index])
    if(!lastArray || hasChanged) {
        callback();
        ❌❌❌ // 3、少写了「更新依赖数组」的逻辑：memorized[count] = array;
    }
    count ++;
}
// const [a, useA] = useState(init);
const memorized = {};
let count = 0;
function fakeUseState(init) {
    const currentCount = count;
    let value = memorized[currentCount] ?? init;
    ❌❌❌ // 4、使用 value 会导致返回后，value 不会自动更新，和 memorized[currentCount] 失去了联系，本行改为：memorized[currentCount] = memorized[currentCount] ?? init;
    const setValue = (newValue) => {
        memorized[currentCount] = newValue;
        ❌❌❌ // 5、调用 useValue 必须触发 render：render();
    }
    count++;
    return [value, setValue]
    ❌❌❌ // 4、延续问题4，本行修改为：return [memorized[currentCount], setValue]
}

- 第二遍 -
Hooks的实现目的是为了实现和类组件一样拥有对组建流程进行自定义的能力。
❌❌ // 1、和第一遍的逻辑是一样的，都是想到了「函数组件」缺失「类组件的生命周期」
// 但是 hooks 不只是「生命周期替代能力」，还有「状态管理能力」、「逻辑复用能力」
// 函数组件也不止缺失「生命周期」，还包括 state（没有 hooks 的函数组件主要接收 props 来展示 UI）
在首次渲染时，react会为每个组件收集所有的hooks并以链表形式存储在每个节点的memorizestate当中。当组件被更新，react会重新调用渲染函数，所有的hooks会按标记需要重新渲染的执行一遍。
（Hooks是和副作用链表哪个是被标记要重新渲染，然后重新渲染执行的呀？我记得hooks是在首次渲染的时候或者是后续更新的时候都会被全部按序执行一遍的，而副作用收集的链表是在commit渲染把dom更新到真实dom之后。执行副作用链表的）
❌❌ // 2、质疑是对的： hooks 在组件更新时是「全部按序重新执行一遍」，副作用链表是「在 hooks 执行过程中，如果 useEffect 依赖有更新」，就更新到副作用链表
// 和第一遍一样想到链表：第一遍想到存储位置，第二遍描述收集、执行过程 - 而不是原理
// 原理是从「链表+闭包」描述的：利用闭包保存状态，使用链表保存一系列的 hooks 与 Fiber关联。在 Fiber 更新时，就能从 hooks 中计算出最终输出的状态 和执行相关的副作用。

// ⭐️ 1、function render(){ 
// ReactDOM.render(<App />, document.getElementById('root'));
// cursor = 0; // 这里注意在 render 函数中，将 effect 的游标置 0
//}
const memorizedState = {};
const cursor = 0; ❌❌ // 3、这里应该是用 let
function fakeUseEffect(cb, depsArray) {
    const lastDeps = memorizedState[cursor];
    const hasChange = lastDeps && depsArray.some((it, index) => !Object.is(it, lastDeps[index]));
    if(!lastDeps || hasChange) {
        cb();
        memorizedState[cursor] = depsArray;
    }
    cursor++;
}

const memorizedState = {}; // ⭐️ 核心是链表，但是这里选择使用 [] 实现
const cursor = 0; ❌❌ // 4、这里应该是用 let
function fakeUseState(init){
    const value = memorizedState[cursor] ?? init;
    ❌❌ // 5、cursor 应该使用其他变量保存，和下文中 setValue 形成了闭包 - 在异步情况下，cursor 可能会变化，导致索引错误 const currentCursor = cursor; 这里使用 currentCursor 进行索引
    const setValue = function (newValue) {
        memorizedState[cursor] = newValue;
        ❌❌ // 6、更新使用闭包保存的 memorizedState[currentCursor] = newValue;
        ❌❌ // 7、这里还要触发一次 render() 函数执行
    }
    return [value, setValue]
}

- 第一遍 -
之前渲染流程类组件中是使用生命周期管理的，函数式组件也通过 hooks 实现了管理
❌ // 1、描述得不准确：hooks 可以在不编写类组件的情况下使用 state 及React其他特性
在 render 阶段，组件执行时，会通过链表形式存储 hooks - FiberNode.memorizeState 存储第一个链表
❌ // 2、hooks 链表说得不错，链表是为了在更新时，以稳定的顺序执行，输出最终的状态和相关副作用
❌ // 3、还有一个 hooks 利用闭包保存状态，在组件每次渲染时通过闭包保持其状态
触发更新/渲染时，会执行

⭐️ // 注意 hooks：1、不要在循环、条件、嵌套、try/catch/finally 中使用 - 无法保证顺序的稳定
⭐️ // 2、只有在 函数组件和hooks 中能够调用 hooks

let states = [];
let cursor = 0;
function render() { ReactDOM.render(<App />, document.getElementById('root')) }
function useFakeState(init) {
    ❌ // 5、当前定义时的 cursor 需要被闭包保存 let currentCursor = cursor;
    const states[cursor] = states[cursor] ?? init;
    const setCurrentState = (new) => {
        states[cursor] = new;
        render();
    }
    ❌ // 4、少处理了游标自增： cursor++;
    return [states[cursor], setCurrentState];
}

let states = []; ⭐️ // 这里使用 allDeps 声明或许更合适
let cursor = 0;
function render() {
    ReactDOM.render(<App />, document.getElementById('root'));
    cursor = 0;
}
function fakeUseEffect(cb, depsArray) {
    const lastDeps = states(cursor);
    const hasChanged = lastDeps && depsArray.some((it, index) => it !== lastDeps[index]);
    ⭐️ // 这里的 some 回调可以使用 !Object.is(it, lastDeps[index])
    if(!lastDeps || hasChanged) {
        cb();
        states[cursor] = depsArray;
    }
    cursor ++;
}

// 作业67：React 怎么做的性能优化？
- 第二遍 2025.1.12 -
由于react使用的jsx比较灵活，在编译时很难做预编译的优化，所以react在运行时 JIT 做了一些优化
主要是两个策略 ⭐️ // 主要是避免组件重新渲染
1、eagerState 策略：如果当前更新的state和旧值无关，react 会直接使用新值渲染，而不是访问旧值后再修改
2、bailout策略：判断组件的 state和props相等，即可复用节点，跳过重新渲染
针对 bailout，有好几个生命周期和hooks 方便命中
1、在写代码的时候，将可变的和不可变的分开写，方便命中
2、shouldComponentUpdate（nextProps，nextState）通过返回布尔值，自定义是否重新渲染当前类组件
⭐️ // shouldComponentUpdate 是为了「类组件」的性能优化设计的生命周期
/**
	❌❌ 1、对于「函数组件」，React 提供了 React.memo 这个高阶函数来处理 -> 对组件的 props 进行浅比较，如果不变则跳过重新渲染
	const MyMemo = React.memo((props) => { return <div>{props.time}</div> })
*/
3、useMemo 将组件缓存，只要依赖数组不变，就不进行重新渲染
4、useCallback 将函数缓存，只要依赖不变，就不进行重新计算
⭐️ // const expensiveMemoValue = useMemo(() => { return count * 2 }, [count])
// const expensiveCallback = useCallback(() => { setCount(count + 1) }, [count])
// 这里的记忆方法：shouldComponentUpdate(类组件)/React.memo(函数组件) 都是用于通过比较前后 props；2个函数组件的性能 hook：useMemo/useCallback


- 第一遍 -
React 每次更新都是重新生成一棵完整的树，更新颗粒度细
1、运行时优化：fiber 架构实现时间分片 + 优先级调度
❌ // 1、对，在运行时优化，但是这个「架构级别」的属于渲染层面的优化，性能方便还是两个优化策略
	①Time Slice 原理：每次渲染新的一帧前，fiber 都会查询 shouldYield 判断是否要执行一个渲染单元
    ②用户交互产生的渲染任务，优先级高于非视口下的页面渲染
2、在是否复用组件时，两个优化策略：
❌ // 2、对，但是一般不叫做「是否复用组件」，而是「避免组件重新渲染」
	①s？ 策略：？
    ❌ // 3、eagerState：在useState 更新过程中，如果新值不依赖于旧状态，则直接使用新状态来更新组件
	②bailout 策略：props+state不变，就可以进入该策略
	❌ // 4、只需要组件的 props 不变，即可避免重新渲染[state可能会影响子组件的 props，还是要考虑的]
3、日常一些写法也可以优化
❌ // 5、两个策略中，bailout 策略可以通过调用 API 来实现
	①把动态的变量和静态数据拆分组件
    ❌ // 6、React.memo - 针对函数组件，对组件的 props 浅比较，不变则跳过重新渲染
    const MyComponent = React.memo((props) => {return <div>{props.text}</div>}) // props.text 的值/引用不变，就不会重新渲染
    ❌ // 7、shouldComponentUpdate - 针对类组件，在组件更新前调用，自定义是否需要重新渲染
    class MyComponent extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            return this.props.text !== nextProps.text; // 不同时，重新渲染
        }
        render() {return <div>{this.props.text}</div>}
    }
	❌ // 8、useMemo/useCallback - 依赖项不变，返回之前的缓存
    const expensiceValue = useMemo(() => { return count*2 }, [count])
    const handleClick = useCallback(() => {setCount(count + 1)}, [count])
❌ // 9、除了两个策略，还有 VDOM + Diff - 减少对真实 DOM 的操作，避免不必要的回流重绘

// 作业66：React如何处理错误
- 第三遍 -
react 提供了两个错误处理函数，一般被称为错误边界，用于处理在 render 和 commit 阶段的错误 ⭐️ // 用于避免错误传递到整个应用，影响 UI 的正常展示
static getDerivedStateFromError 静态方法，用于捕获错误后，有UI修改的时机
componentDidCatch 生命周期，用于捕获错误后提供记录的时机
class boundaries extends React.component{ ⭐️ // 组件名称应该用大写 Boundaries
    constructor(props){
         super(props);
         this.state={hasError:false};
    }
    static getDerivedStateFromError(){
        this.setState({hasError:true});  ❌❌❌ // 1、这个 getDerivedStateFromError 是不能使用 this 的 -> 因为它是一个静态方法，不与组件实例绑定，所以不能直接访问this（因为它是在类级别上被调用的，而不是在组件实例的上下文中） -> 这种方式是为了保持函数的纯粹性，只能通过返回一个对象来修改state  return { hasError: true }
    }
    componentDidCatch(err){
        console.log(err);
    }
    render(){
        if(this.state.hasError){
            return <div>It’s Err.</div>
        }else{
            return this.props.children;
        }
    }
}
错误边界不会捕获 1当前错误边界组件中的错误 2 异步函数 setTimeout setInterval，因为不在 react 的渲染流程中 ⭐️ // 还有一个事件回调中的错误，也不在 react 渲染流中

- 第二遍 -
React提供两个错误处理API，用于获取render和commit 期间生命周期当中的错误，避免错误传递影响到整个应用页面的展示。 ⭐️ // 是为了 UI 正常显示设计的
Static Getderivedstatefromerror 捕获错误，提供重新渲染UI的时机(需要返回 state 对象来更新)
Componentdidcatch 捕获错误，提供记录错误的时机。
class MyBoundaryError extends React.Component {
    constructor() { ❌❌ // 1、错误边界这里需要传入 props - 才能传入子组件
        ❌❌ // 2、派生类使用 this 需要调用 super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError() {
        return { hasError: true };
    }
    componentDidCatch(e) {
        console.log(e);
    }
    render() {
        if(this.state.hasError) {
            return <div> There is error.</div>
        } else {
            return <p>Page.</p>
            ❌❌ // 3、如果没有错误，应该要渲染错误边界包裹的子组件
            // return this.props.children;
            // 可以看下使用：<MyBoundaryError><MyCom /></MyBoundaryError>
        }
    }
}

- 第一遍 -
React 提供了两个错误 API，使用两个 API 可以组装错误边界
❌ // 1、捕获的错误是： React render+commit 中的错误
// 2、两个 API 分别是： static getDerivedStateFromError() [callback UI 有错误时提供渲染时机]
// componentDidCatch()[组件实例方法 有错误时提供时机记录错误]
// 3、为什么要有专门的错误边界处理错误：因为它可以捕获渲染、生命周期、构造函数中的错误，防止错误传播到整个应用，使其他页面能够正常展示
// 4、不会被捕获的四种错误：①事件回调中的错误，因为不在react工作流里（错误处理API被设计的目的是避免错误影响 UI显示，只有commit阶段会造成UI变化）②异步代码(setTimeout)③SSR④在错误边界组件内部发生的错误
<ErrorBoundary><MyComponent /></ErrorBoundary>
class ErrorBoundary extends React.Component {
    constructor(props){
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(err){
        return { hasError: true }
    }
    componentDidCatch(err, errInfo) {
        console.log(err, errInfo);
    }
    render() {
        if(this.state.hasError) {
            return <h1> Sth wrong.</h1>
        }
        return this.props.children;
    }
}

// 作业65： ①computed/watch/methods 的区别？ ②父子组件挂载顺序 ③vue组件中的data为什么是函数 ④ 常见生命周期
- 第三遍 -
1、computed：有缓存，只要依赖的变量不变，就不会触发重新计算
watch：监听，修改一次触发一次重新计算
methods：每次组件重新渲染都会触发重新执行
2、父组件 beforecreate>父组件created>父组件beforemounte>子组件 beforecreate 子组件created 子组件beforemount 子组件mounted>父组件mounted
卸载：父组件beforeunmounte>子组件beforeunmounte>子组件unmounted>父组件unmounted
❌❌❌ // 1、大虐，卸载是 beforeDestroy 和 destroyed
3、vue中的组件会被复用，多次调用，如果data不用函数返回，会导致每个组件实例都共享 data对象；采用函数形式后，可以保证每个组件都有独立的作用域
4、beforecreate 什么都没有加载，data和methods都没有
created 加载了data和methods、computed、watch，但是还没有DOM
beforemount 挂载之前，此时已经生成了完整的虚拟DOM树
mounted 挂载后，此时可以访问 DOM
beforeupdate 修改前，还没应用到真实DOM ⭐️ // 此时虚拟DOM已经重新构建完成 
updated修改后，此时修改已经更新到DOM
beforeunmounte还未卸载
unmounted 已卸载
❌❌❌ // 2、大虐，和第一个一样的错误，名称错啦！ beforeDestroy+destroyed，一般在 beforeDestroy 中清理一些 - 定时器、订阅时间、监听事件等，防止内存溢出

- 第二遍 -
1、Compute需要返回值进行缓存。如果值不变的话就不会重新计算。
❌❌ // 1、咦，和上次错误的逻辑一样，不是「存储的值」是否变化，是「依赖的值」是否变化
Watch是监听的值变化一次则触发一次回调函数。
Methods当中的函数每次更新组件渲染一次，执行一次。
2、Created的时候，页面当中的dom还没有挂载，在其中，不可以操作dom组件。但是data methods，computer和watch都已经处理了。
Mounted的时候已经挂载了，这个时候是可以操作。Dom节点的
3、父组件before created，父组件created，子组件before created子组件created，子组件beforemount，子组件mount，父组件before mount，父组件mounted。
❌❌ // 2、和上次错得一样 - 因为上次答案就是错的 😅，这就纠正了，下次不许再错了：子组件在父组件执行 父 beforeMounte 后触发
 卸载组件也是父组件before destroy子组件before destroy子组件destroyed的父组件destroyed。
4、 如果不返回函数式的结构的话，每一个组件被实例化后，所有的实例访问的data都是一个引用对象。通过函数形式返回后，每一个被实例化的组件都拥有。自己的data作用域。

- 第一遍 -
① computed 有缓存，值不变就不会重新计算触发更新
❌ // 1、这里其实对 computed 缓存的内容理解有误差，不是「值」，是「计算属性依赖的值」，同时 computed 必须return 返回
watch 主要是监听一个值，变化一次就执行一次 ❌ // 2、执行回调
methods 方法，在初始化时定义，后续渲染时被调用 ❌ // 3、每次页面发生变化，都会被调用

② created 时， data+methods+computed+watch 已经定义存在，但是 DOM 还没有挂载到真实DOM
mounted时，DOM已经更新到真实 DOM，可以访问/操作DOM了✅

③ 父 beforeCreated - 父 created - 子 beforeCreated - 子 created - 子 beforeMounted - 子 mounted - 父 beforeMounted - 父 mounted
❌ // 子组件挂载完成后，父组件才会挂载 - 子组件在父组件执行 父 beforeMounte 后触发

④ 因为组件会被多次调用、实例化，函数保证了每个组件实例都可以拥有自己的 data 数据✅
⭐️ // 这里补充：每个组件实例都有自己的「作用域」，不会互相影响

// 作业64：Vue渲染怎么实现的？
- 第三遍 -
1、模板编译： ⭐️ // AOT 参与全程
generate：通过词法解析、语法解析将模板转换成AST
optimize：遍历AST，标记静态节点，方便后续Diff时跳过
render：将AST转换成render函数字符串
2、将js代码进行双向绑定—数据劫持和发布订阅过getter/proxy劫持，进行自定义 ❌❌❌ // 1、getter 被劫持是结果，「劫持方式是 Object.defineProperty(target, property, {get:()=>{}, set:()=>{}})」/Proxy
  在Dep中存储正在进行中的Watcher（确认下Dep的结构是不是以变量为key，所有订阅的Watcher为值的格式
❌❌❌ // 2、「每一个响应式对象属性都会创建一个对应的 Dep 类的实例」 -> 我写的这里理解有误，同时数据劫持之后，触发订阅的时机是「渲染组件，实例化 Watcher 时，执行到 getter 触发对应的 Dep 收集正在执行的 Watcher」
  等调用setter/proxy赋值时，通知在Dep中所有订阅的Watcher，即执行 dep.notify()
3、执行render函数，渲染虚拟DOM
4、patch：使用Diff算法计算虚拟DOM和当前UI对应的虚拟DOM的最小更新量，应用到真实DOM

- 第二遍 -
1.模板编译 将模板编译成render函数。执行的步骤分别是 parse optimize render
❌❌ // 1、执行步骤的最后一步是 generate
// 三个步骤分别作用（AOT参与全程）：① parse 词法解析+语法解析 template 得到 AST ② optimize 对AST静态内容优化 ③ generate 递归转换 AST 得到 render 函数

2.先通过AOT进行预编译标记静态节点。拿到可编译文件后对代码进行语法分析，词法分析转换为抽象语法树AST
❌❌ // 2、AOT 预编译功能是针对 template 的，不是针对 js 的（第一次做的时候知道，这次做的时候误以为预编译是针对 js 的 -> 其实通过 AOT 和 JIT 的区别就可以推断，AOT 既然依赖的是静态编译，就是需要像模版语法这种，方便标记静态节点 - js 那么动态肯定是不行🚫的）
进行双向数据绑定。通过object.define property或者是proxy，对数据进行getter和setter的重写。   
渲染组件时，也就是实例化watcher时。执行getter触发收集相关的正在执行的watcher 到deps
更新组件时也就是触发数据的setter函数。通知所有的订阅 deps.notify（）
⭐️ // Dep 用于依赖收集，作为容器管理多个订阅者 Watcher
3.执行render函数生成vdom树
4.patch也就是diff算法通过双端比较算法计算出最小UI的更新量，更新到真实 DOM

- 第一遍 -
1、render
❌ // 1、整个渲染「不止是 render + patch」，应该分成4步，①html：先「模版编译，得到render函数」 ②js：「实例化组件，同时收集依赖」(也就是数据双向绑定-实现响应式数据) ③html+js：「执行渲染函数/更新，得到 VDOM」 ④Diff/patch：「计算最小更新，应用到真实 DOM」
主要任务：生成新的 VDOM 树
相关生命周期：created、beforeMounted
❌ // 2、Vue 的生命周期很难罗列，这里模版编译前，js 都没执行到，怎么会有生命周期
①模版语法，静态编译 AOT 优化，标记静态节点
❌ // 3、这里就是第一步：「模版编译，生成render函数」
// 分三步：①parse - 递归解析 template(词法/语法分析)，「转换成AST」抽象语法树
// ②optimize - 对AST静态内容优化，「标记静态节点」 ③generate - 递归「转换AST，创建render字符串」
②DFS遍历，发布订阅模式+双向数据绑定 - 在 Dep 收集相关的 Watcher，更新时通知这些订阅的 Watcher
❌ // 4、这里说得很粗糙，还少了「实例化组件」来触发，第二步：「实例化组件+创建响应式数据」 - 也就是「数据双向绑定」，是通过「数据劫持」和「发布订阅」模式相结合实现的 - Object.defineProperty/Proxy 劫持重新定义 getter和setter
❌ // 5、没说 Dep 是怎么收集依赖的：在创建 Watcher 访问 getter 时，把当前正在计算的Watcher订阅到 Dep
❌ // 6、没说怎么触发更新：setter 被触发，通知 Dep 中的所有订阅者 - dep.notify()
❌ // 7、数据双向绑定也有缺点：Vue2使用的 Object.defineProperty 在递归处理 data 中的属性时，必须要指定具体属性，所以不在 data 中声明的对象无法拥有双向绑定 - Vue3 改为 Proxy 劫持
③生成 VDOM
❌ // 8、这是第三步，没有说清楚怎么生成 VDOM：执行渲染函数（更新时重新计算/执行渲染函数），得到 VDOM
2、patch
主要任务：利用 Diff 算法，计算出需要更新的UI + 将更新应用到真实DOM上
相关生命周期：Mounted 
❌ // 9、这里 patch 后，VDOM 已经更新到真实 DOM，除了 mounted，updated 也会在更新后在此执行
Diff 算法：两棵树，每棵各双指针，进行往复的节点比较，找到最小更新量
❌ // 10、Diff 比较的是新旧两棵 VDOM树

// 作业62：fiber架构是什么？优点有哪些？ 是怎么实现的？
- 第三遍 -
fiber 分成三大部分 // ⭐️ 不是「三大部分」，是「三个主流程」
Scheduler 调度器 - 在渲染过程中不直接参与渲染，用于优先级执行调度 // ⭐️ 宏观调控
Commit - 对应 render 阶段
❌❌❌ // 1、不是「Commit」，是「Reconciler」，叫做「协调器」，作用是「调用 shouldYield 判断当前 Time Slice 是否有剩余时间」
	上述两部分都是异步的，随时可能会因为一些原因被打断，例如①报错 ②时间切片剩余时间不够 ③有更优先级
    ❌❌❌ // 2、不是因为「异步」才可以被打断，是以为「他们都在内存中执行，不会更新宿主环境 UI」
Reconciliator - 对应 commit 阶段，是同步的，不可被打断
❌❌❌ // 3、不是「Reconciliator」，是「Render」「渲染器」
❌❌❌ /** 上述三个主流程记忆法：
	Scheduler 调度器 - 优先级宏观调控 
	Reconciler 协调器 - render 阶段，用于判断时间切片剩余时间
	Render 渲染器 - commit 阶段（更新UI）
*/

优点：
Fiber 架构提供了时间分片 + 优先级调度
1、之前 react 的解析、渲染流程是同步的，会占用主线程，阻塞页面更新；现在fiber 将渲染任务拆分成一个个小的渲染任务单元，利用浏览器的空余时间执行小单元
❌❌❌ /** 1、第一个优点的关键词是「渐进式渲染」。
	描述内容和上述很像，但是「占用主线程」不是重点，是「长时间」占用主线程。
	不是「react 的解析、渲染」在占用，是「react 每次更新都要递归构建整棵 fiber 树、比较、更新」，重点要突出导致访问卡顿感的原因是渲染卡住了。
	实现方式：Scheduler调度器 + 中断恢复机制
	*/
2、在处理用户交互时，通过优先级调度优先处理交互，提升用户交互体验，比如不在视口的渲染任务可以延后执行
❌❌❌ // 2、第二个优点的关键词是「优先级调度」。实现方式：Scheduler 调度器 + 优先级调度机制
3、Diff 算法优化：比较两棵 fiber 树的差异，计算出最小UI更新，应用到真实 DOM，减少了对 DOM 操作带来的性能影响
❌❌❌ /** 3、第三个优点，现在描述的是怎么实现 diff，但是 fiber 对 diff 的优化主要是「增量式Diff」。
	「不是一次性比较整棵树，而是根据任务的执行进度，逐步比较和更新部分节点，根据时间和优先级安排，逐步更新，减少了每次比较的范围，提高了效率」。
	实现方式：Scheduler调度器 + 中断恢复机制 + Reconciler协调器 + 双缓存机制
	*/
❌❌❌ /** 4、少一个优点「时间分片」。
	「有效利用浏览器空闲时间，在每帧开始之前检查剩余时间，是否执行一个小的渲染任务单元」。
	实现方式：Reconciler协调器 + 中断恢复机制
	*/

实现方式：⭐️ // 核心是对的，结合 fiber 的三大主流程一起
1、实现了更好的时间切片：提供了渲染任务暂停、恢复的能力
2、任务管理+优先级调度

- 第二遍 -
Fiber架构分为三个部分
第一个是schedule调度器，在整个渲染流程当中不直接参与渲染，但作为总把控。
⭐️ // 主要用于优先级调度，宏观调控
第二个是 Reconciler ，对应的是render阶段。
上述两个部分都是异步执行的，随时会被以下几种情况打断1️⃣错误2️⃣更高优先级的任务，比如用户交互。3️⃣时间分片时间不够。
第三个是render。对应的是commit阶段。
这个部分是同步无法被打断，直到渲染到真实页面的dom。

优点
1.在Fiber架构出现以前，react的渲染更新流程是同步执行的。耗时比较久会阻塞。页面渲染性能差。
通过fiber实现了时间分片和优先级调度。拥有了暂停和恢复执行渲染任务的能力，将整个渲染任务拆分成了很多小的渲染单元，在针和针的渲染间隙进行执行，尽可能不影响渲染帧的执行。
2.同时优先级调度任务可以让react优先处理和用户的交互。将一些没那么重要的渲染任务稍后执行，例如不再是口中的画面的图块处理。
⭐️ // 总结：「渐进式渲染」、「暂停恢复渲染能力」、「优先级调度」、「时间分片管理」

1.双fiber node的虚拟dom树 
2.优先级调度器，对任务进行统一调度。
⭐️ // 「优先级调度器」其实是两样，「任务调度」 + 「优先级管理」
3.模拟了生成器和yield。有了暂停和恢复渲染任务的能力。
❌❌ // 1、这里缺少一个 Diff 算法的执行优化：增量式 
4.在每次渲染之前都会调用 shouldYield 判断当前是否拥有足够多的时间处理小的渲染单元任务。
⭐️ // 这里就是时间分片的原理

- 第一遍 -
fiber 是为了解决CPU瓶颈 - 连续的 js 执行会占用主线程，导致渲染阻塞，低于60帧/秒出现卡顿
❌ // 1、不是「连续的 js 执行」会长时间占用主线程，是「React递归构建整颗 DOM 树、比较、更新」
❌ // 2、明确 React 由于每次构建的都是整颗树 + 之前是同步渲染 - fiber 做到了异步渲染
优点：时间分片 + 优先级调度
	1、将React的代码执行分成很多小模块，在帧和帧之间的小间隙里面，检测时间是否充足用于执行模块 - 不会占据很长时间的主线程，不影响渲染
	❌ // 3、分成小模块的自然也不只是「代码执行」，是「渲染工作」被分解成了「小任务单元」 + 同时可以「暂停 + 恢复」 -> 使得 在每帧开始前检查剩余时间，能否执行的也就是「小渲染任务单元」
	2、标记优先级，如果遇到用户交互，则优先处理，提高渲染效率和用户体验
    ❌ // 4、少写了：渐进式渲染
    
❌ // 上述写的都是原理，并不是具体实现 1、双缓存机制 current tree 和 work-in-progress tree 2、任务调度和优先级管理 3、Diff 算法优化为增量式 Diff

// 作业61：常见的数据结构有哪些
- 第二遍 -
按照结构分
	线性结构：链表、数组、栈/队列
    非线性结构：树、图

- 第一遍 -
❌ // 按逻辑结构分为：线性结构和非线性结构
结构型类型：数组、栈/队列、链表
非结构型类型：树、图

// 作业59：什么是高阶函数?什么是高阶组件？什么是副作用？简单举例
- 第三遍 -
高阶函数：输入参数或者输出结果是函数的函数
高阶组件：输入参数是组件
副作用：是函数式编程的概念，除了返回值，函数会造成其他影响，例如修改全局变量、修改输入变量、IO变化等
const a = (MyComponent, required) => {
	return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = { permission: false };
        }
        componentDidMount() {
            const check = check('id');
            this.setState({ permission: check === required })
        }
        render() {
            if(this.state.permission) {
                return <MyComponent {...this.props} />
            } else {
                return <div> You don't have permission. </div>
            }
        }
    }
}

- 第二遍 -
高阶函数就是输入输出的参数是函数。最常见的就是map。
高阶组件就是输入的参数也是组件。
副作用是函数式编程当中的说法，含义是除了return的返回值。在函数当中还会影响到外部值，比如说传入的参数，全局变量。Io下载等
const my = (MyComponents, requiredType) => {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = { permit: false }
        }
        // ❌❌ 1、这里少写了一个 componentDidMount 用于初始化的时候计算 state 中的值
        componentDidMount() {
            const myPermit = check('id'); // 查询
            this.setState({ permit: myPermit === requiredType })
        }
        render() {
            if(this.state.permit) {
                return this.props.children;
                // ❌❌ 2、子组件作为参数传入了  return <MyComponents {...this.props} />
            } else {
                return <div> Error. </div>
            }
        }
    }
}

- 第一遍 -
高阶函数 - 输入参数是函数的函数 arr.map(it => +it)，map 就是高阶函数
❌ // 高阶函数 - 以函数作为【输入或者输出】的函数
高阶组件 - 输入参数是组件的组件，做一些包装，可以统一添加监控、报错等功能
❌ // 高阶组件 - 接收组件作为参数，并返回一个新组件 
// - 常用于1、包装一层功能2、属性代理/组合3、动态行为添加
副作用 - 除了返回值，在函数执行过程中会影响其他值、IO等
❌ // 副作用是函数式编程的概念 - 除了函数的返回值外，还对外部环境产生了影响(例如：1、修改全局变量 2、改变输入参数 3、进行IO操作等)
高阶函数-权限校验示例：
class Wrap extends React.Component {
    constructor(props) {
        super();
    }
    render() {
        return <div>{props}</div>
    }
} // 写法是对的，但是传入的 props 不是明确的组件 ❌

// 作业58：React和Vue是怎么描述UI的
- 第二遍 -
React - JSX=HTML+JS，单个{}将js插入展示
❌❌ // 1、少写了 ①自定义组件-函数组件+类组件 ②state-状态，组件内部自变量；props-属性，外部传入自变量
Vue - 模版语法，双个将js插入展示 + 指令 v-if、v-show
⭐️ // 指令还有 v-for v-bind v-else/v-else-if v-on v-model等

- 第一遍 -
React: JSX - 由js+HTML组成，函数组件+类组件
// ❌ 少写了： 可以自定义组件 + 使用花括号{}将js嵌入JSX {note}
//	少写了： state-状态，组件内部自变量
//	少写了： props-属性，其他组件传入的自变量
Vue: 模版 - 花括号嵌入模版+指令<div v-if="show">
// ❌ 模拟语法 - 结合数据+预先定义的模版
//  少写了： 使用双大括号展示数据 + 指令v-if="show"/v-for="item in items"

// 作业55：flex 常见缩写
- 第三遍 -
flex: none; // 0 0 auto
flex: 1; // 1 1 0
flex: auto; // 1 1 auto
flex: initial; // 0 1 auto

- 第二遍 -
// 所以我错的不是缩写不清晰，是每次 0 0 auto 的简写是 none ，而我写成 0 
flex: 0; // 0 0 auto ❌❌ 「缩写其实是 flex: none;」
flex: initial; // 0 1 auto
flex: 1; // 1 1 0 
flex: auto; // 1 1 auto

- 第一遍 -
flex: 0; // 0 0 auto ❌ 「缩写其实是 flex: none;」
flex: 1; // 1 1 0
flex: auto; // 1 1 auto
flex: initial; // 0 1 auto

// 作业74：起舞弄清影 是那首诗？谁写的？下一句是什么？
苏轼
不知天上宫阙，今夕是何年
起舞弄清影，何似在人间

/** ⭐️ 欣赏一下原文
《水调歌头 明月几时有》
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
*/

// 作业54：举杯邀明月，对影成三人。的上一句
- 第二遍 -
花间一壶酒，独酌无相亲

- 第一遍 -
起舞弄清影，独酌无相亲 ❌ 『花间一壶酒，独酌无相亲』

// 作业49：牛顿三大定律、热力学两大定律
- 第二遍 -
惯性定律、加速度定律 a=F/m、作用力与反作用力
能量守恒、熵增定律

- 第一遍 -
 + 加速度 a=F/m + 作用力与反作用力 ❌ 『惯性定律』
能量守恒 + 熵增定律

// 作业25：简单写下 请求创建过程
- 第三遍 -
function request(url){
    const xhr = new XMLHttpRequest();
    xhr.ontimeout = () => {};
    xhr.onerror = () => {};
    xhr.onreadystatechange = function(res) {
        switch(res.readyState) {
            case 0: // 请求没开始
                break;
            case 4:
                if(this.status === 200 || this.status === 304) {
                    console.log(this.responseText);
                }
                break;
        }
    }
    xhr.open('GET', url, true);
    xhr.timeout = 3000;
    xhr.responseType = 'text';
    xhr.setRequestHeader('animal', 'qiu');
    xhr.send();
}

- 第二遍 -
function request(url) {
    let xhr = new XMLHttpRequest();
    xhr.onerror = () => {};
    xhr.ontimeout = () => {};
    xhr.onreadystatechange = function(res) {
        switch(res.state) { ❌❌ // 1、res.readyState
            case 0: // 请求未开始
                break;
            case 4:
                if(this.status === 200 || this.status === 304) {
                    console.log(this.responseType);
                }
                break;
        }
    }
    xhr.open('GET', url,true);
    xhr.timeout = 3000;
    xhr.responseType = 'text';
    xhr.setRequestHeader('a', 'qiu');
    xhr.send();
}

- 第一遍 -
function require(url) {
    let  xhr = new XMLHttpRequest(); // 1、实例 ⭐️「使用const」
    // 2、回调
    xhr.onerror = () => {};
    xhr.ontimeout = () => {};
    xhr.onreadyStateChange = function (res) { // ⭐️「原生函数全小写字母 onreadystatechange」
        switch(res.readyState) {
            case 0: // 未开始
                break;
            case 4:
                if(this.status === 200 || this.status === 304) {
                    console.log(this.responseText);
                }
                break; // ⭐️「记得写 break」
        }
    }
    // 3、创建
    xhr.open(url, 'GET', true); // true 表示异步 ❌ 『xhr.open('GET', url, true)』
    // 4、属性设置
    xhr.timeout = 3000;
    xhr.responseType = 'text';
    xhr.setRequestHeader(key, value);
    // 5、发送请求
    xhr.send();
}

// 作业16（2）：arguments 对象对待命名参数和设置了默认值的命名参数有什么不同？数组作为参数传入函数得到的arguments 是什么？怎么实现arguments是数组？怎么收集独立参数？在对象字面量和数组字面量中，扩展运算符有什么不同的表现？
- 第二遍 -
arguments 和命名参数始终同步，例如修改 arguments[0] 也会改变第一个命名参数
但是 arguments 和设置了默认值的命名参数不同步，修改了 arguments[0] 并不能修改到命名参数
数组传入 - arguments=[[1,2,3]]
arguments是数组 - (...arr)，使用扩展运算符
收集独立参数 - (first, ...rest)，使用扩展运算符 + 最后一个参数，rest 是数组
对象字面量 {...obj} - 创建一个新对象，拷贝所有可枚举属性
数组字面量 [...obj] - 将可迭代对象一一传入

- 第一遍 -
arguments 默认同步命名参数，比如在函数内修改了 arguments[0]，如果对应的是命名参数，那么值会同步
但是 arguments 不同步设置了默认值的命名参数
数组作为参数 - arguments:[1,2,3]❌『[[1,2,3]]』
可以用扩展运算符转换 (...arr)
收集独立参数 (first, second, ...rest) -> rest 是一个数组 只能作为最后一项收集
扩展运算符 - 对象字面量 {...obj} 浅拷贝对象中所有实例属性❌『创建一个新对象，并复制所有可枚举属性』
扩展运算符 - 数组字面量 [...obj] 将可迭代对象一一返回

// 2019.07 h5新标签和语义化，块/行内元素
语义化：1、样式不同 2、更好的SEO
h5新标签：header footer aside article address nav datalist fieldSet/legend detail time hgroup section
input 新属性：placeholder autocomplete autofocus accesskey required multiple
input type 新属性：tel email url number date time datetime week month range search
块元素: div table h1-h6 td ol li ul dd dt table-caption p // ⭐️ tr dl caption address hr
行内元素: span br i u a strong em select textarea button // ⭐️ b label
行内块元素: input img td

// 2021.04 02 网络协议 - IP/UDP/TCP协议
应用层（HTTP
传输层（TCP、UDP - 定位某一个应用端口
网络层（IP - 定位某一台机器 ip
网际链路层（MAC - 底层，在网络中定位域
data 传输流程： data]TCP -> data]TCP]IP ->....-> data]TCP -> data

// 2021.04 05-3 白屏优化？
白屏：网络进程文件加载完毕，浏览器开始刷新页面，但是主线程渲染流程还没有结束，页面短暂出现解析白屏
❌ // 1、少写 - 硬件加速：DNS 解析优化，例如缓存、预加载；TCP、服务器优化
1、html 精简代码，简化结构，减短DOM解析时间
2、css 从右到左的解析方式，尽可能减少层级，使用 link 而非 @import，从而触发预加载，使用 css 优化/GPU 加速减少回流重绘 ❌ // 2、少写 - 对于大文件的 css，利用媒体查询拆分不同用途
3、js 加载使用 defer/async 避免阻塞 ❌ // 3、少写 - 尽量不使用 内联代码
4、压缩代码
5、减少 http 请求次数、大小

// 2021.07 数组扁平化（一层、全部展开、指定深度）
const arr = [1, 2, [3, 4], 5];
一层
1、arr.flat()
2、[].concat.call([], ...arr) // ❌ 1、对 concat 了解不够深，concat 会铺平一层，同样原理的还可以写成 [].concat(...arr) / [].concat.apply([], arr)

全部展开
1、arr.flat(Inifity) ❌ // 2、拼写错误 Infinity
2、Object.prototype.toString.call(arr).join(',') ❌ // 3、学杂了，这个写法会返回'[object Array]' 用于查询 arr 的类型 -> arr.toString().join(',')
3、
function spread(arr) {
	return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? spread(cur) : cur), [])
}

指定深度
function spread(arr, deep) {
	return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) && deep > 1 ? spread(cur, deep - 1) : cur), [])
}