12个有用的 JavaScript 代码片段-CSDN博客

英文 | https://javascript.plainenglish.io/6-javascript-code-snippets-for-sorting-arrays-56a7049f831

翻译 | 杨小爱

在过去的几个月里，我在开发离线浏览器工具时，发现自己反复搜索我存储的 .js 文件以检索旧代码片段。

因此，我为了提升工作效率，我把一些常用 JavaScript 方法的整理为了一个列表，作为自我工作与学习的参考清单，希望这个清单也会对您有所帮助。

下面我们就开始今天的内容吧。

演示用例：查找“arr”的结果

1、数值排序 | 升序 [⇣⁰₉]

const arr = [40, 100, 1, 5, 25, 10];
arr.sort(function(a, b){
  return a-b;
});

之前：[40,100,1,5,25,10]

之后：[1,5,10,25,40,100]

说明：对于数字排序，必须创建一个 Comparator 实体或比较函数。在上面的代码片段中，这相当于

const compare = function(a, b){
return a-b;
};

排序结果是

arr.sort(compare);

2、数值排序 | 降序 [⇣⁹₀]

const arr = [40, 100, 1, 5, 25, 10];
arr.sort(function(a, b){
return b-a; // swap the positions of a and b
});

之前：[40,100,1,5,25,10]

之后：[100,40,25,10,5,1]

3、按字母排序 | 升序✷ [⇣ᴬᴢ]

const arr = ["Blue", "Orange", "Aqua", "Marine"];
arr.sort();

之前：[“Blue”、“Orange”、“Aqua”、“Marine”]

之后：[“Aqua”、“Blue”、“Marine”、“Orange”]

按字母排序的行为在 JavaScript 中不太直观。仅当数组中的所有元素都被读取为（类型）字符串时，内置的默认 sort() 函数才适用于 JavaScript 数组。

4、按字母排序 | 降序✷ [⇣ᶻᴀ]

const arr = ["Blue", "Orange", "Aqua", "Marine"];
arr.sort().reverse();

之前：[“Blue”、“Orange”、“Aqua”、“Marine”]

之后：[“Orange”、“Marine”、“Blue”、“Aqua”]

与仅适用于字符串实体的 sort() 函数不同，JavaScript 中的函数 reverse() 适用于整个数组并交换元素的位置，而不管（类型）如何。第一个元素成为最后一个元素，反之亦然。

5、日期排序 | 上升 [▲]

const arr = ["2015-03-25", "2015-02-01", "2015-01-03", "2015-02-02"];
arr.sort(function(a, b){
return new Date(a)-new Date(b);
});

之前：[“2015–03–25”、”2015–02–01”、”2015–01–03”、”2015–02–02”]

之后：[“2015–01–03”、”2015–02–01”、”2015–02–02”、”2015–03–25”]

说明：日期的排序行为与数字排序非常相似。但是，JavaScript 数组中的 String 实体必须首先被解析为 Date 对象，因为它们可以根据相对 Date 出现进行排序。

6、日期排序 | 降序[▼]

类似于数字排序…

const arr = ["2015-03-25", "2015-02-01", "2015-01-03", "2015-02-02"];
arr.sort(function(a, b){
return new Date(b)-new Date(a); // swap the positions of a and b
});

之前：[“2015–03–25”、”2015–02–01”、”2015–01–03”、”2015–02–02”]

之后：[“2015–03–25”、”2015–02–02”、”2015–02–01”、”2015–01–03”]

7、通知未保存的更改

window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = '';
});

上面的代码片段对于用户在输入字段中，输入了未保存的数据，并且，如果页面被卸载，则对将丢失的情况特别有用。

在上图中，用户上传了多个图像文件后，浏览器会提示用户是否保存了图像输出，以防止数据丢失。

8、异步上传多个文件

function readFileAsB64(file) {
return new Promise((resolve,reject) => {
let fileredr = new FileReader();
        fileredr.onload = () => resolve([fileredr.result, file.name]);
        fileredr.onerror = (err) => reject(err);
        fileredr.readAsDataURL(file);
    });
}
var uploadFile=document.getElementById('uploadFile'); // input[type='file']
uploadFile.addEventListener('change', (ev) => {  
if (!window.FileReader) {
        alert('Your browser does not support HTML5 "FileReader" function required to open a file.');
    } else {
let filesArr=ev.target.files;
let fileReaders=[];
for(let f in filesArr) {
if(!isNaN(f)) fileReaders.push(readFileAsB64(filesArr[f]))
      }
Promise.all(fileReaders).then((outputArrs) => {
for(let o in outputArrs) {
if(!isNaN(o)) {
let fileArr=outputArrs[o]; // [fileredr.result, file.name]
/* TO DO LOGIC HERE */
let image = new Image();
              image.src = fileArr[0];
              image.title = fileArr[1];
              image.height = 100;
document.body.appendChild(image);
            }
          }
      });
    }
});

