、

英文 | https://javascript.plainenglish.io/42-tips-and-tricks-to-write-faster-better-optimized-javascript-code-3a82c53d051e

翻譯 | web前端開發(fā)

我一直喜歡報紙之類的東西，可以在較短的時間內(nèi)提供足夠的信息。在這里，我為前端開發(fā)優(yōu)化創(chuàng)建了一個新的學(xué)習(xí)列表。

你可能已經(jīng)進行了很長時間的JavaScript開發(fā)，但是，有的最新功能與開發(fā)技巧，你可能沒有使用過。今天這篇文章就是幫助你解決一些JavaScript中的新問題新技巧。

在這里，我分享了42個技巧，這些技巧對我的日常開發(fā)編程工作很有幫助，也希望這些技巧對你也有所幫助。

1、按字符串屬性值對對象數(shù)組進行排序

可以通過不同的方式來完成。

1）、使用Underscore

_.sortBy(collection, [iteratees=[_.identity]])

創(chuàng)建一個元素數(shù)組，并按照在每個Iteratee中運行集合中每個元素的結(jié)果，以升序排序。此方法執(zhí)行穩(wěn)定的排序，即保留相等元素的原始排序順序。迭代對象由一個參數(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ù)點后兩位（僅在必要時）?

我們可以通過3種不同的方式來實現(xiàn)此功能。

在跳轉(zhuǎn)到解決方案之前，讓我們先了解一些定義。

該parseFloat()函數(shù)解析一個參數(shù)（如果需要，首先將其轉(zhuǎn)換為字符串）并返回一個浮點數(shù)。

該toFixed()方法使用定點表示法格式化數(shù)字。

1）、使用ParseFloat

parseFloat("183.456").toFixed(2);

該Math.round()函數(shù)返回四舍五入到最接近的整數(shù)的數(shù)字的值。

2）、使用MathRound

Math.round( num * 100 + Number.EPSILON ) / 100

Number()創(chuàng)建一個新Number值。

3）、將字符串轉(zhuǎn)換為十進制

var string = 10.134.toFixed(2); // => '10.13'var num = Number(string); // => 10.13

3、如何遍歷或枚舉JavaScript對象?

每個ECMAScript版本都采用不同的方式枚舉對象。讓我們檢查一下。

該Object.keys()方法返回給定對象自己的可枚舉屬性名稱的數(shù)組，并以與普通循環(huán)相同的順序進行迭代。

該forEach()方法為每個數(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)建了一個循環(huán)迭代迭代的對象，包括：內(nèi)置String，Array，陣列狀物體（例如，arguments或NodeList）， TypedArray，Map，Set和用戶定義的iterables。它使用對象的每個不同屬性的值調(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 happenedreturn 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、如何將項目插入到特定索引（JavaScript）的數(shù)組中？

在特定索引處附加單個元素

//Append at index 2array.splice(2, 0,'newData');//Append at index 5array[5] = 'newData';

在特定索引處附加多個元素。

//Append at index 2array.splice(2, 0,'data1', 'data2', 'data3');

7、如何使用JavaScript獲取當前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中合并兩個數(shù)組并刪除重復(fù)項？

我們確實在日常生活中使用數(shù)組，并且有很多要求，我們需要組合數(shù)組以及刪除重復(fù)項。

以下是實現(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 duplication

10、如何檢查字符串在JavaScript中是否包含子字符串？

我們可以使用以下兩種方法來實現(xiàn)此功能。

1）、includes（）

該includes()方法確定一個數(shù)組是否在其條目中包括某個值，是返回值true還是false適當?shù)闹怠?/span>

const val1 = "atitpatel";const val2 = "patel";console.log(string.includes(val2));

2）、indexof（）

在indexOf()該方法返回在該給定元素可以在陣列中可以發(fā)現(xiàn)，或-1，如果它不存在的第一個索引。

var str = "atitpatel";var substr = "patel";console.log(str.indexOf(substr) !== -1);

11、如何替換所有出現(xiàn)的字符串

1）、我們可以使用ES6來解決這個問題。

str = str.replace(/test/g, '');

2）、我們可以使用正則表達式。

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）、進行深復(fù)制

JSON.parse(JSON.stringify(data))

13、！！不是JavaScript中的運算符？

!! 將其右側(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，因為用戶單擊了提示。

<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、如何測試一個空的JavaScript對象

有幾種方法可以實現(xiàn)此功能。

1）、jQuery的：

jQuery.isEmptyObject({}); // true

2）、 lodash：

_.isEmpty({}); // true

3）、Underscore

_.isEmpty({}); // true

17、如何在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)有類替換為一個或多個新類，請設(shè)置className屬性：

document.getElementById("test").className = "newclass";

要將其他類添加到元素：

要將類添加到元素中而不刪除或影響現(xiàn)有值，請?zhí)砑涌崭窈托碌念惷Q，如下所示：

