12 JavaScript યુક્તિઓ જે મોટાભાગના ટ્યુટોરિયલ્સ ચૂકી જાય છે

જ્યારે મેં JavaScript શીખવાનું શરૂ કર્યું, ત્યારે મેં સૌથી પહેલું કામ કર્યું તે યુક્તિઓની સૂચિ બનાવવી જેણે મને સમય બચાવવામાં મદદ કરી. મેં તેમને અન્ય પ્રોગ્રામર્સ, વિવિધ સાઇટ્સ અને મેન્યુઅલમાં જોયા છે.

આ લેખમાં, હું તમને તમારા JavaScript કોડને સુધારવા અને ઝડપી બનાવવાની 12 શ્રેષ્ઠ રીતો બતાવીશ. મોટા ભાગના કિસ્સાઓમાં તેઓ સાર્વત્રિક છે.

અમે યાદ કરાવીએ છીએ: Habrના તમામ વાચકો માટે - Habr પ્રોમો કોડનો ઉપયોગ કરીને કોઈપણ સ્કિલબોક્સ કોર્સમાં નોંધણી કરતી વખતે 10 રૂબલ ડિસ્કાઉન્ટ.

સ્કિલબોક્સ ભલામણ કરે છે: પ્રેક્ટિકલ કોર્સ "મોબાઇલ ડેવલપર પ્રો".

અનન્ય મૂલ્યોને ફિલ્ટર કરી રહ્યું છે

એરેઝ

સેટ ઑબ્જેક્ટ પ્રકાર ES6 માં રજૂ કરવામાં આવ્યો હતો, ..., સ્પ્રેડ ઓપરેટર સાથે, અમે તેનો ઉપયોગ નવી એરે બનાવવા માટે કરી શકીએ છીએ જેમાં ફક્ત અનન્ય મૂલ્યો છે.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

સામાન્ય પરિસ્થિતિમાં, સમાન કામગીરી કરવા માટે વધુ કોડની જરૂર પડે છે.

આ તકનીક આદિમ પ્રકારો ધરાવતા એરે માટે કામ કરે છે: અવ્યાખ્યાયિત, નલ, બુલિયન, શબ્દમાળા અને સંખ્યા. જો તમે ઑબ્જેક્ટ્સ, ફંક્શન્સ અથવા વધારાના એરે ધરાવતા અરે સાથે કામ કરી રહ્યાં છો, તો તમારે અલગ અભિગમની જરૂર પડશે.

ચક્રમાં કેશ એરેની લંબાઈ

સાયકલ

જ્યારે તમે લૂપ્સ માટે શીખો છો, ત્યારે તમે પ્રમાણભૂત પ્રક્રિયાને અનુસરો છો:

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);
}

સૈદ્ધાંતિક રીતે, લગભગ ઉપરની જેમ જ, પરંતુ લૂપનું કદ વધારીને આપણે નોંધપાત્ર સમય બચત મેળવીશું.

શોર્ટ સર્કિટ રેટિંગ (મેકકાર્થી રેટિંગ)

શરતી ઓપરેટર્સ

ટર્નરી ઓપરેટર એ સરળ (અને ક્યારેક એટલું સરળ નથી) શરતી નિવેદનો લખવાની ઝડપી અને કાર્યક્ષમ રીત છે:

x> 100? "100 થી વધુ": "100 થી ઓછા";
x> 100? (x>200? "200 થી વધુ": "100-200 વચ્ચે"): "100 કરતા ઓછા";

પરંતુ કેટલીકવાર ટર્નરી ઓપરેટર પણ જરૂરી કરતાં વધુ જટિલ હોય છે. આપણે તેના બદલે 'અને' && અને 'અથવા' નો ઉપયોગ કરી શકીએ છીએ || બુલિયન ઓપરેટરો ચોક્કસ અભિવ્યક્તિઓનું વધુ સંક્ષિપ્તમાં મૂલ્યાંકન કરવા માટે. તેને ઘણીવાર "શોર્ટ સર્કિટ" અથવા "શોર્ટ સર્કિટ રેટિંગ" કહેવામાં આવે છે.

આ કેવી રીતે કામ કરે છે

ચાલો કહીએ કે અમે બે અથવા વધુ શરતોમાંથી માત્ર એક જ પરત કરવા માંગીએ છીએ.

&& નો ઉપયોગ કરવાથી પ્રથમ ખોટી કિંમત મળશે. જો દરેક ઓપરેન્ડ સાચું મૂલ્યાંકન કરે છે, તો મૂલ્યાંકન કરેલ છેલ્લી અભિવ્યક્તિ પરત કરવામાં આવશે.

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

ઉદાહરણ 1

ચાલો કહીએ કે આપણે ચલની લંબાઈ પરત કરવા માંગીએ છીએ, પરંતુ આપણે તેનો પ્રકાર જાણતા નથી.

આ કિસ્સામાં, તમે foo યોગ્ય પ્રકાર છે તે તપાસવા માટે if/else નો ઉપયોગ કરી શકો છો, પરંતુ આ પદ્ધતિ ખૂબ લાંબી હોઈ શકે છે. તેથી, અમારું "શોર્ટ સર્કિટ" લેવું વધુ સારું છે.

