首页 > 字节教育前端实习二面面经
头像
Red_Ferrari
编辑于 2021-04-04 10:12
+ 关注

字节教育前端实习二面面经 内部员工回复

怎么学习前端的

CSS position 你知道哪些有哪些属性

感谢总结的面经,我成功答了出来这个

描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

追问:被问如果父元素没有设置position:relative,子节点设置position:absolute怎么办,找到position:static以外的第一个父元素。(嘻嘻,总结过)

再被追问如果所有父元素都是position:static,怎么办,相对body还是窗口?这又是盲区了

查了W3C,总体说对了,相对于body定位,并随页面滚动一起移动。

HTTP缓存

强制缓存协商缓存,经典问题

追问:协商缓存的校验是在客户端还是服务器端?

想了想客户端?

提示我:你怎么知道要应用协商缓存?

304状态码

状态码是谁提供的?

服务器端,所以刚刚说错了,协商缓存的校验是在服务器端

那强制缓存是在客户端还是服务器端?

客户端,因为根本没有向服务器端发送请求

好好,手写一道题吧
fs.readFile('1.txt', (err, data) => {
});

const newReadFile = promisify(fs.readFile);

newReadFile('1.txt')
  .then(data => {})
  .catch(err => {});
  
手写promisify函数
我一看不会,还没看过,硬着头皮写吧
function promisify(fn) {
    return Promise()
}
刚写,面试官提示我,返回的是一个什么,想了想,应该是function。自己琢磨了很久,写了这些代码,一边写,一边说自己的思路,但还是写错了
function promisify(fn) {
    let data, err
    return function(...args) {
        try {
            data = fn(...args);
        }.catch {
            err
        }
    }
}
提示我为什么要用promisify,自己写不下去了,自己在这里反思一下promisify的做法。
首先 promisify 需要返回一个 function
function promisify(fn) {
    return function() {
        
    }
}
并且这个 function 要返回一个 promise,Promise中调用传入的函数
function promisify(fn) {
	return function(...args) {
		return new Promise(function(resolve) {
			fn(...args);
		})
	}
}
原fn函数的最后一个参数是 callback,实现回调
function promisify(fn) {
	return function(...args) {
		return new Promise(function(resolve) {
			args.push(function(result) {
				resolve(result);
			})
			fn(...args);
		})
	}
}
考虑回调函数中的第一个参数是 error 标记
function promisify(fn) {
	return function(...args) {
		return new Promise(function(resolve, reject) {
			args.push(function(error, result) {
				if (error) reject(error);
				else resolve(result);
			})
			fn(...args);
		})
	}
}
参考了网上的资料,总算手写了出来,值得好好品味

面试官看我写不出来,然后给我换了道简单的题,说是类似的原理,要求f,其实sleep函数我知道怎么写
setTimeout(() => console.log('hi'), 500);
const sleep = f(setTimeout);
sleep(500).then(() => consle.log('hi'));
可是这个f我依然一筹莫展,最后当场写出来的是这个玩意,实在很抱歉
function f(fn) {
    return function(...args) {
        return Promise(
            fn(args[1]);
        ).then(
            args[0];
        )
    }
}
按照复盘的思路,重写一个吧
function f(fn) {
    return function(...args) {
        return new Promise(function(resolve) {
        	args.unshift(resolve);
        	fn(...args);
        })
    }
}
顺带整理一下sleep函数的写法
1.使用Promise
function sleep(time) {
	return new Promise(function(resolve) {
		setTimeout(resolve, time);
	})
}

// 使用
sleep(1000).then(() => {
	console.log(1);
})
2.使用生成器Generator
function* sleepGenerator(time) {
	yield new Promise(function(resolve, reject) {
		setTimeout(resolve, time);
	})
}

// 使用
sleepGenerator(1000).next().value.then(() => {
	console.log(1);
})
3.使用async、await
function sleep(time) {
	return new Promise(resolve => {
		setTimeout(resolve, time);
	})
}

async function output(time) {
	let out = await sleep(time);
	console.log(1);
	return out;
}

output(1000);
4.ES5
function sleep(callback, time) {
	if (typeof(callback) === 'function') {
		setTimeout(callback, time);
	}
}
function output() {
	console.log(1);
}
sleep(output, 1000);

手写flat([1, [2, [3, [4]]]]) -> [1, 2, 3, 4]函数
机智如我先说了arr自带的flat方法
function flat(arr) {
    return arr.flatten(Infinity);
}
我又写错了,正确的应该是
function flat(arr) {
    return arr.flat(Infinity);
}

面试官说就是要实现它,不要用自带的flat函数

我说可以用正则表达式,然后手写了
function flat(arr) {
    return arr.toString().replace(/[|]/g, '').split(',');
}
面试官提醒,正则表达式中[和]有什么作用
赶紧解释[]表示匹配中间对应的字符,用转义符才能实现匹配
function flat(arr) {
    return arr.toString().replace(/\[|\]/g, '').split(',');
}
面试官又说如果本身里面带字符串,字符串中有,就无法实现
我终于决定使用递归的方案做了一
function flat(arr) {
    let res = [];
    for (let item of arr) {
        if (item.constructor == Array) {
        // if (instanceof(item) == Array) {
            res.push(...flat(item));
        } else {
            res.push(item);
        }
    }
    return res;
}
其中我还写了一下判断数组的方法
Array.isArray(arr);
instanceof(arr) == Array
arr.constructor == Array;
// 没来及写的
Object.prototype.toString.call(arr) === '[object Array]';

面试官又说这样数组有什么情况(我记不得了)这种方法不管用

查了查有可能的情况,发现是数组空位,ES5 大多数数组方法对空位的处理都会选择跳过空位包括:forEach(), filter(), reduce(), every()some() 都会跳过空位。

使用reduce实现
function flat(arr) {
    return arr.reduce((pre, cur) => {
    	return pre.concat(Array.isArray(cur) ? flat(cur) : cur);
    }, []);
}
使用forEach实现
function flat(arr) {
    let res = [];
    arr.forEach(function (item){
        if (item.constructor == Array) {
        // if (instanceof(item) == Array) {
            res.push(...flat(item));
        } else {
            res.push(item);
        }
    })
    return res;
}

trim(' 123 44 ') -> '123 44'
手写trim,用最笨的方法
\s
function trim(str)  {
    let arr = str.split('');
    let i = 0;
    while (arr[i] === ' ') {
        arr.shift();
    }
    i = arr.length - 1;
    while (arr[i] === ' ') {
        arr.pop();
        i--;
    }
    return arr.join('');
}
说了正则表达式
function trim(str) {
    return str.replace(/^[\s]+/, '').replace(/[\s]+$/, '');
}

想了想说可以合并

没写,说是利用g后缀
function trim(str) {
    return str.replace(/(^[\s]+)|([\s]+$)/g, '');
}

反问:

更多模拟面试

全部评论

(11) 回帖
加载中...
话题 回帖

相关热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