12 mau hoʻopunipuni JavaScript i hala ʻole ka hapa nui o nā aʻo

12 mau hoʻopunipuni JavaScript i hala ʻole ka hapa nui o nā aʻo

I koʻu hoʻomaka ʻana e aʻo i ka JavaScript, ʻo ka mea mua aʻu i hana ai, ʻo ia ka papa inoa o nā hana hoʻopunipuni i kōkua iaʻu e mālama i ka manawa. Ua ʻike au iā lākou mai nā polokalamu polokalamu ʻē aʻe, ma nā pūnaewele like ʻole a me nā manual.

Ma kēia ʻatikala, e hōʻike wau iā ʻoe i 12 mau ala maikaʻi e hoʻomaikaʻi ai a wikiwiki i kāu code JavaScript. I ka hapanui o nā hihia, he honua lākou.

Hoʻomaopopo mākou iā ʻoe: no ka poʻe heluhelu a pau o "Habr" - kahi ho'ēmi o 10 rubles i ka wā e kākau inoa ai i kekahi papa Skillbox e hoʻohana ana i ka code promotional "Habr".

Manaʻo ʻo Skillbox: Papa hana "Hoʻolālā Mobile PRO".

Kānana i nā waiwai kū hoʻokahi

NA PALAPALA

Ua hoʻokomo ʻia ke ʻano mea Set ma ES6, me ka..., spread operator, hiki iā mākou ke hoʻohana iā ia e hana i kahi ʻano hou i loaʻa nā waiwai kūʻokoʻa wale nō.

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

Ma kahi kūlana maʻamau, pono ʻoi aku ka nui o nā code e hana i ka hana like.

Hana ʻia kēia ʻenehana no nā ʻano ʻano mua: undefined, null, boolean, string a me ka helu. Inā ʻoe e hana nei me kahi ʻano i loaʻa nā mea, nā hana, a i ʻole nā ​​​​lāʻau ʻē aʻe, pono ʻoe i kahi ala ʻē aʻe.

Ka lōʻihi o ka hoʻonohonoho huna i nā pōʻai

NA PALAPALA

Ke aʻo ʻoe no nā puka lou, hahai ʻoe i ke kaʻina hana maʻamau:

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

Eia nō naʻe, me kēia syntax, nānā pinepine ka loop for i ka lōʻihi o ka array i kēlā me kēia hoʻololi.

I kekahi manawa hiki ke hoʻohana i kēia, akā i ka hapanui o nā hihia, ʻoi aku ka maikaʻi o ka hūnā i ka lōʻihi o ka laha, kahi e pono ai ke komo i laila. Hiki iā mākou ke hana i kēia ma ka wehewehe ʻana i kahi hoʻololi lōʻihi kahi e wehewehe ai mākou i ka variable i, e like me kēia:

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

Ma ke kumu, aneane like me ka mea i luna, akā ma ka hoʻonui ʻana i ka nui loop e loaʻa iā mākou ka nui o ka mālama manawa.

Ka helu kaapuni pōkole (McCarthy rating)

NA HANA HANA

ʻO ka mea hoʻohana ternary kahi ala wikiwiki a maikaʻi e kākau i nā ʻōlelo kūlana maʻalahi (a i kekahi manawa ʻaʻole maʻalahi):

x> 100? "ʻoi aku ma mua o 100": "emi ma mua o 100";
x> 100? (x>200? "ʻoi aku ma mua o 200": "ma waena o 100-200"): "emi iho ma mua o 100";

Akā i kekahi manawa ʻoi aku ka paʻakikī o ka mea hoʻohana ternary ma mua o ka mea e pono ai. Hiki iā mākou ke hoʻohana i ka 'and' && a me ka 'or' ma kahi || ʻO nā mea hoʻohana Boolean e loiloi i kekahi mau ʻōlelo ma kahi ʻano pōkole loa. Ua kapa pinepine ʻia ʻo "kaapuni pōkole" a i ʻole ka "kaapuni pōkole".

Pehea hana i keia hana

E ʻōlelo mākou makemake mākou e hoʻihoʻi i hoʻokahi wale nō o nā kūlana ʻelua a ʻoi aku paha.

E hoʻohana ana i ka && e hoʻihoʻi i ka waiwai hoʻopunipuni mua. Inā loiloi kēlā me kēia operand i ka ʻoiaʻiʻo, a laila e hoʻihoʻi ʻia ka ʻōlelo hope i loiloi ʻia.

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

Ke hoʻohana nei i || e hoʻihoʻi i ka waiwai ʻoiaʻiʻo mua. Inā loiloi kēlā me kēia operand i ka wahaheʻe, a laila e hoʻihoʻi ʻia ka waiwai loiloi hope.

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

