ProHoster > Ibhulogi > iindaba ze-intanethi > I-12 ye-JavaScript Tricks Eziphoswayo uninzi lweziFundo

I-12 ye-JavaScript Tricks Eziphoswayo uninzi lweziFundo

I-12 ye-JavaScript Tricks Eziphoswayo uninzi lweziFundo

Ukuqala kwam ukufunda iJavaScript, into yokuqala endayenzayo kukwenza uluhlu lwamaqhinga andincedayo ukuba ndonge ixesha. Ndibabone kwabanye abadwelisi benkqubo, kwiindawo ezahlukeneyo kunye nakwiincwadana.

Kweli nqaku, ndiza kukubonisa iindlela ezili-12 zokuphucula kunye nokukhawulezisa ikhowudi yakho yeJavaScript. Kwiimeko ezininzi zifumaneka jikelele.

Siyakhumbuza: kubo bonke abafundi be "Habr" - isaphulelo se-ruble ye-10 xa ubhalisa kuyo nayiphi na ikhosi ye-Skillbox usebenzisa ikhowudi yokuphromotha "Habr".

I-Skillbox iyacebisa: Ikhosi esebenzayo "UMqulunqi we-PRO".

Ukuhluza amaxabiso awodwa

I-ARRAYS

Uhlobo lwe-Seta into yaziswa kwi-ES6, kunye ne..., umqhubi wosasazo, sinokuyisebenzisa ukwenza uluhlu olutsha oluqulethe amaxabiso awodwa kuphela.

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

Kwimeko eqhelekileyo, ikhowudi eninzi ngakumbi iyafuneka ukwenza umsebenzi ofanayo.

Obu buchule busebenza kuluhlu oluqulethe iindidi zamandulo: ezingachazwanga, ezingenanto, i-boolean, umtya kunye nenombolo. Ukuba usebenza ngoluhlu oluqulethe izinto, imisebenzi, okanye uluhlu olongezelelweyo, uya kufuna indlela eyahlukileyo.

Ubude be-cache array kwimijikelo

UMJIKELO

Xa ufunda iilophu, ulandela inkqubo eqhelekileyo:

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

Nangona kunjalo, ngale syntax, i-loop ijonga ngokuphindaphindiweyo ubude boluhlu lokuphindaphinda ngakunye.

Ngamanye amaxesha oku kunokuba luncedo, kodwa kwiimeko ezininzi kusebenza ngakumbi ukugcina ubude boluhlu, oluya kufuna ufikelelo olunye kuyo. Singakwenza oku ngokuchaza ubude obuguquguqukayo apho sichaza i-variable i, ngolu hlobo:

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

Ngokomgaqo, phantse ifana nalapha ngasentla, kodwa ngokwandisa ubungakanani belophu siya kufumana ugcino lwexesha olubalulekileyo.

Ukukala kwesekethe emfutshane (ukalisho lweMcCarthy)

ABASEBENZI ABANEMQEKEKO

Umsebenzisi we-ternary yindlela ekhawulezayo nesebenzayo yokubhala ezilula (kwaye ngamanye amaxesha azilula kangako) iingxelo ezinemiqathango:

x> 100? β€œngaphezulu kwe-100”: β€œngaphantsi kwe-100”;
x> 100? (x>200? "ngaphezulu kwama-200": "phakathi kwe-100-200"): "ngaphantsi kwe-100";

Kodwa ngamanye amaxesha nokuba umqhubi we-ternary unzima ngakumbi kunokuba kuyimfuneko. Singasebenzisa 'kunye' && kunye 'okanye' endaweni yoko || Abaqhubi beBoolean bavavanya amabinzana athile ngendlela emfutshane ngakumbi. Idla ngokuba yi "short circuit" okanye "short circuit rating".

ntoni lo msebenzi

Masithi sifuna ukubuyisela imiqathango enye kuphela kwemibini okanye ngaphezulu.

Ukusebenzisa && kuyakubuyisela ixabiso lokuqala elingeyonyani. Ukuba umsebenzi ngamnye uvavanya ukuba yinyani, ngoko intetho yokugqibela evavanyiweyo iya kubuyiselwa.

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

