首页 > 其他分享 >前端工程师面试题自检篇(二)

前端工程师面试题自检篇(二)

时间:2022-10-12 08:34:40浏览次数:52  
标签:面试题 obj 前端 查询 return 域名 DNS 服务器 自检

请实现 DOM2JSON 一个函数,可以把一个 DOM 节点输出 JSON 的格式

题目描述:

<div>
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>

把上诉dom结构转成下面的JSON格式

{
  tag: 'DIV',
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}

实现代码如下:

function dom2Json(domtree) {
  let obj = {};
  obj.name = domtree.tagName;
  obj.children = [];
  domtree.childNodes.forEach((child) => obj.children.push(dom2Json(child)));
  return obj;
}

扩展思考:如果给定的不是一个 Dom 树结构 而是一段 html 字符串 该如何解析?

那么这个问题就类似 Vue 的模板编译原理 我们可以利用正则 匹配 html 字符串 遇到开始标签 结束标签和文本 解析完毕之后生成对应的 ast 并建立相应的父子关联 不断的 advance 截取剩余的字符串 直到 html 全部解析完毕

关于原型的继承我们借助寄生组合继承

function Person(obj) {
    this.name = obj.name
    this.age = obj.age
}
Person.prototype.add = function(value){
    console.log(value)
}
var p1 = new Person({name:"番茄", age: 18})

function Person1(obj) {
    Person.call(this, obj)
    this.sex = obj.sex
}
// 这一步是继承的关键
Person1.prototype = Object.create(Person.prototype)
Person1.prototype.play = function(value){
    console.log(value)
}
var p2 = new Person1({name:"鸡蛋", age: 118, sex: "男"})

说一下数组如何去重,你有几种方法?

let arr = [1,1,"1","1",true,true,"true",{},{},"{}",null,null,undefined,undefined]

// 方法1
let uniqueOne = Array.from(new Set(arr)) console.log(uniqueOne)

// 方法2
let uniqueTwo = arr => {
    let map = new Map(); //或者用空对象 let obj = {} 利用对象属性不能重复得特性
    let brr = []
    arr.forEach( item => {
        if(!map.has(item)) { //如果是对象得话就判断 !obj[item]
            map.set(item,true) //如果是对象得话就obj[item] =true 其他一样
            brr.push(item)
        }
    })
    return brr
}
console.log(uniqueTwo(arr))

//方法3
let uniqueThree = arr => {
    let brr = []
    arr.forEach(item => {
        // 使用indexOf 返回数组是否包含某个值 没有就返回-1 有就返回下标
        if(brr.indexOf(item) === -1) brr.push(item)
        // 或者使用includes 返回数组是否包含某个值 没有就返回false 有就返回true
        if(!brr.includes(item)) brr.push(item)
    })
    return brr
}
console.log(uniqueThree(arr))

//方法4
let uniqueFour = arr => {                                         
     // 使用 filter 返回符合条件的集合
    let brr = arr.filter((item,index) => {
        return arr.indexOf(item) === index
    })
    return brr
}
console.log(uniqueFour(arr))

说一下类组件和函数组件的区别?

1. 语法上的区别:

函数式组件是一个纯函数,它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的,而且class组件需要创建render并且返回React元素,语法上来讲更复杂。

2. 调用方式

函数式组件可以直接调用,返回一个新的React元素;类组件在调用时是需要创建一个实例的,然后通过调用实例里的render方法来返回一个React元素。

3. 状态管理

函数式组件没有状态管理,类组件有状态管理。

4. 使用场景

类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件(函数式组件不用创建实例,所有更高效),一般情况下能用函数式组件就不用类组件,提升效率。

说一下你对盒模型的理解?

CSS3中的盒模型有以下两种:标准盒模型、IE盒模型
盒模型都是由四个部分组成的,分别是margin、border、padding和content
标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同
1、标准盒模型的width和height属性的范围只包含了content
2、IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的box-sizing属性来改变元素的盒模型;
1、box-sizing:content-box表示标准盒模型(默认值)
2、box-sizing:border-box表示IE盒模型(怪异盒模型)

写版本号排序的方法

题目描述:有一组版本号如下['0.1.1', '2.3.3', '0.302.1', '4.2', '4.3.5', '4.3.4.5']。现在需要对其进行排序,排序的结果为 ['4.3.5','4.3.4.5','2.3.3','0.302.1','0.1.1']

实现代码如下:

arr.sort((a, b) => {
  let i = 0;
  const arr1 = a.split(".");
  const arr2 = b.split(".");

  while (true) {
    const s1 = arr1[i];
    const s2 = arr2[i];
    i++;
    if (s1 === undefined || s2 === undefined) {
      return arr2.length - arr1.length;
    }

    if (s1 === s2) continue;

    return s2 - s1;
  }
});
console.log(arr);

