偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

30 個(gè)有用的 JavaScript 代碼片段(下）

作者：佚名
開發(fā) 前端
今天這篇文章，接上昨天的《30 個(gè)有用的 JavaScript 代碼片段(上）》，我們把剩下的18個(gè)代碼片段分享在這篇文章中。

今天這篇文章，接上昨天的《30 個(gè)有用的 JavaScript 代碼片段(上）》，我們把剩下的18個(gè)代碼片段分享在這篇文章中。

現(xiàn)在，我們就開始這篇文章的內(nèi)容吧。

13. 創(chuàng)建一個(gè) <img> DOM 元素

// Code snippet to render <img> DOM element on the fly
const loadImage = (url) => new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', (err) => reject(err));
    img.src = url;
});
// __USAGE Example__
var uploadFileInput=document.createElement('input');
uploadFileInput.type='file';
uploadFileInput.id='uploadFileInput';
document.body.appendChild(uploadFileInput);


function readFileAsDataURL(file) {
    return new Promise((resolve,reject) => {
        let fileredr = new FileReader();
        fileredr.onload = () => resolve(fileredr.result);
        fileredr.onerror = () => reject(fileredr);
        fileredr.readAsDataURL(file);
    });
}


uploadFileInput.addEventListener('change', async (evt)=> {
  var file = evt.currentTarget.files[0];
    if(!file) return;


    var b64str = await readFileAsDataURL(file);
    var _img = await loadImage(b64str);
    _img['style']['width']=`${_img.naturalWidth}px`;
    _img['style']['height']=`${_img.naturalHeight}px`;
    _img['style']['margin']='2px auto';
    _img['style']['display']='block';
    document.body.appendChild(_img);
}, false);

注意：雖然大多數(shù) HTML 元素節(jié)點(diǎn)的屬性（例如 <div> <p>）是可訪問的并且不需要“l(fā)oad”事件的偵聽器，但 <img> 是此規(guī)則的一個(gè)例外（另一個(gè)唯一的例外是 < 腳本>)

因此，如果 document.createElement('img') 沒有返回 Promise：

var loadedImg=document.createElement('img');
loadedImg.src=<dataURL>; // dataURL refers to the encoded image data

變量loadedImg不會(huì)被渲染，因?yàn)樵诜峙鋵傩詓rc時(shí)它仍然是未定義的。

14. 刪除所有嵌套子節(jié)點(diǎn)

const removeAllChildNodes = ((parentEle) => parentEle.children.length > 0  ? parentEle.removeChild(parentEle.children[0]) : null);
// __USAGE Example__
const _scale = window.devicePixelRatio*2;
const size = 250;
const fontSize=size/_scale;


var canvasDisplay=document.createElement('div');
canvasDisplay['style']['width']=`${size+4}px`;
canvasDisplay['style']['height']=`${size+4}px`;
canvasDisplay['style']['margin']='1px auto';
document.body.appendChild(canvasDisplay);


var iconBtn_1=document.createElement('button');
iconBtn_1.type='button';
iconBtn_1.value='??';
iconBtn_1.innerText='??';
document.body.appendChild(iconBtn_1);


var iconBtn_2=document.createElement('button');
iconBtn_2.type='button';
iconBtn_2.value='??';
iconBtn_2.innerText='??';
document.body.appendChild(iconBtn_2);


function setIcon(icon) {
  var canvas=document.createElement('canvas');
  canvas.width=size;
  canvas.height=size;
  canvas['style']['margin']='1px auto';
  canvas['style']['width']=`${fontSize}px`;
  canvas['style']['height']=`${fontSize}px`;
  canvas['style']['border']='1px dotted #6c757d';
  canvas['style']['background']='transparent';


  var ctx=canvas.getContext('2d');
  ctx.scale(_scale,_scale);
  ctx.font = `${fontSize}px Segoe Ui Emoji`;
  ctx.textAlign = 'center';
  ctx.textBaseline='middle';
  ctx.globalAlpha=1.0;
  ctx.fontVariantCaps='unicase';
  ctx.filter='none';
  ctx.globalCompositeOperation='source-over';
  ctx.imageSmoothingEnabled=true;
  ctx.imageSmoothingQuality='high';
  ctx.letterSpacing='0px';
  ctx.lineWidth=0;
  ctx.shadowColor='rgba(0, 0, 0, 0)';
  ctx.strokeStyle='#000000';
  ctx.fillStyle='#ffffff';


  const _x=((canvas.width/_scale)/2);
  const _y=((canvas.height/_scale)/2);
  ctx.fillText(icon, _x, _y);


  removeAllChildNodes(canvasDisplay);
  canvasDisplay.appendChild(canvas);
}


