🥇12 JavaScript matipi asiri muzvidzidzo zvakawanda

Pandakatanga kudzidza JavaScript, chinhu chekutanga chandakaita ndechekuita runyoro rwemanomano akandibatsira kuchengetedza nguva. Ndakavaona kubva kune vamwe vanogadzira mapurogiramu, panzvimbo dzakasiyana uye mumanyoro.

Muchinyorwa chino, ini ndinokuratidza gumi nembiri nzira dzekuvandudza uye nekumhanyisa kodhi yako yeJavaScript. Muzviitiko zvizhinji ivo vari pasi rose.

Tinoyeuchidza: kune vese vaverengi veHabr - a 10 ruble mutengo paunenge uchinyoresa mune chero Skillbox kosi uchishandisa iyo Habr promo kodhi.

Skillbox inokurudzira: Nzira inoshanda "Mobile Developer PRO".

Kusefa zvakasiyana siyana

ARRAYS

Iyo Set chinhu mhando yakaunzwa muES6, pamwe ne..., kuparadzira opareta, tinogona kuishandisa kugadzira rondedzero nyowani ine chete yakasarudzika maitiro.

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

Mumamiriro ezvinhu akajairwa, yakawanda kodhi inodiwa kuita oparesheni imwe chete.

Iyi nzira inoshanda kune arrays ane ekare marudzi: asina kutsanangurwa, null, boolean, tambo uye nhamba. Kana iwe uri kushanda nehurongwa hune zvinhu, mabasa, kana mamwe marongero, iwe unozoda imwe nzira.

Hurefu hwe cache array muma cycles

CYCLES

Kana iwe uchidzidzira zvishwe, unotevedzera yakajairwa maitiro:

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

Nekudaro, neiyi syntax, iyo yeloop inodzokorodza kutarisa kureba kweiyo rondedzero imwe neimwe iteration.

Dzimwe nguva izvi zvinogona kubatsira, asi muzviitiko zvakawanda zvinonyanya kushanda kuti cache kureba kweiyo array, izvo zvinoda kuti munhu asvike pazviri. Tinogona kuita izvi nekutsanangura kureba kuchinjika kwatinotsanangura kushanduka i, seizvi:

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

Muchidimbu, zvakangofanana nepamusoro, asi nekuwedzera saizi ye loop tinowana yakakosha nguva yekuchengetedza.

Short circuit rating (McCarthy rating)

CONDITIONAL OPERATORS

Iyo ternary opareta inzira inokurumidza uye inoshanda yekunyora yakapusa (uye dzimwe nguva isiri nyore) zvirevo zvine zvirevo:

x> zana? “more than 100”: “ less than 100”;
x> zana? (x>100? "more than 200": "between 200-100"): "less than 200";

Asi dzimwe nguva kunyangwe iyo ternary opareta yakanyanya kuomarara kupfuura zvinodiwa. Tinogona kushandisa 'uye' && uye 'kana' panzvimbo || Boolean vanoshandisa kuongorora mamwe mataurirwo neimwe nzira yakapfupika. Inowanzonzi "short circuit" kana "short circuit rating".

Sei basa iri

Ngatitii tinoda kudzorera chimwe chete chemamiriro maviri kana anopfuura.

Kushandisa && kuchadzosa kukosha kwekutanga kwenhema. Kana chirongwa chega chega chikaongorora kuti ichokwadi, ipapo chirevo chekupedzisira chakaongororwa chinodzoserwa.

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

Kushandisa || ichadzorera yekutanga kukosha kwechokwadi. Kana chirongwa chega chega chikayedza kuita chenhema, ipapo kukosha kwekupedzisira kunodzoserwa.

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

muenzaniso 1

Ngatitii tinoda kudzorera kureba kwechinhu chakasiyana, asi hatizivi mhando yacho.

Muchiitiko ichi, unogona kushandisa kana/zvimwe kutarisa kuti foo ndiyo mhando chaiyo, asi nzira iyi inogona kunge yakareba. Nokudaro, zviri nani kutora "short circuit" yedu.

