xxx科技-前端工程师

1.什么是盒子模型？盒子模型有什么优点?

2.JavaScript的判断中有什么值是false?

3.如何实现一个闭包？闭包的作用有哪些？闭包有什么好处？

4.请用JQuery或原生JavaScript写出一个异步请求(Ajax)的方法

原生JavaScript使用fetch API：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

jQuery使用$.ajax()：

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error(error);
  }
});

5.分别谈谈innerHTML、outerHTML、innerText、outerText能获取的内容

• innerHTML: 获取或设置元素内部的HTML内容，包括子元素的标签。
• outerHTML: 获取或设置元素本身及其内部HTML内容的完整HTML。
• innerText: 获取或设置元素内部的纯文本内容，不包括HTML标签。
• outerText: 获取或设置元素的纯文本内容，并替换整个元素。

6.如何让多个元素同排显示，列举几种方式，并说明缺点

• 使用float: 设置float:left/right，缺点是元素脱离文档流，需要清除浮动。
• 使用display:inline-block: 元素 inline-block，缺点是元素间有空白间隙。
• 使用flexbox: 设置父元素display:flex，缺点是需要考虑浏览器兼容性。
• 使用CSS Grid: 设置display:grid，缺点是较新的属性，兼容性较差。

7.以下函数打印出来的值是什么，为什么？

var str;
var num = 0;
console.log(str == num);
console.log(str === num);

8.使用JQuery或者原生JavaScript获取span标签中ind对应的值

原生JavaScript: document.getElementById('orderId').getAttribute('ind') jQuery: $('#orderId').attr('ind')

9.有以下代码，请写出console.log的输出

var foo = {
  bar: function () {
    console.log(this);
  }
};
 
foo.bar();
var func = foo.bar;
func();

第一个console.log输出foo对象，第二个console.log输出window对象（在浏览器中）。

10.Vue的父子组件之间如何相互传值接收

父组件向子组件传值使用props，子组件向父组件传值使用$emit触发事件。

11.说出至少4种Vue当中的指令和它的用法

• v-if: 条件渲染，根据表达式的真假决定是否渲染元素。
• v-for: 列表渲染，遍历数组或对象生成多个元素。
• v-bind: 绑定属性，将表达式的值绑定到HTML属性。
• v-on: 绑定事件，监听DOM事件并执行方法。

12.详细说下Vue生命周期的理解

Vue实例从创建到销毁的过程称为生命周期，包括以下钩子函数：

• beforeCreate: 实例初始化前。
• created: 实例创建完成，数据观测和事件配置完成。
• beforeMount: 模板编译前。
• mounted: 模板编译完成，挂载到DOM。
• beforeUpdate: 数据更新前。
• updated: 数据更新后。
• beforeDestroy: 实例销毁前。
• destroyed: 实例销毁后。

13.编写一个JavaScript函数fn，该函数有一个参数n(数字类型)，其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是[2, 32]

function fn(n) {
  if (typeof n !== 'number' || n <= 0 || n > 31) return []; // 范围2-32，最多31个
 
  const result = [];
  const used = new Set();
 
  while (result.length < n) {
    const rand = Math.floor(Math.random() * 31) + 2; // 2 to 32
    if (!used.has(rand)) {
      used.add(rand);
      result.push(rand);
    }
  }
  return result;
}