深圳幻海软件技术有限公司 欢迎您!

前端面试题JavaScript篇——2022-09-20

2023-03-02

每日3题#1以下代码执行后,控制台中的输出内容为?#//index.jsconsole.log(1);import{sum}from"./sum.js";console.log(sum(1,2));//sum.jsconsole.log(2);exportconstsum=(a,b)=>a+b

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