1function increase(a) {
2 a++;
3}
4var a = 1;
5increase(a);
6increase(a);
7
8console.log(a);
函数里面给形参重新赋值不会影响外面的变量，形参自己有个内存地址，保存外面传进来的值
1function increase(a) {
2 a = { n: 2 };
3}
4var a = { n: 1 };
5increase(a);
6
7console.log(a);
形参是对象时，重新赋值为一个地址，也不影响外面的变量
1function increase(a) {
2 a.n = 2;
3}
4var a = { n: 1 };
5increase(a);
6
7console.log(a);
这种情况会影响外面的变量，形参对象没有重新赋值，函数里面操作的形参地址是外面变量的地址
题1
1Promise.resolve()
2 .then(() => {
3 console.log(0);
4 return Promise.resolve(4);
5 })
6 .then((res) => console.log(res));
7
8Promise.resolve()
9 .then(() => {
10 console.log(1);
11 })
12 .then(() => {
13 console.log(2);
14 })
15 .then(() => {
16 console.log(3);
17 })
18 .then(() => {
19 console.log(5);
20 })
21 .then(() => {
22 console.log(6);
23 });
当同步代码执行一遍后，Promise.resolve()是完成状态，then里面的回调会加入微任务队列,
微任务队列： [() => { console.log(1) }，() => { console.log(0); return Promise.resolve(4)} ]
然后从微队列取函数执行，先进先出，首先打印0，这个函数返回一个Promise.resolve(4)，Promise.resolve(4)返回的是一个新的promise，当出现then里面的回调函数返回一个新的promise的情况，
此时，这个 then(() => { console.log(0); return Promise.resolve(4) })方法产生的promise（记作p0）状态与Promise.resolve(4)产生的promise（记作p4）状态一致，也就是p4状态完成，p0状态就完成，并且放到微任务队列中，
微任务队列： [()=>p4.then(()=>p0完成状态)，() => { console.log(1) } ]
接着取任务执行，打印1，then(() => { console.log(1); })完成，接着把它产生的promise的then里面的回调放到微队列
微任务队列： [() => { console.log(2) }，()=>p4.then(()=>p0完成状态) ]
执行()=>p4.then(()=>p0完成)，
微任务队列： [()=>p0完成状态，() => { console.log(2) } ]
打印2，添加() => { console.log(3); }到微队列
微任务队列： [() => { console.log(3), }，()=>p0完成状态 ]
执行 ()=>p0完成昨态，添加(res) => console.log(res)到微队列，
微任务队列： [(res) => console.log(res)，() => { console.log(3), } ]
接下来顺序就是打印3，添加5，打印4，打印5，添加6，打印6
题2
1console.log("script start");
2
3setTimeout(function () {
4 console.log("setTimeout1");
5 new Promise(function (resolve) {
6 resolve();
7 }).then(function () {
8 new Promise(function (resolve) {
9 resolve();
10 }).then(function () {
11 console.log("then4");
12 });
13 console.log("then2");
14 });
15});
16
17new Promise(function (resolve) {
18 console.log("promise1");
19 resolve();
20}).then(function () {
21 console.log("then1");
22});
23
24setTimeout(function () {
25 console.log("setTimeout2");
26});
27
28console.log(2);
29
30queueMicrotask(() => {
31 console.log("queueMicrotask1");
32});
33
34new Promise(function (resolve) {
35 resolve();
36}).then(function () {
37 console.log("then3");
38});
39
40console.log("script end");
当同步代码执行一遍后，依次打印，script start, promise1, 2 ,script end，同时
微任务队列：[()=>console.log("queueMicrotask1")，()=>console.log("then1")]
宏任务队列：[()=>console.log("setTimeout2")，setTimeout1宏任务]，
先取出微任务执行，接着打印then1 ，queueMicrotask1，微任务队列此时清空了，然后才取出宏任务执行，取出第一个宏任务setTimeout1执行，接着打印”setTimeout1”，执行到promise的resolve，接着往微任务队列放任务，
微任务队列：[then2和then4这个微任务]
宏任务队列：[()=>console.log("setTimeout2")]，
微队列有任务接着执行，清空了才执行宏任务队列，取出微任务执行，打印”then2”，又遇到promise的resolve()，
微任务队列：[()=>console.log("then4")]
宏任务队列：[()=>console.log("setTimeout2")]，
然后把微任务队列和宏任务队列任务取出来执行就是了
题3
async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖；await以下行的代码放到微任务队列执行
1async function async1 () {
2 console.log('async1 start')
3 await async2();
4 console.log('async1 end')
5}
6
7async function async2 () {
8 console.log('async2')
9}
10
11console.log('script start')
12
13setTimeout(function () {
14 console.log('setTimeout')
15}, 0)
16
17async1();
18
19new Promise (function (resolve) {
20 console.log('promise1')
21 resolve();
22}).then (function () {
23 console.log('promise2')
24})
25
26console.log('script end')
当同步代码执行一遍后，先依次打印’script start’ ，‘async1 start’ ，‘async2’， ‘promise1’， ‘script end’，执行到第3行代码时，async2返回undefined，相当于执行Promise.resolve(undefined)，后面的代码相当于放到then回调中，也就是放到微任务队列中
题4
1async function async1() {
2 console.log(1);
3 await asy2();
4 console.log(2);
5}
6
7asy2 = async () => {
8 await setTimeout(() => {
9 Promise.resolve().then(() => {
10 console.log(3);
11 });
12 console.log(4);
13 }, 0);
14};
15
16asy3 = async () => {
17 Promise.resolve().then(() => {
18 console.log(6);
19 });
20};
21
22async1();
23console.log(7);
24asy3();
开始先执行async1，打印1，执行asy2，把setTimeout回调放到宏任务，然后asy2 里面就相当于 await Promise.resolve(timerId)，要等asy2执行完成，才能打印2，由于Promise.resolve(timerId)是完成状态，后面的代码进入微队列，后面没有代码，此时（）=〉asy2完成进入微队列，
宏队列：[callback^34]
微队列：[()=>asy2完成]
接着执行打印7，执行asy3，打印6进入微队列
微队列：[()=>asy2完成，()=>console.log(6)]，
同步代码执行完了，从微队列取出任务执行，先取出执行asy2执行完成，console.log（2）进入微队列
微队列：[()=>console.log(6)，()=>console.log(2)]
先执行完微队列，在执行宏队列的任务， 依次打印6，2，4，3
怎么使 const [a, b] = { a: 1, b: 1 }成立
目前这行代码会报错
1a.js:1 Uncaught TypeError: {(intermediate value)(intermediate value)} is not iterable
通过报错，可以知道，就是把等式右边的对象变成可迭代的，
1.如果要实现一个可迭代的对象，就要满足可迭代协议，这意味着对象（或者它原型链上的某个对象）必须有一个属性 Symbol.iterator ，
2.它是一个无参数的函数，其返回值为一个符合迭代器协议的对象，也就是返回一个迭代器对象，迭代器对象里面有next方法，nex方法返回对象{ done:boolean, value:值}
思路就是给右边对象加方法[Symbol.iterator]，让它返回一个迭代器
1const [a, b] = {
2 a: 1,
3 b: 2,
4 [Symbol.iterator]() {
5
6 return Object.values(this)[Symbol.iterator]();
7 },
8};
9
10
11Object.prototype[Symbol.iterator] = function () {
12 return Object.values(this)[Symbol.iterator]();
13};
14
另一种思路使用生成器， 执行 生成器 函数会返回一个迭代器对象，该对象本身也具有Symbol.iterator属性，执行后返回自身
1function* gen() {}
2var g = gen();
3g[Symbol.iterator]() === g;
所以使用生成器来实现Symbol.iterator属性，是非常妙的
1Object.prototype[Symbol.iterator] = function* () {
2 for (const n of Object.values(this)) {
3 yield n;
4 }
5};
更妙的是使用 yield*表达式，yield*后面跟的是一个可迭代的对象，它会调用该对象的Symbol.iterator方法
数组是可迭代的，放在yield*后面，将返回这个数组的迭代器对象
1Object.prototype[Symbol.iterator] = function* () {
2 yield* Object.values(this);
3};
闭包题一
1var o = (function () {
2 var obj = {
3 a: 1,
4 b: 2,
5 };
6 return {
7 get: function (k) {
8 return obj[k];
9 },
10 };
11})();
要求：不改变上面代码的情况下，修改obj对象
那就要想办法拿到这个obj对象，那就在读取obj的时候拿到obj,
1Object.defineProperty(Object.prototype, "c", {
2 get() {
3 return this;
4 },
5});
给对象原型加一个属性，通过o.get('c')就能拿到obj
查看 强制类型转换
使用代理取动态属性
1const a1 = add[1][2][3] + 4;
2const a2 = add[10][20] + 30;
3const a3 = add[100][200][300] + 400;
怎样使 a1=10, a2=60, a3=1000 ？
先了解，Symbol.toPrimitive是一个内置的函数属性，被所有的 强类型转换制 算法优先调用，
1const add = new Proxy(
2 {
3 initialValue: 0,
4 },
5 {
6 get(target, p, receiver) {
7 console.log(target, p);
8
9 if (p === Symbol.toPrimitive) {
10 return () => target.initialValue;
11 }
12 target.initialValue += +p;
13
14 return receiver;
15 },
16 }
17);
如：const a = 1，有四个步骤：
- 找到a的地址，准备赋值
- 运算右侧得到要赋值的数据
- 将右侧运算数据放到之前的地址中
- 返回整个表达式的结果为右侧运算数据
1var a = { n: 1 };
2var b = a;
3a.x = a = { n: 2 };
4
5console.log(a.x);
6console.log(b.x);
前两行运行后
第三行，先找到a.x的位置，没有，给a加个属性
接着算右边 a = { n: 2 }，首先定位a的位置，然后把右边结果赋值给a
然后把 a = { n: 2 } 的运行结果 {n:2} 给a.x这个地址
Object.is 与 === 差别在于 -0，NaN，其他都一致
1console.log(Object.is(NaN, NaN));
2console.log(NaN === NaN);
3
4console.log(Object.is(-0, +0));
5console.log(-0 === +0);
数组并集、交集、差集
1const arr1 = [1, 2, 3, 4, 5, 6];
2const arr2 = [3, 9, 8, 6, 4, 1];
3
4
5const union = [...new Set([...arr1, ...arr2])];
6
7
8const cross = [...new Set(arr1)].filter((item) => arr2.includes(item));
9
10
11const diff = union.filter((item) => !cross.includes(item));
随便给一个字符串：‘dsjdkjdjfdgrekjjh’
普遍写法
1function countFrequency(str) {
2 const resObj = {};
3
4 for (let i = 0; i < str.length; i++) {
5 if (resObj[str[i]]) {
6 resObj[str[i]]++;
7 } else {
8 resObj[str[i]] = 1;
9 }
10 }
11 return resObj;
12}
使用数组的reduce函数
1function countFrequency(str) {
2 return str.split("").reduce((a, b) => (a[b]++ || (a[b] = 1), a), {});
3}
reduce 一般用的比较多的是求和，它接收两个参数。
第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被用作初始值，迭代器将从第二个元素开始执行（即从索引为 1 而不是 0 的位置开始）
这里第一次执行，a就是对象{}，b就是第一个字符，如果a[b]没有，就是undefined，undefined++就是NaN，转成boolean就是false，通过 逗号运算符 函数返回a，继续循环累计
只要是遍历累计的都可以使用reduce来尝试一下
使用localStorage
通过监听storage事件，可以获取其他标签页保存的信息
1export function listenMessage(handler) {
2 function storageHandler(e) {
3 const value = JSON.parse(e.newValue);
4 handler(e.key.substring(3), value.payload);
5 }
6 window.addEventListener("storage", storageHandler);
7
8 return () => window.removeEventListener("storage", storageHandler);
9}
10
11
12export function sendMessage(type, payload) {
13 localStorage.setItem(
14 "__@" + type,
15 JSON.stringify({
16 payload,
17 temp: Date.now(),
18 })
19 );
20}
XML： XMLHttpRequest.abort()
1var xhr = new XMLHttpRequest(),
2 method = "GET",
3 url = "https://developer.mozilla.org/";
4xhr.open(method, url, true);
5
6xhr.send();
7
8if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
9 xhr.abort();
10}
11
fetch：controller.abort()
1controller = new AbortController();
2const signal = controller.signal;
3
4fetch(url, { signal })
5
6controller.abort()
axios：controller.abort()
1const controller = new AbortController();
2axios.get('/foo/bar',
3 { signal: controller.signal }
4)
5.then(function(response) {
6
7controller.abort()
1 <body>
2 <input type="text" />
3 </body>
1const inputElement = document.querySelector('input[type="text"]');
2
3inputElement.addEventListener("input", (event) => {
4 console.log(`input: ${event.target.value}`);
5});
6
7inputElement.addEventListener("change", (event) => {
8 console.log(`change: ${event.target.value}`);
9});
10
11inputElement.addEventListener("compositionstart", (event) => {
12 console.log(`composition开始: ${event.data}`);
13});
14
15inputElement.addEventListener("compositionupdate", (event) => {
16 console.log(`composition更新: ${event.data}`);
17});
18
19inputElement.addEventListener("compositionend", (event) => {
20 console.log(`composition结束: ${event.data}`);
21});
输入数字或者英文的时候，input事件 会随着输入value值变化触发，change事件 会在值被修改后提交value时(比如：失去焦点或者按回车时)触发；
输入中文拼音，input事件触发时机不变，输入一个拼音就触发一次，change事件也是提交值触发， compositionstart 是第一次输入拼音触发，compositionupdate 是每输入一个拼音触发，compositionend 输入最后一个拼音触发
但是输入中文拼音有时候不需要触发事件，想要的是输入完后触发，可以通过composition事件来控制
谷歌浏览器最小字体限制为12px
一种方式是去浏览器设置改
另一种方式就是用css去调整，使用 transform:scale()去设置，但它只对块级盒子有效，如果是span这种行内元素，可以再加一下dispaly:inline-block
- 设置hash，给元素一个id，地址栏中设置一个hash值，就可以实现，但是有缺点，滚动条必须是整个页面的滚动条，不能是某个区域的，如果项目中使用了路由的hash模式，就会冲突
2. scrollIntoView 一个非常好用的api，它会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见，还提供多个配置，可以用来做轮播图