前端面试题集锦之浏览器、数组排序去重问题(三)

一、导读（思考的意义）

孔子曰：学而不思则罔，思而不学则殆；所以今天一起来思考几个问题吧。🕖

二、你真的懂浏览器吗？

① 为什么会有浏览器兼容性问题的出现?

👋释疑：
             🚩浏览器最重要或者说核心的部分是“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);