前端开发面试题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 决定是否保留该值

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

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

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

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

注意点：

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

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

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

推荐使用Set()去重方法

• 事件委托就是利用冒泡原理，把事件加到父元素或者祖先元素上，触发来执行效果
• 其优点为：可以显著的提高事件的处理速度，减少内存的占用
• 事件冒泡的原理：事件按照从最特定的目标到最不特定的目标的顺序触发，也就指事件向上传导，当后代元素上的事件被触发时，其祖先的相同事件也会被触发，而事件就是从dom树层层往上传递，直至传递到dom的根节点

?

?

HTML：标记语言

CSS：标记语言

JavaScript：动态脚本语言

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

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

• 对于静态类型，在编译后会大量利用已知类型的优势，如 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 文件下载后同执行阶段一起在网页的加载和渲染过程中实施的，所以对于它们的处理时间有严格要求。

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

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

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

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

ES5之数据类型 - 简书

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

1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送

原理：script标签引入js文件不受跨域影响。不仅如此，带src属性的标签都不受同源策略的影响。通过动态创建 script，再请求一个带参网址实现跨域通信。

此方案仅限主域相同，子域不同的应用场景。两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。

a 欲与 b 跨域相互通信，通过中间页 c 来实现。 三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。

通过 iframe 的 src 属性由外域转向本地域，跨域数据即由iframe 的 window.name 从外域传递到本地域。

可以跨域操作的 window 属性之一。

服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带cookie 请求，前后端都需要设置。

启一个代理服务器，实现数据的转发

web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议

以上，参考nginx - 前端常见跨域解决方案（全） - 个人文章 - SegmentFault 思否

js前端解决跨域的八种实现方案_ja【【微信】】技巧_脚本之家

共八种，按照类型来分有原始数据类型和引用数据类型：

栈：原始数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt

堆：引用数据类型：Object【Object是个大类，function函数、array数组、date日期...等都归属于Object】

Symbol是原始数据类型， 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。