字节跳动前端提前批面经总结（三）
腐烂的橘子
4394
2020.12.05
2020.12.06
发布于 未知归属地
字节跳动JavaScript求职面试前端我要上推荐提前批腐烂的橘子

bytedance.jpg

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];
    }
};
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)