20 keterampilan JS untuk membantu Anda meningkatkan efisiensi kerja dan tidak pernah menjadi pekerja lembur lagi!

Dalam tugas sehari-hari, kita menulis fungsi seperti mengurutkan, mencari, menemukan nilai unik, meneruskan parameter, menukar nilai, dll., jadi di sini saya telah menyusun daftar tip singkat saya!

JavaScript benar-benar bahasa yang bagus untuk dipelajari dan digunakan. Untuk suatu permasalahan tertentu, terdapat lebih dari satu cara untuk mencapai solusi yang sama. Pada artikel kali ini kami hanya akan membahas yang tercepat saja.

Cara-cara ini pasti akan membantu Anda:

• mengurangi jumlah LOC (baris kode),
• kompetisi coding,
• hackathon,
• atau tugas berbatas waktu lainnya.

Sebagian besar Peretasan JavaScript ini menggunakan ECMAScript6 (ES2015) dan teknologi yang lebih baru, meskipun versi terbarunya adalah ECMAScript11 (ES2020).

==Catatan==: Semua tips di bawah ini telah diuji di konsol Google Chrome.

1. Deklarasikan dan inisialisasi array

Kita dapat menginisialisasi array dengan ukuran tertentu menggunakan nilai default (seperti "", null atau 0). Anda mungkin sudah menggunakan ini untuk array 1D, tetapi bagaimana Anda menginisialisasi array/matriks 2D?

const array = Array(5).isi(''); 
// Keluaran(5) ["", "", "", "", ""]