document.getElementById("test").className += " newClass";

要從元素中刪除類：

要在元素中刪除單個類而又不影響其他潛在類，則需要簡單的正則表達式替換：

document.getElementById("test").className =   document.getElementById("test").className.replace      ( /(?:^|\s)newClass(?!\S)/g , '' )

19、是否可以將CSS應(yīng)用于一半的字符？

我們確實看到了一些精美的文字藝術(shù)，其中一半字符具有不同的顏色，而另一半字符具有不同的顏色，我們?nèi)绾卧贑SS中實現(xiàn)這樣的效果？

下面是使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，可以使用擴展運算符完成此操作。

let array1 = [11, 42, 53];let array2 = [1, 2];array2.push(...array1);console.log(array2); // [11, 2, 3, 42, 53]

21、如何檢查對象是否為數(shù)組？

當我們想檢查對象是否為數(shù)組時，可以遵循以下選項。

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 +，F(xiàn)F4 +，Saf5 +，Opera10.5 +）

Array.isArray（arr）;

下劃線和Lodash：

_.isArray（arr）;

22、如何檢測未定義的對象屬性？

當我們想檢查對象的特定屬性是否未定義時，我們可以直接使用if條件和===運算符進行檢查。

if(data.prop === undefined) {  alert("it is: `undefined`");}

要檢查對象是否實際上沒有這樣的屬性，并嘗試訪問它時，默認情況下將返回undefined：