iconBtn_1.addEventListener('click', ()=> {
  setIcon(iconBtn_1.value);
});
iconBtn_2.addEventListener('click', ()=> {
  setIcon(iconBtn_2.value);
});

使用示例：

注意：函數(shù)removeAllChildNodes()使用遞歸來刪除所有嵌套元素。這對(duì)于防止先前不需要的子節(jié)點(diǎn)與后續(xù)附加的子節(jié)點(diǎn)累積是必要的，如下所示：

15. 選擇文本并將其復(fù)制到剪貼板 — 表單輸入和其他 HTML DOM 元素

function selectCopyText(nodeId) {
    let isVal=true;
    let node = document.getElementById(nodeId);
    try {
        node.select();
        try { node.setSelectionRange(0, 99999);} catch(err0) {}
    } catch(err) {
        isVal=false;
        if (document.body.createTextRange) {
            const range = document.body.createTextRange();
            range.moveToElementText(node);
            range.select();
        } else if (window.getSelection) {
            const selection = window.getSelection();
            const range = document.createRange();
            range.selectNodeContents(node);
            selection.removeAllRanges();
            selection.addRange(range);
        } else { console.warn("Could not select text in node: Unsupported browser."); }
    } finally { navigator.clipboard.writeText(isVal ? node.value : node.innerText);}
}
const strToCopy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra accumsan in nisl nisi scelerisque eu ultrices. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Sodales ut etiam sit amet nisl purus.';


var _copyBtn=document.createElement('button');
_copyBtn.type='button';
_copyBtn.value='toCopy';
_copyBtn.innerText='Copy Textarea';


var _textarea=document.createElement('textarea');
_textarea.id='toCopy';
_textarea['style']['resize']='none';
_textarea['style']['width']='100%';
_textarea['style']['height']='100px';
_textarea['style']['display']='block';
_textarea.value=strToCopy;
document.body.appendChild(_copyBtn);
document.body.appendChild(_textarea);


var _copyBtn2=document.createElement('button');
_copyBtn2.type='button';
_copyBtn2.value='toCopy2';
_copyBtn2.innerText='Copy DIV';


var _div=document.createElement('_div');
_div.id='toCopy2';
_div['style']['width']='100%';
_div['style']['height']='100px';
_div['style']['display']='block';
_div['style']['border']='1px dashed #000000';
_div.innerText=strToCopy;
document.body.appendChild(_copyBtn2);
document.body.appendChild(_div);


_copyBtn.addEventListener('click', ()=> {
  selectCopyText(_copyBtn.value);
});
_copyBtn2.addEventListener('click', ()=> {
  selectCopyText(_copyBtn2.value);
});

使用示例：

雖然“復(fù)制到剪貼板”是最普遍需要的 JavaScript 功能之一，但還值得注意的是，所需的文本內(nèi)容同樣可能包含在表單元素中，例如 - <input type='text'> <textarea > 或嵌入 HTML DOM 元素中，例如 <div> <p>。

因此，此函數(shù)解決了通過檢查 HTMLInputElement 或 HTMLDivElement 中是否存在文本內(nèi)容來確定如何在 JavaScript 中實(shí)現(xiàn)文本選擇的問題。

然后分別選擇屬性.value 和.innerText。

16. 將 JSON 對(duì)象數(shù)組轉(zhuǎn)換為 CSV 文本

