🧠:stackoverflowYou can spot the difference while running async code or multi-threaded code.Step into: DevTools assumes that you want to pause in the asynchronous code that eventually runsStep: DevTools pause in code as it chronologically ranConsider this example:```setTimeout(() => { console.log('inside')}, 3000);console.log('outside')```After stopping on the breakpoint on the first line (`setTimeout(() => {`).Step into: it waits 3 seconds and stops on the 2nd line (`console.log('inside')`)Step: it pauses on the 4th line (`console.log('outside')`)Link to the docs: https://developers.google.com...

🧠:```function test<T extends Record<string, any>, K extends keyof T>(a:K, b:T){ return { [a]:b[a] } as Pick<T, K>}```

🧠:Q1：> 但是如果只有一个按钮, 点一下文字变色或者改变某个元素的显隐性，那么这种操作浏览器应该本身就是只回流/重绘一次，这个时候虚拟 DOM 还有优势吗？那肯定是原生直接操作 DOM 更快。但问题是这种简单页面的场景为啥你要用 MVVM 框架？Q2：> 如果我一次 display:none 了页面中的 9 个元素，那么在没有虚拟 DOM 的情况下，浏览器会回流/重绘 9 次吗。这里的“一次”，我理解为是一段代码里连续控制 9 个元素隐藏，类似：```el1.style.display = 'none';el2.style.display = 'none';el3.style.display = 'none';// 略...```那么答案是不一定。老浏览器的话是回流 9 次（没错，就说你呢，明天就要退休的 IE）。现代浏览器会有渲染队列来对这种场景做优化，一段时间内的重复回流操作会被合并（但要注意这里的队列可能会被另一些操作打断并清空，比如 `getBoundingClientRect`、`getComputedStyle` 等等，这也很好理解，这些操作是要获取当前 DOM 状态的，自然要必须强制触发一次回流才可以拿到实时状态）。而回流必然会重绘，重绘不一定回流。所以次数这里两者是一样的。

🧠:## solution 1```function flatTree(nodes, parents = []) { const pathes = nodes .filter(({ children }) => !children?.length) .map(({ city }) => [...parents, city]); const subPathes = nodes.filter(({ children }) => children?.length) .flatMap(({ city, children }) => flatTree(children, [...parents, city])); return pathes.concat(subPathes);}```## solution 2```function flatTree(nodes, parents = []) { return nodes.flatMap(({ city, children }) => { return children?.length ? flatTree(children, [...parents, city]) : [[...parents, city]]; });}```## using```console.log(flatTree(data).map(path => path.join(",")));// ^^^^^^^^^^^^^^^^^^^^^^^^^^^```

🧠:```function A() { this.value = 0; this.toString = function() { return ++this.value }}const a = new A();a == 1 && a == 2 && a == 3```相等运算符 `==` 和 `!=` 使用 抽象相等比较算法 比较两个操作数。可以大致概括如下：- 如果两个操作数都是对象，则仅当两个操作数都引用同一个对象时才返回 `true` 。- 如果一个操作数是 `null`，另一个操作数是 `undefined`，则返回`true` 。- 如果两个操作数是不同类型的，就会尝试在比较之前将它们转换为相同类型：当数字与字符串进行比较时，会尝试将字符串转换为数字值。如果操作数之一是 `Boolean`，则将布尔操作数转换为1或0。如果是 `true`，则转换为 `1`。如果是 `false`，则转换为 `0`。如果操作数之一是对象，另一个是数字或字符串，会尝试使用对象的 `valueOf()` 和 `toString()` 方法将对象转换为原始值。- 如果操作数具有相同的类型，则将它们进行如下比较：`String`：`true` 仅当两个操作数具有相同顺序的相同字符时才返回。`Number`：`true` 仅当两个操作数具有相同的值时才返回。`+0` 并被 `-0` 视为相同的值。如果任一操作数为 `NaN`，则返回 `false`。`Boolean`： `true` 仅当操作数为两个 `true` 或两个 `false` 时才返回 `true`。如果两个操作数是不同类型的，就会尝试在比较之前将它们转换为相同类型：- 当数字与字符串进行比较时，会尝试将字符串转换为数字值。- 如果操作数之一是 `Boolean`，则将布尔操作数转换为1或0。如果是 `true`，则转换为 `1`。如果是 `false`，则转换为 `0`。- 如果操作数之一是对象，另一个是数字或字符串，会尝试使用对象的 `valueOf()` 和 `toString()` 方法将对象转换为原始值。如果操作数之一是 `Boolean`，则将布尔操作数转换为1或0。- 如果是 `true`，则转换为 `1`。- 如果是 `false`，则转换为 `0`。如果操作数具有相同的类型，则将它们进行如下比较：- `String`：`true` 仅当两个操作数具有相同顺序的相同字符时才返回。- `Number`：`true` 仅当两个操作数具有相同的值时才返回。`+0` 并被 `-0` 视为相同的值。如果任一操作数为 `NaN`，则返回 `false`。- `Boolean`： `true` 仅当操作数为两个 `true` 或两个 `false` 时才返回 `true`。来自 https://developer.mozilla.org...

🧠:`return` 只能退出当前函数，不具备跨函数的功能。但是 `throw` 具有不限层次中断的功能，所以这个需要可能需要使用 throw 来完成。一般情况下 `throw` 应该抛出一个 `Error` 对象。但是 JavaScript 并未对 `throw` 的对象有所有限制，所以也可以抛出其它东西，在确实不需要抛出错误的情况下，抛出一个状态对象，甚至值都是可以的。但不管抛出什么，要想外面的程序能正常运行，都是需要 `try ... catch` 的。举例：```function a() { console.log("[Trace] a()"); if (true) { throw "true-as-false"; }}function b() { console.log("[Trace] b()");}function c() { console.log("[Trace] c()");}function test() { try { a(); b(); c(); } catch (stat) { if (stat === "true-as-false") { return; } // TODO 其他情况正常处理可能发生的错误 }}test();```只会输出 `[Trace] a()`，因为被 throw 给中断掉了。如果是有一堆判断函数，只要有一个 flase 就退出，那就可以用数组来处理，比如```const fns = [ () => { console.log(true); return true; }, () => { console.log(true); return true; }, () => { console.log(false); return false; }, () => { console.log(true); return true; },];fns.every(fn => fn());// true// true// false```只要遇到一个返回 `false` 的就结束了（注意，返回 `undefined`，也就是无返回值 …… 也表示 `false`)