return (foo || []).length;

જો ચલ foo ની યોગ્ય લંબાઈ હોય, તો તે પરત કરવામાં આવશે. નહિંતર આપણને 0 મળશે.

ઉદાહરણ 2

શું તમને નેસ્ટેડ ઑબ્જેક્ટ ઍક્સેસ કરવામાં સમસ્યા આવી છે? તમે કદાચ જાણતા ન હોવ કે ઑબ્જેક્ટ અથવા તેની પેટા-ગુણધર્મોમાંથી એક અસ્તિત્વમાં છે કે નહીં, અને આ સમસ્યાઓ તરફ દોરી શકે છે.

ઉદાહરણ તરીકે, અમે this.state માં ડેટા પ્રોપર્ટીને ઍક્સેસ કરવા માગીએ છીએ, પરંતુ જ્યાં સુધી અમારો પ્રોગ્રામ આનયન વિનંતી પરત ન કરે ત્યાં સુધી ડેટા વ્યાખ્યાયિત કરવામાં આવતો નથી.

અમે તેનો ક્યાં ઉપયોગ કરીએ છીએ તેના આધારે, this.state.data કૉલ કરવાથી એપ્લિકેશન શરૂ થતી અટકાવી શકે છે. સમસ્યાને ઉકેલવા માટે, અમે આને શરતી અભિવ્યક્તિમાં લપેટી શકીએ છીએ:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

"અથવા" ઓપરેટરનો ઉપયોગ કરવાનો વધુ સારો વિકલ્પ હશે.

return (this.state.data || 'Fetching Data');

અમે && નો ઉપયોગ કરવા માટે ઉપરના કોડને બદલી શકતા નથી. 'Fetching Data' && this.state.data ઑપરેટર આ.state.data પરત કરશે પછી ભલે તે અવ્યાખ્યાયિત હોય કે ન હોય.

વૈકલ્પિક સાંકળ

જ્યારે કોઈ મિલકતને વૃક્ષની રચનામાં ઊંડે સુધી પરત કરવાનો પ્રયાસ કરે ત્યારે વૈકલ્પિક સાંકળનો ઉપયોગ કરવાનું સૂચન કરી શકે છે. તો, પ્રશ્ન ચિહ્ન પ્રતીક? જો મિલકત નલ ન હોય તો જ તેનો ઉપયોગ કરી શકાય છે.

ઉદાહરણ તરીકે, અમે this.state.data?...() મેળવવા માટે ઉપરના ઉદાહરણને રિફેક્ટ કરી શકીએ છીએ. એટલે કે, જો મૂલ્ય નલ ન હોય તો જ ડેટા પરત કરવામાં આવે છે.

અથવા, જો તે મહત્વનું છે કે રાજ્ય વ્યાખ્યાયિત થયેલ છે કે નહીં, તો અમે આ. રાજ્ય?. ડેટા પરત કરી શકીએ છીએ.

બુલિયનમાં કન્વર્ટ કરો

પ્રકાર રૂપાંતર

સાચા અને ખોટા સામાન્ય બુલિયન કાર્યો ઉપરાંત, JavaScript અન્ય તમામ મૂલ્યોને સત્ય અથવા ખોટા તરીકે પણ માને છે.

જ્યાં સુધી અન્યથા નોંધવામાં ન આવે ત્યાં સુધી, JavaScript માં 0, "", null, undefined, NaN અને અલબત્ત, ખોટા સિવાયના તમામ મૂલ્યો સત્ય છે. બાદમાં ખોટા છે.

અમે ! ઓપરેટરનો ઉપયોગ કરીને સરળતાથી બંને વચ્ચે સ્વિચ કરી શકીએ છીએ, જે પ્રકારને બુલિયનમાં પણ ફેરવે છે.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

સ્ટ્રિંગમાં કન્વર્ટ કરો

પ્રકાર રૂપાંતર

પૂર્ણાંકમાંથી સ્ટ્રિંગમાં ઝડપી રૂપાંતર નીચે પ્રમાણે કરી શકાય છે.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

પૂર્ણાંકમાં કન્વર્ટ કરો

પ્રકાર રૂપાંતર

અમે આ રીતે રિવર્સ ટ્રાન્સફોર્મેશન કરીએ છીએ.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

આ પદ્ધતિનો ઉપયોગ બુલિયન ડેટા પ્રકારને નિયમિત આંકડાકીય મૂલ્યોમાં કન્વર્ટ કરવા માટે પણ થઈ શકે છે, નીચે બતાવ્યા પ્રમાણે:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

એવી પરિસ્થિતિઓ હોઈ શકે છે જ્યાં + એ વધારાના ઓપરેટરને બદલે જોડાણ ઓપરેટર તરીકે અર્થઘટન કરવામાં આવશે. આને અવગણવા માટે, તમારે ટિલ્ડ્સનો ઉપયોગ કરવો જોઈએ: ~~. આ ઓપરેટર -n-1 ની સમકક્ષ છે. ઉદાહરણ તરીકે, ~15 બરાબર -16 છે.

