മിക്ക ട്യൂട്ടോറിയലുകളും കാണാതെ പോകുന്ന 12 JavaScript തന്ത്രങ്ങൾ
ഞാൻ ജാവാസ്ക്രിപ്റ്റ് പഠിക്കാൻ തുടങ്ങിയപ്പോൾ, ഞാൻ ആദ്യം ചെയ്തത് സമയം ലാഭിക്കാൻ സഹായിച്ച തന്ത്രങ്ങളുടെ ഒരു ലിസ്റ്റ് ഉണ്ടാക്കുകയായിരുന്നു. മറ്റ് പ്രോഗ്രാമർമാരിൽ നിന്നും വ്യത്യസ്ത സൈറ്റുകളിൽ നിന്നും മാനുവലുകളിൽ നിന്നും ഞാൻ അവരെ കണ്ടെത്തി.
ഈ ലേഖനത്തിൽ, നിങ്ങളുടെ JavaScript കോഡ് മെച്ചപ്പെടുത്തുന്നതിനും വേഗത്തിലാക്കുന്നതിനുമുള്ള 12 മികച്ച വഴികൾ ഞാൻ നിങ്ങൾക്ക് കാണിച്ചുതരാം. മിക്ക കേസുകളിലും അവ സാർവത്രികമാണ്.
ഞങ്ങൾ ഓർമ്മിപ്പിക്കുന്നു:"Habr"-ന്റെ എല്ലാ വായനക്കാർക്കും - "Habr" പ്രൊമോഷണൽ കോഡ് ഉപയോഗിച്ച് ഏതെങ്കിലും സ്കിൽബോക്സ് കോഴ്സിൽ ചേരുമ്പോൾ 10 റൂബിൾസ് കിഴിവ്.
സെറ്റ് ഒബ്ജക്റ്റ് തരം ES6-ൽ അവതരിപ്പിച്ചു, സ്പ്രെഡ് ഓപ്പറേറ്ററിനൊപ്പം, തനതായ മൂല്യങ്ങൾ മാത്രം ഉൾക്കൊള്ളുന്ന ഒരു പുതിയ അറേ സൃഷ്ടിക്കാൻ നമുക്ക് ഇത് ഉപയോഗിക്കാം.
ഒരു സാധാരണ സാഹചര്യത്തിൽ, ഒരേ പ്രവർത്തനം നടത്താൻ കൂടുതൽ കോഡ് ആവശ്യമാണ്.
ഈ സാങ്കേതികത പ്രാകൃത തരങ്ങൾ അടങ്ങിയ അറേകൾക്കായി പ്രവർത്തിക്കുന്നു: നിർവചിക്കാത്തത്, നൾ, ബൂളിയൻ, സ്ട്രിംഗ്, നമ്പർ. ഒബ്ജക്റ്റുകളോ ഫംഗ്ഷനുകളോ അധിക അറേകളോ അടങ്ങിയ ഒരു അറേയ്ക്കൊപ്പമാണ് നിങ്ങൾ പ്രവർത്തിക്കുന്നതെങ്കിൽ, നിങ്ങൾക്ക് മറ്റൊരു സമീപനം ആവശ്യമാണ്.
സൈക്കിളുകളിലെ കാഷെ അറേയുടെ ദൈർഘ്യം
സൈക്കിളുകൾ
നിങ്ങൾ ലൂപ്പുകൾക്കായി പഠിക്കുമ്പോൾ, നിങ്ങൾ സാധാരണ നടപടിക്രമം പിന്തുടരുന്നു:
for (let i = 0; i < array.length; i++){
console.log(i);
}
എന്നിരുന്നാലും, ഈ വാക്യഘടന ഉപയോഗിച്ച്, ഫോർ ലൂപ്പ് ഓരോ ആവർത്തനത്തിലും അറേയുടെ നീളം ആവർത്തിച്ച് പരിശോധിക്കുന്നു.
ചിലപ്പോൾ ഇത് ഉപയോഗപ്രദമാകും, എന്നാൽ മിക്ക കേസുകളിലും അറേയുടെ ദൈർഘ്യം കാഷെ ചെയ്യുന്നത് കൂടുതൽ കാര്യക്ഷമമാണ്, അതിന് ഒരു ആക്സസ് ആവശ്യമാണ്. ഒരു നീളം വേരിയബിൾ നിർവചിച്ചുകൊണ്ട് നമുക്ക് ഇത് ചെയ്യാൻ കഴിയും, അവിടെ നമ്മൾ വേരിയബിൾ i നിർവചിക്കുന്നു, ഇതുപോലെ:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
തത്വത്തിൽ, മുകളിൽ പറഞ്ഞതിന് ഏതാണ്ട് സമാനമാണ്, എന്നാൽ ലൂപ്പ് വലുപ്പം വർദ്ധിപ്പിക്കുന്നതിലൂടെ നമുക്ക് കാര്യമായ സമയ ലാഭം ലഭിക്കും.
എന്നാൽ ചിലപ്പോൾ ടെർനറി ഓപ്പറേറ്റർ പോലും ആവശ്യമുള്ളതിനേക്കാൾ സങ്കീർണ്ണമാണ്. പകരം നമുക്ക് 'and' &&, 'or' എന്നിവ ഉപയോഗിക്കാം || ചില പദപ്രയോഗങ്ങൾ കൂടുതൽ സംക്ഷിപ്തമായി വിലയിരുത്താൻ ബൂളിയൻ ഓപ്പറേറ്റർമാർ. ഇതിനെ പലപ്പോഴും "ഷോർട്ട് സർക്യൂട്ട്" അല്ലെങ്കിൽ "ഷോർട്ട് സർക്യൂട്ട് റേറ്റിംഗ്" എന്ന് വിളിക്കുന്നു.
എങ്ങനെ പ്രവർത്തിക്കുന്നില്ല
രണ്ടോ അതിലധികമോ വ്യവസ്ഥകളിൽ ഒന്ന് മാത്രം തിരികെ നൽകണമെന്ന് നമുക്ക് പറയാം.
&& ഉപയോഗിക്കുന്നത് ആദ്യത്തെ തെറ്റായ മൂല്യം നൽകും. ഓരോ ഓപ്പറണ്ടും true ആയി വിലയിരുത്തുകയാണെങ്കിൽ, മൂല്യനിർണ്ണയം ചെയ്ത അവസാന പദപ്രയോഗം തിരികെ നൽകും.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
ഉപയോഗിക്കുന്നത് || ആദ്യത്തെ യഥാർത്ഥ മൂല്യം തിരികെ നൽകും. ഓരോ ഓപ്പറണ്ടും തെറ്റായി വിലയിരുത്തുകയാണെങ്കിൽ, അവസാനം മൂല്യനിർണ്ണയം ചെയ്ത മൂല്യം തിരികെ നൽകും.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
ഉദാഹരണത്തിന് ക്സനുമ്ക്സ
ഒരു വേരിയബിളിന്റെ ദൈർഘ്യം തിരികെ നൽകണമെന്ന് പറയട്ടെ, പക്ഷേ അതിന്റെ തരം ഞങ്ങൾക്ക് അറിയില്ല.
ഈ സാഹചര്യത്തിൽ, foo ശരിയായ തരമാണോ എന്ന് പരിശോധിക്കാൻ if/else ഉപയോഗിക്കാം, എന്നാൽ ഈ രീതി വളരെ ദൈർഘ്യമേറിയതായിരിക്കാം. അതിനാൽ, ഞങ്ങളുടെ "ഷോർട്ട് സർക്യൂട്ട്" എടുക്കുന്നതാണ് നല്ലത്.
return (foo || []).length;
വേരിയബിളിന് അനുയോജ്യമായ നീളമുണ്ടെങ്കിൽ, അത് തിരികെ നൽകും. അല്ലെങ്കിൽ നമുക്ക് 0 ലഭിക്കും.
ഉദാഹരണത്തിന് ക്സനുമ്ക്സ
നെസ്റ്റഡ് ഒബ്ജക്റ്റ് ആക്സസ് ചെയ്യുന്നതിൽ നിങ്ങൾക്ക് പ്രശ്നങ്ങളുണ്ടോ? ഒരു ഒബ്ജക്റ്റ് അല്ലെങ്കിൽ അതിന്റെ ഉപഗുണങ്ങളിൽ ഒന്ന് നിലവിലുണ്ടോ എന്ന് നിങ്ങൾക്ക് അറിയില്ലായിരിക്കാം, ഇത് പ്രശ്നങ്ങളിലേക്ക് നയിച്ചേക്കാം.
ഉദാഹരണത്തിന്, this.state-ലെ ഡാറ്റ പ്രോപ്പർട്ടി ആക്സസ് ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിച്ചു, എന്നാൽ ഞങ്ങളുടെ പ്രോഗ്രാം ഒരു ലഭ്യമാക്കുന്നതിനുള്ള അഭ്യർത്ഥന നൽകുന്നതുവരെ ഡാറ്റ നിർവചിക്കപ്പെടുന്നില്ല.
ഞങ്ങൾ ഇത് എവിടെയാണ് ഉപയോഗിക്കുന്നത് എന്നതിനെ ആശ്രയിച്ച്, this.state.data എന്ന് വിളിക്കുന്നത് ആപ്ലിക്കേഷൻ ആരംഭിക്കുന്നതിൽ നിന്ന് തടഞ്ഞേക്കാം. പ്രശ്നം പരിഹരിക്കാൻ, നമുക്ക് ഇത് ഒരു സോപാധിക പദപ്രയോഗത്തിൽ പൊതിയാം:
"അല്ലെങ്കിൽ" ഓപ്പറേറ്റർ ഉപയോഗിക്കുന്നതാണ് ഒരു മികച്ച ഓപ്ഷൻ.
return (this.state.data || 'Fetching Data');
&& ഉപയോഗിക്കുന്നതിന് മുകളിലുള്ള കോഡ് മാറ്റാൻ ഞങ്ങൾക്ക് കഴിയില്ല. 'Fetching Data' && this.state.data ഓപ്പറേറ്റർ this.state.data നിർവചിച്ചിട്ടില്ലെങ്കിലും ഇല്ലെങ്കിലും അത് തിരികെ നൽകും.
ഓപ്ഷണൽ ചെയിൻ
ട്രീ ഘടനയിലേക്ക് ഒരു പ്രോപ്പർട്ടി തിരികെ നൽകാൻ ശ്രമിക്കുമ്പോൾ ഓപ്ഷണൽ ചെയിനിംഗ് ഉപയോഗിക്കാൻ ഒരാൾ നിർദ്ദേശിച്ചേക്കാം. അപ്പോൾ, ചോദ്യചിഹ്ന ചിഹ്നം? ഒരു പ്രോപ്പർട്ടി അസാധുവാണെങ്കിൽ മാത്രമേ അത് വീണ്ടെടുക്കാൻ ഉപയോഗിക്കാവൂ.
ഉദാഹരണത്തിന്, this.state.data?..() ലഭിക്കുന്നതിന് മുകളിലുള്ള ഉദാഹരണം നമുക്ക് റീഫാക്റ്റർ ചെയ്യാം. അതായത്, മൂല്യം അസാധുവാണെങ്കിൽ മാത്രമേ ഡാറ്റ നൽകൂ.
അല്ലെങ്കിൽ, സംസ്ഥാനം നിർവചിച്ചിട്ടുണ്ടോ ഇല്ലയോ എന്നത് പ്രധാനമാണെങ്കിൽ, ഞങ്ങൾക്ക് this.state?.data തിരികെ നൽകാം.
ബൂളിയനിലേക്ക് പരിവർത്തനം ചെയ്യുക
തരം പരിവർത്തനം
സാധാരണ ബൂളിയൻ ഫംഗ്ഷനുകൾ ശരിയും തെറ്റും കൂടാതെ, ജാവാസ്ക്രിപ്റ്റ് മറ്റെല്ലാ മൂല്യങ്ങളെയും സത്യമോ തെറ്റോ ആയി കണക്കാക്കുന്നു.
മറ്റുവിധത്തിൽ ശ്രദ്ധിക്കപ്പെടുന്നതുവരെ, JavaScript-ലെ എല്ലാ മൂല്യങ്ങളും സത്യമാണ്, 0, "", null, undefined, NaN കൂടാതെ, തീർച്ചയായും തെറ്റ്. പിന്നീടുള്ളവ വ്യാജമാണ്.
! ഓപ്പറേറ്റർ ഉപയോഗിച്ച് നമുക്ക് രണ്ടിനും ഇടയിൽ എളുപ്പത്തിൽ മാറാനാകും, ഇത് തരത്തെ ബൂളിയൻ ആക്കി മാറ്റുകയും ചെയ്യുന്നു.
ഒരു കൂട്ടിച്ചേർക്കൽ ഓപ്പറേറ്റർ എന്നതിലുപരി ഒരു കോൺകാറ്റനേഷൻ ഓപ്പറേറ്ററായി + വ്യാഖ്യാനിക്കുന്ന സാഹചര്യങ്ങൾ ഉണ്ടാകാം. ഇത് ഒഴിവാക്കാൻ, നിങ്ങൾ ടിൽഡുകൾ ഉപയോഗിക്കണം: ~~. ഈ ഓപ്പറേറ്റർ -n-1 ന് തുല്യമാണ്. ഉദാഹരണത്തിന്, ~15 എന്നത് -16 ന് തുല്യമാണ്.
തുടർച്ചയായി രണ്ട് ടിൽഡുകൾ ഉപയോഗിക്കുന്നത് പ്രവർത്തനത്തെ നിരാകരിക്കുന്നു, കാരണം - (- - n - 1) - 1 = n + 1 - 1 = n. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ~-16 എന്നത് 15 ന് തുല്യമാണ്.
ES7-ൽ ആരംഭിച്ച്, നിങ്ങൾക്ക് ശക്തികളുടെ ചുരുക്കെഴുത്തായി എക്സ്പോണൻഷ്യേഷൻ ഓപ്പറേറ്റർ ** ഉപയോഗിക്കാം. ഇത് Math.pow(2, 3) ഉപയോഗിക്കുന്നതിനേക്കാൾ വളരെ വേഗതയുള്ളതാണ്. ഇത് ലളിതമാണെന്ന് തോന്നുന്നു, പക്ഷേ ഈ പോയിന്റ് ടെക്നിക്കുകളുടെ പട്ടികയിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, കാരണം ഇത് എല്ലായിടത്തും പരാമർശിച്ചിട്ടില്ല.
console.log(2 ** 3); // Result: 8
എക്സ്പോണൻഷ്യേഷനായി സാധാരണയായി ഉപയോഗിക്കുന്ന ^ ചിഹ്നവുമായി ഇത് ആശയക്കുഴപ്പത്തിലാക്കരുത്. എന്നാൽ ജാവാസ്ക്രിപ്റ്റിൽ ഇത് XOR ഓപ്പറേറ്ററാണ്.
ES7-ന് മുമ്പ്, ബിറ്റ്വൈസ് ലെഫ്റ്റ് ഷിഫ്റ്റ് ഓപ്പറേറ്റർ ഉപയോഗിച്ച് ബേസ് 2-ന്റെ പവറുകൾക്ക് മാത്രമേ ** കുറുക്കുവഴി ഉപയോഗിക്കാനാകൂ <<:
Math.pow(2, n);
2 << (n - 1);
2**n;
ഉദാഹരണത്തിന്, 2 << 3 = 16 എന്നത് 2 ** 4 = 16 ന് തുല്യമാണ്.
പൂർണ്ണസംഖ്യയിലേക്ക് ഫ്ലോട്ട് ചെയ്യുക
പ്രവർത്തനങ്ങൾ / തരം പരിവർത്തനം
നിങ്ങൾക്ക് ഒരു ഫ്ലോട്ട് ഒരു പൂർണ്ണസംഖ്യയിലേക്ക് പരിവർത്തനം ചെയ്യണമെങ്കിൽ, നിങ്ങൾക്ക് Math.floor(), Math.ceil() അല്ലെങ്കിൽ Math.round() ഉപയോഗിക്കാം. എന്നാൽ വേഗമേറിയ ഒരു വഴിയുണ്ട്, ഇതിനായി ഞങ്ങൾ |, അതായത് OR ഓപ്പറേറ്റർ.
പെരുമാറ്റം | നിങ്ങൾ പോസിറ്റീവ് അല്ലെങ്കിൽ നെഗറ്റീവ് നമ്പറുകൾ കൈകാര്യം ചെയ്യുന്നുണ്ടോ എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു, അതിനാൽ നിങ്ങൾ ചെയ്യുന്ന കാര്യങ്ങളിൽ നിങ്ങൾക്ക് ആത്മവിശ്വാസമുണ്ടെങ്കിൽ മാത്രമേ ഈ രീതി അനുയോജ്യമാകൂ.
n | 0 ഡെസിമൽ സെപ്പറേറ്ററിന് ശേഷമുള്ള എല്ലാം നീക്കം ചെയ്യുന്നു, ഫ്ലോട്ടിനെ ഒരു പൂർണ്ണസംഖ്യയിലേക്ക് ചുരുക്കുന്നു.
~~ ഉപയോഗിച്ച് നിങ്ങൾക്ക് സമാന റൗണ്ടിംഗ് ഇഫക്റ്റ് ലഭിക്കും. ഒരു പൂർണ്ണസംഖ്യയിലേക്ക് നിർബന്ധിത പരിവർത്തനത്തിന് ശേഷം, മൂല്യം മാറ്റമില്ലാതെ തുടരുന്നു.
ട്രെയിലിംഗ് നമ്പറുകൾ നീക്കംചെയ്യുന്നു
ഒരു നമ്പറിൽ നിന്ന് എത്ര അക്കങ്ങൾ വേണമെങ്കിലും നീക്കം ചെയ്യാൻ OR ഓപ്പറേറ്റർ ഉപയോഗിക്കാം. ഇവിടെയുള്ളതുപോലുള്ള തരങ്ങൾ പരിവർത്തനം ചെയ്യേണ്ടതില്ല എന്നാണ് ഇതിനർത്ഥം:
let str = "1553";
Number(str.substring(0, str.length - 1));
നിങ്ങൾ ഇതിനകം JSON.stringify ഉപയോഗിച്ചിരിക്കാം. ഇത് നിങ്ങളുടെ JSON ഫോർമാറ്റ് ചെയ്യാൻ സഹായിക്കുമെന്ന് നിങ്ങൾക്കറിയാമോ?
stringify() രീതി രണ്ട് ഓപ്ഷണൽ പാരാമീറ്ററുകൾ എടുക്കുന്നു: ഒരു റീപ്ലേസർ ഫംഗ്ഷൻ, പ്രദർശിപ്പിച്ചിരിക്കുന്ന JSON ഫിൽട്ടർ ചെയ്യാൻ ഉപയോഗിക്കാവുന്ന ഒരു സ്പേസ് മൂല്യവും.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
അത്രയേയുള്ളൂ, ഈ സാങ്കേതികതകളെല്ലാം ഉപയോഗപ്രദമായിരുന്നുവെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. നിങ്ങൾക്ക് എന്ത് തന്ത്രങ്ങൾ അറിയാം? അവ അഭിപ്രായങ്ങളിൽ എഴുതുക.