Pulogalamu ya ProHoster > Blog > nkhani zapaintaneti > Malangizo 12 a JavaScript Amene Ambiri Amaphonya

Malangizo 12 a JavaScript Amene Ambiri Amaphonya

Malangizo 12 a JavaScript Amene Ambiri Amaphonya

Nditayamba kuphunzira JavaScript, chinthu choyamba chimene ndinachita chinali kupanga mndandanda wa zidule zomwe zinandithandiza kusunga nthawi. Ndinaziwona kuchokera kwa opanga mapulogalamu ena, pamasamba osiyanasiyana komanso m'mabuku.

M'nkhaniyi, ndikuwonetsani njira 12 zabwino zosinthira ndikufulumizitsa khodi yanu ya JavaScript. Nthawi zambiri zimakhala zapadziko lonse lapansi.

Tikukukumbutsani: kwa owerenga onse a Habr - kuchotsera ma ruble 10 polembetsa maphunziro aliwonse a Skillbox pogwiritsa ntchito nambala yotsatsira ya Habr.

Skillbox imalimbikitsa: Njira yothandiza "Mobile Developer PRO".

Kusefa makonda apadera

ARRAYS

Mtundu wa Set object unayambika mu ES6, pamodzi ndi..., spread operator, tingaugwiritse ntchito kupanga gulu latsopano lomwe lili ndi makhalidwe apadera okha.

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

Munthawi yabwinobwino, pamafunika ma code ambiri kuti agwire ntchito yomweyo.

Njirayi imagwira ntchito m'magulu omwe ali ndi mitundu yakale: yosadziwika, yopanda pake, ya boolean, chingwe ndi nambala. Ngati mukugwira ntchito ndi gulu lomwe lili ndi zinthu, ntchito, kapena magulu owonjezera, mufunika njira ina.

Utali wa cache array mozungulira

ZANG'ONO

Mukaphunzira malupu, mumatsatira ndondomeko yoyenera:

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

Komabe, ndi syntax iyi, the for loop imayang'ana mobwerezabwereza kutalika kwa mndandanda uliwonse.

Nthawi zina izi zitha kukhala zothandiza, koma nthawi zambiri zimakhala zogwira mtima kwambiri kusungitsa kutalika kwa gululo, zomwe zimafuna kuti munthu azitha kuzipeza. Titha kuchita izi pofotokozera kutalika kwa kutalika komwe timatanthauzira kusinthika i, motere:

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

M'malo mwake, pafupifupi mofanana ndi pamwambapa, koma powonjezera kukula kwa loop tidzapeza nthawi yopulumutsa.

Chiyerekezo chachifupi (McCarthy rating)

OGWIRITSA NTCHITO ZONSE

The ternary operator ndi njira yachangu komanso yabwino yolembera ziganizo zosavuta (ndipo nthawi zina osati zophweka):

x>100! β€œmore than 100”: β€œ less than 100”;
x>100! (x>200? "more than 200": "pakati pa 100-200"): "zochepera 100";

Koma nthawi zina ngakhale woyendetsa ternary amakhala ovuta kuposa momwe amafunikira. Titha kugwiritsa ntchito 'ndi' && ndi 'kapena' m'malo mwake || Ogwiritsa ntchito Boolean kuti aunike mawu ena mwachidule kwambiri. Nthawi zambiri amatchedwa "short circuit" kapena "short circuit rating".

Kodi ntchito

Tiyerekeze kuti tikufuna kubwezera chimodzi chokha mwa ziwiri kapena zingapo.

Kugwiritsa && kudzabweza mtengo woyamba wabodza. Ngati opareshoni iliyonse iwona, ndiye kuti mawu omaliza omwe ayesedwa adzabwezedwa.

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

Kugwiritsa | adzabwezera mtengo weniweni woyamba. Ngati opareshoni iliyonse iwona ngati zabodza, ndiye kuti mtengo wake womaliza udzabwezedwa.

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