Eia kekahi laʻana 1

E ʻōlelo mākou makemake mākou e hoʻihoʻi i ka lōʻihi o kahi loli, akā ʻaʻole maopopo mākou i kona ʻano.

I kēia hihia, hiki iā ʻoe ke hoʻohana inā/else e nānā i ka foo ke ʻano kūpono, akā lōʻihi paha kēia ʻano. No laila, ʻoi aku ka maikaʻi o ka lawe ʻana i kā mākou "pōkole".

return (foo || []).length;

Inā kūpono ka lōʻihi o ka foo, a laila e hoʻihoʻi ʻia. A i ʻole e loaʻa iā mākou ka 0.

Eia kekahi laʻana 2

Ua pilikia paha ʻoe i ke komo ʻana i kahi mea pūnana? ʻAʻole paha ʻoe i ʻike inā loaʻa kahi mea a i ʻole kekahi o kāna mau ʻāpana, a hiki i kēia ke alakaʻi i nā pilikia.

No ka laʻana, makemake mākou e komo i ka waiwai ʻikepili ma this.state, akā ʻaʻole i wehewehe ʻia ka ʻikepili a hiki i kā mākou polokalamu ke hoʻihoʻi mai i kahi noi kiʻi.

Ma muli o kahi a mākou e hoʻohana ai, kāhea ʻia kēia.state.data hiki ke pale i ka hoʻomaka ʻana o ka noi. No ka hoʻoponopono ʻana i ka pilikia, hiki iā mākou ke hoʻopili i kēia i kahi ʻōlelo kūlana:

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

ʻO kahi koho maikaʻi aʻe e hoʻohana i ka mea hoʻohana "a".

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

ʻAʻole hiki iā mākou ke hoʻololi i ke code ma luna e hoʻohana i ka &&. Na ka 'Fetching Data' && this.state.data operator e hoʻihoʻi i kēia.state.data me ka ʻole o ka wehewehe ʻana a i ʻole.

kaulahao koho

Manaʻo paha kekahi e hoʻohana i ke kaulahao koho i ka wā e hoʻāʻo ai e hoʻihoʻi i kahi waiwai i loko o kahi hale lāʻau. No laila, ka hōʻailona hōʻailona nīnau? hiki ke hoʻohana e kiʻi i kahi waiwai inā ʻaʻole null.

No ka laʻana, hiki iā mākou ke hana hou i ka laʻana i luna e kiʻi i kēia.state.data?..(). ʻO ia, hoʻihoʻi ʻia ka ʻikepili inā ʻaʻole null ka waiwai.

A i ʻole, inā pili inā wehewehe ʻia ka mokuʻāina a ʻaʻole paha, hiki iā mākou ke hoʻihoʻi i kēia.state?.data.

E hoohuli i Boolean

HOOLOLI ANO

Ma waho aʻe o nā hana boolean maʻamau ʻoiaʻiʻo a hoʻopunipuni, mālama pū ʻo JavaScript i nā waiwai ʻē aʻe a pau he ʻoiaʻiʻo a hoʻopunipuni paha.

A hiki i ka ʻike ʻia ʻana, he ʻoiaʻiʻo nā waiwai āpau ma JavaScript, koe wale nō 0, "", null, undefined, NaN a, ʻoiaʻiʻo, he wahaheʻe. He wahahee ka hope.

Hiki iā mākou ke hoʻololi maʻalahi ma waena o nā mea ʻelua me ka hoʻohana ʻana i ka ! operator, nāna e hoʻololi i ke ʻano i boolean.

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

E hoʻohuli i ke kaula

HOOLOLI ANO

Hiki ke hana ʻia ka hoʻololi wikiwiki ʻana mai ka integer i kahi kaula penei.

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

E hoʻohuli i ka helu helu

HOOLOLI ANO

Hana mākou i ka hoʻololi hoʻohuli e like me kēia.

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

Hiki ke hoʻohana ʻia kēia ʻano hana no ka hoʻololi ʻana i ke ʻano ʻikepili boolean i nā waiwai helu maʻamau, e like me ka hōʻike ʻana ma lalo nei.

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

Aia paha nā kūlana kahi e unuhi ʻia ai ka + ma ke ʻano he mea hoʻohana concatenation ma mua o kahi mea hoʻohui. No ka pale ʻana i kēia, pono ʻoe e hoʻohana i nā tildes: ~~. Ua like kēia mea hana me -n-1. No ka laʻana, ua like ʻo ~15 me -16.