function rowJSONToCSV(rowJSONObj) {
    let csvOutputStr='';
    let allHeaders={};
    for(let obj of rowJSONObj) {
      for(let k in obj) { allHeaders[k]=''; }
    }
    let allHeadersArr=Object.keys(allHeaders);
    let headerStr=JSON.stringify(allHeadersArr);
    headerStr=headerStr.substring(1,headerStr.length-1);
    csvOutputStr+=headerStr + '\n';


    for(let obj of rowJSONObj) {
      let allValuesArr=[];
      for(let headerField of allHeadersArr) {
        let rowVal=obj[headerField];
        (typeof rowVal !== 'undefined') ? allValuesArr.push(rowVal) : allValuesArr.push('NULL')
      }
      let rowStr=JSON.stringify(allValuesArr);
      rowStr=rowStr.substring(1,rowStr.length-1);
      csvOutputStr+=rowStr + '\n';
    }
    return Promise.resolve(csvOutputStr);
}
var uploadFileInput=document.createElement('input');
uploadFileInput.type='file';
uploadFileInput.id='uploadFileInput';
document.body.appendChild(uploadFileInput);


function readFileAsText(file) {
    return new Promise((resolve,reject) => {
        let fileredr = new FileReader();
        fileredr.onload = () => resolve(fileredr.result);
        fileredr.onerror = () => reject(fileredr);
        fileredr.readAsText(file);
    });
}
uploadFileInput.addEventListener('change', async (evt)=> {
    var file = evt.currentTarget.files[0];
    if(!file) return;


    var jsonStr = await readFileAsText(file);
    var inputJSONObj = JSON.parse(jsonStr);
    var divOne = document.createElement('div');
    divOne['style']['font-family']='Consolas';
    divOne['style']['height']='250px';
    divOne['style']['weight']='100%';
    divOne['style']['margin']='2px auto';
    divOne['style']['overflow']='auto';
    divOne['style']['border']='1px dashed #17a2b8';
    var csvStrOutput=await rowJSONToCSV(inputJSONObj);
    divOne.innerText=csvStrOutput;
    document.body.appendChild(divOne);
}, false);

使用示例

演示示例數(shù)據(jù)文件的鏈接：icd10_data.json

輸出 CSV 文件的鏈接：icd10_data.csv

基本原理

按照慣例，我傾向于使用插件 json2csv.js（最初來自 https://www.npmjs.com/package/json2csv）來進(jìn)行 JSON 到 CSV 的轉(zhuǎn)換。

然而，對(duì)于超過 50MB 的大文件，遞歸算法超出了其最大堆棧限制，當(dāng)我嘗試將文件上傳到我開發(fā)的 Web 實(shí)用程序時(shí)，我發(fā)現(xiàn)了這一點(diǎn)：https://tableau-data-utility。onrender.com/ 在 [?? Spatial?CSV] 選項(xiàng)卡上

由于地理空間數(shù)據(jù)集往往超過 50MB，實(shí)現(xiàn)上述將 JSON 轉(zhuǎn)換為 CSV 的函數(shù)解決了遞歸問題。

局限性

僅適用于深度級(jí)別為 1 的嵌套 JSON 對(duì)象。如果輸入深度級(jí)別更高的 JSON 對(duì)象，則效果不佳。例如，以下內(nèi)容將失敗，因?yàn)榈谝粋€(gè)條目“喜歡”的深度級(jí)別 = 2

[
   { 
    "firstName":"John", 
    "lastName":"Doe",
    "likes": {
     "pets": ["dogs","cats"]
    }
   },
   { 
    "firstName":"Anna", 
    "lastName":"Smith" 
   }
]

17.DOMContentLoaded 事件監(jiān)聽器

if (document.readyState === 'complete' || document.readyState !== 'loading' && !document.documentElement.doScroll) {
  callback();
} else {
  document.addEventListener('DOMContentLoaded', async() => {
    /* TO DO LOGIC HERE */
  });
}
<!DOCTYPE html>
  <html>  
    <meta charset='UTF-8'>
    <head>Demo (5)</head>  
    <body>  
      <p>?? Refresh webpage to run function "doSomething()".</p>
      <script>
        if (document.readyState === 'complete' || document.readyState !== 'loading' && !document.documentElement.doScroll) {
          callback();
        } else {
          document.addEventListener('DOMContentLoaded', async() => {
            function doSomething() {  
              alert('Hello!');  
            }
            doSomething();
          });
        }
</script>
    </body>
</html>
<!DOCTYPE html>
  <html>  
    <meta charset='UTF-8'>
    <head> 
      <head>Demo (5)</head>
      <script>  
         function doSomething() {  
            alert('Hello!');  
         }  
</script>  
    </head>  
    <body onload='doSomething()'>  
      <p>?? Refresh webpage to run function "doSomething()".</p>
    </body>