return (foo || []).length;

Kana iyo shanduko foo iine hurefu hwakakodzera, ipapo izvo zvinodzoserwa. Zvikasadaro tichawana 0.

muenzaniso 2

Wakambove nedambudziko rekuwana chinhu chakaiswa dendere? Iwe unogona kunge usingazivi kana chimwe chinhu kana chimwe chezvikamu zvayo chiripo, uye izvi zvinogona kutungamirira kumatambudziko.

Semuenzaniso, taida kuwana nzvimbo yedata mu this.state, asi data haina kutsanangurwa kusvika chirongwa chedu chadzosa chikumbiro chekutora.

Zvichienderana nekuti tinoishandisa kupi, kufonera this.state.data kunogona kudzivirira application kutanga. Kuti tigadzirise dambudziko, tinogona kuputira izvi nechirevo chechirevo:

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

Imwe sarudzo iri nani ndeye kushandisa "kana" mushandisi.

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

Hatikwanise kushandura kodhi iri pamusoro kuti tishandise &&. 'Kutora Data' && this.state.data operator achadzorera this.state.data zvisinei kuti haina kutsanangurwa here kana kuti kwete.

Optional cheni

Mumwe anogona kupa zano kushandisa sarudzo yechaining paunenge uchiedza kudzosa chivakwa mukati memuti. Saka, chiratidzo chemubvunzo chiratidzo? inogona kushandiswa kudzoreredza pfuma chete kana isiri null.

Semuenzaniso, tinogona kudzokorodza muenzaniso uri pamusoro kuti tiwane this.state.data?..(). Ndiko kuti, data inodzoserwa chete kana kukosha kusiri kusina maturo.

Kana, kana zvine basa kuti nyika yakatsanangurwa here kana kuti kwete, tinogona kudzosa this.state?.data.

Shandura kuita Boolean

TYPE KUSHANDURA

Pamusoro pezvakajairwa boolean mabasa echokwadi uye enhema, JavaScript inobatawo mamwe maitiro sechokwadi kana manyepo.

Kusvikira zvimwe zvaonekwa, hunhu hwese muJavaScript ndeyechokwadi, kunze kwe0, "", null, undefined, NaN uye, chokwadi, nhema. Ekupedzisira ndeenhema.

Tinogona kushandura zviri nyore pakati pezviviri tichishandisa!

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

Shandura kuita tambo

TYPE KUSHANDURA

Kushandura kwechimbichimbi kubva painhamba kuenda kutambo kunogona kuitwa sezvizvi.

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

Shandura kuita nhamba

TYPE KUSHANDURA

Isu tinoita reverse shanduko seizvi.

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

Iyi nzira inogona zvakare kushandiswa kushandura iyo boolean data mhando kune yakajairika manhamba kukosha, sezvakaratidzwa pazasi:

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

Panogona kuve nemamiriro ezvinhu apo + ichadudzirwa senge concatenation opareta pane yekuwedzera mushandisi. Kuti udzivise izvi, unofanirwa kushandisa tildes: ~~. Mushandisi uyu akaenzana ne -n-1. Semuenzaniso, ~15 yakaenzana ne -16.

Kushandisa matinji maviri mumutsara kunoramba kushanda nekuti - (- - n - 1) - 1 = n + 1 - 1 = n. Mune mamwe mazwi, ~-16 yakaenzana negumi nemashanu.

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

<Quick Powers

MASHOKO

Kutanga muES7, unogona kushandisa exponentiation opareta ** seshorthand yemasimba. Izvi zvinokurumidza kupfuura kushandisa Math.pow (2, 3). Zvinoita sezviri nyore, asi pfungwa iyi inosanganisirwa mune rondedzero yehunyanzvi, nekuti haina kutaurwa kwese.

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

