xx科技-全栈工程师

1.HTTP methods 有哪些

GET：请求数据（安全、幂等、可缓存、不变更）。
POST：变更服务器提交数据（一般需用）。
PUT：更新整个资源。
DELETE：删除资源。
PATCH：部分更新资源。
HEAD：类似 GET，但仅返回响应头部，不返回体。
OPTIONS：查询预检配置。
TRACE：跟踪请求路径。
CONNECT：建立隧道。

2.HTTP状态码 101, 200, 301, 302, 304的具体含义

101 Switching Protocols：应答了协议升级，转到 WebSocket 等协议。
200 OK：请求成功，手术在响应体中。
301 Moved Permanently：永久重定向，浏览器下次直接访问新址。
302 Found：临时重定向，下次仍请求原址。
304 Not Modified：缓存有效，使用本地缓存版本。

3.跨域请求资源的方法

CORS（跨域资源共享）：配置 Access-Control-Allow-*。
JSONP：利用 <script> 标签无跨域限制。
代理（Proxy）：后端代理前端资源。
iframe + postMessage：跨框架通信。
WebSocket：双向折线。

4.src与href的区别

src（source）：指向资源的位置，会直接下载资源并替换到页面。用于 <img>、<script>、<iframe> 等。
href（hypertext reference）：推荐链接路径，不会下载资源。用于 <a>、<link> 等。

5.说明一下let, const, var的区别

特性	var	let	const
作用域	函数放域	块缓域	块缓域
提升	是，为 undefined	否（TDZ）	否（TDZ）
重复声明	可以	不可以	不可以
重新赋值	可以	可以	不可以

推荐：默认用 const，需要赋变时改成 let。

6.请写出下面的输出结果, 最好说明一下原因


function Fn () {
  var num = 10;
  this.x = 100;
  this.getx = function () {
    console.log(x);
  };
}
 
var f1 = new Fn();
console.log(f1.num);
console.log(num);
console.log(f1.getx);

输出：


undefined
undefined
function () {
  console.log(x);
}

解释：

f1.num 是 undefined：num 是函数内部的局部变量，不是实例属性。
num 是 undefined：全局域中不存在 num 变量。
f1.getx 是函数：getx 是实例属性上的方法。

7.下面代码输出什么?


const person = {
  name: 'zhangsan',
  age: 21
};
 
let city = person.city;
city = 'guangzhou';
let age = person.age;
age++;
 
console.log(person);

输出：


{ name: 'zhangsan', age: 21 }

解释：

city 获取的是 person.city 的值（undefined）；后来把 city 赋值 'guangzhou'。
age 提取 person.age（21）之后自增，但这是一个新会变量，不会修改 person 对象：对象是按参考。
最终 person 原对象没有改变，仍是原样。

8.下面代码输出什么？


const myPromise = Promise.resolve('resolve');
 
(async () => {
  try {
    console.log(await myPromise);
  } catch {
    throw new Error('CustomError');
  } finally {
    console.log('finally');
  }
})();

输出：


resolve
finally

解释：

myPromise 是已解决的 Promise，await 直接获取值。
try 形态打印 resolve。
catch 不执行。
finally 一定会执行，打印 finally。

9.下面代码输出什么？


for (var i = 0; i< 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000*i);
}

输出：

分别输出于 0s, 1s, 2s, 3s, 4s。

解释：

循环体的 i 仍是函数作用域的 var 变量。
但是 setTimeout 的服务时间 1000*i 是在循环运行时即断计元。
根据不同的延迟，各回调会妥适时候，且此时 i 的值是 0, 1, 2, 3, 4。

10.下面代码输出什么？


(function () {
  console.log(1);
  setTimeout(function () {
    console.log(2);
  }, 1000);
  setTimeout(function () {
    console.log(3);
  }, 0);
 
  console.log(4);
})();
console.log(5);

输出：

解释：

console.log(1) 同步执行 → 1。
setTimeout 回调进入宏任务队列。
console.log(4) 同步执行 → 4。
IIFE 外的同步：console.log(5) → 5。
宏任务阶段：执行 setTimeout 回调（无延迟）→ 2，setTimeout 回调（延迟）→ 3。

11.下面代码输出什么？


var bar = 1;
function test () {
  console.log(bar);
  var bar = 2;
  console.log(bar);
}
test();

输出：


undefined
2

解释：

函数作用域内的 var bar 被提升为 undefined。
第一行 console.log(bar) 猫捏的是本地 bar（尚未赋值）→ undefined。
var bar = 2 执行之后，bar 才变为 2。
第二行 console.log(bar) → 2。

12.编写一个方法, 去掉一个数组的重复方法

方案 1：用 Set


function removeDuplicate(arr) {
  return Array.from(new Set(arr));
  // 或 [...new Set(arr)]
}
 
const arr = [1, 2, 2, 3, 3, 3, 4];
console.log(removeDuplicate(arr)); // [1, 2, 3, 4]

方案 2：用 filter + indexOf


function removeDuplicate(arr) {
  return arr.filter((value, index, self) => self.indexOf(value) === index);
}
 
const arr = [1, 2, 2, 3, 3, 3, 4];
console.log(removeDuplicate(arr)); // [1, 2, 3, 4]

方案 3：用 reduce


function removeDuplicate(arr) {
  return arr.reduce((acc, cur) => (acc.includes(cur) ? acc : acc.concat(cur)), []);
}
 
const arr = [1, 2, 2, 3, 3, 3, 4];
console.log(removeDuplicate(arr)); // [1, 2, 3, 4]

方案 4：双层 for 循环


function removeDuplicate(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
 
const arr = [1, 2, 2, 3, 3, 3, 4];
console.log(removeDuplicate(arr)); // [1, 2, 3, 4]

推荐：使用 Set 方案（速度最快）。