上面的代码片段确保在浏览器继续执行注释后的代码逻辑之前，所有上传的图像文件都已编码为 Base64 字符串 (fileredr.readAsDataURL(file);)：

/* TO DO LOGIC HERE */

9、 insertAdjacentHTML——beforebegin | 开始后 | 之前 | 尾端

回顾第 1 点中的屏幕截图，可以通过 insertAdjacentHTML(<position>,<HTML String>) 将 HTML 附加到元素：

<Element>.insertAdjacentHTML('beforeend'|'afterbegin'|'beforeend'|'afterend', <HTML String>);

以下是每个选项所指的相对于 <Element>（即 <p></p>）的位置的说明：

<!-- beforebegin -->
<p>
<!-- afterbegin -->
  foo
<!-- beforeend -->
</p>
<!-- afterend -->

由于在第 1 点中，目标是附加额外的表格行 (<tr></tr>)，因此，使用了 beforeend 位置。

10、检查JSON字符串是否有效

由于我在场边创建的大多数离线浏览器实用程序都需要用户上传数据文件，其中一些需要 JSON 格式，这是对 JSON 文件进行数据格式验证检查的简单直接的方法是：

function isValidJSON(str) {
try {
JSON.parse(str);
return true;
  } catch (e) {
return false;
  }
}
// returns a Boolean

11、将原始 HTML 字符串编码为 Unicode 实体

function encodeHTMLChars(rawStr) {
return rawStr.replace(/[\u00A0-\u9999<>\&]/g, ((i) => `&#${i.charCodeAt(0)};`));
}

要将文本 <img> 显示到 HTML 页面上，必须对字符串进行如下编码：

var inputHTMLStr='<img>';
var encodedHTMLStr=encodeHTMLChars(inputHTMLStr);
console.log(encodedHTMLStr); 
// Output: &#60;img&#62;

当需要在网页上显示 HTML 代码片段时，这通常会派上用场，因为其原始形式（即“<img>”）被浏览器自动解释为 HTML DOM 元素，而不是用于显示的原始文本。

12、将 XML 转换为 JSON

使用率最低的 2 个 JavaScript API 包括：DOMParser() 和 DOMParser.parseFromString()

尽管 xml-js 和 xml2js 等 npm 包很容易获得，但这个逻辑可以通过纯 JavaScript 实现，如下所示：

function convertXMLtoJSON(xmlObj) { // adapted from https://davidwalsh.name/convert-xml-json
var obj = {};
if (xmlObj.nodeType == 1) {
if (xmlObj.attributes.length > 0) {
            obj['@attributes'] = {};
for (var j = 0; j < xmlObj.attributes.length; j++) {
var attribute = xmlObj.attributes.item(j);
                obj['@attributes'][attribute.nodeName] = attribute.nodeValue;
            }
        }
    } else if (xmlObj.nodeType == 3) {
        obj = xmlObj.nodeValue;
    }
// Iterate through all child nodes
// Use recursive to assign nested nodes
if (xmlObj.hasChildNodes()) {
for(var i = 0; i < xmlObj.childNodes.length; i++) {
var item = xmlObj.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof(obj[nodeName])==='undefined') {
                obj[nodeName] = convertXMLtoJSON(item);
            } else {
if (typeof(obj[nodeName].push)==='undefined') {
var old = obj[nodeName];
                    obj[nodeName] = [];
                    obj[nodeName].push(old);
                }
                obj[nodeName].push(convertXMLtoJSON(item));
            }
        }
    }
return obj;
}
/* USAGE: Sample xmlText */
var xmlText = '<bookstore><book>' +
'<title>Everyday Italian</title>' +
'<author>Giada De Laurentiis</author>' +
'<year>2005</year>' +
'</book></bookstore>';
var xmlParser=new DOMParser();
var xmlObj=xmlParser.parseFromString(xmlText, 'text/xml');
var jsonObj=convertXMLtoJSON(xmlObj);
console.log(jsonObj);
// Output: {"bookstore":{"book":{"title":{"#text":"Everyday Italian"},"author":{"#text":"Giada De Laurentiis"},"year":{"#text":"2005"}}}}

免责声明：上述代码逻辑最初由 David Walsh 在 Convert XML to JSON 中实现。

总结

我的文章到此，就结束了！非常感谢您坚持阅读到最后！

希望今天内容对您有所帮助，并考虑将其加入收藏书签以供参考学习使用。

学习更多技能

请点击下方公众号