每日3題
1 以下代碼執(zhí)行后荞膘，控制臺(tái)中的輸出內(nèi)容為？
// index.js
console.log(1);
import { sum } from "./sum.js";
console.log(sum(1, 2));
//sum.js
console.log(2);
export const sum = (a, b) => a + b;
2 以下代碼執(zhí)行后淘菩，控制臺(tái)中的輸出內(nèi)容為屠升？
const value = { number: 10 };
const multiply = (x = { ...value }) => {
console.log((x.number *= 2));
};
multiply();
multiply();
multiply(value);
multiply(value);
3 以下代碼在瀏覽器的控制臺(tái)中執(zhí)行后，頁面會(huì)發(fā)生什么變化
[].forEach.call($$("*"), function (a) {
a.style.outline =
"1px solid red"
});
- 公眾號(hào)【今天也要寫bug】更多前端面試題
答案及解析
1
// 答案：2 1 3
// 考察 es6 模塊化
// import 命令是在編譯階段執(zhí)行的
// 并且 import 具有提升效果弥激，會(huì)提升到整個(gè)模塊的頭部
// 所以模塊合并后相當(dāng)于：
console.log(2);
export const sum = (a, b) => a + b;
console.log(1);
console.log(sum(1, 2));
// 因此最終輸出 2 1 3
// 源代碼
// index.js
console.log(1);
import { sum } from "./sum.js";
console.log(sum(1, 2));
//sum.js
console.log(2);
export const sum = (a, b) => a + b;
2
// 答案：20 20 20 40
// ES6 可以為函數(shù)參數(shù)指定默認(rèn)值
const value = { number: 10 };
const multiply = (x = { ...value }) => {
console.log((x.number *= 2));
};
multiply(); // 未傳參微服，使用默認(rèn)值，x={ number: 10 }以蕴，此對(duì)象不是 value，而是一個(gè)新對(duì)象赡磅，輸出 20
multiply(); // 同上宝与，x={ number: 10 }，也是一個(gè)新對(duì)象习劫，輸出 20
multiply(value); // 傳了參數(shù)，x=value袒餐，輸出 20，并且改變了 value.number
multiply(value); // x=value灸眼，輸出 40，并且改變了 value.number
3
// 答案：頁面中的所有元素會(huì)被添加紅色輪廓
// $$() 函數(shù)是瀏覽器提供的命令行 API霉囚，相當(dāng)于 document.querySelectorAll()
// $$('*') 會(huì)選擇頁面中的所有元素匕积，得到一個(gè)數(shù)組
[].forEach.call($$("*"), function (a) {
a.style.outline = "1px solid red";
});
// call() 方法使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來調(diào)用一個(gè)函數(shù)。
// 這里 this 是元素?cái)?shù)組闸天，參數(shù)是一個(gè)函數(shù) function(a){...}
// 數(shù)組的 forEach 方法接收一個(gè)回調(diào)函數(shù)即此處的 function(a) {...}
// 等價(jià)于：
[所有元素].forEach(function (a) {
a.style.outline = "1px solid red";
});
