42條JavaScript開(kāi)發(fā)優(yōu)化技巧
、
英文 | https://javascript.plainenglish.io/42-tips-and-tricks-to-write-faster-better-optimized-javascript-code-3a82c53d051e
翻譯 | web前端開(kāi)發(fā)
我一直喜歡報(bào)紙之類(lèi)的東西，可以在較短的時(shí)間內(nèi)提供足夠的信息。在這里，我為前端開(kāi)發(fā)優(yōu)化創(chuàng)建了一個(gè)新的學(xué)習(xí)列表。
你可能已經(jīng)進(jìn)行了很長(zhǎng)時(shí)間的JavaScript開(kāi)發(fā)，但是，有的最新功能與開(kāi)發(fā)技巧，你可能沒(méi)有使用過(guò)。今天這篇文章就是幫助你解決一些JavaScript中的新問(wèn)題新技巧。
在這里，我分享了42個(gè)技巧，這些技巧對(duì)我的日常開(kāi)發(fā)編程工作很有幫助，也希望這些技巧對(duì)你也有所幫助。
1、按字符串屬性值對(duì)對(duì)象數(shù)組進(jìn)行排序
可以通過(guò)不同的方式來(lái)完成。
1）、使用Underscore
_.sortBy(collection, [iteratees=[_.identity]])創(chuàng)建一個(gè)元素?cái)?shù)組，并按照在每個(gè)Iteratee中運(yùn)行集合中每個(gè)元素的結(jié)果，以升序排序。此方法執(zhí)行穩(wěn)定的排序，即保留相等元素的原始排序順序。迭代對(duì)象由一個(gè)參數(shù)（value）調(diào)用。
var objs = [{ val1: 'abc',val2: 'a' },{ val1: 'cde', val2: 'b' },{ val1: 'fgh', val2: 'c' }];var sortedValues = _.sortBy( objs, 'val1' );
2）、使用ES6排序功能
var data = [{ name: 'abc', value: 21 },{ name: 'cde', value: 37 },{ name: 'ee', value: 45 },{ name: 'ff', value: -12 },{ name: 'ab', value: 13 },{ name: 'cs', value: 37 }];// sort by valuedata.sort(function (a, b) {return a.value - b.value;});
3）、使用Lodash
const sortedValues = _.sortBy(data, 'string');2、如何四舍五入至小數(shù)點(diǎn)后兩位（僅在必要時(shí)）?
我們可以通過(guò)3種不同的方式來(lái)實(shí)現(xiàn)此功能。
在跳轉(zhuǎn)到解決方案之前，讓我們先了解一些定義。
該parseFloat()函數(shù)解析一個(gè)參數(shù)（如果需要，首先將其轉(zhuǎn)換為字符串）并返回一個(gè)浮點(diǎn)數(shù)。
該toFixed()方法使用定點(diǎn)表示法格式化數(shù)字。
1）、使用ParseFloat
parseFloat("183.456").toFixed(2);該Math.round()函數(shù)返回四舍五入到最接近的整數(shù)的數(shù)字的值。
2）、使用MathRound
Math.round( num * 100 + Number.EPSILON ) / 100Number()創(chuàng)建一個(gè)新Number值。
3）、將字符串轉(zhuǎn)換為十進(jìn)制
var string = 10.134.toFixed(2); // => '10.13'var num = Number(string); // => 10.13
3、如何遍歷或枚舉JavaScript對(duì)象?
每個(gè)ECMAScript版本都采用不同的方式枚舉對(duì)象。讓我們檢查一下。
該Object.keys()方法返回給定對(duì)象自己的可枚舉屬性名稱(chēng)的數(shù)組，并以與普通循環(huán)相同的順序進(jìn)行迭代。
該forEach()方法為每個(gè)數(shù)組元素執(zhí)行一次提供的功能。
ES5（Object.keys（）和forEach）
var data = { val1: "abc", val2: "cde" };Object.keys(data).forEach(function(key) {console.log(key, obj[key]);});
ES6（for ... of）：
該for...of語(yǔ)句在創(chuàng)建了一個(gè)循環(huán)迭代迭代的對(duì)象，包括：內(nèi)置String，Array，陣列狀物體（例如，arguments或NodeList）， TypedArray，Map，Set和用戶(hù)定義的iterables。它使用對(duì)象的每個(gè)不同屬性的值調(diào)用要執(zhí)行的語(yǔ)句來(lái)調(diào)用自定義迭代掛鉤。
for (const key of Object.keys(data)) {console.log(key, obj[key]);}
ES8 Object.entries()
該Object.entries()方法返回給定對(duì)象自己的可枚舉字符串鍵屬性[key, value]對(duì)的數(shù)組，其順序與for...in循環(huán)提供的順序相同。
Object.entries(data).forEach(([key, value]) => console.log(key, value));
我們可以合并for...of，銷(xiāo)毀和Object.entries：
for (const [key, value] of Object.entries(data)) {console.log(key, value);}
4、event.preventDefault（）和return false有什么區(qū)別？
如果返回false，則有可能正在執(zhí)行其他函數(shù)，這些函數(shù)是專(zhuān)門(mén)在click內(nèi)編寫(xiě)的，而preventDefault則不允許執(zhí)行任何操作。
$('a').click(function (e) {// logic// runtime error...navigation happenedreturn false;});
preventDefault（）的示例
$('a').click(function (e) {e.preventDefault();// logic// runtime error, naviagation will not happen});
5、如何檢查JavaScript中的空字符/未定義字符串/空字符串？
if (!!data) {// Some code here}
或使用類(lèi)型轉(zhuǎn)換：
if (Boolean(data)) {// Code here}
兩者執(zhí)行相同的功能。將變量類(lèi)型轉(zhuǎn)換為布爾值，其中str是變量。
對(duì)于null，undefined，0、000，“ ”，false，它將返回false。
對(duì)于字符串“ 0”和“空格 ”，它返回true。
6、如何將項(xiàng)目插入到特定索引（JavaScript）的數(shù)組中？
在特定索引處附加單個(gè)元素
//Append at index 2array.splice(2, 0,'newData');//Append at index 5array[5] = 'newData';
在特定索引處附加多個(gè)元素。
//Append at index 2array.splice(2, 0,'data1', 'data2', 'data3');
7、如何使用JavaScript獲取當(dāng)前URL？
使用windows功能：window.location.href
8、檢查密鑰是否存在于JavaScript對(duì)象中？
在操作符中使用。
let data =“ abc” in array;使用hasOwnProperty
let result = data.hasOwnProperty("abc")直接訪(fǎng)問(wèn)元素（括號(hào)樣式）
let result = data["abc"] === undefined直接訪(fǎng)問(wèn)元素（對(duì)象樣式）
let result = array.abc === undefined;9、如何在JavaScript中合并兩個(gè)數(shù)組并刪除重復(fù)項(xiàng)？
我們確實(shí)在日常生活中使用數(shù)組，并且有很多要求，我們需要組合數(shù)組以及刪除重復(fù)項(xiàng)。
以下是實(shí)現(xiàn)此目的的一些方法。
1）、使用Lodash
console.log(_.union([10, 4, 5], [134, 26, 19, 10], [6, 1]));2）、使用Filter和Concat
let a = [56, 43, 3], b = [11, 43, 56, 12]let c = a.concat(b)let d = c.filter((val, pos) => c.indexOf(val) === pos)
3、使用set
[...new Set([...array1 ,...array2])]; // => remove duplication10、如何檢查字符串在JavaScript中是否包含子字符串？
我們可以使用以下兩種方法來(lái)實(shí)現(xiàn)此功能。
1）、includes（）
該includes()方法確定一個(gè)數(shù)組是否在其條目中包括某個(gè)值，是返回值true還是false適當(dāng)?shù)闹怠?/span>
const val1 = "atitpatel";const val2 = "patel";console.log(string.includes(val2));
2）、indexof（）
在indexOf()該方法返回在該給定元素可以在陣列中可以發(fā)現(xiàn)，或-1，如果它不存在的第一個(gè)索引。
var str = "atitpatel";var substr = "patel";console.log(str.indexOf(substr) !== -1);
11、如何替換所有出現(xiàn)的字符串
1）、我們可以使用ES6來(lái)解決這個(gè)問(wèn)題。
str = str.replace(/test/g, '');2）、我們可以使用正則表達(dá)式。
let find = 'ab';let re = new RegExp(find, '');let str = find.replace(re, 'cd');console.log(str);
12、如何正確克隆JavaScript對(duì)象
1）、使用ES6
var val1 = {data: "value"};var val2= Object.assign({}, val1);
2）、如果要淺拷貝
Object.assign({}, data)3）、進(jìn)行深復(fù)制
JSON.parse(JSON.stringify(data))13、?。〔皇荍avaScript中的運(yùn)算符？
!! 將其右側(cè)的值轉(zhuǎn)換為其等效的布爾值。
!!false === false!!true === true!!0 === false!!parseInt("foo") === false // NaN is falsy!!1 === true!!-1 === true // -1 is truthy!!(1/0) === true // Infinity is truthy!!"" === false // empty string is falsy!!"foo" === true // non-empty string is truthy!!"false" === true // ...even if it contains a falsy value!!window.foo === false // undefined is falsy!!null === false // null is falsy!!{} === true // an (empty) object is truthy!![] === true // an (empty) array is truthy;
14、如何在JavaScript中循環(huán)遍歷數(shù)組？
我們有幾種選擇：
1）、順序for循環(huán)：
var array = ["a","b"];var arrayLength = array.length;for (var i = 0; i < arrayLength; i++) {console.log("value",array[i]);}
2）、Array.prototype.forEach
const data = ["a", "b", "c"];data.forEach(function (item, index) {console.log(item, index);});
3）、 ES6for-of聲明
let data = ['a', 'b', 'c'];for (const a of data){console.log(a);}
15、如何使用JavaScript復(fù)制到剪貼板
通過(guò)執(zhí)行以下操作，我們可以提示用戶(hù)單擊并輸入：
function copy(text) {window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}
現(xiàn)在，剪貼板復(fù)制操作為SAFE，因?yàn)橛脩?hù)單擊了提示。
<button id="data" onclick="copy(document.getElementById('data').innerHTML)">Copy here</button><script>function copy(text) {window.prompt("To Copy Please do this: Ctrl+C, Enter", text);}</script>
16、如何測(cè)試一個(gè)空的JavaScript對(duì)象
有幾種方法可以實(shí)現(xiàn)此功能。
1）、jQuery的：
jQuery.isEmptyObject({}); // true2）、 lodash：
_.isEmpty({}); // true3）、Underscore
_.isEmpty({}); // true17、如何在JavaScript中使字符串的首字母大寫(xiě)
我們可以更新具有text-transform屬性的CSS。
1）、在CSS中：
p:first {text-transform:capitalize;}
2）、使用函數(shù)，我們可以調(diào)用toUpperCase（）方法。
function makeUpperCase(val){return val && val[0].toUpperCase() + val.slice(1);}
18、如何使用JavaScript更改元素的類(lèi)？
有很多需求，我們需要根據(jù)條件更改某些顏色或CSS。
如何在JavaScript中完成？
更改元素的所有類(lèi)：
要將所有現(xiàn)有類(lèi)替換為一個(gè)或多個(gè)新類(lèi)，請(qǐng)?jiān)O(shè)置className屬性：
document.getElementById("test").className = "newclass";要將其他類(lèi)添加到元素：
要將類(lèi)添加到元素中而不刪除或影響現(xiàn)有值，請(qǐng)?zhí)砑涌崭窈托碌念?lèi)名稱(chēng)，如下所示：
document.getElementById("test").className += " newClass";要從元素中刪除類(lèi)：
要在元素中刪除單個(gè)類(lèi)而又不影響其他潛在類(lèi)，則需要簡(jiǎn)單的正則表達(dá)式替換：
document.getElementById("test").className =document.getElementById("test").className.replace( /(?:^|\s)newClass(?!\S)/g , '' )
19、是否可以將CSS應(yīng)用于一半的字符？
我們確實(shí)看到了一些精美的文字藝術(shù)，其中一半字符具有不同的顏色，而另一半字符具有不同的顏色，我們?nèi)绾卧贑SS中實(shí)現(xiàn)這樣的效果？
下面是使CSS適用于半角字符的示例。
h1 {display: inline-block;margin: 0; /* for demo snippet */: 1em; /* for demo snippet */: helvetica, arial, sans-serif;: bold;: 300px;background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);: text;: transparent;}<h1>XYZ</h1>
20、如何在數(shù)組中追加內(nèi)容？
在較早的JavaScript版本中，這是通過(guò)使用apply方法完成的。
該apply()方法調(diào)用具有給定this值的函數(shù)，并arguments以數(shù)組（或類(lèi)似數(shù)組的對(duì)象）的形式提供。
let array1 = [33, 45, 5];let array2 = [100, 2];Array.prototype.push.apply(array2, array1);console.log(array2); // [100, 2, 33, 45, 5]
使用ES6，可以使用擴(kuò)展運(yùn)算符完成此操作。
let array1 = [11, 42, 53];let array2 = [1, 2];array2.push(...array1);console.log(array2); // [11, 2, 3, 42, 53]
21、如何檢查對(duì)象是否為數(shù)組？
當(dāng)我們想檢查對(duì)象是否為數(shù)組時(shí)，可以遵循以下選項(xiàng)。
let arr = [10,20,30,40,50];Javascript（新舊瀏覽器）：
function isArray(arr) {return arr.constructor.toString().indexOf("Array") > -1;}function isArray(arr) {return arr instanceof Array;}function isArray(arr) {return Object.prototype.toString.call(arr) === '[object Array]';}
然后這樣稱(chēng)呼它：
isArray(arr);JavaScript（IE9 +，Ch5 +，F(xiàn)F4 +，Saf5 +，Opera10.5 +）
Array.isArray（arr）;下劃線(xiàn)和Lodash：
_.isArray（arr）;22、如何檢測(cè)未定義的對(duì)象屬性？
當(dāng)我們想檢查對(duì)象的特定屬性是否未定義時(shí)，我們可以直接使用if條件和===運(yùn)算符進(jìn)行檢查。
if(data.prop === undefined) {alert("it is: `undefined`");}
要檢查對(duì)象是否實(shí)際上沒(méi)有這樣的屬性，并嘗試訪(fǎng)問(wèn)它時(shí)，默認(rèn)情況下將返回undefined：
if(!o.hasOwnProperty('prop')) {alert("not exisiting);}
檢查與標(biāo)識(shí)符關(guān)聯(lián)的值是否為特殊值undefined，或者尚未聲明該標(biāo)識(shí)符。
if(typeof variable === 'undefined') {alert('variable is `undefined`, or it is not declared');}
23、如何在JavaScript中將字符串轉(zhuǎn)換為布爾值？
有幾種方法可以在JavaScript中將字符串轉(zhuǎn)換為布爾值。
使用測(cè)試方法
var stringValue = "true";var boolValue = (/true/i).test(stringValue) //returns true
使用比較運(yùn)算符
var val = "true";var boolValue = (val =="true"); //returns true
使用JSON.parse
var val = "true";var boolValue = JSON.parse(val); //returns true
使用三元運(yùn)算符
var val = “true”;var boolValue = val.toLowerCase() == ‘true’ ? true : false; //returns true
使用 switch-case
var val = "true";var boolValue = getBoolean(val); //returns truefunction getBoolean(value){switch(value){case true:case "true":case 1:case "1":case "on":case "yes":return true;default:return false;}}
24、如何獲取JavaScript中的查詢(xún)字符串值？
當(dāng)我們處理URL參數(shù)并想從URL中提取信息時(shí)，這是最常見(jiàn)的用法。
下面是一些我們可以從中獲取字符串值的方法。
ES2015（ES6）：創(chuàng)建一種實(shí)現(xiàn)此功能的方法
getQueryStringParams = query => {return query? (/^[?#]/.test(query) ? query.slice(1) : query).split('&').reduce((params, param) => {let [key, value] = param.split('=');params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';return params;}, {}): {}};
URLSearchParams從位置使用內(nèi)置方法。
你可以在location以下位置使用它：
let params = new URLSearchParams(location.search);let params = (new URL(location)).searchParams;let url = new URL('https://abc.com?val1=1&val2=2');let params = new URLSearchParams(url.search);
我們還可以使用.searchParamsURL對(duì)象的簡(jiǎn)寫(xiě)屬性來(lái)獲取參數(shù)，如下所示：
let params = new URL('https://abc.com?val1=1&val2=2').searchParams;params.get('val1'); // "1"params.get('val2'); // "2"
25、如何獲取JavaScript對(duì)象的長(zhǎng)度？
在大多數(shù)情況下，我們確實(shí)檢查數(shù)組的長(zhǎng)度，但是，如果要檢查對(duì)象的長(zhǎng)度怎么辦？以下兩種方法是獲取對(duì)象長(zhǎng)度的最佳方法。
1、使用ES6功能
let size = Object.keys(data).length;2、使用下劃線(xiàn)
_.size({val1 : 1, val2 : 2, val3 : 3});26、如何反轉(zhuǎn)包含復(fù)雜表情符號(hào)的字符串？
當(dāng)我們進(jìn)行更多編程或遇到一些編碼挑戰(zhàn)時(shí)，這是其中最常見(jiàn)的問(wèn)題。
我們可以使用lodash功能來(lái)解決這一挑戰(zhàn)。
function reverse(txt) { return _.split(txt, '').reverse().join(''); }const data = 'abc abc????????????';console.log(reverse(data));
27、如何在JavaScript中將字符串轉(zhuǎn)換為對(duì)象數(shù)組？
當(dāng)我們從無(wú)法控制的第三方API中獲取一些數(shù)據(jù)時(shí)，就會(huì)出現(xiàn)這種情況。我們?nèi)绾螌⒆址D(zhuǎn)換為對(duì)象數(shù)組以在我們的應(yīng)用程序中使用？下面是實(shí)現(xiàn)此結(jié)果的最簡(jiǎn)單方法
const str = 'Option 1|false|Option 2|false|Option 3|false|Option 4|true';data = [];for (let i = 0, a= str.split('|'); i < a.length; i += 2) {constoption = a[i],value = JSON.parse(a[i + 1]);data.push({ option, value });}console.log(data);
28、如何檢測(cè)用戶(hù)是否更改了JavaScript中的選項(xiàng)卡？
這可以通過(guò)JavaScript支持的最新事件偵聽(tīng)器功能來(lái)實(shí)現(xiàn)。
下面是處理選項(xiàng)卡狀態(tài)的解決方案。
document .addEventListener("visibilitychange", event => {if (document.visibilityState == "visible") {console.log("activated")} else {console.log("inactivated")}})
29、如何從一個(gè)對(duì)象數(shù)組求和一個(gè)屬性值？
當(dāng)我們有一個(gè)包含一些數(shù)字的對(duì)象數(shù)組時(shí)，我們想在下面求和是帶有reduce的解決方案。
const data = [{ val1: 'abc', val2: 50 },{ val1: 'abc', val2: 50 },{ val1: 'cde', val2: 75 },{ val1: 'hji', val2: 35 },{ val1: 'bbc', val2: 25 },];console.log(data.reduce((n, {val2}) => n + val2, 0))
30、如何格式化JavaScript日期？
當(dāng)我們格式化日期時(shí)，更令人頭疼，因?yàn)槲覀兇_實(shí)根據(jù)需求有不同的要求。我們?nèi)绾尾拍軡M(mǎn)足每個(gè)人的需求？以下是廣泛用于在JavaScript中格式化日期的最常用方法。
1）、你可以使用本機(jī) .toLocaleDateString()
例子：
new Date().toLocaleDateString() // 1/06/2021new Date().toLocaleDateString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit'}); // 01/06/2021 (month and day with two digits)new Date().toLocaleDateString('en-ZA'); // 2020/01/06(year/month/day) notice the different localenew Date().toLocaleDateString('en-CA'); // 2021-01-06 (year-month-day) notice the different localenew Date().toLocaleString("en-US", {hour: '2-digit', hour12: false, timeZone: "America/New_York"}); // 07 (just the hour)
2）、我們可以使用moment.js
var now = new Date();var dateString = moment(now).format('YYYY-MM-DD');var dateStringWithTime = moment(now).format('YYYY-MM-DD HH:mm:ss');
31、如何在JavaScript中生成隨機(jī)字符串/字符？
很多時(shí)候，我們需要向后端發(fā)送一些隨機(jī)的唯一ID。實(shí)現(xiàn)此功能的解決方案有成千上萬(wàn)種，但以下是我最喜歡的一種。
生成一個(gè)安全的隨機(jī)字母數(shù)字Base-62字符串：
function generateUID(length){return window.btoa(Array.from(window.crypto.getRandomValues(new Uint8Array(length * 2))).map((b) => String.fromCharCode(b)).join("")).replace(/[+/]/g, "").substring(0, length);}console.log(generateUID(22)); // "cFg3Upv2cE5cK8Xd7hHwWp"console.log(generateUID(5)); // "CAGkP"
32、在字段中輸入3個(gè)字符后如何執(zhí)行API調(diào)用？
當(dāng)我們要搜索用戶(hù)名或某個(gè)已經(jīng)存在的值但又要避免一直調(diào)用時(shí)，我們經(jīng)常要等到用戶(hù)鍵入某些字符后再調(diào)用API，這是最常用的方法。
這可以使用distinctUntilChanged來(lái)實(shí)現(xiàn)，并且你可以使用filter。
this.service.getData(data).pipe(filter(_ => data.length === 3),distinctUntilChanged()).subscribe(rs => console.log(rs));
33、如何重命名數(shù)組內(nèi)的對(duì)象鍵？
有時(shí)我們需要更改鍵來(lái)操作數(shù)據(jù)。這是在數(shù)組中重命名對(duì)象鍵的有效方法之一。
你可以使用Object.values()它來(lái)檢索值，然后array.reduce()組成一個(gè)新的對(duì)象：
const data = [{prop_name: 'test1',prop_age: 45,prop_email: '[email protected]',},{prop_name: 'test2',prop_age: 41,prop_email: '[email protected]',},{prop_name: 'test3',prop_age: 45,prop_email: '[email protected]',},];const newKey = ['firstname','age','email'];let resultData = data.map(obj =>Object.values(obj).reduce((acc, cur, i) => {acc[newKey[i]] = cur;return acc;}, {}));console.log(resultData);
34、如何清除javascript中的焦點(diǎn)？
焦點(diǎn)…焦點(diǎn)…是的，這一次，我們想從HTML中的特定元素中清除焦點(diǎn)。這可以通過(guò)模糊方法來(lái)實(shí)現(xiàn)。
if (document.activeElement instanceof HTMLElement)document.activeElement.blur();
35、JavaScript中的二進(jìn)制到字符串
如果我們有一些二進(jìn)制代碼，并且想要在將其用于代碼之前將其轉(zhuǎn)換為字符串，該怎么辦？可以使用fromCharCode方法實(shí)現(xiàn)。
let binary = `1010011 1110100 1100001 1100011 11010111001111 1110110 1100101 1110010 11001101101100 1101111 1110111`;let newData = binary.split(' ') //Split string in array of binary chars.map(bin => String.fromCharCode(parseInt(bin, 2))) //Map every binary char to real character.join(''); //Join the array back to a stringconsole.log(newData);
36、移位字符串在JavaScript中向左和向右循環(huán)
這種javascript編碼問(wèn)題很常見(jiàn)。這是基于給定值移動(dòng)字符串的示例。可以使用數(shù)組切片方法來(lái)實(shí)現(xiàn)。
function getShiftedString(s, leftShifts, rightShifts) {// using `split('')` will result in certain unicode characters being separated incorrectly// use Array.from instead:const arr = Array.from(s);const netLeftShifts = (leftShifts - rightShifts) % arr.length;return [...arr.slice(netLeftShifts), ...arr.slice(0, netLeftShifts)].join('');}console.log([getShiftedString('abc', 0, 0),getShiftedString('abc', 1, 0),getShiftedString('abc', 0, 1),getShiftedString('abc', 1, 1),getShiftedString('123456789', 0, 0),getShiftedString('123456789', 1, 5),getShiftedString('123456789', 5, 1),'----',getShiftedString('123456789', 9, 0),getShiftedString('123456789', 10, 0),getShiftedString('123456789', 0, 9),getShiftedString('123456789', 0, 10),getShiftedString("?????", 0, 0),getShiftedString("?????", 1, 0),]);
37、檢查IP地址的正則表達(dá)式JavaScript
正則表達(dá)式可幫助我們檢查任何特定的字符串并為我們驗(yàn)證？如果我們要使用正則表達(dá)式作為IP地址該怎么辦。我在這里喜歡Mahdi Pedram解決方案來(lái)實(shí)現(xiàn)這一目標(biāo)。
這是驗(yàn)證IP地址的最干凈的方法，下面將其分解：
事實(shí)：一個(gè)有效的IP地址具有4 octets，每個(gè)八位字節(jié)可以是一個(gè)介于0 - 255
正則表達(dá)式的細(xì)分，該正則表達(dá)式匹配之間的任何值 0 - 255
25[0-5] matches 250 - 255
2[0-4][0-9] matches200 - 249
1[0-9][0-9] matches 100 - 199
[1-9][0-9]? matches 1 - 99
0 matches 0
const octet = '(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]?|0)';注意：使用new RegExp時(shí)應(yīng)使用\\.而不是\.因?yàn)樽址畬⒈晦D(zhuǎn)義兩次。
function isValidIP(str) {const octet = '(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]?|0)';const regex = new RegExp(`^${octet}\\.${octet}\\.${octet}\\.${octet}$`);return regex.test(str);}
38、如何用JSON對(duì)JavaScript日期進(jìn)行字符串化并保留時(shí)區(qū)
當(dāng)我們要將任何特定的日期格式值存儲(chǔ)到JSON時(shí)。使用此功能可以實(shí)現(xiàn)。
var changeValue = function(key, value) {if (this[key] instanceof Date) {return this[key].toUTCString();}return value;}console.log(JSON.stringify(new Date(), changeValue));console.log(JSON.stringify({ myProperty: new Date()}, changeValue));
39、JavaScript檢查字符串是否為有效數(shù)字
我們已經(jīng)看到了很多解決方案來(lái)檢查數(shù)字是否有效，但是如果要檢查字符串是否是有效數(shù)字怎么辦？
這是最好的方法。
function isNumeric(n) {return !isNaN(parseFloat(n)) && isFinite(n);}
以下是一些很好的測(cè)試用例：
console.log(isNumeric(123456898898912345678912)); // trueconsole.log(isNumeric('2 ')); // trueconsole.log(isNumeric('-42.2 ')); // trueconsole.log(isNumeric(-562.2)); // trueconsole.log(isNumeric(undefined)); // falseconsole.log(isNumeric('')); // falseconsole.log(isNumeric(null)); // falseconsole.log(isNumeric([])); // false
40、將JSON對(duì)象導(dǎo)出到文本文件
當(dāng)我們要將JSON對(duì)象導(dǎo)出到文本文件時(shí)，以下是我從NutCracker答案中發(fā)現(xiàn)的最干凈的方法。
const filename = 'data.json';const jsonStr = JSON.stringify(JsonExport);let element = document.createElement('a');element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));element.setAttribute('download', filename);element.style.display = 'none';document.body.appendChild(element);element.click();document.body.removeChild(element);
41、將長(zhǎng)模板文字行換行為多行，而不在字符串中創(chuàng)建新行
如果您在文字中新行的點(diǎn)處引入換行符（\），則不會(huì)在輸出中創(chuàng)建新行：
const text = `abc abc abc abc abc abc abc\and abc and abc`;console.log(text);
42、如何將文本從div復(fù)制到剪貼板
當(dāng)我們要將文本從div復(fù)制到下面的剪貼板時(shí)，這是我從StackOverflow romin21答案中找到的最簡(jiǎn)單的方法。
function CopyToClipboard(containerid) {if (window.getSelection) {if (window.getSelection().empty) { // Chromewindow.getSelection().empty();} else if (window.getSelection().removeAllRanges) { // Firefoxwindow.getSelection().removeAllRanges();}} else if (document.selection) { // IE?document.selection.empty();}if (document.selection) {var range = document.body.createTextRange();range.moveToElementText(document.getElementById(containerid));range.select().createTextRange();document.execCommand("copy");} else if (window.getSelection) {var range = document.createRange();range.selectNode(document.getElementById(containerid));window.getSelection().addRange(range);document.execCommand("copy");}}
到這里，我分享的42個(gè)JavaScript的技巧就全部結(jié)束了，希望，這個(gè)對(duì)你有所幫助。
感謝你的閱讀，編程愉快！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