if(!o.hasOwnProperty('prop')) {  alert("not exisiting);}

檢查與標識符關(guān)聯(lián)的值是否為特殊值undefined，或者尚未聲明該標識符。

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

使用比較運算符

var val = "true";var boolValue = (val =="true");   //returns true

使用JSON.parse

var val = "true";var boolValue = JSON.parse(val);   //returns true

使用三元運算符

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中的查詢字符串值？

當我們處理URL參數(shù)并想從URL中提取信息時，這是最常見的用法。

下面是一些我們可以從中獲取字符串值的方法。

ES2015（ES6）：創(chuàng)建一種實現(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ù)組的長度，但是，如果要檢查對象的長度怎么辦？以下兩種方法是獲取對象長度的最佳方法。

1、使用ES6功能

let size = Object.keys(data).length;

2、使用下劃線

_.size({val1 : 1, val2 : 2, val3 : 3});

26、如何反轉(zhuǎn)包含復(fù)雜表情符號的字符串？

當我們進行更多編程或遇到一些編碼挑戰(zhàn)時，這是其中最常見的問題。

我們可以使用lodash功能來解決這一挑戰(zhàn)。

function reverse(txt) { return _.split(txt, '').reverse().join(''); }const data = 'abc abc????????????';console.log(reverse(data));

27、如何在JavaScript中將字符串轉(zhuǎn)換為對象數(shù)組？

當我們從無法控制的第三方API中獲取一些數(shù)據(jù)時，就會出現(xiàn)這種情況。我們?nèi)绾螌⒆址D(zhuǎn)換為對象數(shù)組以在我們的應(yīng)用程序中使用？下面是實現(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) {    const        option = a[i],        value = JSON.parse(a[i + 1]);    data.push({ option, value });}console.log(data);

28、如何檢測用戶是否更改了JavaScript中的選項卡？

這可以通過JavaScript支持的最新事件偵聽器功能來實現(xiàn)。

下面是處理選項卡狀態(tài)的解決方案。

document  .addEventListener("visibilitychange", event => {  if (document.visibilityState == "visible") {    console.log("activated")  } else {    console.log("inactivated")  }})

29、如何從一個對象數(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日期？

當我們格式化日期時，更令人頭疼，因為我們確實根據(jù)需求有不同的要求。我們?nèi)绾尾拍軡M足每個人的需求？以下是廣泛用于在JavaScript中格式化日期的最常用方法。

1）、你可以使用本機 .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中生成隨機字符串/字符？

很多時候，我們需要向后端發(fā)送一些隨機的唯一ID。實現(xiàn)此功能的解決方案有成千上萬種，但以下是我最喜歡的一種。

生成一個安全的隨機字母數(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個字符后如何執(zhí)行API調(diào)用？

當我們要搜索用戶名或某個已經(jīng)存在的值但又要避免一直調(diào)用時，我們經(jīng)常要等到用戶鍵入某些字符后再調(diào)用API，這是最常用的方法。

這可以使用distinctUntilChanged來實現(xiàn)，并且你可以使用filter。

this.service.getData(data)  .pipe(    filter(_ => data.length === 3),     distinctUntilChanged()  ).subscribe(rs => console.log(rs));

33、如何重命名數(shù)組內(nèi)的對象鍵？

有時我們需要更改鍵來操作數(shù)據(jù)。這是在數(shù)組中重命名對象鍵的有效方法之一。

你可以使用Object.values()它來檢索值，然后array.reduce()組成一個新的對象：

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中的焦點？

焦點…焦點…是的，這一次，我們想從HTML中的特定元素中清除焦點。這可以通過模糊方法來實現(xiàn)。

if (document.activeElement instanceof HTMLElement)    document.activeElement.blur();

35、JavaScript中的二進制到字符串

如果我們有一些二進制代碼，并且想要在將其用于代碼之前將其轉(zhuǎn)換為字符串，該怎么辦？可以使用fromCharCode方法實現(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 stringconsole.log(newData);

36、移位字符串在JavaScript中向左和向右循環(huán)

這種javascript編碼問題很常見。這是基于給定值移動字符串的示例。可以使用數(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地址的正則表達式JavaScript

正則表達式可幫助我們檢查任何特定的字符串并為我們驗證？如果我們要使用正則表達式作為IP地址該怎么辦。我在這里喜歡Mahdi Pedram解決方案來實現(xiàn)這一目標。

這是驗證IP地址的最干凈的方法，下面將其分解：

事實：一個有效的IP地址具有4 octets，每個八位字節(jié)可以是一個介于0 - 255

正則表達式的細分，該正則表達式匹配之間的任何值 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時應(yīng)使用\\.而不是\.因為字符串將被轉(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日期進行字符串化并保留時區(qū)

當我們要將任何特定的日期格式值存儲到JSON時。使用此功能可以實現(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)); // 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對象導(dǎo)出到文本文件

當我們要將JSON對象導(dǎo)出到文本文件時，以下是我從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)建新行

如果您在文字中新行的點處引入換行符（\），則不會在輸出中創(chuàng)建新行：

const text = `abc abc abc abc abc abc abc\and abc and abc`;console.log(text);

42、如何將文本從div復(fù)制到剪貼板

當我們要將文本從div復(fù)制到下面的剪貼板時，這是我從StackOverflow romin21答案中找到的最簡單的方法。

function CopyToClipboard(containerid) {    if (window.getSelection) {        if (window.getSelection().empty) { // Chrome            window.getSelection().empty();        } else if (window.getSelection().removeAllRanges) { // Firefox            window.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é)

到這里，我分享的42個JavaScript的技巧就全部結(jié)束了，希望，這個對你有所幫助。

感謝你的閱讀，編程愉快！

42條JavaScript開發(fā)優(yōu)化技巧