vue前端面试题——记录一次面试当中遇到的题（9）

1.分别写出以下打印的结果。

[💡 如何正确使用对象作为键](#💡 如何正确使用对象作为键)

2.写出以下的打印结果

3.根据函数的执行顺序，写出打印结果。

4.简单介绍下CSS的盒子模型，他都包含那些属性？

[5."= = ="、"= ="的区别？并写出console.log([ ] = = ![ ])的结果](#5.“= = =”、“= =”的区别？并写出console.log([ ] = = ![ ])的结果)

[严格相等 ===（推荐使用）](#严格相等 ===（推荐使用）)

[宽松相等 ==（不推荐使用）](#宽松相等 ==（不推荐使用）)

[🎯 == 的类型转换规则总结](#🎯 == 的类型转换规则总结)

[⚠️ 特殊情况记忆](#⚠️ 特殊情况记忆)

[6.a=[ 1,2,3,4];b=a;a.push(2);b.push(3);请问a,b的结果分别是多少？](#6.a=[ 1,2,3,4];b=a;a.push(2);b.push(3);请问a,b的结果分别是多少？)

7.递归写1-100求和

8.生成5为不重复的随机数

1.分别写出以下打印的结果。

javascript 复制代码

var colors = ["red" ,"green" ,"blue" ,"yellow","orange"];
delete colors[3];
console.log(colors)
console.log(colors.length);

答案： ['red', 'green', 'blue', 空, 'orange'] ，5

当使用 delete 删除数组元素时：

删除指定索引的元素值
不会改变数组长度
被删除的位置变成 "empty"（空位）
空位在遍历时会被跳过

javascript 复制代码

var test =true
console.log(test + 0);
console.log(test + 'xyz');
console.log(test + true);
console.log(test + false);
console.log(+ + test);

答案：1 ， truexyz ， 2 ， 1 ， 1

布尔值转换规则：

操作	转换结果	说明
`true + 数字`	数字运算	`true → 1`
`false + 数字`	数字运算	`false → 0`
`布尔值 + 字符串`	字符串连接	布尔值转字符串
`布尔值 + 布尔值`	数字运算	都转为数字再相加

一元 + 运算符：

将操作数转换为数字
+true → 1
+false → 0
+"123" → 123
+"abc" → NaN

javascript 复制代码

 var a={}, b={id:1} ,c={id:2};
 a[b]=123;
 a[c]=456;
 console.log(a[b]);

答案：456

在JavaScript中，对象的键只能是字符串 或Symbol 。当我们使用一个对象作为键时，该对象会被转换成字符串 。

对象转换成字符串会调用其toString()方法，默认的对象toString()方法返回"[object Object]"。

因此，a[b] 和 a[c] 实际上都是使用同一个字符串键："[object Object]"。

每个空对象 {} 转换为字符串都是 "[object Object]"

逐步分析：

a[b] = 123
- b 是一个对象 {id: 1}
- 对象转换为字符串：{id: 1}.toString() → "[object Object]"
- 实际执行：a["[object Object]"] = 123
a[c] = 456
- c 是一个对象 {id: 2}
- 对象转换为字符串：{id: 2}.toString() → "[object Object]"
- 实际执行：a["[object Object]"] = 456（覆盖了之前的值）
console.log(a[b])
- b 转换为字符串："[object Object]"
- 实际执行：console.log(a["[object Object]"]) → 456

💡 如何正确使用对象作为键

（1）如果想要用对象作为唯一的键，应该使用 Map：

javascript 复制代码

// 使用 Map 正确存储对象键值对
const map = new Map();
const b = {id: 1};
const c = {id: 2};

map.set(b, 123);
map.set(c, 456);

console.log(map.get(b)); // 123
console.log(map.get(c)); // 456
console.log(map.size);   // 2

（2）或者使用对象的唯一标识：

javascript 复制代码

// 使用对象的唯一属性作为键
const a = {};
const b = {id: 1};
const c = {id: 2};

a[b.id] = 123;  // a["1"] = 123
a[c.id] = 456;  // a["2"] = 456

console.log(a[b.id]); // 123
console.log(a[c.id]); // 456

2.写出以下的打印结果

javascript 复制代码

function test(fruit) {
  fruit.price = 8        // 步骤2：修改传入对象的属性
  fruit = {name: 'apple', price: 10}  // 步骤3：重新赋值（创建新对象）
  return fruit           // 步骤4：返回新对象
}

const m1 = {name: 'banana', price: 5}  // 步骤1：创建原始对象
const m2 = test(m1)       // 步骤5：调用函数并接收返回值

console.log(m1);  // 输出: {name: 'banana', price: 8}
console.log(m2);  // 输出: {name: 'apple', price: 10}

答案：{name: 'banana', price: 8} ；
{name: 'apple', price: 10}

3.根据函数的执行顺序，写出打印结果。

javascript 复制代码

function test() {
 console.log(1);
 setTimeout(function() {
   console.log(2);
 })
 Promise.resolve().then(()=>{
   console.log(3);
 })
 console.log(4);
}
 test();

答案：1,4,3,2

任务队列分类：

同步代码 → 微任务 → 宏任务

同步任务：立即执行
微任务（Microtask）：Promise、process.nextTick 等
宏任务（Macrotask）：setTimeout、setInterval、I/O 操作等

4.简单介绍下CSS的盒子模型，他都包含那些属性？

CSS的盒子模型是网页布局的基础，它描述了元素在页面中占据空间的方式。每个元素都被表示为一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型包含以下属性：

内容（content）：盒子的实际内容，显示文本和图像。
内边距（padding）：内容区域和边框之间的空间，透明背景。
边框（border）：围绕内容和内边距的边界。
外边距（margin）：盒子与其他盒子之间的透明空间，用于控制元素之间的距离。

在CSS中，盒子模型分为两种：标准盒子模型和IE盒子模型（也称为怪异模式盒子模型）。

标准盒子模型（content-box）：宽度和高度只包括内容，不包括内边距、边框和外边距。即：元素的宽度 = content的宽度。
IE盒子模型（border-box）：宽度和高度包括内容、内边距和边框，但不包括外边距。即：元素的宽度 = content + padding + border。

在CSS中，可以通过box-sizing属性来设置盒子模型类型：

box-sizing: content-box; 表示标准盒子模型（默认值）。
box-sizing: border-box; 表示IE盒子模型。

5."= = ="、"= ="的区别？并写出console.log([ ] = = ![ ])的结果

严格相等 `===`（推荐使用）

不进行类型转换，直接比较值和类型
只有类型相同且值相等 时才返回 true
更安全，更可预测

宽松相等 `==`（不推荐使用）

会进行类型转换后再比较
转换规则复杂，容易产生意外结果
被称为 "抽象相等比较"

"===" 和 "==" 的区别：

"===" 是严格相等运算符，它要求两个操作数在值和类型上都相等。
"==" 是相等运算符，它会进行类型转换，然后比较转换后的值

🔍 详细比较

比较	`==` 结果	`===` 结果	原因
`5 == "5"`	`true`	`false`	`==` 将字符串转为数字
`0 == false`	`true`	`false`	`==` 将布尔值转为数字
`"" == false`	`true`	`false`	空字符串和 false 都转为 0
`null == undefined`	`true`	`false`	特殊情况
`"1" == true`	`true`	`false`	都转为数字比较
`0 == ""`	`true`	`false`	都转为 0

console.log([] = = ![]) 结果为true

javascript 复制代码

[] == ![]
[] == false      // ![] 转换为 false
"" == false      // [] 转换为字符串 ""
0 == 0           // "" 和 false 都转换为数字
true             // 结果

🎯 `==` 的类型转换规则总结

当使用 == 比较不同类型时：

对象 vs 原始值 ：对象先转原始值（valueOf() → toString()）
布尔值 vs 其他 ：布尔值转数字（true→1, false→0）
字符串 vs 数字：字符串转数字
null vs undefined：相等
其他组合：都转数字比较

⚠️ 特殊情况记忆

javascript 复制代码

// 这些都为 true（容易让人困惑）
console.log([] == ![]);        // true
console.log([] == 0);          // true  
console.log([] == "");         // true
console.log([] == false);      // true

console.log([0] == 0);         // true
console.log([1] == 1);         // true
console.log(["1"] == 1);       // true

console.log(null == undefined);// true

6.a=[ 1,2,3,4];b=a;a.push(2);b.push(3);请问a,b的结果分别是多少？

答案：a: [1, 2, 3, 4, 2, 3] b: [1, 2, 3, 4, 2, 3]

"b = a 让 b 和 a 指向同一个数组"
"通过 a.push(2) 修改数组时，b 也看到同样的变化"
"通过 b.push(3) 修改数组时，a 也看到同样的变化"

7.递归写1-100求和

javascript 复制代码

function sum(n) {
    if (n === 1) return 1;
    return n + sum(n - 1);
}

8.生成5为不重复的随机数

javascript 复制代码

/**
 * 生成指定数量的不重复随机数
 * @param {number} count - 需要生成的随机数数量
 * @param {number} [min=1] - 最小值（包含）
 * @param {number} [max=100] - 最大值（包含）
 * @returns {number[]} 不重复的随机数数组
 * @throws {Error} 当数量超过可能范围时抛出错误
 */
function generateUniqueRandom(count, min = 1, max = 100) {
    // 参数验证
    if (!Number.isInteger(count) || count <= 0) {
        throw new Error('数量必须是正整数');
    }
    
    if (!Number.isInteger(min) || !Number.isInteger(max) || min >= max) {
        throw new Error('最小值必须小于最大值');
    }
    
    const range = max - min + 1;
    
    if (count > range) {
        throw new Error(`在范围 ${min}-${max} 内无法生成 ${count} 个不重复数字`);
    }
    
    // 如果数量接近范围上限，使用洗牌算法更高效
    if (count > range * 0.7) {
        const allNumbers = Array.from({ length: range }, (_, i) => i + min);
        
        // Fisher-Yates 洗牌
        for (let i = allNumbers.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [allNumbers[i], allNumbers[j]] = [allNumbers[j], allNumbers[i]];
        }
        
        return allNumbers.slice(0, count);
    }
    
    // 否则使用 Set 方法
    const set = new Set();
    
    while (set.size < count) {
        const randomNum = Math.floor(Math.random() * range) + min;
        set.add(randomNum);
    }
    
    return Array.from(set);
}

// 使用示例
console.log('5个1-100的不重复随机数:', generateUniqueRandom(5));
console.log('3个50-150的不重复随机数:', generateUniqueRandom(3, 50, 150));