ProHoster > Π‘Π»ΠΎΠ³ > xov xwm hauv internet > 12 JavaScript Tricks Uas Feem ntau Tutorials Miss

12 JavaScript Tricks Uas Feem ntau Tutorials Miss

12 JavaScript Tricks Uas Feem ntau Tutorials Miss

Thaum kuv pib kawm JavaScript, thawj qhov uas kuv tau ua yog ua ib daim ntawv teev lus dag uas pab kuv txuag sijhawm. Kuv pom lawv los ntawm lwm tus programmers, ntawm ntau qhov chaw thiab hauv phau ntawv.

Hauv tsab xov xwm no, kuv yuav qhia koj 12 txoj hauv kev zoo los txhim kho thiab ua kom koj cov cai JavaScript. Feem ntau lawv yog universal.

Peb nco qab: rau txhua tus neeg nyeem Habr - 10 ruble luv nqi thaum tso npe rau hauv ib chav kawm Skillbox siv Habr promo code.

Skillbox pom zoo: Cov chav kawm siv tau "Mobile Developer PRO".

Lim cov txiaj ntsig tshwj xeeb

ARAYS

Cov khoom teeb tsa tau qhia hauv ES6, nrog rau ..., kis tus neeg teb xov tooj, peb tuaj yeem siv nws los tsim cov array tshiab uas tsuas muaj qhov tshwj xeeb.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Hauv qhov xwm txheej ib txwm muaj, ntau tus lej yuav tsum tau ua kom ua haujlwm tib yam.

Cov txheej txheem no ua haujlwm rau cov arrays uas muaj cov hom qub: undefined, null, boolean, hlua thiab naj npawb. Yog tias koj ua haujlwm nrog ib qho array uas muaj cov khoom, kev ua haujlwm, lossis cov array ntxiv, koj yuav xav tau txoj hauv kev sib txawv.

Ntev ntawm cache array nyob rau hauv lub voj voog

CYCLES

Thaum koj kawm rau loops, koj ua raws li tus txheej txheem txheej txheem:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Txawm li cas los xij, nrog cov syntax no, rau lub voj rov qab xyuas qhov ntev ntawm cov array txhua iteration.

Qee lub sij hawm qhov no tuaj yeem pab tau, tab sis feem ntau nws muaj txiaj ntsig zoo rau cache qhov ntev ntawm cov array, uas yuav xav tau ib qho kev nkag mus rau nws. Peb tuaj yeem ua qhov no los ntawm kev txheeb xyuas qhov ntev ntawm qhov sib txawv uas peb txhais qhov sib txawv kuv, zoo li qhov no:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Nyob rau hauv txoj cai, yuav luag tib yam li saum toj no, tab sis los ntawm kev nce lub voj loj peb yuav tau txais lub sij hawm tseem ceeb.

Kev ntsuas luv luv (McCarthy rating)

CONDITIONAL OPERATORS

Tus neeg teb xov tooj ternary yog txoj hauv kev nrawm thiab ua tau zoo los sau cov lus yooj yim (thiab qee zaum tsis yooj yim) cov lus hais:

x> 100? "ntau dua 100": "tsawg dua 100";
x> 100? (x> 200? "ntau tshaj 200": "nruab nrab ntawm 100-200"): "tsawg dua 100";

Tab sis qee zaum txawm tias tus neeg teb xov tooj ternary yog qhov nyuaj tshaj qhov xav tau. Peb tuaj yeem siv 'thiab' && thiab 'lossis' hloov || Boolean cov tswv lag luam los ntsuas qee cov lus qhia hauv txoj kev tseem ceeb dua. Nws feem ntau hu ua "short circuit" lossis "short circuit rating".

Yuav ua li cas li no ua hauj lwm

Cia peb hais tias peb xav rov qab tsuas yog ib qho ntawm ob lossis ntau qhov xwm txheej.

Siv && yuav rov qab thawj tus nqi cuav. Yog tias txhua qhov kev ua haujlwm ntsuas qhov tseeb, tom qab ntawd cov lus qhia kawg uas ntsuas yuav raug xa rov qab.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