Mwachitsanzo 1

Tinene kuti tikufuna kubweza kutalika kwa zosinthika, koma sitikudziwa mtundu wake.

Pankhaniyi, mutha kugwiritsa ntchito ngati/mwina kuti muwone ngati foo ndi mtundu woyenera, koma njirayi ikhoza kukhala yayitali kwambiri. Choncho, ndi bwino kutenga "dera lathu lalifupi".

return (foo || []).length;

Ngati kusinthasintha kwa foo kuli ndi kutalika koyenera, ndiye kuti kubwezeredwa. Apo ayi tipeza 0.

Mwachitsanzo 2

Kodi mwakhala ndi vuto lopeza chinthu chokhazikika? Simungadziwe ngati chinthu kapena chimodzi mwazinthu zake chilipo, ndipo izi zitha kuyambitsa mavuto.

Mwachitsanzo, tinkafuna kupeza malo a data mu this.state, koma deta sinafotokozedwe mpaka pulogalamu yathu itapereka pempho lotenga.

Kutengera komwe timaigwiritsa ntchito, kuyimbira izi.state.data kungapangitse kuti pulogalamuyo isayambike. Kuti tithetse vutoli, titha kukulunga izi m'mawu ovomerezeka:

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

Njira yabwino ndiyo kugwiritsa ntchito "kapena".

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

Sitingasinthe khodi yomwe ili pamwambapa kuti tigwiritse ntchito &&. 'Kutenga Data' && this.state.data wogwiritsa ntchito abweza this.state.data mosasamala kanthu kuti ndi yosadziwika kapena ayi.

Mwasankha unyolo

Wina anganene kuti agwiritse ntchito unyolo wosankha poyesa kubweza malo mkati mwa mtengo. Ndiye, chizindikiro cha funso? zitha kugwiritsidwa ntchito kubweza katundu pokhapokha ngati sichabwino.

Mwachitsanzo, tikhoza kusintha chitsanzo pamwambapa kuti tipeze izi.state.data?..(). Ndiye kuti, deta imabwezedwa pokhapokha ngati mtengowo suli wopanda pake.

Kapena, ngati zili zofunika ngati dziko likufotokozedwa kapena ayi, titha kubweza data iyi.state?.

Sinthani kukhala Boolean

KUSINTHA KWA NTCHITO

Kuphatikiza pa ntchito zachizolowezi za boolean zowona ndi zabodza, JavaScript imagwiranso ntchito zina zonse ngati zowona kapena zabodza.

Mpaka zitadziwika, mfundo zonse mu JavaScript ndizowona, kupatula 0, "", null, undefined, NaN ndipo, zabodza. Zotsirizirazi ndi zabodza.

Titha kusinthana mosavuta pakati pa ziwirizi pogwiritsa ntchito ! operator, yemwenso amasintha mtundu kukhala boolean.

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

Sinthani kukhala chingwe

KUSINTHA KWA NTCHITO

Kutembenuka kwachangu kuchoka pa nambala kupita ku chingwe kungatheke motere.

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

Sinthani kukhala chiwerengero chokwanira

KUSINTHA KWA NTCHITO

Timachita reverse reverse motere.

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

Njirayi ingagwiritsidwenso ntchito kutembenuza mtundu wa data wa boolean kukhala manambala wamba, monga momwe zilili pansipa:

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

Pakhoza kukhala zochitika zomwe + zidzatanthauziridwa ngati wogwirizira m'malo mowonjezera. Kuti mupewe izi, muyenera kugwiritsa ntchito tildes: ~~. Wothandizira uyu ndi wofanana ndi -n-1. Mwachitsanzo, ~15 ndi ofanana ndi -16.

Kugwiritsa ntchito ma tilde awiri motsatana kumalepheretsa ntchitoyi chifukwa - (- - n - 1) - 1 = n + 1 - 1 = n. Mwanjira ina, ~-16 ndi ofanana ndi 15.

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