冒泡排序--时间复杂度 n^2

题目描述:实现一个冒泡排序

实现代码如下:

function bubbleSort(arr) {
  // 缓存数组长度
  const len = arr.length;
  // 外层循环用于控制从头到尾的比较+交换到底有多少轮
  for (let i = 0; i < len; i++) {
    // 内层循环用于完成每一轮遍历过程中的重复比较+交换
    for (let j = 0; j < len - 1; j++) {
      // 若相邻元素前面的数比后面的大
      if (arr[j] > arr[j + 1]) {
        // 交换两者
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  // 返回数组
  return arr;
}
// console.log(bubbleSort([3, 6, 2, 4, 1]));

DNS如何工作的

DNS 的作用就是通过域名查询到具体的 IP。DNS 协议提供的是一种主机名到 IP 地址的转换服务,就是我们常说的域名系统。是应用层协议,通常该协议运行在UDP协议之上,使用的是53端口号。

因为 IP 存在数字和英文的组合(IPv6),很不利于人类记忆,所以就出现了域名。你可以把域名看成是某个 IP 的别名,DNS 就是去查询这个别名的真正名称是什么。

当你在浏览器中想访问 www.google.com 时,会通过进行以下操作:

  • 本地客户端向服务器发起请求查询 IP 地址
  • 查看浏览器有没有该域名的 IP 缓存
  • 查看操作系统有没有该域名的 IP 缓存
  • 查看 Host 文件有没有该域名的解析配置
  • 如果这时候还没得话,会通过直接去 DNS 根服务器查询,这一步查询会找出负责 com 这个一级域名的服务器
  • 然后去该服务器查询 google.com 这个二级域名
  • 接下来查询 www.google.com 这个三级域名的地址
  • 返回给 DNS 客户端并缓存起来

我们通过一张图来看看它的查询过程吧

标签:面试题,obj,前端,查询,return,域名,DNS,服务器,自检
From: https://www.cnblogs.com/loveX001/p/16783235.html

相关文章

  • 前端工程师面试题自检篇(一)
    图片懒加载与普通的图片懒加载不同,如下这个多做了2个精心处理:图片全部加载完成后移除事件监听;加载完的图片,从imgList移除;letimgList=[...document.querySelec......
  • 解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)
    解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)奶爸码农2019年11月29日10:04 ·  阅读4470关注1引言为了了解当前前端的发展趋势,让我们从国内各大互联......
  • 2022 最新 Java 基础 面试题(二)
    2022最新Java基础面试题(二)​​下面列出这份Java面试问题列表包含的主题​​​​1、Java中能创建volatile数组吗?​​​​2、volatile能使得一个非原子操作变成原......
  • 【面试题】不使用canvas, 绘制出一个 三角形,以及 等腰三角形
    面试遇到的,面试题面试时只回答出,rotate+hidden的方式自己想出了两种,rotate+hidden和linear-gradientborder和clip-path的方式借鉴自网络,border点击查看代码<!DOCTY......
  • 1、前端开发:HTML知识总结——网页结构
            HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本......
  • 前端面试总结15-vue高级特性
    1.自定义v-model:    2.$nextTick与refsVue是异步渲染,data改变后Dom不会立即渲染,$nextTick会在DOM渲染之后被触发,以获取最新的DOM节点refs用于获取dom节点 ......
  • 前端_vue3引入Element-plus
    element-plus官网:https://element-plus.gitee.io/zh-CN/component/button.html1、安装element-plusnpminstallelement-plus-D2、在index.js中导入element-plusim......
  • 看似简单的一道SQL面试题,你是否能够很快写出答案?
    如果觉得文章写得好,如果你想要博客文章中的数据,请关注公众号:【数据分析与统计学之美】,进群和作者交流!  近期在群里面看到了如下这样一个面试题目,这个题目其实难度不大,但......
  • 没有窗口函数,你能很快做出这道MySQL面试题吗?
      这是另外一个面试题目,相对难说有点难度,由于MySQL8.0以前没有“窗口函数”,当你碰到了这个题目,你是否能够很快写出这个答案来呢?请使用上述数据,完成如下效果:建表语句creat......
  • ××教育Excel数据分析面试题
    如果觉得文章写得好,如果你想要博客文章中的数据,请关注公众号:【数据分析与统计学之美】,进群和作者交流!目录  ​​1、用颜色标记重复值​​​ ​​2、用颜色标记出姓名中......