web前端培训 - 12个有用的 JavaScript 代码片段
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(,) 将 HTML 附加到元素：
.insertAdjacentHTML(‘beforeend’|‘afterbegin’|‘beforeend’|‘afterend’, );
以下是每个选项所指的相对于 （即
foo
由于在第 1 点中，目标是附加额外的表格行 ()，因此，使用了 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)};));
}
要将文本 显示到 HTML 页面上，必须对字符串进行如下编码：
var inputHTMLStr=’’;
var encodedHTMLStr=encodeHTMLChars(inputHTMLStr);
console.log(encodedHTMLStr);
// Output:
当需要在网页上显示 HTML 代码片段时，这通常会派上用场，因为其原始形式（即“”）被浏览器自动解释为 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 = ‘’ +
‘Everyday Italian’ +
‘Giada De Laurentiis’ +
‘2005’ +
‘’;
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”}}}}