Ukusebenzisa || iyakubuyisela ixabiso lokuqala lokwenyani. Ukuba umsebenzi ngamnye uvavanya kubuxoki, ixabiso lokugqibela elivavanyiweyo liya kubuyiselwa.

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

Umzekelo 1

Masithi sifuna ukubuyisela ubude benguqu, kodwa asilwazi uhlobo lwayo.

Kulo mzekelo, ungasebenzisa ukuba/enye ukujonga ukuba i-foo luhlobo olululo, kodwa le ndlela inokuba nde kakhulu. Ngoko ke, kungcono ukuthatha "isiphaluka sethu esifutshane".

return (foo || []).length;

Ukuba i-foo eguquguqukayo inobude obufanelekileyo, oko kuya kubuyiselwa. Ngaphandle koko siyakufumana u-0.

Umzekelo 2

Ukhe wanengxaki yokufikelela kwindlwane? Usenokungazi ukuba into okanye enye yeeproperties zayo ikhona, kwaye oku kunokukhokelela kwiingxaki.

Umzekelo, besifuna ukufikelela kwipropathi yedatha kule.state, kodwa idatha ayichazwanga de inkqubo yethu ibuyise isicelo sokulanda.

Ngokuxhomekeke apho siyisebenzisa khona, ukufowunela le.state.data kunokuthintela usetyenziso ekubeni luqalise. Ukusombulula ingxaki, sinako ukusonga oku ngophawu olunemiqathango:

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

Inketho engcono inokuba kukusebenzisa "okanye" umsebenzisi.

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

Asinakutshintsha ikhowudi engentla ukuba isetyenziswe &&. 'Ukulanda iDatha' && this.state.data umsebenzisi uyakuyibuyisela le.state.data nokuba ayichazwanga okanye hayi.

Ikhonkco lokuzikhethela

Omnye unokucebisa ukuba kusetyenziswe ikhonkco lokuzikhethela xa uzama ukubuyisela ipropati nzulu kwisakhiwo somthi. Ngoko, uphawu lombuzo uphawu? ingasetyenziselwa ukubuyisela kwakhona ipropati kuphela ukuba ayinamsebenzi.

Umzekelo, singenza kwakhona umzekelo ongasentla ukufumana le.state.data?..(). Oko kukuthi, idatha ibuyiswa kuphela ukuba ixabiso aliyinto engekho.

Okanye, ukuba kuyabaluleka ukuba imeko ichaziwe okanye hayi, singayibuyisela le.state?.data.

Guqula kwiBoolean

UHLOBO INGUQUKO

Ukongeza kwimisebenzi eqhelekileyo ye-boolean eyinyani kunye nobuxoki, iJavaScript ikwaphatha onke amanye amaxabiso njengenyani okanye ubuxoki.

Kude kube kuphawulwe ngenye indlela, onke amaxabiso kwiJavaScript anyanisekile, ngaphandle kwe-0, "", akukho, akuchazwanga, i-NaN kwaye, kunjalo, bubuxoki. Ezi zamva zibubuxoki.

Singatshintsha ngokulula phakathi kwezi zimbini sisebenzisa!

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

Guqula kumtya

UHLOBO INGUQUKO

Ukuguqulwa ngokukhawuleza ukusuka kwinani elipheleleyo ukuya kumtya kungenziwa ngolu hlobo lulandelayo.

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

Guqula kwinani elipheleleyo

UHLOBO INGUQUKO

Senza inguqu ebuyela umva ngolu hlobo.

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

Le ndlela inokusetyenziselwa ukuguqula uhlobo lwedatha ye-boolean kumaxabiso aqhelekileyo amanani, njengoko kubonisiwe ngezantsi:

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

Kusenokubakho iimeko apho + iya kutolikwa njengomsebenzisi wonxulumano endaweni yomsebenzi wokongeza. Ukunqanda oku, kufuneka usebenzise i-tildes: ~~. Lo msebenzisi ulingana no -n-1. Umzekelo, ~15 ilingana no -16.

