首页 > 其他分享> > Web前端面试问题集锦

Web前端面试问题集锦

2022-02-24 22:35:15 作者：互联网

天坑专业转行开始找实习啦，自己水平不够，边看别人的面经边总结相关的知识吧。

一. HTML/5

二. CSS/3

2.1 有很多li标签且顺序不固定，怎么把最后一个class为b的li改为红色

<ul>
    <li class="a" />
    <li class="b" />
    <li class="b" />
    <li class="a" />
</ul>

思路1：使用伪类:last-child

:last-child 代表父元素的最后一个子元素。
li:last-child {
  background-color: xxx;
}

拓展1：还有哪些常用伪类

//a标签专属
:link /*超链接未访问时的状态  鼠标放上去的时候 */
:visited /*超链接访问过后的状态  点击后 */
:hover  /*鼠标悬停的状态  鼠标放上去的时候 */
:active /*激活状态，鼠标按下状态 点击的一瞬间 */
:focus  /* 元素获取焦点的时候触发 */

//其他伪类
:first-child //表示在一组兄弟元素中的第一个元素
:first-of-type //表示一组兄弟元素中指定类型的第一个元素
:last-child //表示在一组兄弟元素中的最后一个元素
:last-of-type //表示一组兄弟元素中指定类型的最后一个元素
:not(selector) //一个否定伪类，用于匹配不符合参数选择器的元素
:nth-child //这个 CSS 伪类首先会找到当前元素的兄弟元素，然后按照位置的先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...）。如果 an+b 为 0，无法选中任何元素
:nth-of-type //与 nth-child 相似，不同之处在于它是只匹配特定类型的元素
:nth-last-child(an+b) //与 nth-child 相似，它是从最后一个子元素开始计数的
:nth-last-of-type //与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的

//伪元素选择器
/* 向前面追加文本 content属性里面添加内容 */
::before {
            content: "before";
            color: teal;
            margin-right: 20px;
        } 
 /* 向后面追加文本 content属性里面添加内容 */       
::after {
            content: "123456";
            color: sienna;
        }
::first-letter //选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容
::first-line //在某块级元素的第一行应用样式。
::selection //用于文档中被用户高亮的部分

2.2 有一个类似表格的布局，每个单元格的border为1px，相邻单元格中间的border也为1px怎么实现？如何实现选择某一单元格高亮？

A：从第二列开始margin-left: -1px, 第二排开始maigin-top: -1px；加z-index = 999实现。

三. JavaScript/ECMAScript

3.1 在不改动原有api的前提下实现多参数加法

假如现在本地无法实现加法功能，有其他团队提供的api：

await asyncAdd = (a, b, (err, res) => {
    利用网络请求实现a+b， 结果成功返回res
})

现需要改进该api，利用其实现一个add方法，使其能够实现多个数组相加。

思路1：利用arguments分解多传入的参数，用reduce将两两依次送入api中计算并返回结果。

function asyncAdd(a, b){
    return new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(a+b)
    }, 1000)
})
}

async function add(){
    let arr = Array.prototype.slice.call(arguments)
    const res = await arr.reduce((s, v) => {return s.then((res) => asyncAdd(res, v))}
    , Promise.resolve(0))
    return res;
}

add(1, 2, 3).then((res) => {
    console.log(res)
})