前端相关题目

185 阅读4分钟

css相关

1.BFC及其应用

BFC: 块级格式化上下文,一种css渲染模式,BFC 内部元素和外部元素互不影响
创建BFC:

  1. html根元素
  2. float定位元素
  3. overflow属性不是visible的元素
  4. 绝对定位元素
  5. display为inline-block、表格布局或者弹性布局

BFC的主要作用:

  1. 清除浮动
  2. 同一BFC中的元素垂直方向外边距会重叠,为防止重叠,可将元素放入不同的BFC

2.怎样让一个div垂直水平居中

<div class="parent">
    <div class="child"></div>
</div>
  1. flex布局
.parent {
   display: flex;
   justify-content: center;
   align-item: center;
}
  1. 定位 + transform/margin
<!--不定宽高-->
.parent {
    position: relative
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
<!--给定宽高-->
.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -5px;
    margin-left: -25px;
}
<!--或-->
.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  1. 栅格布局
.parent {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}
  1. 在张鑫旭的《CSS世界》里面第一次看到,原理就是(基于我个人的理解):设置inline-block和vertical-align:middle后,里面的元素会基于中间的文字准线居中对齐(学生时代的英语本子里面写字母,都是4条线形成三个空白区域,文字的对齐就是根据这几条线的)vertical-align更多信息可以看看张鑫旭博文; 然后,由于伪类是position:static(默认)的,那么伪类撑开了父元素的基准线(高度是100%),使得此时文字的基准线就是整个div.parent的中心了,另外vertical-align只影响inline或者inline-block的,所以div.child设置vertical-align就能居中了。 以上是我个人的理解,有很多表达不清楚的地方,更详细的内容还是推荐张鑫旭的博文。
div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}

3.分析比较opticy:0,display:none和visibility:hidden的优劣及适用场景

  1. opticy: 0, 渲染元素继续占据空间,只是不可见,可以点击,非继承,子元素不可通过改变该属性来显示, 引起重绘
  2. visibility:hidden,占据空间,不可点击,继承,子元素可设置visible来显示,引起重绘
  3. display:none, 元素从渲染树消失,不占据空间,不可点击,非继承,引起回流

js基础

1. ['1', '2','3'].map(parseInt) what&why

parseInt(string, radix),该函数返回值类型为十进制。

string radix
必须参数,为需要解析的字符串 可选参数,转换基数,为2-36之间的数字
如果radix为0或不存在,转换规则如下
1. string 以"0x"或者"0X"开头, 则基数是16 (16进制).
2. string 以"0"开头, 基数是8(八进制)或者10(十进制),那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10,但是并不是所有的浏览器都遵循这个规定。因此,永远都要明确给出radix参数的值。
string 以其他值开头,则基数为10

map()方法调用一个函数,处理数组中的每一项,返回一个新数组

let new_array = arr.map(function callback(currentValue[,index[,arr]) {
    return elment process
}[,thisArg])

其中,thisArg 为传递给callback 的this 值 题目 ['1', '2','3'].map(parseInt)等价于

`['1', '2','3'].map( (item, index) => {
    return parseInt(item, index)
})

parseInt('1', 0) -> 1 parseInt('2', 1) -> NaN 因为1进制中没有2 parseInt('2', 1) -> NaN 所以结果为['1',NaN,NaN ]

2. 什么是防抖和节流

  • 防抖:动作触发n秒后执行函数,n秒内动作重复触发,则重新计算时间
funtion debounce(fn) {
    let timeout = null
    return function() {
        clearTimeOut(timeout)
        timeout = setTimeout( () => {
            fn.apply(this,arguments)
        },500)
    }
}
function sayHi() {
    console.log('防抖成功')
}
let inp = document.getElementById('inp')
inp.addEventListener('input', debounce(sayHi))
  • 节流: n秒内,不管动作触发多少次,都只执行一次函数
function throttle(fn) {
    let canRun = true
    return function() {
        if(!canRun) {
            return
        }
        canRun = false
        setTimeout(() => {
            canRun = true
            fn.apply(this, arguments)
        }, 500)
    }
}
function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
window.addEventListener('resize', throttle(sayHi));

3. 介绍下Set, Map, WeakSet和WeakMap的区别

Set 和 Map 主要的应用场景在于 数据重组 和 数据储存
Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构

  • 集合(Set) ES6一种新增的数据结构,类似于数组,但成员是无序和唯一的
    Set本身是一个构造函数,example:
const s = new Set()
[1,2,3,4,3,2,1].forEach( item => {
    s.add(item)
})
for(let i of s) {
    console.log(i) // 1,2,3,4
}
// 数组去重
let arr = [1,2,3,4,3,2,1]
[...new Set(arr)] // 1,2,3,4