Haifanirwe kuvhiringika ne ^ chiratidzo, chinowanzo shandiswa kutsanangudza. Asi muJavaScript uyu ndiye XOR opareta.

Pamberi peES7, iyo ** nzira yekudimbudzira inogona kungoshandiswa kune masimba ekutanga 2 uchishandisa bitwise kuruboshwe shift opareta <<:

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

Semuenzaniso, 2 <<3 = 16 yakaenzana ne2 ** 4 = 16.

Yangarara kuita nhamba

KUSHANDISWA / TYPE KUSHANDURA

Kana uchida kushandura chinoyangarara kuita nhamba yakakwana, unogona kushandisa Math.floor(), Math.ceil() kana Math.round(). Asi pane nzira yekukurumidza, yeiyi yatinoshandisa |, kureva, OR mushandisi.

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

Maitiro | kunoenderana zvakanyanya nekuti uri kutarisana nenhamba dzakanaka kana dzisina kunaka, saka nzira iyi yakakodzera chete kana uine chivimbo mune zvauri kuita.

n | 0 inobvisa zvese mushure memupatsanuri wedesimali, ichidimburira kutenderera kune nhamba.

Iwe unogona kuwana yakafanana yekutenderera mhedzisiro uchishandisa ~~. Mushure mekumanikidzwa kutendeuka kuita nhamba yakazara, kukosha kunoramba kusina kuchinjwa.

Kubvisa nhamba dzinotevera

Iyo OR mushandisi inogona kushandiswa kubvisa chero nhamba yemanhamba kubva panhamba. Izvi zvinoreva kuti hatifanire kushandura mhando sepano:

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

Pane kudaro tinongonyora kuti:

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

Kubatanidza otomatiki

MAkirasi

ES6 museve notations inogona kushandiswa mukirasi nzira, uye kusunga kunorehwa. Izvi zvinoreva kuti unogona kuonekana kudzokororo yekutaura seizvi.myMethod = this.myMethod.bind(iyi)!

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

Kucheka array

ARRAYS

Kana iwe uchida kubvisa kukosha kubva muhurongwa, kune nzira dzinokurumidza kupfuura splice ().

Semuenzaniso, kana iwe uchiziva saizi yepakutanga array, unogona kudarika kureba kwayo pfuma sezvinotevera:

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

Asi pane imwe nzira, uye inokurumidza. Kana kumhanya kuriko kwakakosha kwauri, hezvino zvatinosarudza:

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]

Kudhinda ukoshi hwekupedzisira (s) hwehurongwa

ARRAYS
Iyi nzira inoda kushandiswa kweiyo slice() nzira.

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]

Kugadzira JSON kodhi

JSON

Unogona kunge watoshandisa JSON.stringify. Wanga uchiziva here kuti inobatsira fomati yako JSON?

Iyo stringify() nzira inotora maviri esarudzo paramita: inotsiva basa, inogona kushandiswa kusefa iyo JSON inoratidzwa, uye kukosha kwenzvimbo.

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

Ndizvo chete, ndinovimba kuti maitiro ese aya aibatsira. Manomano api aunoziva? Zvinyore mumashoko.

Skillbox inokurudzira:

Makore maviri anoshanda kosi "Ini ndiri PRO webhu developer".

Yepamhepo kosi "C # mugadziri kubva ku0".

Kosi yegore rimwechete "PHP mugadziri kubva 0 kusvika PRO".

Source: www.habr.com

12 JavaScript Tricks Iyo Yakawanda Tutorials Inopotsa

Kusefa zvakasiyana siyana

Hurefu hwe cache array muma cycles

Short circuit rating (McCarthy rating)

Shandura kuita Boolean

Shandura kuita tambo

Shandura kuita nhamba

<Quick Powers

Yangarara kuita nhamba

Kubatanidza otomatiki

Kucheka array

Kudhinda ukoshi hwekupedzisira (s) hwehurongwa

Kugadzira JSON kodhi

Voeg kukanzura mhinduro