前端面试题三
一、导读(思考的意义)
孔子曰:学而不思则罔,思而不学则殆;所以今天一起来思考几个问题吧。🕖
二、你真的懂浏览器吗?
① 为什么会有浏览器兼容性问题的出现?
👋释疑:
🚩浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”;每一款浏览器其渲染引擎都有一定的差异,也就意味着针对于同一行代码,在不同浏览器上其渲染的规则不一样,所以呈现了不一样的视觉效果!
②浏览器内核的种类有哪些?
👋释疑:
🚩世界五大主流浏览器内核(渲染引擎)
⛽️Trident(1974年首用IE4,所以也称IE浏览器内核);代表浏览器(IE、傲游、Avant、腾讯TT)
⛽️Gecko(Firefox内核);代表浏览器:(Mozilla Firefox、Mozilla SeaMonkey)
⛽️Presto(Opera前内核)(已废弃);代表浏览器(Opera已经改用Blink内核)
⛽️Webkit(Safari内核,Chrome内核原型,开源)
⛽️Blink(由Google和Opera Software开发的浏览器排版引擎)
三、opacity透明度和浏览器的藕断丝连?
①因为浏览器内核的不同,导致其渲染的方式不一样,也就产生了一些差异
②解决opacity与浏览器兼容性问题?
<style>
#box{
width: 30%;
height: 200px;
margin: 0 auto;
/* background-color: coral; */
/* 浏览器兼容性问题 */
/* 1、使用filter */
/* filter: */
/* rgba(241, 9, 9, 0.5); */
/* alpha(opcity=10); */
/* 2、使用-moz- */
/* -moz-opacity:0.1; 老版Mozilla */
/* 3、使用-khtml */
/* -khtml-opacity:0.1; 老版Safari */
/* 4、直接使用opcity' */
/*支持opacity的浏览器*/
opacity: 0.5;
/* 5、使用-webkit- */
/* -webkit-opacity: 0.5;支持webkit内核浏览器 */
/* 6、使用opcity:.x格式 */
/* opacity:.5 */
/* IE9 + etc...modern browsers */
}
</style>
四、写出数组去重的几种方式?(重点)
数组去重的意义:
⛽️数组去重,在实际的开发中有着举足轻重的作用,一般后面紧随着数组的排序。
①ES6 set方法
var arr=[10,20,20,30,40,50,60,60,70,80,90,100];
// es6 set方法
var arr2 = Array.from(new Set(arr))
console.log(arr2);
⛽️解读:es6中提供了一种新的数据结构set,器类似于数组,但是其中的值是惟一的。
②冒泡去重法
// 冒泡去重法
for(var i=0;i<arr.length;++i){
for(var j=i+1;j<arr.length;++j){
if(arr[i]==arr[j]){
arr.splice(i,1);
j--;
}
}
}
console.log(arr);
⛽️解读:取到数组中的第一个值和第二个值,在进行对比,判断两者是否相等,相等的话将其截取,从原数组删除。然后个数进行减一操作。
③利用属性(key)唯一去重
var res = [];
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1;
res.push(arr[i]);
}
}
console.log(arr);
④利用数组原型对象includes方法
var res = [];
for (var i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) {
// 如果res新数组包含当前循环item
res.push(arr[i]);
}
}
console.log(arr);
⑤利用数组原型对象上的 lastIndexOf 方法
var res = [];
for (var i = 0; i < arr.length; i++) {
res.lastIndexOf(arr[i]) !== -1 ? "" : res.push(arr[i]);
}
五、数组排序
①冒泡排序法
⛽️:将数组中的前一个值和后一个值进行比较,如果前面那个值大于后面那个值,就将大的值给第三方变量,最终把大值给了下标更大的值。
var arr = [20,30,60,40,10,50,70,90,100,80];
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-i-1;++j){
if(arr[j]>arr[j+1]){
var temp;
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);
②快速排序法
⛽️实现思路是,将一个数组的排序问题看成是两个小数组的排序问题,以一个数为基准(中间的数),比基准小的放到左边,比基准大的放到右边,而每个小的数组又可以继续看成更小的两个数组,一直递归下去,直到数组长度大小最大为2。
//pivot 基准索引,长度的一半
let pivotIndex = Math.floor(arr.length/2);//奇数项向下取整
//找到基准,把基准项从原数组删除
let pivot = arr.splice(pivotIndex,1)[0];
//定义左右数组
let left = [];
let right = [];
//把比基准小的放left,大的放right
arr.forEach(element => {
if(element<pivot){
left.push(element)
}else{
right.push(element)
}
});
console.log(arr);