扁平数组转为树结构题目描述：给定以下数据格式的扁平数组： {代码...} 你需要将其转换为以下树状结构： {代码...} 请编写一个名为 flatArrayToTree 的函数，接受上述类型的扁平数组作为参数，并返回相应的树状结构数组。方案一：使用Map和递归 {代码...} 方案一解释首先，我们创建一个 Map 来存储每个节点及其子节点列...

Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 API (Permissions API) 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取剪贴板内容。

在一些业务场景，比如高亮文本、输入编辑、等场景中需要对光标和选区进行操作时，可以使用浏览器提供的 Selection 对象和 Range 对象来操作光标和选区。

因为最近需要实现前端导出 excel 文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了 xlsx-style 这个项目，它可以对导出的 excel 文件进行一些样式上的修改，这个项目是 SheetJS 的一个分支。其实 SheetJS 也是支持修改导出文件的样式的，不过是在它的专业版中， SheetJS 分为社区版...

CSRF，是跨站请求伪造（Cross Site Request Forgery）的缩写，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。

XSS 是跨站脚本攻击（Cross Site Scripting）的简写，但是从首写字母命名的方式来看，应该取名 CSS，但这样就和层叠样式表（Cascading Style Sheets，CSS）重名了，所以取名为 XSS。

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。

首先 Promise 新建后立即执行，所以会先输出 1，2，而 Promise.then() 内部的代码在 当次 事件循环的 结尾 立刻执行 ，所以会继续输出4，最后输出3。

CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。

最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次，希望能加深理解吧。

感觉很有趣，就上网查了查怎么做，大部分的说法就是用美图秀秀的拼图功能来做， 在微信小程序中也有专门做心形拼图的小程序，我都试了试之后，感觉还可以更加简单一些，于是我就自己做了个小程序。

说明 JavaScript 中没有真正意义上的函数重载。 函数重载 函数名相同，函数的参数列表不同(包括参数个数和参数类型)，根据参数的不同去执行不同的操作。 我们举个例子看看 {代码...} 在JavaScript中，同一个作用域，出现两个名字一样的函数，后面的会覆盖前面的，所以 JavaScript 没有真正意义的重载。 但是有各种办法，...

写这篇文章是因为某天看到这样一个公式 r=a(1-cosθ) ，我上网搜了下，原来是笛卡尔心形线的极坐标方程，这个方程里面的确有一个浪漫又悲情的爱情故事，感兴趣的朋友可以点这里看看，而至于这个故事是真是假，这 并不重要。

opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。

实现这个效果的思路就是，一个大的div元素，设置好一个背景，生成一定数量小的div元素，背景设置成同样的图片，但是每个小div元素的 background-position 属性值不同，整齐的覆盖在大的div元素上，这样就能拼成一张完整的背景图，鼠标移入时，让所有小的div元素移动和变形。总的来说就是两步：1、生成小的div元素，整齐...

实现 字符串类型的数字 相加的一个方法。比如：输入 '11111111111111111' ，'22222222222222222'，返回 '33333333333333333'

看图来分析下，我们需要实现哪些效果。1、雨滴下落效果，移动鼠标控制下落方向 2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同

实现这个效果，思路是这样的 1、先将需要排序的数组，进行冒泡排序，记录每一步的内容，存放在一个数组中2、利用canvas，实现一个 darw 方法，能将一步的内容画到页面上 3、实现动画效果，利用定时器，每隔一段时间，调用 darw 方法，画出一步到页面上

数组中有 n 个数，比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过 n-1（数组的 length - 1） 轮，就完成了所有数的排序。

实现这个效果，需要掌握的知识不用很多，知道简单的CSS，会用JS 获取元素， 能绑定事件基本就足够了。 好的，我们直接来看代码，注释已经写的很详细了，不想看有注释的，点这里。

这个方法的作用是为了跟其他的 JavaScript对象如 null，数组，宿主对象（documents），DOM 等作区分，因为这些用 typeof 都会返回object。

上面这段代码，用了事件委托，把事件绑在了ul上，没有给每个 li 都去绑定事件，看上去也是实现效果了，但是如果 li 里面还有子元素，那么这么去绑定事件就不行了，当点击 li 里面的子元素时，就出现问题了。 比如，我们把上面的代码改成这样，看看效果。

事件委托，你叫他 事件代理 也可以，都是一个意思。 事件：JavaScript 侦测到的行为就是事件，比如鼠标点击、某个键盘的键被按下、元素获得焦点。 委托：就是把原来自己做的事，交给别人做。

setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

这篇文章主要介绍的就是一些chrome浏览器的小技巧，很简单，希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的，所以建议大家用最新版的，目前最新版是62，版本很重要，如果发现有些技巧不起作用，请先查看浏览器的版本。

写箭头函数，我们记住一个顺序就好，参数、箭头、函数体、这个顺序记住就足够了，参数、箭头、函数体、这三个是必须的，函数名可以没有，但这三项必须有，一些简写的方式也是简写这三项里的东西。

说明 这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。 解释 方式一 效果图 代码 {代码...} 代码不多，我们来看看， background: linear-gradient(to right, red, blue); 这行是给背景设置为渐变色，这里注意一点，这样是简写了，其实是给background-image 设置为渐变色，不...

每个RegExp对象都包含5个属性，source、global、ignoreCase、multiline、lastIndex。 source：是一个只读的字符串，包含正则表达式的文本。

问题： 一个div宽度不固定，高度固定，采用Flex布局，它里面有两个元素一个img宽度占40%，高度占100%，一个p元素，宽度占60%，高度占100%，调整浏览器窗口大小，要保证，img元素不变形，宽高比不变，怎么办！

这段代码，我相信大家应该知道最后为什么结果会是 1 和 报错 的，在函数内声明的变量只在函数体内定义，它们是局部变量，作用域是局部的，所以 函数 fun1 调用后，找不到a，就报错了，JavaScript采用词法作用域，函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，所以我们只要改改上面函数 fun1的位置，它...