面试面试 flex 数组高阶api

最新推荐文章于 2022-07-23 10:55:06 发布

MMNHD

最新推荐文章于 2022-07-23 10:55:06 发布

阅读量381

点赞数

分类专栏：面试文章标签： css html css3

本文链接：https://blog.csdn.net/m0_63327154/article/details/123450287

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天遇到两个外包公司真实的面试题，方向给大家，欢迎大家提出宝贵意见！
一、CSS 自适应布局

HTML
<div class="client-a">
<div class="client-b"></div>
<div class="client-b"></div>
<div class="client-b"></div>
<div class="client-b"></div>
<div class="client-b"></div>
...
</div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            min-width: 1000px;
            padding: 24px;
            border: 1px solid #333;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }
        .b {
            flex: 1 0 30%;
            box-sizing: border-box;
            margin: 8px;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
    </div>
</body>

</html>

二、给定一个以数字组成的数组，实现输出id为数字，并且从小到大排序的name（请使用es6语法）
JavaScript
// 调用示例
const source = [
{ id: 4, name: 'test1' },
{ id: {}, name: 'ssdf' },
"test",
{ id: () => {}, name: 'sf' },
{ id: '6', name: 'test3' },
{ id: 6, name: 'test4' },
{ id: 7, name: 'test7' },
{ id: 2, name: 'test2' },
{ name: 'sf' }，
{},
]

function filterSort() {
// 写下你的代码
}

filterSort(source)
// 输出结果如下
['test2', 'test1', 'test4', 'test7']
第二个面试题是要求将数组过滤一遍后进行排序，这是面试官在看我们对于数组的掌握程度，这个题涉及到了一些数组的高阶函数和常用API，如果对于这些数组常用API还不清除的话，可以去看我这篇文章，里面基本将我们常用的一些数组相关方法总结清楚了。
JS中数组的相关方法整（想要了解数组，看这一篇就足够了）_io_123io_123的博客-CSDN博客JS数组遍历数组、数组常见的API、数组常用的高阶函数

const source = [
    { id: 4, name: 'test1' },
    { id: {}, name: 'ssdf' },
    "test",
    { id: () => {}, name: 'sf' },
    { id: '6', name: 'test3' },
    { id: 6, name: 'test4' },
    { id: 7, name: 'test7' },
    { id: 2, name: 'test2' },
    { name: 'sf' }，
    {},
]
function filterSort(arr) {
    var list = arr.filter(value => {
        return (typeof value.id) == (typeof 1)
    })
    list.sort(function(a, b) {
        return a.id - b.id;
    })
    var lists = []
    list.forEach(value => {
        lists.push(value.name)
    })
    console.log(lists)
}
filterSort(source)

MMNHD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试面试 flex 数组高阶api

今天遇到两个外包公司真实的面试题，方向给大家，欢迎大家提出宝贵意见！一、CSS 自适应布局HTML<div class="client-a"> <div class="client-b"></div> <div class="client-b"></div> <div class="client-b"></div> <div class="client-b"></div...
复制链接

扫一扫