ʻO ka hoʻohana ʻana i ʻelua tildes i ka lālani e hōʻole i ka hana no ka mea - (- - n - 1) - 1 = n + 1 - 1 = n. I nā huaʻōlelo ʻē aʻe, ua like ʻo ~-16 me 15.

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

<Quick Powers

NA HANA

E hoʻomaka ana ma ES7, hiki iā ʻoe ke hoʻohana i ka mea hoʻohana exponentiation ** ma ke ʻano pōkole no nā mana. ʻOi aku ka wikiwiki o kēia ma mua o ka hoʻohana ʻana iā Math.pow(2, 3). He mea maʻalahi ia, akā ua hoʻokomo ʻia kēia helu i ka papa inoa o nā ʻenehana, ʻoiai ʻaʻole ia i ʻōlelo ʻia ma nā wahi āpau.

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

ʻAʻole pono e huikau me ka hōʻailona ^, i hoʻohana mau ʻia no ka hoʻonui. Akā ma JavaScript kēia ka mea hoʻohana XOR.

Ma mua o ES7, hiki ke hoʻohana wale ʻia ka ** pōkole no nā mana o ka base 2 me ka hoʻohana ʻana i ka mea hoʻololi bitwise hema <<:

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

No ka laʻana, ua like ka 2 << 3 = 16 me 2 ** 4 = 16.

Lana i ka huinahelu

KA HANA / ANO HOOLOLI

Inā pono ʻoe e hoʻololi i kahi lana i ka helu helu, hiki iā ʻoe ke hoʻohana i ka Math.floor(), Math.ceil() a i ʻole Math.round(). Akā aia kahi ala wikiwiki, no kēia mea mākou e hoʻohana ai |, ʻo ia hoʻi, ka mea hoʻohana OR.

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

Hana | hilinaʻi nui inā pili ʻoe i nā helu maikaʻi a maikaʻi ʻole paha, no laila kūpono kēia ala inā hilinaʻi ʻoe i kāu hana.

n | Hoʻopau ka 0 i nā mea a pau ma hope o ka mea hoʻokaʻawale decimal, e ʻoki ana i ka lana i ka integer.

Hiki iā ʻoe ke loaʻa ka hopena pōʻai like me ka hoʻohana ʻana i ~~. Ma hope o ka hoʻololi ʻana i ka integer, ʻaʻole i loli ka waiwai.

Ke wehe nei i nā helu hope

Hiki ke hoʻohana ʻia ka mea hoʻohana OR e wehe i kekahi helu o nā huahelu mai kahi helu. ʻAʻole pono mākou e hoʻololi i nā ʻano like me kēia:

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

Ke kākau wale nei mākou:

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

Hoʻopili ʻakomi

NA PAPA

Hiki ke hoʻohana ʻia nā hōʻailona arrow ES6 i nā ʻano papa, a ua manaʻo ʻia ka paʻa. 'O ia ho'i, hiki iā 'oe ke ha'i aku i ke aloha i nā 'ōlelo hou e like me kēia.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>
      </>
    )
  }
};

ʻOki ʻokiʻoki ʻana

NA PALAPALA

Inā pono ʻoe e wehe i nā waiwai mai kahi array, aia nā ala wikiwiki ma mua o splice().

No ka laʻana, inā ʻike ʻoe i ka nui o ka laha kumu, hiki iā ʻoe ke hoʻopau i kona waiwai lōʻihi e like me kēia:

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

Akā aia kekahi ala ʻē aʻe, a ʻoi aku ka wikiwiki. Inā ʻo ka wikiwiki ka mea nui iā ʻoe, eia kā mākou mau koho:

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]

Ke paʻi ʻana i ka waiwai hope o kahi laʻana

NA PALAPALA
Pono kēia ʻenehana i ka hoʻohana ʻana i ke ala 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]

Hoʻopololei i ke code JSON

JSON

Ua hoʻohana mua paha ʻoe iā JSON.stringify. Ua ʻike paha ʻoe e kōkua ana ia i ka hoʻopili ʻana i kāu JSON?

ʻO ke ala stringify () lawe i ʻelua mau ʻāpana koho: kahi hana pani, hiki ke hoʻohana ʻia e kānana i ka JSON i hōʻike ʻia, a me kahi waiwai ākea.

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

ʻO ia wale nō, manaʻolana wau ua pono kēia mau ʻenehana a pau. He aha nā hana hoʻopunipuni āu i ʻike ai? E kākau iā lākou ma nā manaʻo.

Manaʻo ʻo Skillbox:

Source: www.habr.com

Pākuʻi i ka manaʻo hoʻopuka