2022前端面经整理
面经整理
- 前言
- CSS
-
- CSS优先级
- JavaScript
-
- new Array(10)
- 节流实现
- es6新增数据类型
- transition 如何检测动画结束
- 讲一下 box-sizing 的值和对应的作用
- 水平垂直居中
- 图片懒加载
- 图片加载抖动
- promise.then()链式写法
- 作用域
- url 参数提取
前言
本篇文章是前端面经题目合集，大部分出自牛客网，答案由我自己理解总结所得。如有错误，请各位大佬指正，避免误导更多的人！！！
还待更新！！！
CSS
CSS优先级
从高到低依次是：
!important>行内样式>ID选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认样式
JavaScript
new Array(10)
当我们通过单个数字参数的构造器创建数组时，数组的长度为传入的参数，里面的元素为undefined。所以使用push在数组末尾插入元素时，数组的长度会从10变成11。
let arr = new Array(10);//注意，这里代表数组长度为 10
arr.push(1);
arr.slice(0,5);//slice 方法返回一个新数组，不会改变原数组
console.log(arr.length);//11
节流实现
定义：节流指的是n秒内只运行一次，若n秒内重复触发，则只有一次生效。
功能：
- 为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
- 节约资源
// 定时器
function ttrothle(func,delay){
let timer=null;
return function(){
if(!timer){
timer=setTimeout(()=>{
timer=null;
func.apply(this,arguments)
},delay)
}
}
}
// 时间差
function ttrothle(func,delay){
let prev=0;
return function(){
let now= Date.now();
if(now-prev>=delay){
func.apply(this,arguments);
prev=now;
}
}
}
演示例子：
<body>
<div>
我是节流处理后的：<input type="text">
</div>
<script>
function ajax(value){
console.log('value:'+value+',time:'+Date.now());
}
// function ttrothle(func,delay){
// let timer=null;
// return function(){
// if(!timer){
// timer=setTimeout(()=>{
// timer=null;
// func.apply(this,arguments)
// },delay)
// }
// }
// }
function ttrothle(func,delay){
let prev=0;
return function(){
let now= Date.now();
if(now-prev>=delay){
func.apply(this,arguments);
prev=now;
}
}
}
var input = document.querySelector('input')
let ttrothleHandle=ttrothle(ajax,3000)
input.addEventListener('keyup',function(e){
ttrothleHandle(e.target.value)
})
</script>
</body>
es6新增数据类型
BigInt是一种内置对象，它提供了一种方法来表示大于2^53 - 1 的整数。
可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数 BigInt()（但不包含 new 运算符）并传递一个整数值或字符串值。
//const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
var bg = 10n
console.log(typeof bg); //bigint
var s=Symbol('joney')
console.log(typeof s); //symbol
transition 如何检测动画结束
transitionend事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的transition-property 属性，事件将不会被触发.如在transition完成前设置 display 为"none"，事件同样不会被触发。
function showMessage() {
console.log('Transition 已完成');
}
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);
讲一下 box-sizing 的值和对应的作用
content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
水平垂直居中
（1）水平居中：text-align:center;。垂直居中：line-height:XXpx; line-height设置为父盒子的高度。
（2）使用flex实现
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中justify-content: center;定义了项目在主轴上的对齐方式，水平对齐居中
图片懒加载
提高页面加载渲染速度，进而提高用户体验，减轻服务器的压力。
<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
图片加载抖动
块级元素（如div,p）的padding设置为百分比的时候，是按照容器的宽度来定的
.wrapper{
width:100%;
height:0;
padding-top:24.25%; <--!在这里我们也可以使用padding-bottom属性进行设置-->
}
promise.then()链式写法
then方法返回的是一个新的Promise实例（不是原来哪个Promise实例！！是一个新的）。 可以使用return传递参数，默认是undefined。
new Promise((resolve, reject) => {
resolve(123);
}).then(data => {
console.log(data); // 123
}).then(data => {
console.log(data); // undefined
})
作用域
let a=10;
var b=20;
function fn(){
console.log('a ',a); // 10
console.log('this.a ',this.a); // undefined
console.log('this.b ',this.b); // 20
console.log('b ',b); // 20
}
fn();
let m = 10;时输出NaN NaN 6。var m = 10;时输出11 11 6
let m = 10;
function fn() {
return this.m + 1;
}
var obj = {
m: 5,
test1: function() {
return fn();
}
};
obj.test2 = fn;
console.log(obj.test1(), fn(), obj.test2())
var obj = {
m: 5,
test1: function() {
console.log(this.m); // 5
return function (){
console.log(this.m); //undefined
}
}
};
obj.test1()();
url 参数提取
decodeURIComponent()方法用于解码由 encodeURIComponent方法或者其它类似方法编码的部分统一资源标识符（URI）。
decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
// "JavaScript_шеллы"
decodeURI()函数能解码由encodeURI创建或其它流程得到的统一资源标识符（URI）。
const uri = 'https://mozilla.org/?x=шеллы';
const encoded = encodeURI(uri);
console.log(encoded);
// expected output: "https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"
try {
console.log(decodeURI(encoded));
// expected output: "https://mozilla.org/?x=шеллы"
} catch (e) { // catches a malformed URI
console.error(e);
}