</html>

使用示例

當(dāng)網(wǎng)頁加載后需要立即執(zhí)行某個(gè)功能時(shí)，一種可能的方法是將 onload 事件嵌入到 <body> 標(biāo)記中：

注意：一個(gè)常見的錯(cuò)誤是執(zhí)行 windows.onload 中嵌套的函數(shù)：

<!DOCTYPE html>
  <html>  
    <meta charset='UTF-8'>
    <head> 
      <head>Demo (5)</head>
      <script>
        windows.onload = function() {
          function doSomething() {  
              alert('Hello!');  
             }
        };
</script> 
    </head>  
    <body>  
      <p>?? Refresh webpage to run function "doSomething()".</p>
    </body>
</html>

因此，為了對(duì)所有嵌入的 JavaScript 代碼片段進(jìn)行稍微更有條理的分區(qū)，請(qǐng)使用以下命令：

document.addEventListener('DOMContentLoaded', function() { ... });

可以考慮改為：

18. 將多個(gè)事件綁定到 HTML 元素

// Binding multiple events to a single element
function addMultipleEvents(eventsArray, targetElem, handler) {
  eventsArray.map((event) => targetElem.on(event, handler));
}


// Alt Version: Using 'addEventListener'
function addMultipleEvents(eventsArray, targetElem, handler) {
  eventsArray.map((event) => targetElem.addEventListener(event, handler));
}
// Noting the coordinates when map is pan or zoom etc.
// Built with Leaflet.js
var mapUrl="https://stamen-tiles.a.ssl.fastly.net/toner-hybrid/{z}/{x}/{y}.png";


var map = L.map("map");
var basemap=L.tileLayer(mapUrl, {
    detectRetina: true,
    maxZoom: 19,
    minZoom: 11,
    attributionControl: false
}).addTo(map);
function renderImageBounds() {
  imgBounds=map.getBounds();
  imgBounds_Left.innerHTML=imgBounds._southWest.lng;
  imgBounds_Right.innerHTML=imgBounds._northEast.lng;


  imgBounds_Bottom.innerHTML=imgBounds._southWest.lat;
  imgBounds_Top.innerHTML=imgBounds._northEast.lat;
}
function addMultipleEvents(eventsArray, targetElem, handler) {
  eventsArray.map((event) => targetElem.on(event, handler));
}
addMultipleEvents(['zoomend', 'dragend', 'viewreset', 'moveend', 'load', 'resize'], map, renderImageBounds);

使用示例

在我之前構(gòu)建的網(wǎng)絡(luò)實(shí)用程序中，合并了跟蹤所顯示地圖的地理坐標(biāo)的功能，如下所示：

19.清除瀏覽器緩存

清除單個(gè)網(wǎng)頁瀏覽器緩存的 JavaScript 如下：

const supportsLocalStorage = () => {
    if (!('localStorage' in window)) return false;
    try {
        localStorage.setItem('check', 'true');
        localStorage.getItem('check');
        localStorage.removeItem('check');
        return true;
    } catch (e) {
        return false;
    }
};
const hasLocalStorage = supportsLocalStorage();
/* Assume there is a <button id='clearCache' type='button'></button> */
/* HTML element in the DOM */
/*const clearCacheBtn = document.getElementById('clearCache');*/
/*clearCacheBtn.addEventListener('click', async()=> {*/
    requestAnimationFrame(() => {
        if (hasLocalStorage) {
            localStorage.clear();
            location.reload();
        }
    });
/*});*/

用例演示

在某些網(wǎng)頁上，以前的用戶輸入會(huì)有意保留在瀏覽器緩存中。 例如，在 JSONEditor.com 上：

但是，當(dāng)通過 JavaScript 控制臺(tái)以編程方式清除瀏覽器緩存時(shí)：

20. 以編程方式觸發(fā) HTML 事件

