Sa dihang nagsugod ko sa pagkat-on sa JavaScript, ang unang butang nga akong gibuhat mao ang paghimo og listahan sa mga limbong nga nakatabang kanako nga makadaginot sa oras. Nakita nako sila gikan sa ubang mga programmer, sa lainlaing mga site ug sa mga manwal.
Niini nga artikulo, ipakita ko kanimo ang 12 ka maayong mga paagi aron mapaayo ug mapadali ang imong JavaScript code. Sa kadaghanan nga mga kaso sila unibersal.
Gipahinumduman namon ikaw: alang sa tanan nga mga magbabasa sa "Habr" - usa ka diskwento sa 10 nga mga rubles kung nagpalista sa bisan unsang kurso sa Skillbox gamit ang code sa promosyon nga "Habr".
Girekomenda sa Skillbox: Praktikal nga kurso .
Pagsala sa talagsaon nga mga bili
MGA ARAY
Ang Set object type gipaila sa ES6, kauban ang..., spread operator, magamit nato kini sa paghimo og bag-ong array nga adunay mga talagsaong values ββlang.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Sa usa ka normal nga sitwasyon, daghan pa nga code ang gikinahanglan aron mahimo ang parehas nga operasyon.
Kini nga teknik magamit alang sa mga arrays nga adunay mga primitive nga tipo: undefined, null, boolean, string ug numero. Kung nagtrabaho ka sa usa ka array nga adunay mga butang, function, o dugang nga mga arrays, kinahanglan nimo ang lahi nga pamaagi.
Ang gitas-on sa cache array sa mga siklo
MGA CYCLE
Kung nahibal-an nimo ang mga loop, gisunod nimo ang standard nga pamaagi:
for (let i = 0; i < array.length; i++){
console.log(i);
}Bisan pa, sa kini nga syntax, ang for loop balik-balik nga nagsusi sa gitas-on sa array matag pag-uli.
Usahay kini mahimong mapuslanon, apan sa kadaghanan nga mga kaso mas episyente ang pag-cache sa gitas-on sa array, nga magkinahanglan og usa ka access niini. Mahimo nato kini pinaagi sa pagdeterminar sa usa ka variable nga gitas-on diin atong gihubit ang variable i, sama niini:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Sa prinsipyo, halos parehas sa ibabaw, apan pinaagi sa pagdugang sa gidak-on sa loop makakuha kita ug hinungdanon nga pagtipig sa oras.
Mubo nga circuit rating (McCarthy rating)
KONDISYONAL NGA OPERATOR
Ang ternary operator usa ka paspas ug episyente nga paagi sa pagsulat sa yano (ug usahay dili kaayo yano) nga mga kondisyon nga pahayag:
x> 100? βlabaw sa 100β: βubos sa 100β;
x> 100? (x>200? "labaw sa 200": "tali sa 100-200"): "ubos sa 100";
Apan usahay bisan ang operator sa ternary mas komplikado kaysa gikinahanglan. Mahimo natong gamiton ang 'ug' && ug 'o' imbes || Ang mga operator sa Boolean aron sa pagtimbang-timbang sa pipila ka mga ekspresyon sa mas mubu nga paagi. Kanunay kini gitawag nga "short circuit" o "short circuit rating".
Unsa nga paagi nga kini nga buhat
Ingnon ta nga gusto natong ibalik ang usa sa duha o daghan pa nga mga kondisyon.
Ang paggamit sa && ibalik ang una nga sayup nga kantidad. Kung ang matag operand mag-evaluate sa tinuod, nan ang katapusang ekspresyon nga gi-evaluate ibalik.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Paggamit || ibalik ang unang tinuod nga bili. Kung ang matag operand mag-evaluate sa false, unya ang katapusang gi-evaluate nga value ibalik.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullsa panig-ingnan 1
Ingnon ta nga gusto natong ibalik ang gitas-on sa usa ka variable, apan wala kita mahibalo sa matang niini.
Sa kini nga kaso, mahimo nimong gamiton ang if/else aron masusi nga ang foo mao ang husto nga tipo, apan kini nga pamaagi mahimong taas kaayo. Busa, mas maayo nga kuhaon ang atong "short circuit".
return (foo || []).length;Kung ang variable foo adunay angay nga gitas-on, unya kana ibalik. Kung dili, makuha namon ang 0.
sa panig-ingnan 2
Aduna ka bay mga problema sa pag-access sa usa ka nested nga butang? Mahimong wala ka mahibal-an kung adunay usa ka butang o usa sa mga subproperties niini, ug kini mahimong mosangput sa mga problema.
Pananglitan, gusto namong ma-access ang data property sa this.state, apan ang data wala gihubit hangtod ang among programa magbalik ug hangyo sa pagkuha.
Depende kung asa namo kini gamiton, ang pagtawag niini.state.data mahimong makapugong sa aplikasyon gikan sa pagsugod. Aron masulbad ang problema, mahimo natong ibutang kini sa usa ka kondisyon nga ekspresyon:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Ang usa ka mas maayo nga kapilian mao ang paggamit sa "o" operator.
return (this.state.data || 'Fetching Data');Dili namo mausab ang kodigo sa ibabaw para magamit ang &&. Ang 'Fetching Data' && this.state.data operator ibalik kini.state.data bisan pa kung kini wala mahibal-an o dili.
Opsyonal nga kadena
Mahimong isugyot sa usa ang paggamit sa opsyonal nga pagkadena kung pagsulay nga ibalik ang usa ka kabtangan sa lawom nga istruktura sa kahoy. Busa, ang simbolo sa marka sa pangutana? mahimong gamiton sa pagkuha sa usa ka kabtangan lamang kung kini dili null.
Pananglitan, mahimo natong i-refactor ang pananglitan sa ibabaw aron makuha kini.state.data?..(). Kana mao, ang datos ibalik lamang kung ang kantidad dili null.
O, kung importante kung gihubit ang estado o dili, mahimo namon ibalik kini.state?.data.
I-convert sa Boolean
TYPE CONVERSION
Dugang pa sa normal nga boolean functions true ug false, gitratar usab sa JavaScript ang tanang ubang values ββisip truth or falsy.
Hangtud nga dili mahibal-an, ang tanan nga mga kantidad sa JavaScript tinuod, gawas sa 0, "", null, undefined, NaN ug, siyempre, bakak. Ang naulahi bakak.
Dali ra tang makabalhin tali sa duha gamit ang ! operator, nga nagbag-o usab sa tipo 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 hilo
TYPE CONVERSION
Ang usa ka dali nga pagkakabig gikan sa usa ka integer ngadto sa usa ka hilo mahimo nga ingon sa mosunod.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"I-convert sa integer
TYPE CONVERSION
Gihimo namo ang reverse transformation sama niini.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Kini nga pamaagi mahimo usab nga gamiton sa pag-convert sa boolean data type ngadto sa regular nga numeric values, sama sa gipakita sa ubos:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mahimong adunay mga sitwasyon diin ang + hubaron nga usa ka concatenation operator kaysa usa ka dugang nga operator. Aron malikayan kini, kinahanglan nimong gamiton ang tildes: ~~. Kini nga operator katumbas sa -n-1. Pananglitan, ang ~15 katumbas sa -16.
Ang paggamit sa duha ka tilde sa usa ka laray nagsalikway sa operasyon tungod kay - (- - n - 1) - 1 = n + 1 - 1 = n. Sa laing pagkasulti, ang ~-16 katumbas sa 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERASYON
Sugod sa ES7, mahimo nimong gamiton ang exponentiation operator ** isip shorthand alang sa mga gahum. Kini mas paspas kay sa paggamit sa Math.pow(2, 3). Ingon og yano, apan kini nga punto gilakip sa lista sa mga teknik, tungod kay wala kini gihisgutan bisan diin.
console.log(2 ** 3); // Result: 8Kinahanglang dili kini malibug sa ^ simbolo, nga sagad gigamit alang sa exponentation. Apan sa JavaScript kini ang XOR operator.
Sa wala pa ang ES7, ang ** shortcut magamit lamang alang sa mga gahum sa base 2 gamit ang bitwise left shift operator <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Pananglitan, ang 2 << 3 = 16 katumbas sa 2 ** 4 = 16.
Lutaw ngadto sa integer
OPERASYON / TYPE CONVERSION
Kung kinahanglan nimo nga i-convert ang float ngadto sa integer, mahimo nimong gamiton ang Math.floor(), Math.ceil() o Math.round(). Apan adunay usa ka mas paspas nga paagi, alang niini atong gigamit |, nga mao, ang OR operator.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Kinaiya | nagdepende sa kadaghanan kung nag-atubang ka sa positibo o negatibo nga mga numero, busa kini nga pamaagi angay lamang kung masaligon ka sa imong gibuhat.
n | 0 nagtangtang sa tanan pagkahuman sa decimal separator, giputol ang float sa usa ka integer.
Makuha nimo ang parehas nga rounding effect gamit ang ~~. Human sa pinugos nga pagkakabig ngadto sa usa ka integer, ang bili nagpabilin nga wala mausab.
Pagtangtang sa mga trailing number
Ang OR operator mahimong magamit sa pagtangtang sa bisan unsang gidaghanon sa mga numero gikan sa usa ka numero. Kini nagpasabot nga dili na nato kinahanglan nga i-convert ang mga tipo sama dinhi:
let str = "1553";
Number(str.substring(0, str.length - 1));Imbes isulat lang namo:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Awtomatikong pagsumpay
MGA KLASE
Ang mga notasyon sa ES6 arrow mahimong magamit sa mga pamaagi sa klase, ug ang pagbugkos gipasabot. Nagpasabot kini nga mahimo kang manamilit sa nagbalikbalik nga mga ekspresyon nga sama niini.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>
</>
)
}
};Pagputol sa array
MGA ARAY
Kung kinahanglan nimo nga hubaron ang mga kantidad gikan sa usa ka laray, adunay mas paspas nga mga pamaagi kaysa splice().
Pananglitan, kung nahibal-an nimo ang gidak-on sa orihinal nga array, mahimo nimong i-override ang gitas-on nga kabtangan sama sa mosunod:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Apan adunay laing paagi, ug mas paspas. Kung ang katulin mao ang hinungdanon kanimo, ania ang among mga gipili:
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]Pag-imprinta sa kataposang (mga) bili sa usa ka laray
MGA ARAY
Kini nga teknik nagkinahanglan sa paggamit sa slice() nga pamaagi.
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 sa JSON code
JSON
Mahimong gigamit na nimo ang JSON.stringify. Nahibal-an ba nimo nga kini makatabang sa pag-format sa imong JSON?
Ang stringify() nga pamaagi nagkinahanglan og duha ka opsyonal nga mga parameter: usa ka replacer function, nga magamit sa pagsala sa JSON nga gipakita, ug usa ka space value.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Kana lang, nanghinaut ko nga kining tanan nga mga teknik mapuslanon. Unsang mga limbong ang imong nahibal-an? Isulat kini sa mga komento.
Girekomenda sa Skillbox:
- Duha ka tuig nga praktikal nga kurso .
- Online nga kurso .
- Praktikal nga tuig nga kurso .
Source: www.habr.com