分享前端工程化、动效魔法与性能之舞！

对于树这个结构，最常见的就是二叉树。我们除了需要了解二叉树的基本操作之外，还需要了解一些特殊的二叉树，比如二叉搜索树、平衡二叉树等，另外还要熟悉二叉树的遍历方式，比如前序遍历、中序遍历、后序遍历、层序遍历。另外还要知道二叉树的常用遍历的方式：深度优先遍历和广度优先遍历。

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

​超文本传输安全协议是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用SSL/TLS来加密数据包。HTTPS的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。安全层的主要职责就是对发起的HTTP请求的数据进行加密操作 和 对接收到的HTTP的内容进行解密操作。

实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，CSS3 中可以使用 transition 和 animation 来实现，HTML5 中的canvas也可以实现。除此之外，HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。

src和href的区别，src和href都是用来引用外部的资源，它们的区别如下。src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在页面底部。href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

在计算机里，不保存在连续存储空间中，而每一个元素里都保存了到下一个元素的地址的数据结构，我们称之为链表（Linked List）。链表上的每一个元素又可以称它为节点（Node），而链表中第一个元素，称它为头节点（Head Node），最后一个元素称它为尾节点（Tail Node）。链表的结构定义中，包含了两个信息，一个是数据信息，用来存储数据的，也叫做数据域；另外一个是地址信息，用来存储下一个节点地址的，也叫做指针域。

CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。典型的CDN系统由下面三个部分组成：1. 分发服务系统：最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步，把列......

1. 概念XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。攻击者可以通过这种攻击方式可以进行以下操作：1. 获取页面的数据，如DOM、cookie、localStorage；2. DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；

1. 最关键的就是var x = a(5)，函数a是在全局作用域调用，所以函数内部的this指向window对象。需要注意的是最后一个定时器打印出的p1其实是.finally的返回值，我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值，而这道题中.finally上一个Promise是.then()，但是这个.then()并没有返回值，所以p1打印出来的Promise的值会是undefined，如果在定时器的下面加上一个return 1，则值就会变成1。

Vue的基本原理：当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

这是一道让人鄙视的面视题，如何才能实现呢？

1.onmouseover与onmouseout鼠标经过时自身触发事件，其子元素同时也触发该事件；父亲有的东西，儿子也有，支持冒泡2.onmouseenter与onmouseleave鼠标经过时自身触发事件，其子元素不触发该事件。父亲的东西就是父亲的，儿子没有，不支持冒泡......

摘要：高阶函数是指能接收或返回函数的函数。主要介绍了四种高阶函数：1) Map - 遍历数组并返回新数组，接收回调函数和可选this值；2) Reduce - 通过回调函数累积计算，接收初始值参数；3) Filter - 根据回调函数的布尔返回值过滤数组元素；4) Sort - 通过比较函数对数组排序，无比较函数时按字符串Unicode值排序。这些高阶函数都通过回调函数实现对数组的不同操作方式。

对于前端项目开发过程中，偶尔会出现层叠数据结构的数组，我们需要将多层级数组转化为一级数组（即提取嵌套数组元素最终合并为一个数组），使其内容合并且展开。那么该如何去实现呢?需求：多维数组=>一维数组1.调用ES6中的flat方法let list= [1, [2, [3, [4, 5]]],6];let newList = list.flat(Infinity);console.log(newList);// [1,2,3,4,5,6]2.replace + split..

此方法判断数组中是否存在某个值，如果存在，则返回数组元素的下标，否则返回-1。

摘要：JavaScript中forEach循环无法通过return中断，可通过两种方式实现中断：1)使用try-catch块，在特定条件时抛出异常；2)改用every(遇到false停止)或some(遇到true停止)方法替代forEach。这两种方法都能实现循环中断效果，相比forEach更加灵活可控。

类数组对象（如arguments、HTMLCollection等）不能直接使用数组方法，需先转换为数组。常见转换方法包括：1.Array.prototype.slice.call()；2.ES6的Array.from()；3.展开运算符[...arguments]；4.concat+apply组合。这些方法都能将类数组转换为真正的数组，从而可以使用reduce等数组方法。例如通过Array.from(arguments)转换后，即可用reduce实现累加功能。

第一种：借助callfunction Parent(){ this.name='parent'; }function Child(){ Parent.call(this); this.type='child' };console.log(new Child);// {name: "parent",type: "child"}这样写的时候子类虽然能够拿到父类的属性值，但是问题是父类原型对象中一旦存在方法那么子类无法继承。第二种：借助原型链functi.

JavaScript对象通过 proto 指向父类对象，直到指向 Object 对象为止，这样就形成了一个原型指向的链条，即原型链。对象的 hasOwnProperty() 来检查对象自身中是否含有该属性。使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型链中有，也会返回 true。......

在JavaScript中，每当定义一个函数数据类型（普通函数、类）时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象。当函数经过 new 调用时，这个函数就成为了构造函数，返回一个全新的实例对象，这个实例对象有一个 proto 属性，指向构造函数的原型对象。......

