前端编程题

DQiinG
275 阅读2分钟

1. Css 如何画出一个扇形

<style>
.box {
    content: '';
    width: 0;
    height: 0;
    border: 100px solid;
    border-radius: 50%;
    border-color: pink transparent transparent;
}
</style>

<body>
    <!-- 画一个扇形 -->
    <div class="box"></div>
</body>

Snipaste_2022-02-11_17-00-26.png

2. 实现一个左右固定100px，中间自适应的三列布局？(至少三种)

第一种： flex 布局

<style>
.box2 {
    width: 100%;
    height: 500px;
    display: flex;
}

.box2 .left,
.box2 .right {
    flex: 0 0 100px;
    background-color: yellow;
}

.box2 .center {
    flex: 1;
    background: skyblue;
}
</style>

<body>
<div class="box2">
    <div class="left">100px</div>
    <div class="center">自适应</div>
    <div class="right">100px</div>
</div>
</body>

第二种： float 布局

<style>
.box2 {
    width: 100%;
    height: 500px;
}

.box2 .left {
    width: 100px;
    height: 100%;
    float: left;
    background-color: yellow;
}

.box2 .right {
    width: 100px;
    height: 100%;
    float: right;
    background-color: yellow;
}

.box2 .center {
    height: 100%;
    margin: 0 100px;
    background: skyblue;
}
</style>

<body>
<!-- 注意这里的顺序 -->
<div class="box2"> 
    <div class="left">100px</div>
    <div class="right">100px</div>
    <div class="center">自适应</div>
</div>
</body>

第三种： position 布局

<style>
.box2 {
    width: 100%;
    height: 500px;
    position: relative;
}

.box2 .left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100%;
    background-color: yellow;
}

.box2 .right {
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    background-color: yellow;
}

.box2 .center {
    height: 100%;
    position: absolute;
    left: 100px;
    right: 100px;
    background: skyblue;
}
</style>

<body>
<div class="box2"> 
    <div class="left">100px</div>
    <div class="center">自适应</div>
    <div class="right">100px</div>
</div>
</body>

Snipaste_2022-02-11_17-09-30.png

3. Css 画一个三角形

<style>
.box {
    content: '';
    height: 0;
    width: 0;
    border: 100px solid;
    border-color: transparent transparent pink;
}
</style>

<body>
    <div class="box"></div>
</body>

Snipaste_2022-02-11_17-30-10.png

4. 介绍防抖节流原理、区别以及应用，并用JavaScript进行实现

防抖和节流的原理：

（1）防抖

原理：n秒后执行该事件，如果在n秒内被重新触发，则重新计时。

（2）节流

原理：n秒内只运行一次，若n秒内重复触发，只有一次生效。

区别：

相同点：

  • 都可以通过setTimeOut来实现
  • 目的都是为了降低回调执行频率，减少计算资源

不同点：

  • 防抖是在一段连续操作后，处理回调；节流是在一段连续操作中，每一段时间只执行一次。
  • 防抖关注一定时间连续触发的事件，只在最后执行一次；节流一段时间内只执行一次。

应用场景

防抖在连续的事件，只需触发一次回调的场景有：

  • 搜索框搜索输入。只需用户最后一次输入完，再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

  • 滚动加载，加载更多或滚到底部监听
  • 搜索框，搜索联想功能

防抖和节流的实现

防抖

<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', debounce(sayhi))

        function sayhi() {
            console.log('hi');
        }
        // 防抖
        function debounce(fn, delay = 1000) {
            let timer
            return function() {
                let context = this
                let args = arguments
                clearInterval(timer)
                timer = setTimeout(() => {
                    fn.apply(context, args)
                }, delay)
            }
        }
    </script>
</body>

节流

<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', throttle(sayhi))

        function sayhi() {
            console.log('hi');
        }
        // 方法一：节流
        function throttle(fn, delay = 10000) {
            let pre = 0
            return function() {
                let now = new Date()
                let context = this
                let args = arguments
                if (now - pre > delay) {
                    fn.apply(context, args)
                    pre = now
                }
            }
        }
        // 方法二： 节流 定时器
        function throttle(fn, delay = 1000) {
            let timer
            return function() {
                let context = this
                let args = arguments
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(context, args)
                    timer = null
                }, delay)
            }
        }
    </script>
</body>

5. 介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise

手把手教你实现Promise：juejin.cn/post/694531…
（PS：这篇文章手把手教你实现Promise，文章很长，写的非常不错，通俗易懂）

6. 代码实现add函数

add(2)(3) //5
add(5)(2)(9) //16
add(2)(6)(10)(4) //22

 function add() {
     // Array.prototype.slice.call 将类数组对象转化为数组对象
    let args = Array.prototype.slice.call(arguments)

    let inner = function() {
        args.push(...arguments) // arguments 默认是函数的参数，即使没有列出参数
        return inner
    }

    inner.toString = function() {
        return args.reduce((prev, val) => {
            return prev + val
        })
    }

    return inner
}
avatar
文章
阅读
粉丝