const matriks = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Keluaran(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
panjang: 5

2. Temukan jumlah, nilai minimum dan maksimum

Kita harus menggunakan metode reduce untuk menemukan operasi matematika dasar dengan cepat.

const array = [5,4,7,8,9,2];

• dan

array.reduce((a,b) => a+b);
// Keluaran: 35

• maksimum.reduce

((a,b) => a>b?a:b);
// Keluaran: 9

• minimum.reduce

((a,b) => a<b?a:b);
// Output: 2

3. Mengurutkan array dari string, angka atau objek

Kita mempunyai metode bawaan sort() dan reverse() untuk mengurutkan string, tapi bagaimana dengan array angka atau objek?

Mari kita lihat teknik pengurutan naik dan turun untuk angka dan objek.

• Mengurutkan array string

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Keluaran(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.terbalik();
// Output (4) ["Steve", "Musk", "Kapil", "Joe"]

• array nomor yang diurutkan

const array = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => ab);
// Keluaran(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => ba);
// Output (6) [100, 40, 25, 10, 5, 1]

• ​​​​pengurutan array objek

const objectArr = [
     { nama_depan: 'Lazslo', nama_belakang: 'Jamf' },
     { nama_depan: 'Babi', nama_belakang: 'Tubuh' },    
     { nama_depan: 'Bajak Laut', nama_belakang: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Keluaran(3) [{…}, {…}, {…}]
0: {nama_depan: "Babi", nama_belakang: "Tubuh"}
1: {nama_depan: "Lazslo", nama_belakang: "Jamf"}
2: {nama_depan: "Bajak Laut", nama_belakang: "Prentice"}
panjang: 3

4. Filter nilai palsu dari array

Nilai palsu seperti 0 , undefined , null , false , "" , '' dapat dengan mudah dihilangkan dengan

const array = [3, 0, 6, 7, '' , PALSU];
array.filter(Boolean);
// Output (3) [3, 6, 7]

5. Menggunakan operator logika untuk berbagai kondisi

Jika Anda ingin mengurangi kasus if...else atau switch yang disarangkan, Anda cukup menggunakan operator logika dasar AND/OR .

fungsi melakukan Sesuatu(arg1){ 
    arg1 = arg1 ||.10; 
// Setel arg1 ke 10 sebagai default jika belum disetel return arg1;
}

misalkan foo = 10;  
foo === 10 && melakukan Sesuatu(); 
// sama dengan if (foo == 10) lalu doSomething();
// Keluaran: 10

foo === 5 ||.melakukan Sesuatu();
// sama dengan if (foo != 5) lalu doSomething();
// Keluaran: 10

6. Hapus nilai duplikat

Anda mungkin telah menggunakan indexOf() dengan perulangan for yang mengembalikan indeks pertama yang ditemukan, atau includes() yang lebih baru yang mengembalikan boolean true/false dari array untuk menemukan Out/remove duplikat. Di sinilah kami memiliki dua metode yang lebih cepat.

susunan const = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// atau
const nonUnik = [...Set baru(array)];
// Output: [5, 4, 7, 8, 9, 2]

7. Membuat objek penghitung atau peta

Seringkali, Anda perlu menyelesaikan masalah dengan membuat objek penghitung atau peta yang melacak variabel sebagai kunci, dan melacak frekuensi/kejadiannya sebagai nilai.

biarkan string = 'kapilalipak';

tabel const={}; 
for(biarkan karakter string) {
  tabel[char]=tabel[char]+1 ||.
}
// Keluaran {k: 2, a: 3, p: 2, i: 2, l: 2}

dan

const countMap = new Map();
  for (misalkan i = 0; i < string.panjang; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } kalau tidak {
      countMap.set(string[i], 1);
    }
  }
// Output Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. Operator ternary sangat Keren,

Anda dapat menghindari kondisi bersarang menggunakan operator ternary if…elseif…elseif.

fungsi Demam(suhu) {
    suhu kembali > 97 ? 'Kunjungi Dokter!'
      : suhu <97 ? 'Keluar dan Main!!'
      : temp === 97 ? 'Istirahatlah!';
}

// Demam Keluaran(97): "Istirahatlah!" 
Demam(100): "Kunjungi Dokter!"

9. Perulangan for lebih cepat dibandingkan dengan

• for dan for..in yang lama yang memberi Anda indeks secara default, tetapi Anda dapat menggunakan arr[index].
• for..in juga menerima non-angka, jadi hindarilah.
• forEach , for...of mendapatkan elemen secara langsung.
• forEach juga dapat memberi Anda indeks, tetapi for...of tidak bisa.
• for dan for...of mempertimbangkan lubang dalam array, tetapi tidak 2 lainnya.

10. Menggabungkan 2 Objek

Biasanya kita perlu menggabungkan beberapa objek dalam tugas sehari-hari.

pengguna konstan = { 
 nama: 'Kapil Raghuwanshi', 
 jenis kelamin: 'Pria' 
 };
const perguruan tinggi = { 
 dasar: 'Sekolah Dasar Mani', 
 menengah: 'Sekolah Menengah Lass' 
 };
keterampilan konstan = { 
 pemrograman: 'Ekstrim', 
 renang: 'Rata-rata', 
 sedang tidur: 'Pro' 
 };

ringkasan const = {...pengguna, ...perguruan tinggi, ...keterampilan};

// Keluaran jenis kelamin: "Pria"
nama: "Kapil Raghuwanshi"
dasar: "Sekolah Dasar Mani"
pemrograman: "Ekstrim"
menengah: "Sekolah Menengah Lass"
sedang tidur: "Pro"
berenang: "Rata-rata"

11. Fungsi Panah

Ekspresi fungsi panah adalah alternatif ringkas dari ekspresi fungsi tradisional, namun memiliki keterbatasan dan tidak dapat digunakan di semua situasi. Karena mereka memiliki cakupan leksikal (lingkup induk) dan tidak memiliki cakupannya sendiri, maka arguments this merujuk pada lingkungan di mana argumen tersebut didefinisikan.

konstanta orang = {
nama: 'Kapil',
sebutkanNama() {
    kembalikan nama ini;
    }
}
orang.sayName();
// Keluaran "Kapil"

tetapi

const person = {
nama: 'Kapil',
sebutkanNama : () => {
    kembalikan nama ini;
    }
}
orang.sayName();
// Output ""

12.

Rangkaian opsional Rangkaian opsional?. Menghentikan evaluasi jika nilainya muncul sebelum ?. tidak terdefinisi atau nol dan mengembalikan

tidak terdefinisi.
pengguna konstan = {
  karyawan: {
    nama: "Kapil"
  }
};
pengguna.karyawan?.nama;
// Keluaran: "Kapil"
pengguna.pekerja?.nama;
// Keluaran: tidak ditentukan
pengguna.pekerja.nama
// Output: VM21616:1 TypeError Tidak Tertangkap: Tidak dapat membaca 'nama' properti yang tidak ditentukan

13.

Gunakan metode Math.random() bawaan untuk mengacak array.

daftar const = [1, 2, 3, 4, 5, 6, 7, 8, 9];
daftar.sort(() => {
    kembalikan Matematika.acak() - 0,5;
});
// Keluaran(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Panggil lagi
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Operator penggabungan nol

Operator penggabungan nol (??) adalah operator logika, ketika operan kirinya kosong atau tidak ditentukan, mengembalikannya operan kanan, jika tidak maka akan mengembalikan operan kirinya.

const foo = null ?? 'sekolah saya';
// Keluaran: "sekolahku"

konstanta baz = 0 ?? 42;
// Output: 0

15. Operator Istirahat & Penyebaran

3 titik misterius itu ... dapat beristirahat atau menyebar! ?

fungsi myFun(a, b, ...manyMoreArgs) {
   return argument.length;
}
myFun("satu", "dua", "tiga", "empat", "lima", "enam");

// Keluaran: 6

dan

bagian konstan = ['bahu', 'lutut']; 
const lirik = ['kepala', ...bagian, 'dan', 'jari kaki']; 

lirik;
//keluaran: 
(5) ["kepala", "bahu", "lutut", "dan", "jari kaki"]

16. Parameter default

const search = (arr, low=0,high=arr.length-1) => {
    kembali tinggi;
}
pencarian([1,2,3,4,5]);

// Output: 4

17. Mengonversi desimal ke biner atau heksadesimal

Saat menyelesaikan masalah, kita dapat menggunakan beberapa metode bawaan seperti .toPrecision() atau .toFixed() untuk mengimplementasikan banyak fungsi pembantu.

bilangan konstan = 10;

nomor.toString(2);
// Keluaran: "1010"
nomor.toString(16);
// Keluaran: "a"
nomor.toString(8);
// Keluaran: "12"

18. Gunakan destrukturisasi untuk sekadar menukar dua nilai,

misalkan a = 5;
misalkan b = 8;
[a,b] = [b,a]

[a,b]
// Output(2) [8, 5]

19. Periksa Palindrom Satu Baris

Nah, ini bukan tip singkat secara keseluruhan, tetapi ini akan memberi Anda ide bagus tentang cara menggunakan string.

fungsi checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('nama');
// Output: true

20. Ubah properti Objek menjadi array properti

menggunakan Object.entries(), Object.keys() dan Object.values()
konstanta objek = { a: 1, b: 2, c: 3 };

Objek.entri(obj);
// Keluaran(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
panjang: 3

Objek.kunci(obj);
(3) ["a", "b", "c"]

Objek.nilai(obj);
(3) [1, 2, 3]