javascript
JavaScript开发优化技巧
JavaScript開發(fā)優(yōu)化技巧
1、按字符串屬性值對對象數(shù)組進(jìn)行排序
可以通過不同的方式來完成。
1）、使用Underscore
_.sortBy(collection, [iteratees=[_.identity]])創(chuàng)建一個(gè)元素?cái)?shù)組，并按照在每個(gè)Iteratee中運(yùn)行集合中每個(gè)元素的結(jié)果，以升序排序。此方法執(zhí)行穩(wěn)定的排序，即保留相等元素的原始排序順序。迭代對象由一個(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 value data.sort(function (a, b) {return a.value - b.value; });3）、使用Lodash
const sortedValues = _.sortBy(data, 'string');2、如何四舍五入至小數(shù)點(diǎn)后兩位（僅在必要時(shí)）
該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.133、如何遍歷或枚舉JavaScript對象?
每個(gè)ECMAScript版本都采用不同的方式枚舉對象。
該Object.keys()方法返回給定對象自己的可枚舉屬性名稱的數(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語句在創(chuàng)建了一個(gè)循環(huán)迭代迭代的對象，包括：內(nèi)置String，Array，陣列狀物體（例如，arguments或NodeList）， TypedArray，Map，Set和用戶定義的iterables。它使用對象的每個(gè)不同屬性的值調(diào)用要執(zhí)行的語句來調(diào)用自定義迭代掛鉤。
for (const key of Object.keys(data)) {console.log(key, obj[key]); }ES8 Object.entries()
該Object.entries()方法返回給定對象自己的可枚舉字符串鍵屬性[key, value]對的數(shù)組，其順序與for…in循環(huán)提供的順序相同。
Object.entries(data).forEach(([key, value]) => console.log(key, value) );我們可以合并for…of，銷毀和Object.entries：
for (const [key, value] of Object.entries(data)) {console.log(key, value); }4、event.preventDefault（）和return false有什么區(qū)別？
如果返回false，則有可能正在執(zhí)行其他函數(shù)，這些函數(shù)是專門在click內(nèi)編寫的，而preventDefault則不允許執(zhí)行任何操作。
$('a').click(function (e) {// logic // runtime error...navigation happened return false; }); preventDefault（）的示例$('a').click(function (e) {e.preventDefault(); // logic // runtime error, naviagation will not happen });5、如何檢查JavaScript中的空字符/未定義字符串/空字符串？
if (!!data) {// Some code here }或使用類型轉(zhuǎn)換：
if (Boolean(data)) {// Code here }兩者執(zhí)行相同的功能。將變量類型轉(zhuǎn)換為布爾值，其中str是變量。
對于null，undefined，0、000，“ ”，false，它將返回false。
對于字符串“ 0”和“空格 ”，它返回true。
6、如何將項(xiàng)目插入到特定索引（JavaScript）的數(shù)組中？
在特定索引處附加單個(gè)元素
//Append at index 2 array.splice(2, 0,'newData'); //Append at index 5 array[5] = 'newData';在特定索引處附加多個(gè)元素。
//Append at index 2 array.splice(2, 0,'data1', 'data2', 'data3');7、如何使用JavaScript獲取當(dāng)前URL？
使用windows功能：window.location.href
8、檢查密鑰是否存在于JavaScript對象中？
在操作符中使用。
let data =“ abc” in array;使用hasOwnProperty
let result = data.hasOwnProperty("abc")直接訪問元素（括號樣式）
let result = data["abc"] === undefined直接訪問元素（對象樣式）
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中是否包含子字符串？
我們可以使用以下兩種方法來實(shí)現(xiàn)此功能。
1）、includes（）
該includes()方法確定一個(gè)數(shù)組是否在其條目中包括某個(gè)值，是返回值true還是false適當(dāng)?shù)闹怠?/p> 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來解決這個(gè)問題。
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對象
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、！！不是JavaScript中的運(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ù)制到剪貼板
通過執(zhí)行以下操作，我們可以提示用戶單擊并輸入：
function copy(text) {window.prompt("Copy to clipboard: Ctrl+C, Enter", text); }現(xiàn)在，剪貼板復(fù)制操作為SAFE，因?yàn)橛脩魡螕袅颂崾尽?/p> <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、如何測試一個(gè)空的JavaScript對象
有幾種方法可以實(shí)現(xiàn)此功能。
1）、jQuery的：
jQuery.isEmptyObject({}); // true2）、 lodash：
_.isEmpty({}); // true3）、Underscore
_.isEmpty({}); // true17、如何在JavaScript中使字符串的首字母大寫
我們可以更新具有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更改元素的類？
有很多需求，我們需要根據(jù)條件更改某些顏色或CSS。
如何在JavaScript中完成？
更改元素的所有類：
要將所有現(xiàn)有類替換為一個(gè)或多個(gè)新類，請?jiān)O(shè)置className屬性：
document.getElementById("test").className = "newclass";要將其他類添加到元素：
要將類添加到元素中而不刪除或影響現(xiàn)有值，請?zhí)砑涌崭窈托碌念惷Q，如下所示：
document.getElementById("test").className += " newClass";要從元素中刪除類：
要在元素中刪除單個(gè)類而又不影響其他潛在類，則需要簡單的正則表達(dá)式替換：
document.getElementById("test").className =document.getElementById("test").className.replace( /(?:^|\s)newClass(?!\S)/g , '' )19、是否可以將CSS應(yīng)用于一半的字符？
下面是使CSS適用于半角字符的示例。
h1 {display: inline-block;margin: 0; /* for demo snippet */line-height: 1em; /* for demo snippet */font-family: helvetica, arial, sans-serif;font-weight: bold;font-size: 300px;background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);-webkit-background-clip: text;-webkit-text-fill-color: transparent; } <h1>XYZ</h1>20、如何在數(shù)組中追加內(nèi)容？
在較早的JavaScript版本中，這是通過使用apply方法完成的。
該apply()方法調(diào)用具有給定this值的函數(shù)，并arguments以數(shù)組（或類似數(shù)組的對象）的形式提供。
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、如何檢查對象是否為數(shù)組？
當(dāng)我們想檢查對象是否為數(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]'; }然后這樣稱呼它：
isArray(arr); JavaScript（IE9 +，Ch5 +，FF4 +，Saf5 +，Opera10.5 +）Array.isArray（arr）;下劃線和Lodash：
_.isArray（arr）;22、如何檢測未定義的對象屬性？
當(dāng)我們想檢查對象的特定屬性是否未定義時(shí)，我們可以直接使用if條件和===運(yùn)算符進(jìn)行檢查。
if(data.prop === undefined) {alert("it is: `undefined`"); }要檢查對象是否實(shí)際上沒有這樣的屬性，并嘗試訪問它時(shí)，默認(rèn)情況下將返回undefined：
if(!o.hasOwnProperty('prop')) {alert("not exisiting); }檢查與標(biāo)識符關(guān)聯(lián)的值是否為特殊值undefined，或者尚未聲明該標(biāo)識符。
if(typeof variable === 'undefined') {alert('variable is `undefined`, or it is not declared'); }23、如何在JavaScript中將字符串轉(zhuǎn)換為布爾值？
有幾種方法可以在JavaScript中將字符串轉(zhuǎn)換為布爾值。
使用測試方法
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 true function getBoolean(value){switch(value){case true:case "true":case 1:case "1":case "on":case "yes":return true;default: return false;} }24、如何獲取JavaScript中的查詢字符串值？
當(dāng)我們處理URL參數(shù)并想從URL中提取信息時(shí)，這是最常見的用法。
下面是一些我們可以從中獲取字符串值的方法。
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對象的簡寫屬性來獲取參數(shù)，如下所示：
let params = new URL('https://abc.com?val1=1&val2=2').searchParams; params.get('val1'); // "1" params.get('val2'); // "2"25、如何獲取JavaScript對象的長度？
在大多數(shù)情況下，我們確實(shí)檢查數(shù)組的長度，但是，如果要檢查對象的長度怎么辦？以下兩種方法是獲取對象長度的最佳方法。
1、使用ES6功能
let size = Object.keys(data).length;2、使用下劃線
_.size({val1 : 1, val2 : 2, val3 : 3});26、如何反轉(zhuǎn)包含復(fù)雜表情符號的字符串？
當(dāng)我們進(jìn)行更多編程或遇到一些編碼挑戰(zhàn)時(shí)，這是其中最常見的問題。
我們可以使用lodash功能來解決這一挑戰(zhàn)。
function reverse(txt) { return _.split(txt, '').reverse().join(''); } const data = 'abc abc👩🦰👩👩👦👦'; console.log(reverse(data));27、如何在JavaScript中將字符串轉(zhuǎn)換為對象數(shù)組？
當(dāng)我們從無法控制的第三方API中獲取一些數(shù)據(jù)時(shí)，就會出現(xiàn)這種情況。我們?nèi)绾螌⒆址D(zhuǎn)換為對象數(shù)組以在我們的應(yīng)用程序中使用？下面是實(shí)現(xiàn)此結(jié)果的最簡單方法
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、如何檢測用戶是否更改了JavaScript中的選項(xiàng)卡？
這可以通過JavaScript支持的最新事件偵聽器功能來實(shí)現(xiàn)。
下面是處理選項(xiàng)卡狀態(tài)的解決方案。
document .addEventListener("visibilitychange", event => {if (document.visibilityState == "visible") {console.log("activated")} else {console.log("inactivated")} })29、如何從一個(gè)對象數(shù)組求和一個(gè)屬性值？
當(dāng)我們有一個(gè)包含一些數(shù)字的對象數(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足每個(gè)人的需求？以下是廣泛用于在JavaScript中格式化日期的最常用方法。
1）、你可以使用本機(jī) .toLocaleDateString()
例子：
new Date().toLocaleDateString() // 1/06/2021 new 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 locale new Date().toLocaleDateString('en-CA'); // 2021-01-06 (year-month-day) notice the different locale new 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)此功能的解決方案有成千上萬種，但以下是我最喜歡的一種。
生成一個(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)我們要搜索用戶名或某個(gè)已經(jīng)存在的值但又要避免一直調(diào)用時(shí)，我們經(jīng)常要等到用戶鍵入某些字符后再調(diào)用API，這是最常用的方法。
這可以使用distinctUntilChanged來實(shí)現(xiàn)，并且你可以使用filter。
this.service.getData(data).pipe(filter(_ => data.length === 3), distinctUntilChanged()).subscribe(rs => console.log(rs));33、如何重命名數(shù)組內(nèi)的對象鍵？
有時(shí)我們需要更改鍵來操作數(shù)據(jù)。這是在數(shù)組中重命名對象鍵的有效方法之一。
你可以使用Object.values()它來檢索值，然后array.reduce()組成一個(gè)新的對象：
const data = [{prop_name: 'test1',prop_age: 45,prop_email: 'test1@test.com',},{prop_name: 'test2',prop_age: 41,prop_email: 'test2@test.com',},{prop_name: 'test3',prop_age: 45,prop_email: 'test3@test.com',}, ]; 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)。這可以通過模糊方法來實(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 1101011 1001111 1110110 1100101 1110010 1100110 1101100 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 string console.log(newData);36、移位字符串在JavaScript中向左和向右循環(huán)
這種javascript編碼問題很常見。這是基于給定值移動(dòng)字符串的示例。可以使用數(shù)組切片方法來實(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解決方案來實(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 - 2552[0-4][0-9] matches200 - 2491[0-9][0-9] matches 100 - 199[1-9][0-9]? matches 1 - 990 matches 0const 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對JavaScript日期進(jìn)行字符串化并保留時(shí)區(qū)
當(dāng)我們要將任何特定的日期格式值存儲到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)看到了很多解決方案來檢查數(shù)字是否有效，但是如果要檢查字符串是否是有效數(shù)字怎么辦？
這是最好的方法。
function isNumeric(n) {return !isNaN(parseFloat(n)) && isFinite(n); }以下是一些很好的測試用例：
console.log(isNumeric(123456898898912345678912)); // true console.log(isNumeric('2 ')); // true console.log(isNumeric('-42.2 ')); // true console.log(isNumeric(-562.2)); // true console.log(isNumeric(undefined)); // false console.log(isNumeric('')); // false console.log(isNumeric(null)); // false console.log(isNumeric([])); // false40、將JSON對象導(dǎo)出到文本文件
當(dāng)我們要將JSON對象導(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、將長模板文字行換行為多行，而不在字符串中創(chuàng)建新行
如果您在文字中新行的點(diǎn)處引入換行符（\），則不會在輸出中創(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答案中找到的最簡單的方法。
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");} }總結(jié)
以上是生活随笔為你收集整理的JavaScript开发优化技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3运算 calc()函数是怎么实现
- 下一篇： JavaScript比较数组的方法