Nuair a thòisich mi ag ionnsachadh JavaScript, b’ e a’ chiad rud a rinn mi liosta de chleasan a chuidich mi gus ùine a shàbhaladh. Chunnaic mi iad bho phrògramadairean eile, air diofar làraich agus ann an leabhraichean-làimhe.
San artaigil seo, seallaidh mi dhut 12 dòighean math air do chòd JavaScript adhartachadh agus a luathachadh. Anns a 'mhòr-chuid de chùisean tha iad uile-choitcheann.
Tha sinn a ’cur nar cuimhne: airson a h-uile leughadair de "Habr" - lasachadh de 10 rubles nuair a chlàraicheas tu ann an cùrsa sam bith Skillbox a 'cleachdadh a' chòd adhartachaidh "Habr".
Tha Skillbox a’ moladh: Cùrsa practaigeach .
A 'sìoladh luachan sònraichte
EARRAICHEAN
Chaidh an seòrsa nì Set a thoirt a-steach ann an ES6, còmhla ris a’ ghnìomhaiche sgaoilidh..., is urrainn dhuinn a chleachdadh gus sreath ùr a chruthachadh anns nach eil ach luachan sònraichte.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Ann an suidheachadh àbhaisteach, tha feum air tòrr a bharrachd còd gus an aon obrachadh a dhèanamh.
Bidh an dòigh seo ag obair airson arrays anns a bheil seòrsaichean prìomhadail: neo-mhìnichte, null, boolean, sreang agus àireamh. Ma tha thu ag obair le sreath anns a bheil nithean, gnìomhan, no rèiteachaidhean a bharrachd, bidh feum agad air dòigh-obrach eadar-dhealaichte.
Fad an t-sreath cache ann an cearcallan
CEISTEAN
Nuair a bhios tu ag ionnsachadh airson lùban, leanaidh tu am modh àbhaisteach:
for (let i = 0; i < array.length; i++){
console.log(i);
}Ach, leis a 'cho-chòrdadh seo, bidh an airson lùb a' sgrùdadh fad an t-sreath gach tionndadh.
Aig amannan faodaidh seo a bhith feumail, ach sa mhòr-chuid de chùisean tha e nas èifeachdaiche fad an t-sreath a thasgadh, a dh ’fheumas aon ruigsinneachd air. Is urrainn dhuinn seo a dhèanamh le bhith a’ mìneachadh caochladair faid far a bheil sinn a’ mìneachadh an caochladair i, mar seo:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Ann am prionnsabal, cha mhòr an aon rud ris gu h-àrd, ach le bhith a 'meudachadh meud lùb gheibh sinn sàbhalaidhean mòra ùine.
Ìre cuairt ghoirid (rangachadh McCarthy)
OBRACHAIDHEAN CHOINNICH
Tha an gnìomhaiche ternary na dhòigh luath is èifeachdach air aithrisean cumhach sìmplidh (agus uaireannan nach eil cho sìmplidh) a sgrìobhadh:
x> 100? “barrachd air 100”: “nas lugha na 100”;
x> 100? (x> 200?" barrachd air 200": "eadar 100-200"): "nas lugha na 100";
Ach uaireannan tha eadhon an gnìomhaiche ternary nas toinnte na tha riatanach. Faodaidh sinn 'agus' && agus 'no' a chleachdadh an àite || Luchd-obrachaidh Boolean gus cuid de abairtean a mheasadh ann an dòigh eadhon nas pongail. Canar gu tric "cuairt ghoirid" no "rangachadh cuairt ghoirid" ris.
Ciamar a tha an obair seo
Canaidh sinn gu bheil sinn airson dìreach aon de dhà chùmhnant no barrachd a thilleadh.
Tillidh cleachdadh && a’ chiad luach meallta. Ma tha gach operand a’ measadh gu fìor, thèid an abairt mu dheireadh a chaidh a mheasadh a thilleadh.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0A’ cleachdadh || tillidh e a’ chiad fhìor luach. Ma thèid gach operand a mheasadh gu ceàrr, thèid an luach mu dheireadh a chaidh a mheasadh a thilleadh.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullMar eisimpleir 1
Canaidh sinn gu bheil sinn airson fad caochladair a thilleadh, ach chan eil fios againn dè an seòrsa a th’ ann.
Anns a 'chùis seo, faodaidh tu a chleachdadh ma tha / eile gus dèanamh cinnteach gur e foo an seòrsa ceart, ach faodaidh an dòigh seo a bhith ro fhada. Mar sin, tha e nas fheàrr ar “cuairt ghoirid” a ghabhail.
return (foo || []).length;Ma tha faid iomchaidh aig an fhoo caochlaideach, thèid sin a thilleadh. Mur eil, gheibh sinn 0.
Mar eisimpleir 2
A bheil duilgheadas agad faighinn gu rud le neadachadh? Is dòcha nach eil fios agad a bheil nì no aon de na fo-sheilbh aige ann, agus faodaidh seo leantainn gu duilgheadasan.
Mar eisimpleir, bha sinn airson faighinn gu seilbh an dàta ann an this.state, ach chan eil dàta air a mhìneachadh gus an till am prògram againn iarrtas fetch.
A rèir an àite far am bi sinn ga chleachdadh, faodaidh gairm this.state.data casg a chuir air an aplacaid bho bhith a’ tòiseachadh. Gus an duilgheadas fhuasgladh, dh’ fhaodadh sinn seo a phasgadh ann an abairt chumha:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}B 'e roghainn nas fheàrr an gnìomhaiche "no" a chleachdadh.
return (this.state.data || 'Fetching Data');Chan urrainn dhuinn an còd gu h-àrd atharrachadh gus && a chleachdadh. Tillidh an gnìomhaiche ‘Fetching Data’ && this.state.data this.state.data ge bith a bheil e neo-mhìnichte no nach eil.
Sreath roghainneil
Dh’ fhaodadh aon a bhith a’ moladh a bhith a’ cleachdadh slabhraidh roghnach nuair a thathar a’ feuchainn ri togalach a thilleadh gu domhainn a-steach do structar craoibhe. Mar sin, an samhla comharra ceist? faodar a chleachdadh gus seilbh fhaighinn air ais a-mhàin mura h-eil e null.
Mar eisimpleir, b’ urrainn dhuinn an eisimpleir gu h-àrd ath-nuadhachadh gus this.state.data?..(). Is e sin, thèid dàta a thilleadh a-mhàin mura h-eil an luach null.
No, ma tha e cudromach a bheil an stàit air a mhìneachadh no nach eil, dh'fhaodadh sinn an dàta seo.state?.
Tionndaidh gu Boolean
COMHRADH GHINE
A bharrachd air na gnìomhan àbhaisteach boolean fìor agus meallta, bidh JavaScript cuideachd a’ làimhseachadh a h-uile luach eile mar fhìrinn no meallta.
Gus an tèid a chaochladh a chomharrachadh, tha a h-uile luach ann an JavaScript fìrinneach, ach a-mhàin 0, "", null, neo-mhìnichte, NaN agus, gu dearbh, meallta. Tha an fheadhainn mu dheireadh meallta.
Is urrainn dhuinn gu furasta gluasad eadar an dà rud a’ cleachdadh a’ ghnìomhaiche !, a thionndaidheas an seòrsa gu boolean cuideachd.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Tionndaidh gu sreang
COMHRADH GHINE
Faodar tionndadh sgiobalta bho shlànaighear gu sreang a dhèanamh mar a leanas.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Iompaich gu integer
COMHRADH GHINE
Bidh sinn a’ coileanadh a’ chruth-atharrachaidh cùil mar seo.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Faodar an dòigh seo a chleachdadh cuideachd gus an seòrsa dàta boolean a thionndadh gu luachan àireamhach cunbhalach, mar a chithear gu h-ìosal:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Dh’ fhaodadh suidheachaidhean a bhith ann far am bi + air a mhìneachadh mar ghnìomhaiche concatenation seach mar ghnìomhaiche cur-ris. Gus seo a sheachnadh, bu chòir dhut tildes a chleachdadh: ~~. Tha an gnìomhaiche seo co-ionann ri -n-1. Mar eisimpleir, tha ~15 co-ionann ri -16.
Le bhith a’ cleachdadh dà tilde ann an sreath a’ diùltadh an obrachaidh oir - (- - n - 1) - 1 = n + 1 - 1 = n. Ann am faclan eile, tha ~-16 co-ionann ri 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OBRACHAIDHEAN
A’ tòiseachadh ann an ES7, faodaidh tu an gnìomhaiche exponentiation ** a chleachdadh mar làmh-ghoirid airson cumhachdan. Tha seo fada nas luaithe na bhith a’ cleachdadh Math.pow(2, 3). Tha e coltach gu bheil e sìmplidh, ach tha a 'phuing seo air a ghabhail a-steach anns an liosta de dhòighean-obrach, leis nach eil e air ainmeachadh anns a h-uile àite.
console.log(2 ** 3); // Result: 8Cha bu chòir a mheasgadh leis an ^ samhla, a tha gu cumanta air a chleachdadh airson aithris. Ach ann an JavaScript is e seo an gnìomhaiche XOR.
Ro ES7, cha b’ urrainnear an ath-ghoirid ** a chleachdadh ach airson cumhachdan bunait 2 a’ cleachdadh a’ ghnìomhaiche gluasad clì bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Mar eisimpleir, tha 2 << 3 = 16 co-ionann ri 2 ** 4 = 16.
Snàmh chun t-slànaighear
OBRACHAIDHEAN / TYPE CONVERSION
Ma dh’ fheumas tu fleòdradh a thionndadh gu àireamh iomlan, faodaidh tu Math.floor(), Math.ceil() no Math.round() a chleachdadh. Ach tha dòigh nas luaithe ann, airson seo bidh sinn a 'cleachdadh |, is e sin, an gnìomhaiche OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Giùlan | gu mòr an urra ri co-dhiù a tha thu a’ dèiligeadh ri àireamhan dearbhach no àicheil, agus mar sin chan eil an dòigh seo freagarrach ach ma tha thu misneachail anns na tha thu a’ dèanamh.
n | 0 a’ toirt air falbh a h-uile càil às deidh an dealaiche deicheach, a’ gearradh an t-snàthad gu sèimhear.
Gheibh thu an aon bhuaidh cruinneachaidh a’ cleachdadh ~~. Às deidh tionndadh èignichte gu integer, tha an luach fhathast gun atharrachadh.
A 'toirt air falbh àireamhan luirg
Faodar an gnìomhaiche OR a chleachdadh gus àireamh àireamhan sam bith a thoirt à àireamh. Tha seo a’ ciallachadh nach fheum sinn seòrsaichean a thionndadh mar seo:
let str = "1553";
Number(str.substring(0, str.length - 1));An àite sin bidh sinn dìreach a’ sgrìobhadh:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Ceangal fèin-ghluasadach
CLÀRAICHEAN
Faodar comharran saighead ES6 a chleachdadh ann an dòighean clas, agus tha ceangaltach ri thuigsinn. Tha seo a’ ciallachadh gun urrainn dhut soraidh slàn le abairtean ath-aithris mar this.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>
</>
)
}
};Gearradh array
EARRAICHEAN
Ma dh'fheumas tu luachan a thoirt air falbh bho raon, tha dòighean nas luaithe ann na splice ().
Mar eisimpleir, ma tha fios agad air meud an t-sreath thùsail, faodaidh tu a dhol thairis air an togalach faid aige mar a leanas:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ach tha dòigh eile ann, agus fear nas luaithe. Mas e astar an rud a tha cudromach dhut, seo na roghainnean againn:
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]A’ clò-bhualadh an luach(an) mu dheireadh de raon
EARRAICHEAN
Feumaidh an dòigh seo an dòigh slice() a chleachdadh.
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]Cruthachadh còd JSON
JSON
Is dòcha gu bheil thu air JSON.stringify a chleachdadh mu thràth. An robh fios agad gu bheil e na chuideachadh le bhith a’ cruth do JSON?
Bidh an dòigh stringify () a’ gabhail dà pharamadair roghainneil: gnìomh ath-chuir, a dh’ fhaodar a chleachdadh gus an JSON a tha air a thaisbeanadh a shìoladh, agus luach àite.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Sin uile, tha mi an dòchas gun robh na dòighean sin uile feumail. Dè na cleasan a tha fios agad? Sgrìobh iad anns na beachdan.
Tha Skillbox a’ moladh:
- Cùrsa practaigeach dà bhliadhna .
- Cùrsa air-loidhne .
- Cùrsa bliadhna practaigeach .
Source: www.habr.com