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