前端面试题每日3题——2022-09-06

每日3题

22 以下代码执行后，控制台中的输出内容为？

var a = [1, 2, 3];
a.join = a.shift;
console.log(a == 1 && a == 2 && a == 3);

23 以下代码执行后，控制台中的输出内容为？

var arr = [0, 1];
arr[5] = 5;
var newArr = arr.filter((x) => {
  return x === undefined;
});

console.log(newArr.length);

24 以下代码执行后，控制台中的输出内容为？

const value = 'value is' + !!Number(['0']) ? 'aaa' : 'bbb';
console.log(value);

公众号【今天也要写bug】获取更多前端面试题

答案与解析

22

// 答案：true
// 考察强制类型转换
// == 操作会进行强制类型转换
// 如果操作数之一是对象，另一个是数字或字符串，
// 会尝试使用对象的valueOf()和toString()方法将对象转换为原始值。
// 如果 valueOf 返回基本类型，就按该值进行转换，否则按 toString 的返回值转换
// 数组的 valueOf 返回它本身，所以按 toString 的返回值进行转换
// 对于数组对象，toString 方法在内部调用 join() 方法
var a = [1, 2, 3];
a.join = a.shift; // 在数组 a 上定义了一个 join 方法，并且该方法是 shift 的功能
console.log(a == 1 && a == 2 && a == 3);
// a == 1，触发类型转换
// 触发 a.toString() 内部调用 a.join()，即 a.shift() 返回 1，同时 a 变为 [2, 3]
// 所以 a == 1 为 true
// 同理 a == 2 和 a == 3 都为 true

23

// 答案：0
// 考察数组的 filter 方法
// filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
// filter 为数组中的每个元素调用一次传入的回调函数，
// 并利用所有使得回调函数返回 true 或等价于 true 的值的元素创建一个新数组。
// 回调函数只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。

var arr = [0, 1];
arr[5] = 5; // 直接为索引 5 的元素赋值为 5，跳过的几个元素均为 'empty'，这些索引不会触发回调函数
var newArr = arr.filter((x) => {
  return x === undefined;
}); // 所以这里没有元素等于 undefined
console.log(newArr.length); // 输出 0

24

// 答案：aaa
// 考察运算符优先级和强制类型转换
// 优先级：函数调用 > ! > + > 三元运算符
//
const value = "value is" + !!Number(["0"]) ? "aaa" : "bbb";
console.log(value);

// Number('0') => 0
// !0 触发类型转换 => true，这些值会被转换成 false：null、NaN、0、空字符串 ("" or '' or ``)、undefined
// !true => false
// 'value is' + false => 'value isfalse'
// 条件运算符触发类型转换 => 'value isfalse' 转换为 true
// 最终输出 aaa