淘姐妹

淘姐妹

33道前端开发理论面试题附答案 前端面试题2023

手机 0

淘宝搜：【天降红包222】领超级红包，京东搜：【天降红包222】
淘宝互助，淘宝双11微信互助群关注公众号 【淘姐妹】

前端开发面试题2020,前端开发面试笔试题,前端开发面试技巧,前端开发面试常见问题

const arr =?[1,?1,?'1',?17,?true,?true,?false,?false,?'true',?'a',?{},?{}];

利用对象属性key排除重复项

遍历数组，每次判断新数组中是否存在该属性，不存在就存储在新数组中

并把数组元素作为key，最后返回新数组

这个方法的优点是效率高，缺点是使用了额外空间

作用：Set() 用来存储键，是键的集合；即用来管理一组键(key)

Set是一系列无序、没有重复值的数据集合，传入一个需要去重的数组，Set会自动删除重复的元素

再将Set转数组返回。此方法效率高，代码清晰，缺点是存在兼容性问题

? ? ? ?作用： Map() 用来存储键值对，是键值对的集合；即用来管理键值对(key:value)

　　利用Map的键值对同名覆盖，再将Map转数组

filter把接收的函数依次作用于每一个数组项，然后根据返回值 true or false 决定是否保留该值

优点在于可在去重时插入对元素的操作，可拓展性强

【【微信】】()把结果继续和序列的下一个元素做累加计算

利用【【微信】】遍历和传入一个空数组作为去重后的新数组，然后内部判断新数组中是否存在当前遍历的元素，不存在就插入新数组

缺点在于时间消耗多，内存空间也额外占用

把数组的值存成 Object 的 key 值，比如Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

注意点：

在数据量较低时，以上五个方法无较为明显的区别（10000条）

高于10000条时，前两种方法时间消耗最少，后三种时间消耗依次增加

第一种方法空间占用多，当下很多项目不再考虑低版本游览器兼容性问题

推荐使用Set()去重方法

参考回答： 在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对
于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。
参考回答：
简介：事件委托，不是每个子节点单独设置事件*，而是事件*设置在其父节点上， 然后利用冒泡原理影响设置每个子节点。
举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
参考回答：
  • 事件委托就是利用冒泡原理，把事件加到父元素或者祖先元素上，触发来执行效果
  • 其优点为：可以显著的提高事件的处理速度，减少内存的占用
  • 事件冒泡的原理：事件按照从最特定的目标到最不特定的目标的顺序触发，也就指事件向上传导，当后代元素上的事件被触发时，其祖先的相同事件也会被触发，而事件就是从dom树层层往上传递，直至传递到dom的根节点
参考回答：
1、是什么？
  • 事件代理：把一个元素响应事件的函数委托到另一个元素上，也叫事件委托；
  • 事件流的三个阶段：1、捕获阶段----->2、目标阶段----->3、冒泡阶段；
  • 事件代理（事件委托）主要就是利用了的特点，是在冒泡阶段完成的；

2、好处：?只操作一次DOM，提高性能，减少事件绑定，从而减少内存占用。

事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。

当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后再外层元素上去执行函数。

可以在父元素层面阻止事件向子元素传播，也可代替子元素执行某些操作。
参考回答：
使用正则(^\s*)|(\s*$)即可

?

参考回答：
JavaScript是一门 函数为先的轻量级解释型或者即时编译型的编程语言，或者说JavaScript 是一种基于 原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

?

HTML：标记语言

CSS：标记语言

JavaScript：动态脚本语言

  1. 面向对象语言，是基于原型的面向对象；
  2. 脚本语言（动态语言）；
  3. 事件驱动，，运行在客户端浏览器上；
  4. 解释性语言，不用预编译，直接解析执行代码；
  5. 动态性，程序在运行时可以改变其结构；
  6. 是弱类型语言（&松散类型），较为灵活；
  7. 单线程与异步处理共存，回调函数事件；
  8. 与操作系统无关，跨平台的语言。

js语言的特点_A了LONE的博客-CSDN博客

参考回答：
静态类型，编译的时候就能够知道每个变量的类型，编程的时候也需要给定类型，如Java 中的整型 int，浮点型 float 等。C、C++、Java 都属于静态类型语言。
动态类型，运行的时候才知道每个变量的类型，编程的时候无需显示指定类型，如JavaScript 中的 var、PHP 中的$。JavaScript、Ruby、Python 都属于动态类型语言。
静态类型还是动态类型对语言的性能有很大影响。
  • 对于静态类型，在编译后会大量利用已知类型的优势，如 int 类型，占用 4 个字节，编译后的代码就可以用内存地址加偏移量的方法存取变量，而地址加偏移量的算法汇编很容易实现。
  • 对于动态类型，会当做字符串通通存下来，之后存取就用字符串匹配。
编译型语言
  • 像 C、C++，需要编译器编译成本地可执行程序后才能运行，由开发人员在编写完成后手动实施。用户只使用这些编译好的本地代码，这些本地代码由系统加载器执行，由操作系统的 CPU 直接执行，无需其他额外的虚拟机等。
  • 源代码=》抽象语法树=》中间表示=》本地代码
解释性语言
  • 像 JavaScript、Python，开发语言写好后直接将代码交给用户，用户使用脚本解释器将脚本文件解释执行。对于脚本语言，没有开发人员的编译过程，当然，也不绝对。
  • 源代码=》抽象语法树=》解释器解释执行。
  • 对于 JavaScript，随着 Java 虚拟机 JIT 技术的引入，工作方式也发生了改变。可以将抽象语法树转成中间表示（字节码），再转成本地代码，如 Ja【【微信】】，这样可以大大提高执行效率。也可以从抽象语法树直接转成本地代码，如 V8。
  • Java 语言，分为两个阶段。首先像 C++语言一样，经过编译器编译。和 C++的不同，C++编译生成本地代码，Java 编译后，生成字节码，字节码与平台无关。第二阶段，由Java 的运行环境也就是 Java 虚拟机运行字节码，使用解释器执行这些代码。一般情况下，Java 虚拟机都引入了 JIT 技术，将字节码转换成本地代码来提高执行效率。
  • 注意，在上述情况中，编译器的编译过程没有时间要求，所以编译器可以做大量的代码优化措施。
  • 对于 Java，Java 语言将源代码编译成字节码，这个同执行阶段是分开的。也就是从源代码到抽象语法树到字节码这段时间的长短是无所谓的。
  • 对于 JavaScript，这些都是在网页和 JavaScript 文件下载后同执行阶段一起在网页的加载和渲染过程中实施的，所以对于它们的处理时间有严格要求。
参考回答：
typeof 用来检测数据类型的运算符
typeof在判断null、array、object以及函数实例（new + 函数）时，得到的都是object。
数组是属于object类型的，也就是引用类型，所以不能使用?typeof?来判断其具体类型。

（ES5新增数组方法，判断数组是不是数组）

（把对象转化成字符串和一个已知的对象对比）

（Array.prototype表示Array的构造函数的原型isPrototypeOf()方法可以判断当前对象是否是另一个对象的原型，或者说一个对象是否被包含在另一个对象的原型链中）

（Object.getPrototypeOf()方法返回指定对象(arr)的原型，然后和Array的原型对比）

参考回答：
typeof 只能判断是 object,可以判断一下是否拥有数组的方法

ES5之数据类型 - 简书

? 跨域的原理
参考回答：
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： 、

联系我们

合作或咨询可通过如下方式：

QQ：

邮箱：

关注我们

淘姐妹