在真实的场景中，究竟在哪些地方能体现闭包的存在？1.返回一个函数；function f1() { var a=2; return function f2() { console.log(a); //2 };};var num=f1();num();2.作为函数参数传递；var a = 1;function f1() { var a = 2; function f2() { console.log(a); }; f3(f2..

要弄清闭包产生的原因，首先要明白作用域链的概念。在ES5中只存在两种作用域：全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链。值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条。比如：var a = 1;function f1() { var a = 2; return function f2() { console.log(a); //

摘要：闭包是通过外层函数包裹变量和内层函数实现的编程结构，既能重用变量又避免污染。其实现步骤为：1）外层函数包含变量和内层函数；2）外层返回内层函数；3）外部变量接收返回函数。闭包比普通函数更耗内存，使用后需将外部变量置null以释放资源。闭包结合了全局变量重用性和局部变量安全性。

这是一道让许多人都为之抓狂的面试题，非常有意思，实现代码如下；var a= { value: 0, valueOf:function() { this.value++; return this.value; }};console.log(a==1&&a==2);// true

对象转原始类型时，会调用[ToPrimitive]函数，其逻辑为：优先调用Symbol.toPrimitive方法，若不存在则依次调用valueOf()和toString()。示例中obj定义了Symbol.toPrimitive返回6，因此obj+1输出7。若都未返回原始类型会报错。

摘要：JavaScript中，===要求值和类型都相等，而==会进行类型转换。==的转换规则包括：类型相同时比较值；null和undefined相等；字符串和数字比较时字符串转数字；布尔值转数字；对象会转为字符串再比较。例如，{a:1}==true返回false，而{a:1}=="[object Object]"返回true。

JavaScript类型转换分为三种：转数字、转布尔值和转字符串。转换规则包括：1）转数字时，空字符串转0，非数字字符串转NaN；2）转布尔值时，空值、0、NaN和空字符串转false，其他转true；3）转字符串时，true转"true"，false转"false"，数字直接转字符串形式。Boolean转字符串特指true转为"true"的情况。

摘要：JavaScript中[] == -[]结果为true，这源于宽松相等(==)的隐式类型转换。空数组-[]先被转换为数字0，比较变为[] == 0；数组通过toString()转为空字符串""，再转为数字0，最终0 == 0返回true。整个过程涉及数组转字符串、字符串转数字的隐式转换。使用严格相等===会直接返回false，因为不进行类型转换且类型不同。

ES5比较值使用"=="（自动类型转换）和"==="（严格相等），但存在NaN不等于自身、+0等于-0的问题。ES6引入Object.is方法解决这些问题，其不同在于：+0不等于-0，NaN等于自身。源码实现通过1/x比较处理±0，利用NaN自身不等特性判断NaN相等。该方法与===基本一致，仅针对这两个特殊情况做了优化处理。

核心原型链的向上查找。

其实就是自定义instanceof行为的一种方式，这里将原有的instanceof方法重定义，换成了typeof，因此能够判断基本数据类型。

因此采用typeof判断对象数据类型是不合适的，采用instanceof会更好，instanceof的原理是基于原型链的查询，只要处于原型链中，判断永远为true。在JavaScript中中，对于原始类型来说，除了null都可以调用typeof显示正确的类型。但对于引用数据类型，除了函数之外，都会显示"object"。...

BigInt是JavaScript中用于表示大整数的数据类型，解决了Number类型无法精确表示超过2^53-1整数的问题。通过在数字后加n或使用BigInt()创建，支持常规算术运算但不支持与Number混合运算。BigInt不能用于Web API或需要Number的函数，在布尔运算中类似Number（0n为false，其他为true）。目前主流浏览器已支持BigInt，但完全标准化仍需时间。

摘要：计算机用二进制存储小数时，由于位数限制会出现精度丢失，如0.1+0.2=0.30000000000000004。解决方法是通过设置误差范围（机器精度），在ES6中可用Number.EPSILON（2^-52）来判断。示例函数numberEpsilon比较两数差值是否小于该值，从而确认0.1+0.2≈0.3成立。这种方法有效解决了浮点数运算精度问题。

摘要：当用字符串调用toString()方法时，JavaScript会隐式执行以下操作：1)创建Object实例包装字符串；2)调用实例的toString()方法；3)销毁实例。ES6规范不建议用new创建基本类型包装类（Boolean/Number/String），且Symbol和BigInt调用new会报错。这体现了基本包装类型的特性，即临时将基本类型转为对象后立即销毁。

摘要：JavaScript中typeof null返回"object"是一个历史遗留bug，源于早期实现时二进制标签冲突。实际上，null是原始值，表示空引用，不可变且无属性。正确检测应使用=== null或Object.prototype.toString.call()。该设计缺陷因兼容性问题保留至今，开发者需注意区分null与真实对象。

function test(person) { person.age = 26 ; person = { name: 'abc', age: 18 } return person } ;const p1 = { name: 'xyz', age: 19 };const p2 = test(p1) ;console.log(p1);console.log(p2);执行结果如下：console.log(p1);// {"name": "xyz","age": 26}.

本文介绍了JavaScript的数据类型分类。原始数据类型包括：boolean（布尔）、null（无效）、undefined（未定义）、number（数字）、string（字符串）、symbol（标识符）和bigint（大整型）。引用数据类型包括：Object（普通对象）、Array（数组）、RegExp（正则表达式）、Date（日期）、Math（数学函数）和Function（函数）。这些数据类型构成了JavaScript编程的基础要素，区分原始类型和引用类型对理解变量的存储和传递机制至关重要。

对于这个五角星而言，我们可以拆分成三个部分，如下所示：将五角星分成三部分， 对于最上面的三角，利用边框就可以快速实现，这个不难。但是下面的两个如何实现呢？其实也非常的简单，想一想，下面这两个是不是就是一个向上的三角形旋转而来呢？明白了这一点，就可以动手实现了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"