Siv || yuav rov qab thawj tus nqi tseeb. Yog tias txhua qhov operand ntsuas qhov tsis tseeb, tom qab ntawd tus nqi ntsuas kawg yuav raug xa rov qab.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

Piv txwv li 1

Cia peb hais tias peb xav rov qab qhov ntev ntawm qhov sib txawv, tab sis peb tsis paub nws hom.

Hauv qhov no, koj tuaj yeem siv yog / lwm yam los xyuas tias foo yog hom zoo, tab sis txoj kev no yuav ntev dhau lawm. Yog li ntawd, nws yog qhov zoo dua los coj peb "short circuit".

return (foo || []).length;

Yog hais tias qhov sib txawv foo muaj qhov tsim nyog ntev, ces qhov ntawd yuav rov qab los. Txwv tsis pub peb yuav tau txais 0.

Piv txwv li 2

Koj puas tau muaj teeb meem nkag mus rau qhov khoom zes? Tej zaum koj yuav tsis paub seb puas muaj ib yam khoom lossis ib qho ntawm nws cov khoom siv sub, thiab qhov no tuaj yeem ua rau muaj teeb meem.

Piv txwv li, peb xav nkag mus rau cov ntaub ntawv cov cuab yeej hauv this.state, tab sis cov ntaub ntawv tsis tau txhais kom txog thaum peb qhov kev pab cuam rov qab thov kev thov.

Nyob ntawm seb peb siv qhov twg, hu rau this.state.data yuav tiv thaiv daim ntawv thov pib. Yuav kom daws tau qhov teeb meem, peb tuaj yeem qhwv qhov no hauv ib qho kev qhia:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

Ib qho kev xaiv zoo dua yuav yog siv "los yog" tus neeg teb xov tooj.

return (this.state.data || 'Fetching Data');

Peb hloov tsis tau cov cai saum toj no los siv &&. Tus neeg teb xov tooj 'Fetching Data' && this.state.data tus neeg teb xov tooj yuav rov qab rau this.state.data txawm tias nws tsis tau txhais los yog tsis.

Optional chain

Ib tug yuav hais kom siv kev xaiv chaining thaum sim rov qab cov cuab yeej sib sib zog nqus mus rau hauv ib tsob ntoo qauv. Yog li, lo lus nug cim cim? tuaj yeem siv los khaws cov khoom tsuas yog tias nws tsis yog null.

Piv txwv li, peb tuaj yeem rov ua qhov piv txwv saum toj no kom tau txais this.state.data?..(). Ntawd yog, cov ntaub ntawv xa rov qab tsuas yog tias tus nqi tsis yog null.

Los yog, yog nws tseem ceeb seb lub xeev tau txhais los yog tsis, peb tuaj yeem rov qab qhov no.state?.data.

Hloov mus rau Boolean

HOM CONVERSION

Ntxiv rau qhov kev ua haujlwm boolean ib txwm muaj tseeb thiab tsis tseeb, JavaScript kuj ua rau tag nrho lwm cov txiaj ntsig raws li qhov tseeb lossis cuav.

Txog thaum sau tseg, tag nrho cov txiaj ntsig hauv JavaScript yog qhov tseeb, tshwj tsis yog 0, "", null, undefined, NaN thiab, ntawm chav kawm, tsis muaj tseeb. Cov tom kawg yog cuav.

Peb tuaj yeem hloov pauv ntawm ob qho yooj yim siv tus neeg teb xov tooj !, uas kuj hloov hom rau boolean.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

Hloov mus rau txoj hlua

HOM CONVERSION

Kev hloov pauv sai ntawm tus lej mus rau ib txoj hlua tuaj yeem ua tau raws li hauv qab no.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

Hloov mus rau integer

HOM CONVERSION

Peb ua qhov rov qab transformation zoo li no.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Txoj kev no tseem tuaj yeem siv los hloov cov ntaub ntawv boolean rau cov lej tsis tu ncua, raws li qhia hauv qab no:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Tej zaum yuav muaj cov xwm txheej uas + yuav raug txhais raws li tus neeg teb xov tooj sib txuas es tsis yog tus neeg teb xov tooj ntxiv. Txhawm rau zam qhov no, koj yuav tsum siv tildes: ~~. Tus neeg teb xov tooj no sib npaug rau -n-1. Piv txwv li, ~ 15 yog sib npaug rau -16.

