").text(str).html();
};
const htmlDecoderJq = (str) => {
return $("
").html(str).text();
};
// JS
const htmlEncoderJs = (str) => {
let div = document.createElement("div");
div.textContent = str;
return div.innerHTML;
};
const htmlDecoderJs = (str) => {
let div = document.createElement("div");
div.innerHTML = str;
return div.textContent;
};
```
## JS 中定义变量的 var, let, const 有什么区别
`var`是 ES5 中定义变量的方式，定义的变量只有全局作用域和函数作用域之分
ES6 引入了`let`和`const`，前者定义的变量有了块级作用域的概念。后者表示定义一个常量，这里的常量用 C 语言来说，类似于 C 的指针，定义一个指针为常量，只是说这个指针不能指向别的内存地址(不能指向别的对象)，但是其自身内存地址的内容是可以访问和修改的
## 数组去重的方法
数组去重的方式网上太多了，总结起来就三大类，首先直接遍历，不使用数组的其他方法；然后可以使用数组的方法进行去重，或者使用 ES6 的 Set 和 Map 数据结构；最后扩展一下，考虑下其他数据类型的去重结果
1. 使用原始方法
```javascript
function distinct(arr) {
var resArr = [];
for (var i = 0; i < arr.length; i++) {
var cur = arr[i];
for (var j = 0; j < resArr.length; j++) {
if (cur === resArr[j]) {
break;
}
}
if (j === resArr.length) {
resArr.push(cur);
}
}
return resArr;
}
```
2. 使用数组方法(splice)，会修改原数组
```javascript
function distinct(arr) {
for (var i = 0; i < arr.length; i++) {
var cur = arr[i];
for (var j = i + 1; j < arr.length; j++) {
if (cur === arr[j]) {
arr.splice(j--, 1); // 数组长度动态变化，j记得减1
}
}
}
return arr;
}
```
3. 使用数组方法(indexOf+filter)
关于这两个方法也可以只用其一，搭配其他方法，或者自己写循环，但是原理差不多
```javascript
const distinct = (arr) => {
return arr.filter((v, k) => arr.indexOf(v) === k);
};
```
4. 使用数组方法(sort+filter)，会修改原数组
这两个方法也可以只选其一，搭配其他方法使用，或者自己写循环，但是原理差不多
```javascript
const distinct = (arr) => {
return arr.sort().filter((v, k) => v !== arr[k + 1]);
};
```
5. ES6 Map(Map.prototype.set()返回原 Map)
```javascript
const distinct = (arr) => {
const resMap = new Map();
return arr.filter((v) => !resMap.has(v) && resMap.set(v, 1));
};
```
6. ES6 Set
```javascript
const distinct = (arr) => {
return [...new Set(arr)]; // 或者 return Array.from(new Set(arr));
};
```
7. 其他数据类型使用上述方法去重的检验结果
```javascript
var arr = [
1,
2,
null,
2,
"1",
"1",
NaN,
NaN,
undefined,
null,
new String(1),
undefined,
new String(1),
];
```
| 方法 | 结果 |
| -------------- | ---------------------------------------------------------------------- |
| 原始方法 | `NaN`和`String {"1"}`不能去重 |
| splice | `NaN`和`String {"1"}`不能去重，`undefined`为`empty` |
| filter+indexOf | `String {"1"}`不能去重，`NaN`全被过滤 |
| filter+sort | `NaN`不能去重，`undefined`全被过滤，`1, String {"1"}, "1"`无法正确判断 |
| Map | `String {"1"}`不能去重 |
| Set | `String {"1"}`不能去重 |
以上的结果只要关注几个点
1. `new String {"1"}`和`new String {"1"}`并不是同一个对象，如果非要把他们当成同一对象，我们可以使用对象的`hasOwnProperty(typeof arr[i] + arr[i])`来判断，如果没有就新增一个 key，但是我还是认为上面的两个是不同的对象实例
2. 要注意`console.log(NaN===NaN) // false`，所以造成有些方法不能去重，有些筛选机制直接过滤，但是在 Map 和 Set 中，即使这两个不相等，但是会把他们当成相同的东西看待
3. 最后就是 sort 方法，MDN 给出的解释非常详细
> The **`sort()`** method sorts the elements of an array _in place_ and returns the array. The sort is not necessarily stable. The default sort order is according to string Unicode code points.
`sort()`对于`1, String{"1"}, "1"`来说是一视同仁的，因此在此基础上使用`filter()`判断时和三者在原数组中的顺序有关。不能准确去重
## DOM 节点的深度遍历和广度遍历
广度遍历（BFS）比较简单，类似于二叉树的层次遍历，使用队列模拟当前一层，每出队列一个节点，则将其加入到最终结果数组里，并且将其的子节点全部入队，直到队列为空
```javascript
// BFS
function travelsalBFS(root) {
var tempArr = [];
var resArr = [];
tempArr.push(root);
while (tempArr.length) {
let len = tempArr.length;
while (len--) {
let tempNode = tempArr.shift();
resArr.push(tempNode);
if (tempNode.children) {
tempArr = [...tempArr, ...Array.from(tempNode.children)];
}
}
}
return resArr;
}
```
当然，我们也可以不出队列，只入队列，使用`index`记录下当前访问到的节点，每访问完就将其子节点全部入队，直到全部节点都被访问
```javascript
// BFS 不使用临时array
function travelsalBFS2(root) {
var resArr = [];
resArr.push(root);
var index = 0;
while (resArr[index]) {
resArr.push(...Array.from(resArr[index++].children));
}
return resArr;
}
```
深度遍历稍微复杂一点，我想到的是从根节点开始，每次访问其第一个子节点，直到某个节点没有子节点，此时将该元素从临时数组`pop`出来，访问其兄弟节点（如果访问不到则继续`pop`），直到访问到一个存在的兄弟节点，并把它作为当前节点，重复步骤。那么何时结束呢？刚才说到访问不到兄弟节点会一直`pop`，当把第一个根节点 pop 出来的时候，也就访问完毕了，可以返回结果数组
```javascript
// DFS
function travelsalDFS(root) {
var tempArr = [root];
var resArr = [root];
var curEle = root;
while (tempArr.length || curEle.children.length !== 0) {
if (curEle.children.length === 0) {
curEle = tempArr.pop();
while (!curEle.nextElementSibling) {
curEle = tempArr.pop();
// 这个地方，如果回到root，则遍历完毕！
if (!curEle || curEle === root) {
return resArr;
}
}
curEle = curEle.nextElementSibling;
} else {
curEle = curEle.firstElementChild;
}
// 访问到的节点都要存起来，不同的是临时数组会pop出去，从而向上返回
resArr.push(curEle);
tempArr.push(curEle);
}
}
```
关于节点访问，我这里为了简单起见都称作节点了。但是要记住 DOM 元素和 DOM 节点是不同的，准确来说以上的应该都是 DOM 元素，因为 DOM 节点还包括了文本节点，注释节点等等
要注意`children`和`childNodes`，`firstElementChild`和`firstChild`，`nextElementSibling`和`nextSibling`的区别，前者访问到的是元素，例如`children`返回的是`HTML Collection`。后者访问到的是节点，例如`childNodes`返回的是`NodeList`，这两种类型都是类数组类型，可以使用`Array.from`转换成数组
"; // 伪装图片
document.body.appendChild(a);
```
当下次别的用户访问时，这段代码被记载，一旦用户不小心点击到伪装图片，cookie 就会被发送到我们的主机
从上面来看，防治 XSS 有两种主要方式
1. **防止特殊的字符出现**，这些字符主要是对于 HTML 文档有特殊意义的字符
客户端表单数据值类型检测和验证
服务器对用户提交的表单数据进行严格验证
主要是将相应的符号转换成 HTML 实体字符，像`<`或者`>`这些字符是不允许出现在文本中的，因为他们对于 HTML 文档来说有特殊意义。如果我们要在 HTML 文档中展示这些字符，应该使用它们的转义字符，例如`<`转义字符为`<`，所以客户端或者服务器应该将提交上来的这些字符进行编码，或者过滤掉这些字符
2. 让服务器将重要的 cookie 标记为`http-only`，也就是在 response header 中设置
`set-cookie: xxx;HttpOnly`
这里分别使用 jQuery 和原生 JS 实现对特殊字符的加密和解密
```javascript
// jQuery
const htmlEncoderJq = (str) => {
return $("