Lokacin da na fara koyon JavaScript, abu na farko da na yi shi ne yin jerin dabaru waɗanda suka taimaka mini in adana lokaci. Na hange su daga wasu masu tsara shirye-shirye, a kan shafuka daban-daban da kuma a cikin litattafai.
A cikin wannan labarin, zan nuna muku manyan hanyoyi 12 don haɓakawa da haɓaka lambar JavaScript ɗinku. A mafi yawan lokuta suna duniya.
Muna tunatarwa: ga duk masu karatu na "Habr" - rangwame na 10 rubles lokacin yin rajista a kowane kwas na Skillbox ta amfani da lambar talla "Habr".
Skillbox yana ba da shawarar: Hakikanin hanya .
Tace na musamman
ARRAYS
An gabatar da nau'in abu na Saitin a cikin ES6, tare da..., mai watsawa, za mu iya amfani da shi don ƙirƙirar sabon tsari wanda ya ƙunshi ƙima na musamman kawai.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]A cikin yanayi na al'ada, ana buƙatar ƙarin lamba don yin aiki iri ɗaya.
Wannan dabara tana aiki don tsararru masu ƙunshe da nau'ikan na asali: waɗanda ba a bayyana su ba, mara amfani, boolean, kirtani da lamba. Idan kana aiki tare da tsararru mai ɗauke da abubuwa, ayyuka, ko ƙarin jeri, za ku buƙaci wata hanya dabam.
Tsawon tsararrun cache a cikin zagayawa
ZAGAYA
Lokacin da kuka koyi madaukai, kuna bin daidaitaccen hanya:
for (let i = 0; i < array.length; i++){
console.log(i);
}Koyaya, tare da wannan haɗin gwiwa, don madauki akai-akai yana bincika tsawon tsararrun kowane juzu'i.
Wani lokaci wannan yana iya zama da amfani, amma a mafi yawan lokuta ya fi dacewa don cache tsawon tsararrun, wanda zai buƙaci samun damar shiga. Za mu iya yin haka ta hanyar ayyana ma'anar ma'anar ma'ana mai tsayi inda muka ayyana variable i, kamar haka:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}A ka'ida, kusan iri ɗaya kamar na sama, amma ta hanyar haɓaka girman madauki za mu sami tanadin lokaci mai mahimmanci.
Ƙididdiga gajere (ƙimar McCarthy)
MASU AIKATA SHARADI
Mai aiki na ternary hanya ce mai sauri da inganci don rubuta kalmomi masu sauƙi (kuma wasu lokuta ba masu sauƙi ba)
x> 100? "fiye da 100": "kasa da 100";
x> 100? (x>200? "fiye da 200": "tsakanin 100-200"): "kasa da 100";
Amma wani lokacin ma ma'aikacin ternary ya fi rikitarwa fiye da yadda ake buƙata. Za mu iya amfani da 'and' && da 'ko' maimakon || Ma'aikatan Boolean don tantance wasu maganganu ta madaidaicin hanya. Sau da yawa ana kiransa "short circuit" ko "gajeren ƙima".
Ta yaya wannan aikin
Bari mu ce muna so mu dawo da ɗaya daga cikin sharuɗɗa biyu ko fiye.
Amfani && zai dawo da ƙimar ƙarya ta farko. Idan kowane operand ya kimanta zuwa gaskiya, to za a mayar da magana ta ƙarshe da aka tantance.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Amfani || zai dawo da ƙimar gaskiya ta farko. Idan kowane operand ya kimanta zuwa ƙarya, to za a mayar da ƙimar da aka kimanta ta ƙarshe.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullmisali 1
Bari mu ce muna so mu mayar da tsawon ma'auni, amma ba mu san nau'insa ba.
A wannan yanayin, zaku iya amfani da idan / wani don bincika cewa foo shine nau'in da ya dace, amma wannan hanyar na iya yin tsayi da yawa. Saboda haka, yana da kyau mu ɗauki "gajeren kewaye".
return (foo || []).length;Idan foo mai canzawa yana da tsayin da ya dace, to za a dawo da shi. In ba haka ba za mu sami 0.
misali 2
Shin kun sami matsalolin samun shiga wani abu gida? Wataƙila ba za ku san ko akwai wani abu ko ɗaya daga cikin dukiyarsa ba, kuma hakan na iya haifar da matsala.
Misali, muna son samun damar mallakar bayanan a cikin wannan.state, amma ba a fayyace bayanai ba har sai shirinmu ya dawo da buƙatu.
Dangane da inda muke amfani da shi, kiran wannan.state.data na iya hana aikace-aikacen farawa. Don magance matsalar, za mu iya kunsa wannan a cikin wani yanayi mai ma'ana:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Mafi kyawun zaɓi shine amfani da "ko" afareta.
return (this.state.data || 'Fetching Data');Ba za mu iya canza lambar da ke sama don amfani da &&. The 'Fetching Data' && this.state.data afaretan zai mayar da wannan.state.data ba tare da la'akari da ko ba a bayyana ko a'a.
Sarkar zaɓi
Mutum na iya ba da shawarar yin amfani da sarƙa na zaɓi lokacin ƙoƙarin mayar da dukiya mai zurfi cikin tsarin itace. Don haka, alamar tambaya? za a iya amfani da shi don dawo da dukiya kawai idan ba ta lalace ba.
Misali, zamu iya sake fasalin misalin da ke sama don samun wannan.state.data?...(). Wato ana mayar da bayanai ne kawai idan darajar ba ta lalace ba.
Ko, idan yana da mahimmanci ko an ayyana jihar ko a'a, zamu iya dawo da wannan.state?.data.
Canza zuwa Boolean
NAU'I SAUKI
Baya ga ayyukan boolean na yau da kullun na gaskiya da na ƙarya, JavaScript kuma yana ɗaukar duk wasu dabi'u a matsayin gaskiya ko ƙarya.
Har sai an lura da in ba haka ba, duk dabi'u a cikin JavaScript gaskiya ne, sai dai 0, "", null, undefined, NaN kuma, ba shakka, ƙarya. Na karshen karya ne.
Za mu iya sauƙi canzawa tsakanin su biyu ta amfani da afaretan !, wanda kuma ke canza nau'in zuwa boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Maida zuwa kirtani
NAU'I SAUKI
Ana iya yin saurin juyawa daga lamba zuwa kirtani kamar haka.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Maida zuwa lamba
NAU'I SAUKI
Muna yin jujjuyawar canji kamar haka.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Hakanan za'a iya amfani da wannan hanyar don canza nau'in bayanan boolean zuwa ƙimar lambobi na yau da kullun, kamar yadda aka nuna a ƙasa:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Akwai yuwuwar samun yanayi inda + za a fassara shi azaman ma'aikacin haɗin gwiwa maimakon ma'aikacin ƙari. Don kauce wa wannan, yi amfani da tildes: ~~. Wannan ma'aikaci yayi daidai da -n-1. Misali, ~ 15 daidai yake da -16.
Yin amfani da tildu biyu a jere yana hana aikin saboda - (- - n - 1) - 1 = n + 1 - 1 = n. A wasu kalmomi, ~-16 daidai yake da 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
Ayyuka
Farawa daga ES7, zaku iya amfani da afaretan fassarar ** azaman gajeriyar hannu don iko. Wannan yana da sauri fiye da amfani da Math.pow(2, 3). Yana da alama mai sauƙi, amma wannan batu yana cikin jerin hanyoyin fasaha, tun da ba a ambaci shi a ko'ina ba.
console.log(2 ** 3); // Result: 8Bai kamata a rikita shi da alamar ^ ba, wadda aka saba amfani da ita don fassarawa. Amma a cikin JavaScript wannan shine ma'aikacin XOR.
Kafin ES7, za a iya amfani da gajeriyar hanyar ** kawai don ikon tushe 2 ta amfani da ma'aikacin motsi na hagu na bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Misali, 2 << 3 = 16 daidai yake da 2 ** 4 = 16.
Taso kan ruwa zuwa lamba
AIKI / KYAUTA NAU'I
Idan kana buƙatar canza mai iyo zuwa lamba, zaka iya amfani da Math.floor(), Math.ceil() ko Math.round(). Amma akwai hanya mafi sauri, don wannan muna amfani da |, wato, OR ma'aikacin.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Hali | ya dogara da yawa akan ko kuna hulɗa da lambobi masu kyau ko marasa kyau, don haka wannan hanyar ta dace kawai idan kun kasance da kwarin gwiwa akan abin da kuke yi.
n | 0 yana cire duk abin da ke bayan mai raba goma, yana yanke ta iyo zuwa lamba.
Kuna iya samun tasirin zagaye iri ɗaya ta amfani da ~~. Bayan jujjuya tilas zuwa lamba, ƙimar ba ta canzawa.
Cire lambobi masu biyo baya
Ana iya amfani da afaretan OR don cire kowane adadin lambobi daga lamba. Wannan yana nufin ba ma buƙatar mu canza nau'ikan kamar anan:
let str = "1553";
Number(str.substring(0, str.length - 1));Maimakon mu rubuta kawai:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Haɗin kai ta atomatik
AZUMIN
Ana iya amfani da alamun kibiya na ES6 a hanyoyin aji, kuma ana nuna ɗauri. Wannan yana nufin za ku iya yin bankwana da maimaita maganganu kamar haka.myMethod = wannan.myMethod.bind(wannan)!
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>
</>
)
}
};Gyaran tsararru
ARRAYS
Idan kana buƙatar cire ƙima daga tsararru, akwai hanyoyin sauri fiye da splice ().
Misali, idan kun san girman asalin tsararru, kuna iya ƙetare tsawon dukiyarsa kamar haka:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Amma akwai wata hanya, kuma mafi sauri. Idan gudun shine abin da ke damun ku, ga zaɓin mu:
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]Buga ƙimar ƙarshe (s) na tsararru
ARRAYS
Wannan dabarar tana buƙatar amfani da hanyar yanki ().
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]Yana tsara lambar JSON
JSON
Wataƙila ka riga ka yi amfani da JSON.stringify. Shin kun san cewa yana taimakawa tsara JSON ku?
Hanyar stringify () tana ɗaukar sigogi na zaɓi guda biyu: aikin maye gurbin, wanda za'a iya amfani dashi don tace JSON da aka nuna, da ƙimar sarari.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Wannan ke nan, ina fata cewa duk waɗannan fasahohin sun kasance masu amfani. Wadanne dabaru kuka sani? Rubuta su a cikin sharhi.
Skillbox yana ba da shawarar:
- Kwas na aiki na shekara biyu .
- Darussan kan layi .
- Kwas din shekara mai amfani .
source: www.habr.com