Siv ob tildes nyob rau hauv ib kab negates lub lag luam vim - (- - n - 1) - 1 = n + 1 - 1 = n. Hauv lwm lo lus, ~-16 yog sib npaug rau 15.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Lub zog ceev

Kev ua haujlwm

Pib hauv ES7, koj tuaj yeem siv tus neeg teb xov tooj exponentiation ** ua tus shorthand rau lub hwj chim. Qhov no nrawm dua li siv Math.pow(2, 3). Nws zoo nkaus li yooj yim, tab sis cov ntsiab lus no suav nrog hauv cov npe ntawm cov txheej txheem, vim nws tsis tau hais txhua qhov chaw.

console.log(2 ** 3); // Result: 8

Nws yuav tsum tsis txhob tsis meej pem nrog lub ^ cim, uas yog feem ntau siv rau exponentiation. Tab sis hauv JavaScript qhov no yog XOR tus neeg teb xov tooj.

Ua ntej ES7, lub ** shortcut tsuas yog siv tau rau lub zog ntawm lub hauv paus 2 siv tus neeg tsav tsheb sab laug bitwise <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Piv txwv li, 2 << 3 = 16 yog sib npaug rau 2 ** 4 = 16.

Float rau integer

Kev ua haujlwm / HOM CONVERSION

Yog tias koj xav hloov lub ntab mus rau tus lej, koj tuaj yeem siv Math.floor(), Math.ceil() lossis Math.round(). Tab sis muaj txoj kev sai dua, rau qhov no peb siv |, uas yog, OR tus neeg teb xov tooj.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Cwj pwm | nyob ntawm seb koj puas cuam tshuam nrog tus lej zoo lossis tsis zoo, yog li txoj kev no tsuas yog tsim nyog yog tias koj ntseeg siab rau qhov koj ua.

n | 0 tshem tawm txhua yam tom qab tus lej sib cais, txiav cov ntab mus rau tus lej.

Koj tuaj yeem tau txais cov txiaj ntsig zoo ib yam siv ~~. Tom qab yuam kev hloov dua siab tshiab rau tus lej, tus nqi tseem tsis hloov pauv.

Tshem tawm cov lej tom qab

Tus neeg teb xov tooj OR tuaj yeem siv los tshem tawm cov lej ntawm tus lej. Qhov no txhais tau tias peb tsis tas yuav hloov hom xws li ntawm no:

let str = "1553";
Number(str.substring(0, str.length - 1));

Hloov chaw peb tsuas sau:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

Tsis siv neeg txuas

QHOV TSEEB

ES6 cov cim kos tuaj yeem siv rau hauv cov txheej txheem hauv chav kawm, thiab kev khi yog siv. Qhov no txhais tau hais tias koj tuaj yeem hais lus zoo rau cov lus rov qab zoo li this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Array trimming

ARAYS

Yog tias koj xav tau strip qhov tseem ceeb ntawm ib qho array, muaj txoj hauv kev sai dua li splice().

Piv txwv li, yog tias koj paub qhov luaj li cas ntawm tus thawj array, koj tuaj yeem override nws qhov ntev raws li hauv qab no:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

Tab sis muaj lwm txoj kev, thiab sai dua. Yog tias ceev yog qhov tseem ceeb rau koj, ntawm no yog peb cov kev xaiv:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

Kev luam tawm tus nqi kawg ntawm ib qho array

ARAYS
Cov txheej txheem no yuav tsum tau siv cov txheej txheem hlais() .

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

Formatting JSON code

JSON

Tej zaum koj twb tau siv JSON.stringify lawm. Koj puas paub tias nws pab format koj JSON?

Txoj kev stringify() siv ob qhov kev xaiv tsis tau: ib qho kev hloov pauv, uas tuaj yeem siv los lim cov JSON tso tawm, thiab qhov chaw tus nqi.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

Qhov ntawd yog tag nrho, kuv vam tias tag nrho cov txheej txheem no tau pab tau. Koj paub dab tsi tricks? Sau lawv hauv cov lus.

Skillbox pom zoo:

Tau qhov twg los: www.hab.com

Ntxiv ib saib