2020年3月20日 面试问题记录

Leiliming
115 阅读2分钟

一、如何实现上下固定 ，内部自适应

方法1：固定定位实现


 <style>
        .content {
            position: fixed;
            top: 100px;
            right: 0;
            left: 0;
            background: blue;
            bottom: 100px;
        }
</style>
<body>
    <div class="content"></div>
</body>

方法2：绝对定位实现

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container>div {
            position: absolute;
        }

        .header {
            top: 0;
            width: 100%;
            height: 100px;
            background: red;
        }

        .footer {
            bottom: 0;
            width: 100%;
            height: 100px;
            background: red;
        }

        .content {
            top: 100px;
            right: 0;
            left: 0;
            background: blue;
            bottom: 100px;
        }
    </style>
<body>
    <div class="container">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>

方法3:flex布局实现

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        .container {
            height: 100%;
        }

        .container {
            display: flex;
            flex-direction: column;
        }

        .header,
        .footer {
            height: 100px;
            background: red;
        }

        .content {
            flex: 1;
            background: blue;
        }
    </style>
    <body>
    <div class="container">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>

详细方法：

较老的版本

新版方法

2、浅拷贝、深拷贝

深拷贝 vs 浅拷贝

hasOwnProperty和in属性操作

浅拷贝：
function shallowClone(origin，target) {
        target = {}
        for (var prop in origin) {
            if (origin.hasOwnProperty(prop)) {
                obj[prop] = origin[prop]
            }
        }
        return target
    }
    
深拷贝：
  function deepClone(origin, target) {
        target = target || {}
        for (var prop in origin) {
            if (typeof origin[prop] === 'object') {
                if (origin.hasOwnProperty(prop)) {
                    Object.prototype.toString.call(origin[prop]) == '[object Array]' ? target[prop] = [] : target[prop] = {}
                    target[prop] = deepClone(origin[prop], target[prop])
                }
            } else {
                target[prop] = origin[prop]
            }
        }
        return target;
    }

3、浏览器存储数据的区别

4、数组拼接

1. 扩展运算符 '...'
var arr1 = [1,2,3,4,5]
var arr2 = [6,7,8,9,10]
var arr3 = [...arr1,...arr3] // [1,2,3,4,5,6,7,8,9,10]

2. concat()
var arr1 = [1,2,3,4,5]
var arr2 = [6,7,8,9,10]
arr1.cancat(arr2)
arr1 = [1,2,3,4,5,6,7,8,9,10]

3.for循环
var arr1 = [1,2,3,4,5]
var arr2 = [6,7,8,9,10]
for(var i in arr2){
    arr1.push(arr2[i])
}
arr1 = [1,2,3,4,5,6,7,8,9,10]
ps：数组的各种循环方法都可以。

4、apply
var arr1 = [1,2,3,4,5]
var arr2 = [6,7,8,9,10]
arr1.push.apply(arr1,arr2)
arr1 = [1,2,3,4,5,6,7,8,9,10]

5、react如何实现父子传值、Redux流程

6、把一个数组弄成字符串。 var arr = ['a','b','c'] arr.join('') = 'abc' arr.join() ='a,b,c'

7、fixed 固定定位，特性。

当元素的position属性设置为fixed时，则开启了元素的固定定位:
        固定定位也是有一种绝对定位，它的大部分特点和绝对定位一样
不同的是：
        固定定位永远都会相对于浏览器窗口进行定位
        固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动

8、let const区别

avatar
文章
阅读
粉丝