12個(gè)有用的 JavaScript 代碼片段
英文 | https://javascript.plainenglish.io/6-javascript-code-snippets-for-sorting-arrays-56a7049f831
翻譯 | 楊小愛
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]
說(shuō)明：對(duì)于數(shù)字排序，必須創(chuàng)建一個(gè) Comparator 實(shí)體或比較函數(shù)。在上面的代碼片段中，這相當(dāng)于
const compare = function(a, b){return a-b;};
排序結(jié)果是
arr.sort(compare);2、數(shù)值排序 | 降序 [???]
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 中不太直觀。僅當(dāng)數(shù)組中的所有元素都被讀取為（類型）字符串時(shí)，內(nèi)置的默認(rèn) sort() 函數(shù)才適用于 JavaScript 數(shù)組。
4、按字母排序 | 降序? [???]
const arr = ["Blue", "Orange", "Aqua", "Marine"];arr.sort().reverse();
之前：[“Blue”、“Orange”、“Aqua”、“Marine”]
之后：[“Orange”、“Marine”、“Blue”、“Aqua”]
與僅適用于字符串實(shí)體的 sort() 函數(shù)不同，JavaScript 中的函數(shù) reverse() 適用于整個(gè)數(shù)組并交換元素的位置，而不管（類型）如何。第一個(gè)元素成為最后一個(gè)元素，反之亦然。
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”]
說(shuō)明：日期的排序行為與數(shù)字排序非常相似。但是，JavaScript 數(shù)組中的 String 實(shí)體必須首先被解析為 Date 對(duì)象，因?yàn)樗鼈兛梢愿鶕?jù)相對(duì) Date 出現(xiàn)進(jìn)行排序。
6、日期排序 | 降序[▼]
類似于數(shù)字排序…
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 = '';});
上面的代碼片段對(duì)于用戶在輸入字段中，輸入了未保存的數(shù)據(jù)，并且，如果頁(yè)面被卸載，則對(duì)將丟失的情況特別有用。
在上圖中，用戶上傳了多個(gè)圖像文件后，瀏覽器會(huì)提示用戶是否保存了圖像輸出，以防止數(shù)據(jù)丟失。
8、 異步上傳多個(gè)文件
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);}}});}});
上面的代碼片段確保在瀏覽器繼續(xù)執(zhí)行注釋后的代碼邏輯之前，所有上傳的圖像文件都已編碼為 Base64 字符串 (fileredr.readAsDataURL(file);)：
/* TO DO LOGIC HERE */9、 insertAdjacentHTML——beforebegin | 開始后 | 之前 | 尾端
回顧第 1 點(diǎn)中的屏幕截圖，可以通過(guò) insertAdjacentHTML(<position>,<HTML String>) 將 HTML 附加到元素：
<Element>.insertAdjacentHTML('beforeend'|'afterbegin'|'beforeend'|'afterend', <HTML String>);以下是每個(gè)選項(xiàng)所指的相對(duì)于 <Element>（即 <p></p>）的位置的說(shuō)明：
<!-- beforebegin --><p><!-- afterbegin -->foo<!-- beforeend --></p><!-- afterend -->
由于在第 1 點(diǎn)中，目標(biāo)是附加額外的表格行 (<tr></tr>)，因此，使用了 beforeend 位置。
10、檢查JSON字符串是否有效
由于我在場(chǎng)邊創(chuàng)建的大多數(shù)離線瀏覽器實(shí)用程序都需要用戶上傳數(shù)據(jù)文件，其中一些需要 JSON 格式，這是對(duì) JSON 文件進(jìn)行數(shù)據(jù)格式驗(yàn)證檢查的簡(jiǎn)單直接的方法 是：
function isValidJSON(str) {try {JSON.parse(str);return true;} catch (e) {return false;}}// returns a Boolean
11、 將原始 HTML 字符串編碼為 Unicode 實(shí)體
function encodeHTMLChars(rawStr) {return rawStr.replace(/[\u00A0-\u9999<>\&]/g, ((i) => `&#${i.charCodeAt(0)};`));}
要將文本 <img> 顯示到 HTML 頁(yè)面上，必須對(duì)字符串進(jìn)行如下編碼：
var inputHTMLStr='<img>';var encodedHTMLStr=encodeHTMLChars(inputHTMLStr);console.log(encodedHTMLStr);// Output: <img>
當(dāng)需要在網(wǎng)頁(yè)上顯示 HTML 代碼片段時(shí)，這通常會(huì)派上用場(chǎng)，因?yàn)槠湓夹问剑础?lt;img>”）被瀏覽器自動(dòng)解釋為 HTML DOM 元素，而不是用于顯示的原始文本。
12、 將 XML 轉(zhuǎn)換為 JSON
使用率最低的 2 個(gè) JavaScript API 包括：DOMParser() 和 DOMParser.parseFromString()
盡管 xml-js 和 xml2js 等 npm 包很容易獲得，但這個(gè)邏輯可以通過(guò)純 JavaScript 實(shí)現(xiàn)，如下所示：
function convertXMLtoJSON(xmlObj) { // adapted from https://davidwalsh.name/convert-xml-jsonvar 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 nodesif (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"}}}}
免責(zé)聲明：上述代碼邏輯最初由 David Walsh 在 Convert XML to JSON 中實(shí)現(xiàn)。
總結(jié)
我的文章到此，就結(jié)束了！非常感謝您堅(jiān)持閱讀到最后！
希望今天內(nèi)容對(duì)您有所幫助，并考慮將其加入收藏書簽以供參考學(xué)習(xí)使用。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