એક પંક્તિમાં બે ટિલ્ડનો ઉપયોગ કરવાથી ક્રિયાને નકારી શકાય છે કારણ કે - (- - n - 1) - 1 = n + 1 - 1 = n. બીજા શબ્દોમાં કહીએ તો, ~-16 બરાબર 15 છે.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

ઓપરેશન્સ

ES7 થી શરૂ કરીને, તમે ઘાતીકરણ ઓપરેટર ** નો ઉપયોગ સત્તા માટે લઘુલિપિ તરીકે કરી શકો છો. આ Math.pow(2, 3) નો ઉપયોગ કરતા વધુ ઝડપી છે. તે સરળ લાગે છે, પરંતુ આ બિંદુ તકનીકોની સૂચિમાં શામેલ છે, કારણ કે તે દરેક જગ્યાએ ઉલ્લેખિત નથી.

console.log(2 ** 3); // Result: 8

તેને ^ પ્રતીક સાથે ભેળસેળ ન કરવી જોઈએ, જે સામાન્ય રીતે ઘાત માટે વપરાય છે. પરંતુ JavaScript માં આ 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 ઓપરેટરનો ઉપયોગ કરીએ છીએ.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

વર્તન | તમે સકારાત્મક કે નકારાત્મક સંખ્યાઓ સાથે કામ કરી રહ્યા છો તેના પર મોટે ભાગે આધાર રાખે છે, તેથી આ પદ્ધતિ ફક્ત ત્યારે જ યોગ્ય છે જો તમે જે કરી રહ્યા છો તેના પર તમને વિશ્વાસ હોય.

n | 0 દશાંશ વિભાજક પછી બધું દૂર કરે છે, ફ્લોટને પૂર્ણાંકમાં કાપીને.

તમે ~~ નો ઉપયોગ કરીને સમાન રાઉન્ડિંગ અસર મેળવી શકો છો. પૂર્ણાંકમાં ફરજિયાત રૂપાંતર પછી, મૂલ્ય યથાવત રહે છે.

પાછળના નંબરો દૂર કરી રહ્યાં છીએ

OR ઑપરેટરનો ઉપયોગ નંબરમાંથી કોઈપણ સંખ્યાના અંકોને દૂર કરવા માટે થઈ શકે છે. આનો અર્થ એ છે કે આપણે અહીં જેવા પ્રકારોને કન્વર્ટ કરવાની જરૂર નથી:

let str = "1553";
Number(str.substring(0, str.length - 1));

તેના બદલે અમે ફક્ત લખીએ છીએ:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

આપોઆપ લિંકિંગ

વર્ગો

ES6 એરો નોટેશનનો ઉપયોગ વર્ગ પદ્ધતિઓમાં થઈ શકે છે, અને બાઈન્ડિંગ ગર્ભિત છે. આનો અર્થ એ છે કે તમે આ. 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>
      </>
    )
  }
};

એરે ટ્રિમિંગ

એરેઝ

જો તમારે એરેમાંથી મૂલ્યો છીનવી લેવાની જરૂર હોય, તો ત્યાં splice() કરતાં ઝડપી પદ્ધતિઓ છે.

ઉદાહરણ તરીકે, જો તમે મૂળ એરેનું કદ જાણો છો, તો તમે તેની લંબાઈની મિલકતને નીચે પ્રમાણે ઓવરરાઇડ કરી શકો છો:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

પરંતુ ત્યાં બીજી પદ્ધતિ છે, અને એક ઝડપી. જો ઝડપ તમારા માટે મહત્વપૂર્ણ છે, તો અહીં અમારી પસંદગીઓ છે:

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]

એરેનું છેલ્લું મૂલ્ય(ઓ) છાપી રહ્યું છે

એરેઝ
આ ટેકનિક માટે સ્લાઈસ() પદ્ધતિનો ઉપયોગ કરવાની જરૂર છે.

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]

JSON કોડ ફોર્મેટિંગ

JSON

તમે કદાચ પહેલાથી જ JSON.stringify નો ઉપયોગ કર્યો હશે. શું તમે જાણો છો કે તે તમારા JSON ને ફોર્મેટ કરવામાં મદદ કરે છે?

stringify() પદ્ધતિ બે વૈકલ્પિક પરિમાણો લે છે: રિપ્લેસર ફંક્શન, જેનો ઉપયોગ JSON પ્રદર્શિત ફિલ્ટર કરવા માટે થઈ શકે છે, અને સ્પેસ મૂલ્ય.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

બસ, હું આશા રાખું છું કે આ બધી તકનીકો ઉપયોગી હતી. તમે કઈ યુક્તિઓ જાણો છો? તેમને ટિપ્પણીઓમાં લખો.

સ્કિલબોક્સ ભલામણ કરે છે:

• બે વર્ષનો પ્રેક્ટિકલ કોર્સ "હું પ્રો વેબ ડેવલપર છું".
• ઓનલાઇન કોર્સ "0 થી C# વિકાસકર્તા".
• એક વર્ષનો પ્રેક્ટિકલ કોર્સ "0 થી PRO સુધી PHP વિકાસકર્તા".

સોર્સ: www.habr.com