<Quick Powers

NTCHITO

Kuyambira mu ES7, mutha kugwiritsa ntchito exponentiation operator ** ngati chidule cha mphamvu. Izi ndizothamanga kwambiri kuposa kugwiritsa ntchito Math.pow(2, 3). Zikuwoneka zophweka, koma mfundoyi ikuphatikizidwa mndandanda wa njira, popeza sichimatchulidwa paliponse.

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

Siziyenera kusokonezedwa ndi ^ chizindikiro, chomwe chimagwiritsidwa ntchito pofotokozera. Koma mu JavaScript uyu ndiye woyendetsa XOR.

Pamaso pa ES7, njira yachidule ya ** ikanangogwiritsidwa ntchito pa mphamvu za base 2 pogwiritsa ntchito woyendetsa pang'ono kumanzere <<:

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

Mwachitsanzo, 2 << 3 = 16 ikufanana ndi 2 ** 4 = 16.

Yandani ku chiwerengero chonse

ZOCHITA / KUSINTHA KWA NTCHITO

Ngati mukufuna kusintha zoyandama kukhala nambala, mutha kugwiritsa ntchito Math.floor(), Math.ceil() kapena Math.round(). Koma pali njira yachangu, yomwe timagwiritsa ntchito |, ndiye kuti, OR woyendetsa.

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

Khalidwe | zimatengera makamaka ngati mukuchita ndi manambala abwino kapena olakwika, kotero njira iyi ndi yoyenera ngati muli ndi chidaliro pazomwe mukuchita.

n | 0 imachotsa chilichonse pambuyo pa cholekanitsa cha decimal, ndikuchepetsa zoyandama kukhala nambala.

Mutha kupeza zozungulira zomwezo pogwiritsa ntchito ~~. Pambuyo pa kutembenuzidwa mokakamizidwa kukhala chiwerengero chonse, mtengowo susintha.

Kuchotsa manambala otsatira

Wogwiritsa ntchito OR atha kugwiritsidwa ntchito kuchotsa manambala aliwonse pa nambala. Izi zikutanthauza kuti sitifunika kusintha mitundu monga apa:

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

M'malo mwake timangolemba kuti:

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

Kulumikiza zokha

MAKALASI

Zolemba za ES6 zitha kugwiritsidwa ntchito m'njira zamakalasi, ndipo kumangirira kumatanthawuza. Izi zikutanthauza kuti mutha kutsazikana ndi mawu obwerezabwereza monga awa.myMethod = this.myMethod.bind(izi)!

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

Kukonzekera kwamagulu

ARRAYS

Ngati mukufuna kuchotsa zikhalidwe kuchokera pamndandanda, pali njira zachangu kuposa splice ().

Mwachitsanzo, ngati mukudziwa kukula kwa gulu loyambirira, mutha kupitilira kutalika kwake motere:

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

Koma pali njira ina, ndi yachangu. Ngati liwiro ndilofunika kwa inu, nazi zomwe tasankha:

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]

Kusindikiza mtengo (ma) omaliza a gulu

ARRAYS
Njira iyi imafuna kugwiritsa ntchito njira ya slice().

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]

Kupanga khodi ya JSON

JSON

Mwina mudagwiritsapo ntchito JSON.stringify. Kodi mumadziwa kuti imathandizira kupanga JSON yanu?

Njira ya stringify() imatenga magawo awiri osankha: chosinthira, chomwe chingagwiritsidwe ntchito kusefa JSON yowonetsedwa, ndi mtengo wamalo.

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

Ndizo zonse, ndikuyembekeza kuti njira zonsezi zinali zothandiza. Kodi mumadziwa njira ziti? Lembani mu ndemanga.

Skillbox imalimbikitsa:

Source: www.habr.com

Kuwonjezera ndemanga