关于javascript:前端面试题JavaScript篇20220920

每日 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";});