前端面試題JavaScript篇——2022-09-20

每日3題

1 以下代碼執行後，控制臺中的輸出內容為？

// 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 以下代碼執行後，控制臺中的輸出內容為？

const value = { number: 10 };
const multiply = (x = { ...value }) => {
  console.log((x.number *= 2));
};
multiply();
multiply();
multiply(value);
multiply(value);

3 以下代碼在瀏覽器的控制臺中執行後，頁面會發生什麼變化

[].forEach.call($$("*"), function (a) {
  a.style.outline =
    "1px solid red"
});

• 公眾號【今天也要寫bug】更多前端面試題

答案及解析

1

// 答案：2 1 3
// 考察 es6 模塊化
// import 命令是在編譯階段執行的
// 並且 import 具有提升效果，會提升到整個模塊的頭部
// 所以模塊合併後相當於：
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 可以為函數參數指定預設值
const value = { number: 10 };
const multiply = (x = { ...value }) => {
  console.log((x.number *= 2));
};
multiply(); // 未傳參，使用預設值，x={ number: 10 }，此對象不是 value，而是一個新對象，輸出 20
multiply(); // 同上，x={ number: 10 }，也是一個新對象，輸出 20
multiply(value); // 傳了參數，x=value，輸出 20，並且改變了 value.number
multiply(value); // x=value，輸出 40，並且改變了 value.number

3

// 答案：頁面中的所有元素會被添加紅色輪廓
// $$() 函數是瀏覽器提供的命令行 API，相當於 document.querySelectorAll()
// $$('*') 會選擇頁面中的所有元素，得到一個數組
[].forEach.call($$("*"), function (a) {
  a.style.outline = "1px solid red";
});
// call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數。
// 這裡 this 是元素數組，參數是一個函數 function(a){...}
// 數組的 forEach 方法接收一個回調函數即此處的 function(a) {...}
// 等價於：
[所有元素].forEach(function (a) {
  a.style.outline = "1px solid red";
});