面试题笔记

JS数组去重

    // 方法一
    function unique(arr) {
        return [...new Set(arr)]
        // return Array.from(new Set(arr))
    }
    
    // 方法二
    function unique(arr) {
        var brr = [];
        for( var i=0; i<arr.length;i++) {
            if( brr.indexOf(arr[i]) == -1 ){ 
                // 如果brr不存在arr[i],则将arr[i] push进brr数组，遇到重复的则不会执行该代码  
                brr.push( arr[i] )
            }
        }
        return brr
    }
    
    // 方法三  
    function unique(arr) {
        arr.sort()
        var brr = []
        for( var i=0;i<arr.length;i++) {
            if( arr[i] !== arr[i+1]) {
                brr.push(arr[i])
            }
        }
        return brr
    }
    

找出多维数组中的最大值

    function findMax(arr) {
        var newArr = []
        arr.forEach((item,index) => {
            newArr.push(Math.max(...item))
        })
        return newArr
    }
    console.log(findMax([
        [1,2,3,4],
        [5,6,7,8],
        [9,10,11,12]
    ]))

数组扁平化、去重、排序

    // 面试的时候应该不会让这样写的，啊哈哈哈
    var arr = [[1,[2,3],4],[5,6],[5,6],[[1,2],[10]]]
    console.log([...new Set(arr.flat(Infinity))].sort((a, b) => a - b));

找出字符串出现最多次数的字符以及次数(逻辑题)

    var str = 'aaaaaaaaaaabbbbbbbbbbbcccccccccc'
    var obj = {}
    for ( var i=0;i<str.length;i++) {
        var char = str.charAt(i)
        if( obj[char] ){ //如果对象中包含该属性，则值 +1
            obj[char]++
        } else {
            obj[char] = 1 //如果对象中不包含该属性，则添加该属性并赋初始值1
        }
    }
    console.log(obj)
    
    //统计出来最大值
    var max = 0
    for( var key in obj) {
        if(max < obj[key] ){
            max = obj[key]
        }
    }
    //拿最大值去比
    for (var key in obj) {
        if( obj[key] == max){
            console.log('最多的字符是'+key)
            console.log('出现的次数是'+max)
        }
    }

new操作符做了什么

    1. 在内存中创建了一个空对象
    2. 将空对象的原型，指向于构造函数的原型
    3. 将空对象作为构造函数的上下文（改变this指向，指向这个对象）
        直接在构造函数中输出this，this是window
    4. 然后执行构造函数里面的代码 给这个空对象添加属性和方法
    5. 对构造函数的返回值判断
        如果构造函数中return 的是基本数据类型，则忽略。如果返回的是引用类型  
        则使用这个引用类型做为返回值，new不起作用

JS继承模式

    1. ES6的Class extends继承
    2. 原型链继承
    3. 借用构造函数继承
    4. 组合式继承（2和3的组合）

常见CSS垂直水平居中

    html代码
    <div style="width:300px;height:300px;" class="wrap">
        <div style="width:100px;height:100px;" class="box"></div>
    </div>

flex布局

margin+transform实现

absolute + margin

absolute + transform

栅格布局

更新中......