Noong nagsimula akong mag-aral ng JavaScript, ang una kong ginawa ay gumawa ng listahan ng mga trick na nakatulong sa akin na makatipid ng oras. Nakita ko sila mula sa iba pang mga programmer, sa iba't ibang mga site at sa mga manwal.
Sa artikulong ito, ipapakita ko sa iyo ang 12 mahusay na paraan upang mapabuti at mapabilis ang iyong JavaScript code. Sa karamihan ng mga kaso, ang mga ito ay pangkalahatan.
Pinapaalala namin sa iyo: para sa lahat ng mga mambabasa ng "Habr" - isang diskwento na 10 rubles kapag nag-enroll sa anumang kurso sa Skillbox gamit ang code na pang-promosyon ng "Habr".
Inirerekomenda ng Skillbox ang: Praktikal na kurso .
Pag-filter ng mga natatanging halaga
MGA ARAY
Ang uri ng Set object ay ipinakilala sa ES6, kasama ang..., spread operator, magagamit natin ito upang lumikha ng bagong array na naglalaman lamang ng mga natatanging value.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Sa isang normal na sitwasyon, marami pang code ang kailangan upang maisagawa ang parehong operasyon.
Gumagana ang diskarteng ito para sa mga array na naglalaman ng mga primitive na uri: undefined, null, boolean, string at number. Kung nagtatrabaho ka sa isang array na naglalaman ng mga object, function, o karagdagang array, kakailanganin mo ng ibang diskarte.
Haba ng cache array sa mga cycle
MGA CYCLE
Kapag natuto ka para sa mga loop, sinusunod mo ang karaniwang pamamaraan:
for (let i = 0; i < array.length; i++){
console.log(i);
}Gayunpaman, sa syntax na ito, paulit-ulit na sinusuri ng for loop ang haba ng array sa bawat pag-ulit.
Minsan ito ay maaaring maging kapaki-pakinabang, ngunit sa karamihan ng mga kaso ay mas mahusay na i-cache ang haba ng array, na mangangailangan ng isang access dito. Magagawa natin ito sa pamamagitan ng pagtukoy ng variable na haba kung saan tinukoy natin ang variable na i, tulad nito:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Sa prinsipyo, halos pareho sa itaas, ngunit sa pamamagitan ng pagtaas ng laki ng loop makakakuha tayo ng makabuluhang pagtitipid sa oras.
Short circuit rating (McCarthy rating)
MGA KONDISYONAL NA OPERATOR
Ang ternary operator ay isang mabilis at mahusay na paraan upang magsulat ng mga simple (at kung minsan ay hindi gaanong simple) na mga kondisyonal na pahayag:
x> 100? "higit sa 100": "mas mababa sa 100";
x> 100? (x>200? "more than 200": "sa pagitan ng 100-200"): "mas mababa sa 100";
Ngunit kung minsan kahit na ang ternary operator ay mas kumplikado kaysa sa kinakailangan. Maaari naming gamitin ang 'at' && at 'o' sa halip || Boolean operator upang suriin ang ilang mga expression sa isang mas maigsi na paraan. Madalas itong tinatawag na "short circuit" o "short circuit rating".
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Sabihin nating gusto nating ibalik ang isa lang sa dalawa o higit pang kundisyon.
Ang paggamit ng && ay magbabalik ng unang maling halaga. Kung ang bawat operand ay magiging true, ang huling expression na nasuri ay ibabalik.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Gamit ang || ibabalik ang unang tunay na halaga. Kung ang bawat operand ay magiging false, ang huling nasuri na halaga ay ibabalik.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullhalimbawa 1
Sabihin nating gusto nating ibalik ang haba ng isang variable, ngunit hindi natin alam ang uri nito.
Sa kasong ito, maaari mong gamitin ang if/else upang suriin na ang foo ay ang tamang uri, ngunit maaaring masyadong mahaba ang paraang ito. Samakatuwid, mas mahusay na kunin ang aming "short circuit".
return (foo || []).length;Kung ang variable na foo ay may angkop na haba, ibabalik iyon. Kung hindi, makakakuha tayo ng 0.
halimbawa 2
Nagkaroon ka ba ng mga problema sa pag-access ng nested object? Maaaring hindi mo alam kung mayroong isang bagay o isa sa mga subproperties nito, at maaari itong humantong sa mga problema.
Halimbawa, gusto naming i-access ang property ng data sa this.state, ngunit hindi natukoy ang data hanggang sa magbalik ang aming program ng kahilingan sa pagkuha.
Depende sa kung saan namin ito ginagamit, ang pagtawag sa this.state.data ay maaaring pumigil sa application na magsimula. Upang malutas ang problema, maaari naming balutin ito sa isang conditional expression:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Ang isang mas mahusay na pagpipilian ay ang paggamit ng "o" operator.
return (this.state.data || 'Fetching Data');Hindi namin mababago ang code sa itaas para gamitin ang &&. Ibabalik ng 'Fetching Data' && this.state.data operator ang this.state.data hindi alintana kung ito ay hindi natukoy o hindi.
Opsyonal na kadena
Maaaring imungkahi ng isa ang paggamit ng opsyonal na pag-chain kapag sinusubukang ibalik ang isang ari-arian nang malalim sa isang istraktura ng puno. Kaya, ang simbolo ng tandang pananong? ay maaaring gamitin upang kunin ang isang ari-arian lamang kung ito ay hindi null.
Halimbawa, maaari naming i-refactor ang halimbawa sa itaas upang makuha ito.state.data?..(). Iyon ay, ang data ay ibinalik lamang kung ang halaga ay hindi null.
O, kung mahalaga kung tinukoy ang estado o hindi, maaari naming ibalik ang this.state?.data.
I-convert sa Boolean
TYPE CONVERSION
Bilang karagdagan sa mga normal na function ng boolean na true at false, tinatrato din ng JavaScript ang lahat ng iba pang value bilang totoo o mali.
Hanggang sa kung hindi man nabanggit, lahat ng mga halaga sa JavaScript ay totoo maliban sa 0, "", null, hindi natukoy, NaN at, siyempre, mali. Ang huli ay huwad.
Madali tayong makakapagpalipat-lipat sa dalawa gamit ang ! operator, na nagko-convert din ng uri sa boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"I-convert sa string
TYPE CONVERSION
Ang isang mabilis na conversion mula sa isang integer sa isang string ay maaaring gawin bilang mga sumusunod.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"I-convert sa integer
TYPE CONVERSION
Ginagawa namin ang reverse transformation tulad nito.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Magagamit din ang paraang ito para i-convert ang boolean data type sa mga regular na numeric value, gaya ng ipinapakita sa ibaba:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Maaaring may mga sitwasyon kung saan ang + ay bibigyang-kahulugan bilang isang concatenation operator sa halip na isang karagdagan operator. Upang maiwasan ito, dapat mong gamitin ang tildes: ~~. Ang operator na ito ay katumbas ng -n-1. Halimbawa, ang ~15 ay katumbas ng -16.
Ang paggamit ng dalawang tilde sa isang hilera ay nagpapawalang-bisa sa operasyon dahil - (- - n - 1) - 1 = n + 1 - 1 = n. Sa madaling salita, ang ~-16 ay katumbas ng 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
MGA OPERASYON
Simula sa ES7, maaari mong gamitin ang exponentiation operator ** bilang shorthand para sa powers. Ito ay mas mabilis kaysa sa paggamit ng Math.pow(2, 3). Tila simple, ngunit ang puntong ito ay kasama sa listahan ng mga diskarte, dahil hindi ito nabanggit sa lahat ng dako.
console.log(2 ** 3); // Result: 8Hindi ito dapat malito sa simbolo na ^, na karaniwang ginagamit para sa exponentiation. Ngunit sa JavaScript ito ang XOR operator.
Bago ang ES7, ang ** shortcut ay maaari lamang gamitin para sa mga kapangyarihan ng base 2 gamit ang bitwise left shift operator <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Halimbawa, ang 2 << 3 = 16 ay katumbas ng 2 ** 4 = 16.
Lutang sa integer
MGA OPERASYON / TYPE CONVERSION
Kung kailangan mong i-convert ang float sa isang integer, maaari mong gamitin ang Math.floor(), Math.ceil() o Math.round(). Ngunit mayroong isang mas mabilis na paraan, para dito ginagamit namin ang |, iyon ay, ang OR operator.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Pag-uugali | higit sa lahat ay nakasalalay sa kung ikaw ay nakikitungo sa mga positibo o negatibong mga numero, kaya ang pamamaraang ito ay angkop lamang kung ikaw ay may tiwala sa iyong ginagawa.
n | 0 ay nag-aalis ng lahat pagkatapos ng decimal separator, pinuputol ang float sa isang integer.
Maaari kang makakuha ng parehong rounding effect gamit ang ~~. Pagkatapos ng sapilitang conversion sa isang integer, ang halaga ay nananatiling hindi nagbabago.
Pag-alis ng mga trailing number
Ang OR operator ay maaaring gamitin upang alisin ang anumang bilang ng mga digit mula sa isang numero. Nangangahulugan ito na hindi namin kailangang mag-convert ng mga uri tulad dito:
let str = "1553";
Number(str.substring(0, str.length - 1));Sa halip, sumulat lamang kami:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Awtomatikong pag-link
MGA KLASE
Maaaring gamitin ang mga notasyon ng arrow ng ES6 sa mga pamamaraan ng klase, at ipinahiwatig ang pagbubuklod. Nangangahulugan ito na maaari kang magpaalam sa mga paulit-ulit na expression na tulad nito.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>
</>
)
}
};Pag-trim ng array
MGA ARAY
Kung kailangan mong alisin ang mga halaga mula sa isang array, mayroong mas mabilis na pamamaraan kaysa sa splice().
Halimbawa, kung alam mo ang laki ng orihinal na array, maaari mong i-override ang length property nito gaya ng sumusunod:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ngunit may isa pang paraan, at mas mabilis. Kung ang bilis ang mahalaga sa iyo, narito ang aming mga pinili:
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]Pagpi-print ng (mga) huling halaga ng isang array
MGA ARAY
Ang diskarteng ito ay nangangailangan ng paggamit ng slice() na paraan.
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]Pag-format ng JSON code
JSON
Maaaring nagamit mo na ang JSON.stringify. Alam mo ba na nakakatulong ito sa pag-format ng iyong JSON?
Ang stringify() na paraan ay tumatagal ng dalawang opsyonal na parameter: isang replacer function, na maaaring gamitin upang i-filter ang JSON na ipinapakita, at isang space value.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Iyon lang, umaasa ako na ang lahat ng mga diskarteng ito ay naging kapaki-pakinabang. Anong mga trick ang alam mo? Isulat ang mga ito sa mga komento.
Inirerekomenda ng Skillbox ang:
- Dalawang taong praktikal na kurso .
- Online na kurso .
- Praktikal na kurso sa taon .
Pinagmulan: www.habr.com