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

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

var a2 = {}, b2 = Symbol('123'), c2 = Symbol('123');
a2[b2] = 'b';
a2[c2] = 'c';
console.log(a2[b2]);

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

var a3 = {},
  b3 = { key: "123" },
  c3 = { key: "456" };
a3[b3] = "b";
a3[c3] = "c";
console.log(a3[b3]);

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

const a = {
  i: 1,
  toString() {
    return a.i++;
  },
};
console.log(a == 1 && a == 2 && a == 3);

公粽号【今天也要写bug】

答案与解析

19

// 答案：b
// 考察 Symbol 类型
// ES6 引入了一种新的基本数据类型：Symbol
// 一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。
// 每个从 Symbol() 返回的 symbol 值都是唯一的。
var a2 = {},
  b2 = Symbol("123"),
  c2 = Symbol("123");
// symbol 值唯一，所以 b2 和 c2 作为对象属性标识符表示两个不同的属性
a2[b2] = "b";
a2[c2] = "c";

console.log(a2[b2]); // 输出 b

20

// 答案：c
// 考察对象的属性、隐式强制类型转换
// 对象的属性名只能是 string 或 symbol 类型
// 如果对象的属性名不是这两者，则会将其隐式强制转换为 string
// 对于非字符串类型转换为字符串类型
// 基本类型：null => 'null', undefined => 'undefined'
// true => 'true', false => 'false', 数字通常直接加引号（极小或极大值采用指数形式加引号）
// 对象转换为字符串类型：如果对象的 valueOf 方法返回的是基本类型，就按 valueOf 返回值转换
// 否则就按对象的 toString 方法的返回值来进行转换
var a3 = {},
  b3 = { key: "123" },
  c3 = { key: "456" };
a3[b3] = "b"; // b3 为普通对象，valueOf 返回它本身，不是基本类型，所以使用 toString 返回值来转换成 string
a3[c3] = "c"; // 同上
// 而普通对象的 toString 方法均返回 '[object Object]'
// 故经过上述两次赋值后，a3 为：{ '[object Object]': 'c' }

console.log(a3[b3]); // 最终输出 c

21

// 答案：true
// 考察强制类型转换
// == 操作会进行强制类型转换
// 如果操作数之一是对象，另一个是数字或字符串，
// 会尝试使用对象的valueOf()和toString()方法将对象转换为原始值。
// 如果 valueOf 返回基本类型，就按该值进行转换，否则按 toString 的返回值转换
const a = {
  i: 1,
  toString() {
    return a.i++;
  },
};
// 对于 a == 1，尝试将对象 a 转换为数字类型
// a 为普通对象，它的 valueOf 返回它本身，所以按 toString 返回值来转换
// a.toString() 返回 1，所以 a == 1 为true
// 然后 a.i 自增为 2
// 同理判断 a == 2，再一次触发 toString 方法返回 2，a == 2 为 true
// 然后 a.i 自增为 3
// 同理 a == 3 为 true
console.log(a == 1 && a == 2 && a == 3); // 最终输出 true