Ukusebenzisa iitilde ezimbini kumqolo kuyala ukusebenza kuba - (- - n - 1) - 1 = n + 1 - 1 = n. Ngamanye amazwi, ~-16 lilingana no-15.

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

<Quick Powers

IMISEBENZI

Ukuqala kwi-ES7, ungasebenzisa umsebenzisi wokwandisa ** njengesishunqulelo samagunya. Oku kukhawuleza kakhulu kunokusebenzisa iMath.pow(2, 3). Kubonakala ngathi ilula, kodwa le ngongoma ifakwe kuluhlu lweendlela, ekubeni ayikhankanywa kuyo yonke indawo.

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

Akufunekanga ibhidaniswe ne ^ isimboli, eqhele ukusetyenziselwa ukucacisa. Kodwa kwiJavaScript lo ngumqhubi weXOR.

Phambi kwe-ES7, i ** indlela emfutshane inokusetyenziselwa kuphela amandla esiseko sesi-2 usebenzisa i-bitwise left shift operator <<:

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

Umzekelo, i-2 << 3 = 16 ilingana no-2 ** 4 = 16.

Jika uye kwinani elipheleleyo

IMISEBENZI / UKUGUQUKA UHLOBO

Ukuba ufuna ukuguqula ukudada kwinani elipheleleyo, ungasebenzisa iMath.floor(), Math.ceil() okanye Math.round(). Kodwa kukho indlela ekhawulezayo, kule siyisebenzisayo |, oko kukuthi, umqhubi OKANYE.

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

Ukuziphatha | kuxhomekeke kakhulu ekubeni ujongana namanani a-positive okanye athabathayo, ngoko ke le ndlela ifanelekile kuphela ukuba uzithembile kule nto uyenzayo.

n | 0 isusa yonke into emva kwedecimal umahluli, inciphisa iflothi ukuya kwinani elipheleleyo.

Ungafumana isiphumo esifanayo sokurhangqa usebenzisa ~~. Emva koguqulelo olunyanzelweyo lube yinani elipheleleyo, ixabiso lihlala lingatshintshanga.

Ukususa amanani alandelayo

Umsebenzisi OKANYE unokusetyenziselwa ukususa naliphi na inani lamasuntswana kwinani. Oku kuthetha ukuba akufuneki siguqule iindidi ezinje apha:

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

Endaweni yoko sibhala ngokulula:

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

Ukudibanisa okuzenzekelayo

IIklasi

Utolo lwe-ES6 lunokusetyenziswa kwiindlela zeklasi, kwaye ukubophelela kuyachazwa. Oku kuthetha ukuba ungavalelisa kuphindaphindo lwentetho efana nale.myMethod = this.myMethod.bind(le)!

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>
      </>
    )
  }
};

Ukucheba uluhlu

I-ARRAYS

Ukuba ufuna ukuhluba amaxabiso kuluhlu, kukho iindlela ezikhawulezayo kune-splice ().

Umzekelo, ukuba uyawazi ubungakanani boluhlu lwangaphambili, ungabhala ngaphezulu kwepropathi yobude ngolu hlobo lulandelayo:

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

Kodwa kukho enye indlela, kwaye ngokukhawuleza. Ukuba isantya yeyona nto ibalulekileyo kuwe, nalu ukhetho lwethu:

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]

Kushicilelwa ixabiso lokugqibela loluhlu

I-ARRAYS
Obu buchule bufuna usebenziso lwesilayi() indlela.

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]

Ukufomatha iKhowudi ye-JSON

JSON

Usenokuba sele usebenzisa i-JSON.stringify. Ubusazi ukuba iyanceda ukufomatha i-JSON yakho?

Indlela yokucofa () ithatha iiparamitha ezimbini ezikhethiweyo: umsebenzi otshintshileyo, onokusetyenziswa ukuhluza i-JSON ebonisiweyo, kunye nexabiso lesithuba.

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

Kuko konke, ndiyathemba ukuba zonke ezi ndlela beziluncedo. Ngawaphi amaqhinga owaziyo? Zibhale kwizimvo.

I-Skillbox iyacebisa:

umthombo: www.habr.com

Yongeza izimvo