前端开发常见面试题

1 盒子模型水平垂直居中

• 方法一

        .father {
            position: relative;
            border: black solid 1px;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            border: black solid 1px;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        } 

• 方法二

        .father {
            position: relative;
            border: black solid 1px;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: black solid 1px;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        } 

• 方法三

.father {
            display: flex;
            align-items: center;
            justify-content: center;
            border: black solid 1px;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            border: black solid 1px;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        }

• 方法四

.father {
            position: relative;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        }

2 使用js实现数组去重

• 方法一

  var numbers = [10, 20, 100, 40, 50, 60, 50, 40, 30, 20, 10]
        //Set是一个数据结构，set中的数据是不会重复的
        var numbers2 = [...new Set(numbers)]
        for (var i = 0; i < numbers2.length; i++) {
            console.log(numbers2[i])
        }

• 方法二

   // 如果值为-1表示不存在，则添加当前元素numbers[i]到数组numbers2[]的末尾
        let numbers = [1, 2, 3, 4, 5, 6, 2, 8, 5, 6]
        let numbers2 = []
        for (let i = 0; i < numbers.length; i++) {
            if (numbers2.indexOf(numbers[i]) == -1) {
                numbers2.push(numbers[i]);
            }
        }
        console.log(numbers2)

• 方法三

   function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                    if (arr[i] == arr[j]) {
                        ++i;
                    }
                }
                newArr.push(arr[i]);
            }
            return newArr;
        }
        var arr = [1, 2, 2, 3, 5, 3, 6, 5];
        var newArr = unique(arr);
        console.log(newArr);