// Note: Compatible for both IE8, IE9+ and other modern browsers
function triggerEvent(el, type) {
    let e = ( ('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject() );
    if ('createEvent' in document) { 
      e.initEvent(type, false, true);
      el.dispatchEvent(e);
    } else { 
      e.eventType = type;
      el.fireEvent('on' + e.eventType, e);
    }
}

用例演示

假設(shè)以下 HTML 標(biāo)記文檔：

<!DOCTYPE html>
<html>
  <head><title>Demo trigger() Method</title></head>
  <body>
      <div class='box-1'><h1>0</h1></div>
      <button id="btn1">Increase #1</button>
      <div class='box-2'><h1>0</h1></div>
      <button id='btn2'>Increase #2</button>
      <script>
        /* TO-DO */
</script>
  </body>
</html>

上面的triggerEvent()函數(shù)可以在上面的2個(gè)<script>標(biāo)簽之間實(shí)現(xiàn)，如下所示：

function triggerEvent(el, type) {
    let e = ( ('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject() );
    if ('createEvent' in document) { 
      e.initEvent(type, false, true);
      el.dispatchEvent(e);
    } else { 
      e.eventType = type;
      el.fireEvent('on' + e.eventType, e);
    }
}
document.querySelector('#btn1').addEventListener('click', () => {
  increase(document.querySelector('.box-1>h1'));
});
document.querySelector('#btn2').addEventListener('click', () => {
  triggerEvent(document.querySelector('#btn1'), 'click');
  increase(document.querySelector('.box-2>h1'));
});
function increase(obj) {
    let text = parseInt(obj.textContent, 10);
    obj.textContent = text + 1;
}

雖然， jQuery 插件有包裝函數(shù) trigger() ，它輸出相同的結(jié)果。

<!-- import jQuery plugin -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
// Sample jQuery code snippet at /* TO-DO */ between the 2 <script> tags:
$('#btn1').click(() => {
  increase($('.box-1>h1'));
});
$('#btn2').click(() => {
  $('#btn1').trigger('click');
  increase($('.box-2>h1'));
});
function increase(obj) {
  let text = parseInt(obj.text(), 10);
  obj.text(text + 1);
}

在首選更輕量級(jí)替代方案的情況下，可以考慮使用 functiontriggerEvent()。

21. 將 async-await 與 for 循環(huán)結(jié)合使用

下面的代碼片段調(diào)用 JSON API，其中每次迭代都會(huì)解析不同的參數(shù) (i)，以按順序檢索 JSON 響應(yīng)。

(async()=> {
    // Assume a <table id='datatable'></table> is in the HTML DOM
    const datatableTbody = document.querySelector('#datatable tbody');
    for (let i=1;i<=15;i++) {
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`);
      const result = await response.json();
      datatableTbody.insertAdjacentHTML('beforeend', '<tr><td>'+Object.values(result).join('</td><td>')+'</td></tr>');
    }
})();

用例演示

通常，當(dāng)呈現(xiàn)數(shù)據(jù)記錄以進(jìn)行顯示時(shí)，每條記錄都是通過 API 調(diào)用獲取的。 通過API返回所需的記錄，完整的代碼片段如下：

<!DOCTYPE html>
<html>
  <head>
    <title>async-await in a for-loop</title>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 4px;
      }
      table tbody tr:nth-child(odd) {
        background-color: #f1f1f1;
      }
</style>
  </head>
  <body>
  <table id='datatable'>
    <thead>
      <tr><th>userId</th><th>id</th><th>title</th><th>completed</th></tr>
    </thead>
    <tbody></tbody>
  </table>
  <script>
     (async()=> {
        const datatableTbody = document.querySelector('#datatable tbody');
        for (let i=1;i<=15;i++) {
          const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`);
          const result = await response.json();
          datatableTbody.insertAdjacentHTML('beforeend', '<tr><td>'+Object.values(result).join('</td><td>')+'</td></tr>');
        }
    })();
</script>

22. 將字符串轉(zhuǎn)換為帕斯卡大小寫（帶空格）

由于 JavaScript 沒有內(nèi)置函數(shù)將每個(gè)單詞的首字母轉(zhuǎn)換為大寫，因此可以應(yīng)用以下代碼片段：

const toPascalCase = (str) => ( (str.toLowerCase()).replace(/\w+/g, ((str) => ( str.charAt(0).toUpperCase()+str.substr(1) ).replace(/\r/g, '')) ) );
// Usage:
// let str = 'HeLLO world';
// console.log(toPascalCase(str));
// Result: 'Hello World'

用例演示

當(dāng)從 API 返回的字母大小寫不一致時(shí)，為了視覺一致性，以帕斯卡大小寫顯示某些標(biāo)簽可能更合適。 

例如，在我的一個(gè)業(yè)余項(xiàng)目中——一個(gè) Bus ETA Web 應(yīng)用程序，檢索所有公交車站描述的 API 的字母大小寫不一致：

23. 將 Uint8Array 轉(zhuǎn)換為 Base64 字符串

除了純文本之外，JavaScript 還讀取其他格式的文件輸入，例如 ArrayBuffers（尤其是多媒體上傳）。 從 ArrayBuffer 檢索文件數(shù)據(jù)作為 Base64 編碼字符串 (DataURL) 的函數(shù)如下：

// Uint8Array to Base64 Encoded String
const convertBitArrtoB64 = (bitArr) => ( btoa( bitArr.reduce((data, byte) => data + String.fromCharCode(byte), '') ) );

用例演示

對(duì)于某些庫，所有處理的文件輸入僅輸出為 Uint8Array。 一個(gè)例子是 FFmpeg.wasm（歸功于吳杰羅姆），我在一個(gè)網(wǎng)絡(luò)應(yīng)用程序中實(shí)現(xiàn)了它，用于對(duì)音頻編解碼器進(jìn)行轉(zhuǎn)碼。 在這個(gè)副項(xiàng)目中的用法如下：

// `data` is output as Uint8Array 
// assuming input format is mp3, `outputFileExt`='mp3'
const data = ffmpeg.FS('readFile', `output${outputFileExt}`);
let b64Str = convertBitArrtoB64(data);


// assuming converted output format is mp4, `outputFileMimeType` = 'mp4'
let encodedData=`data:${outputFileMimeType};base64,${b64Str}`;


// To generate download link and save output
let dwnlnk = document.createElement('a');
dwnlnk.download = `${saveFilename}${outputFileExt}`;
dwnlnk.href = encodedData;
dwnlnk.click();

24.將Base64字符串轉(zhuǎn)換為Uint8Array

反之，Uint8Array→DataURL轉(zhuǎn)換的逆過程如下：

// Base64 Encoded String to Uint8Array
const convertB64ToBitArr = (b64Str) => ( Uint8Array.from(atob( (b64Str.includes(';base64,') ? (b64Str.split(','))[1] : b64Str) ), (v) => v.charCodeAt(0)) );

25.獲取瀏覽器垂直滾動(dòng)條寬度

function getScrollbarWidth() {
    const docEle=document.documentElement;
    const cssOverflowY=docEle.style.overflowY; // stores prev value
    docEle.style.overflowY='scroll'; // force scrollbar to appear
    const scrollbarWidth = window.innerWidth - docEle.clientWidth;
    docEle.style.overflowY=cssOverflowY; // reset to prev value


    return scrollbarWidth;
}
const sbWidth=getScrollbarWidth(); // 17


/* comments */
// In which case, scrollbar width is 17px for my browser 
// and width of elements should factor in this value in its css attributes

26. 將年、月和日添加到 Date() 對(duì)象

雖然 JavaScript 沒有特定于 Date() 對(duì)象的時(shí)間單位減法/加法的內(nèi)置方法，但可以使用輔助方法來構(gòu)造以下實(shí)用函數(shù)。

function addYears(date, n) {
    const dateCopy = new Date(date);
    dateCopy.setFullYear(dateCopy.getFullYear() + n);
    return dateCopy;
}
function addMonths(date, n) {
    const dateCopy = new Date(date);
    dateCopy.setMonth(dateCopy.getMonth() + n);
    return dateCopy;
}
function addDays(date, n) {
    const dateCopy = new Date(date);
    dateCopy.setDate(dateCopy.getDate() + n);
    return dateCopy;
}

使用示例：

const currentDate=new Date();
console.log(`Current date: ${currentDate}`);
console.log(`Current date + 11 years: ${addYears(currentDate, 11)}`);
console.log(`Current date + 11 months: ${addMonths(currentDate, 11)}`);
console.log(`Current date + 11 days: ${addDays(currentDate, 11)}`);


/* Sample output */
// Current date: Fri Sep 22 2023 23:52:57 GMT+0800 (Singapore Standard Time)
// Current date + 11 years: Fri Sep 22 2034 23:52:57 GMT+0800 (Singapore Standard Time)
// Current date + 11 months: Thu Aug 22 2024 23:52:57 GMT+0800 (Singapore Standard Time)
// Current date + 11 days: Tue Oct 03 2023 23:52:57 GMT+0800 (Singapore Standard Time)

27.從數(shù)組中刪除無效值，例如null和undefined

const removeInvalidVals = ((arr) => arr.filter(ele => (ele !== null && typeof ele !== 'undefined') ? true : false));

上面的函數(shù)從數(shù)組中刪除空值和未定義的值。 一個(gè)常見的用例是從 API 調(diào)用的 JSON 響應(yīng)中排除無效值。

使用示例：

let arr = [1, 3, undefined, 5, null, null, 8];
arr = removeInvalidVals(arr);
console.log(arr);


/* Expected output */
// [1, 3, 5, 8]

28. 數(shù)組中的唯一值

操作數(shù)組的另一個(gè)方便的實(shí)用函數(shù)是刪除其中的重復(fù)值 。

const uniqueArr = ((arr) => (Array.from(new Set(arr))));

使用示例：

let arr = [1, 1, 3, 2, 5, 3, 4, 7, 7, 7, 8];
arr = uniqueArr(arr);
console.log(arr);


/* Expected output */
// [1, 3, 2, 5, 4, 7, 8]

29. 通過解析字符串創(chuàng)建新的 HTML DOM 元素

HTML <template> 標(biāo)簽用于保存 HTML 內(nèi)容以供稍后呈現(xiàn)。 下面的函數(shù) htmlToElement() 不是使用 createElement() 在 JavaScript 中從頭開始創(chuàng)建元素，而是直接從 HTML 字符串創(chuàng)建子節(jié)點(diǎn)。

function htmlToElement(html) {
    if (!(document.createElement("template").content)) {
        alert('Your browser does not support "template".');
        return;
    }
    let documentFragment = document.createDocumentFragment();
    let template = document.createElement('template');
    template.innerHTML = html.trim();
    for (let i = 0, e = template.content.childNodes.length; i < e; i++) {
        documentFragment.appendChild(template.content.childNodes[i].cloneNode(true));
    }
    return documentFragment;
}

使用示例

<!DOCTYPE html>
<html lang='en'>
  <head><meta charset='utf-8'></head>
  <body>
    <div id='pageContainer'></div>
  </body>
</html>
<!DOCTYPE html>
<html lang='en'>
  <head><meta charset='utf-8'></head>
  <body>
    <div id='pageContainer'></div>
  </body>
</html>

30. 打印網(wǎng)頁

/* Assume there is a <button> HTML element in the DOM */
// <button id='printPage' type='button'>Print</button>
const printPageBtn = document.getElementById('printPage');
printPageBtn.addEventListener('click', ()=> {
    requestAnimationFrame(() => {
        window.print();
    });
});

演示：

總結(jié)

到這里，我們的30個(gè)有用的JavaScript的代碼片段就分享完了，希望這些代碼能夠幫助到你。

責(zé)任編輯：華軒 來源： web前端開發(fā)
JavaScrip開發(fā)
相關(guān)推薦

2023-10-09 14:48:06

2023-05-22 15:53:06

JavaScrip代碼素材

2023-06-16 16:34:25

JavaScripWeb 開發(fā)

2023-11-03 16:02:00

JavaScript開發(fā)

2023-05-30 15:11:16

JavaScrip開發(fā)功能

2022-12-19 15:23:51

JavaScrip開發(fā)語言

2023-06-13 15:15:02

JavaScript前端編程語言

2012-11-27 10:23:18

CSSWeb開發(fā)

2012-01-17 13:54:02

PHP

2022-07-22 10:06:17

JavaScript代碼

2011-07-11 10:16:07

JavaScript

2019-10-10 16:49:18

Python鏡音雙子腳本語言

2024-06-21 11:02:16

2023-02-15 16:19:59

JavaScript技巧API

2022-06-27 19:01:04

Python應(yīng)用程序數(shù)據(jù)

2023-12-26 14:28:08

JavaScript開發(fā)

2024-01-04 16:46:58

JavaScript開發(fā)

2021-09-03 10:08:53

JavaScript開發(fā) 代碼

2021-09-17 15:31:47

代碼JavaScript數(shù)組

2024-08-02 17:19:36

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)