面试题目自练习20220722

1、css水平、垂直居中？至少两种

（1）position方法：

HTML

<div class="div1"> <div class="center"></div> </div>

CSS

.div1 {
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px;
}
.div1 .center {
  width: 50px;
  height: 50px;
  background-color: rgb(34, 71, 139);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

（2）Flex方法

HTML

<div class="div2"> <div class="center"></div> </div>

CSS

.div2 {
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div2 .center {
  width: 50px;
  height: 50px;
  background-color: rgb(240, 248, 166);
}

2、数组去重？至少两种

（1）通过遍历的方法实现

function demo1(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                j--
            }
         }
     }
     return arr;
 }
 var arr = [2, 2, 2, 8, 9, 8, 8, 8, true, 'red', 'red', 'red'];
 arr = demo1(arr);

（2）通过filter

let maxList = ['1','2','3','4','5']
let minList = ['2','3']
let newList = maxList.filter((item) => {
    return minList.indexOf(item) == -1 //返回minList里找不到的数据给newList 即去重
})
console.log('newList',newList)

（3）ES6 set

function demo3( arr){
    return [...new Set(arr)]
}
var arr = [2, 2, 2, 8, 9, 8, 8, 8, true, 'red', 'red', 'red'];
arr = demo3(arr);
console.log(arr);

3、深拷贝浅拷贝解释？

深拷贝，就是不管原数据中值是什么类型的数据，拷贝后的新数据跟原数据是完全没有关联的。

浅拷贝是将原数据中所有的数据复制一份，放到新的变量空间中，两个变量不共享一个内存地址。

日积月累，每天一练！

学无止境，

欢迎大家关注公众号：