HTTP
- HTTP 有哪些 method？
- 浏览器会对用户的哪些请求方法做记录？
- 请求的状态码有哪些？
- 浏览器对资源的缓存流程？
- 跨域及跨域方案有哪些，为什么写在服务端的东西，前端能获取到？
- 请求不是我发的，我不知道会返回什么样的数据，如何拿到想要的结果，并赋予某个变量？
- 发送请求用什么
- get 和 post 的区别？
- 计算机分为哪几层？
- 应用层有哪些协议？ PING 属于哪一层？
ping 127.0.0.1有什么作用？ - git里面怎么查看前几次 commit 的信息？只上传某一个文件怎么操作？
- 平时用哪些封装的包来发送网络请求？（axios）
CSS
- CSS的display有哪些值？inline和block的区别？inline的元素能设置宽高、margin属性吗？（inline元素不能设置宽高，外边距只能设置左- 右，不能设置上下）
- 垂直居中布局有几种办法？
- 怎么用CSS画一个三角形？
- 实现两栏布局，左边 div 固定宽度，右边占满屏幕。（
display:flex，右边设置flex: 1） - 鼠标悬浮做一个 div 动画，如悬浮时上移 10px；（用 transition 写）
- border-box 和 content-box 的区别
<div style="width: 200px;padding: 10px;margin: 20px"><div>在两种盒模型下获取 div 的宽度分别是多少- CSS选择器的优先级，以下选择器优先级顺序：
- （1）#foo div;（2）.foo .bar div;（3）.foo~.bar div
- 换成.foo .bar .foo-1 .foo-2 div优先级有没有可能比（1）高
JavaScript
- 浏览器的事件冒泡及事件捕获？怎么取消事件冒泡？事件代理？
- ul中有多个li，怎么知道自己点击的是第几个？（dataset）
- 线程和进程的区别，JS是单线程的吗？
手写代码
- 合并两个有序数组，鉴于数组是有序的，可以使用双指针实现。
JavaScript
/**
* --- 问题描述 ---
*
* 实现一个 merge 函数，实现有序数组合并
*
* --- 测试用例 ---
*
* 输入：a = [1,3,5]
* b = [2,4,6]
* 输出：[1,2,3,4,5,6]
*/
var merge = function(nums1, m, nums2, n) {
let idx = m + n - 1;
let i = m - 1;
let j = n - 1;
while (i >= 0 && j >= 0) {
nums1[idx--] = nums1[i] < nums2[j] ? nums2[j--] : nums1[i--];
}
for (let k = 0; k <= j; k++) {
nums1[k] = nums2[k];
}
};- url 拆解问题，前端面试经常问到的题型。「前端面试」 JS 编程题目总结 里也有类似的题目。
JavaScript
/**
* --- 题目描述 ---
*
* 实现一个 parseParem 函数，将 url 转化为指定结果
*
* --- 测试用例 ---
*
* 输入：url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled'
* 输出：
{
user:'anonymous',
id:[123,456],// 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
city:'北京',// 中文需解码
enabled: true // 未指定值的 key 与约定为 true
}
*/
const parseParem = (url) => {
const arr = url.split('?')[1].split('&');
const res = {};
arr.forEach((e) => {
let key = e.split('=')[0], value = e.split('=')[1];
if (value === undefined) {
res[key] = true;
} else {
if (key in res) {
res[key] = [res[key]];
res[key].push(value)
} else {
res[key] = decodeURI(value)
}
}
})
return res;
}- 写一个函数返回当前节点是其父元素的第几个节点
JavaScript
function getNodeIndex(node){
let index = 0;
return index;
}- 实现一个 JS 的 sleep：
JavaScript
async function sleep(time){
// TODO
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
await sleep(3000);
console.log('hello');- 写一个正则匹配出图片的后缀：（要求写明字符串匹配的 API）
JavaScript
var str = "https://sf3-ttcdn-tos.pa***.com/img/edux-data/xxxxxxxxxxxxxxxxxxx~0x0.jpg"- 手写拖拽效果
Vue
v-show和v-if的区别及使用场景- 在 Vue 中怎么声明数据才能防止被 Vue 监听
评论 (2)
