8个工程必备的JavaScript代码片段

下面是“8个工程必备的JavaScript代码片段”的完整攻略：

简介

这篇攻略主要介绍8个在前端工程中经常使用的JavaScript代码片段，这些代码片段能够提高你的代码质量和工作效率，让你的代码更加可读、可维护。

文章目录

1. forEach循环遍历数组
2. Object.keys()获取对象的属性名数组
3. 数组去重
4. 获取URL参数值
5. 判断一个对象是否为空
6. 判断两个对象是否相等
7. 将HTML转义为实体
8. 将实体转义为HTML

1. forEach循环遍历数组

forEach()方法是用于数组遍历的常用方法。它接受一个回调函数作为参数，该回调函数接收三个参数：当前元素、元素索引和数组自身。下面是一个简单的例子：

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  console.log(item, index, array);
})

输出：

1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

2. Object.keys()获取对象的属性名数组

Object.keys()方法返回一个给定对象的自身可枚举属性数组，包含对象上所有属性（不包括继承来的属性）。下面是一个例子：

const obj = { name: 'Jack', age: 20 };
const keys = Object.keys(obj);
console.log(keys);

输出：

['name', 'age']

3. 数组去重

对于一个包含重复元素的数组，可以使用ES6中的Set来进行去重：

const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4]

4. 获取URL参数值

对于一个URL地址，可以使用以下函数来获取指定参数的值：

function getUrlParam(url, key) {
  const paramsArr = url.split('?')[1].split('&');
  for (let i = 0; i < paramsArr.length; i++) {
    const param = paramsArr[i].split('=');
    if (param[0] === key) {
      return param[1];
    }
  }
}
const url = 'https://www.example.com/?id=123&name=Jack';
console.log(getUrlParam(url, 'id')); // 123

5. 判断一个对象是否为空

可以使用Object.keys()方法将对象的属性名转换为数组，然后判断该数组的长度是否为0来判断对象是否为空：

function isEmptyObj(obj) {
  return Object.keys(obj).length === 0;
}
const obj = { };
console.log(isEmptyObj(obj)); // true

6. 判断两个对象是否相等

可以使用JSON.stringify()将两个对象转换为字符串，然后再进行比较。需要注意的是，该方法只能比较简单的对象，对于包含函数或原型链对象等属性的复杂对象无法比较：

const obj1 = { name: 'Jack', age: 20 };
const obj2 = { name: 'Jack', age: 20 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

7. 将HTML转义为实体

可以使用正则表达式中的特殊字符来匹配HTML标签，然后将其转义为实体。以下是一个简单的例子：

function escapeHTML(str) {
  const escapeChars = {
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return str.replace(/[<>"']/g, char => escapeChars[char]);
}
const htmlStr = '<p>Hello "world"!</p>';
console.log(escapeHTML(htmlStr)); // &lt;p&gt;Hello &quot;world&quot;!&lt;/p&gt;

8. 将实体转义为HTML

可以使用浏览器提供的内置API将实体转换为HTML，例如使用document.createElement()创建一个p标签来显示转义后的HTML文本：

function unescapeHTML(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent;
}
const entityStr = '<p>Hello "world"!</p>';
console.log(unescapeHTML(entityStr)); // <p>Hello "world"!</p>

结语

以上就是8个在前端工程中经常使用的JavaScript代码片段，希望能够对你的工作有所帮助。