20 kemahiran JS untuk membantu anda meningkatkan kecekapan kerja dan tidak pernah menjadi pekerja lebih masa lagi!

Artikel ini akan berkongsi dengan anda 20 petua dan kiat JavaScript untuk meningkatkan kecekapan kod. Saya harap ia akan membantu anda sebagai orang hadapan yang tidak bekerja lebih masa.

Dalam tugas harian kami, kami menulis fungsi seperti menyusun, mencari, mencari nilai unik, menghantar parameter, menukar nilai dan lain-lain, jadi di sini saya telah menyenaraikan senarai trengkas saya petua!

JavaScript benar-benar bahasa yang hebat yang patut dipelajari dan digunakan. Untuk masalah tertentu, terdapat lebih daripada satu cara untuk mencapai penyelesaian yang sama. Dalam artikel ini, kami hanya akan membincangkan yang terpantas.

Kaedah ini pasti akan membantu anda:

• Kurangkan bilangan LOC (baris kod),
• Pertandingan pengekodan,
• Hackathon
• atau tugasan terhad masa yang lain.

Kebanyakan Hacks JavaScript ini menggunakan ECMAScript6(ES2015) dan teknologi terkemudian, walaupun versi terkini ialah ECMAScript11(ES2020).

==Nota==: Semua petua di bawah telah diuji pada konsol Google Chrome.

1. Isytihar dan mulakan tatasusunan

Kita boleh memulakan tatasusunan 0 saiz tertentu menggunakan nilai lalai (seperti "", null atau ). Anda mungkin sudah menggunakan ini untuk tatasusunan 1D, tetapi bagaimana anda memulakan tatasusunan/matriks 2D?

const array = Array(5).fill(''); 
// 输出
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// 输出
(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]
length: 5

2. Cari jumlah, nilai minimum dan maksimum

Kita harus menggunakan kaedah reduce untuk mencari operasi asas matematik dengan cepat.

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

• dan

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

• Maksimum

array.reduce((a,b) => a>b?a:b);
// 输出: 9

• Minimum

array.reduce((a,b) => a<b?a:b);
// 输出: 2

3. Isih rentetan, nombor atau tatasusunan objek

Kami mempunyai kaedah terbina dalam sort() dan reverse() untuk mengisih rentetan Isih, tetapi bagaimana pula dengan tatasusunan nombor atau objek?

Mari kita lihat teknik pengisihan menaik dan menurun untuk nombor dan objek.

• Isih tatasusunan rentetan

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

stringArr.reverse();
// 输出
(4) ["Steve", "Musk", "Kapil", "Joe"]

• Isih tatasusunan nombor

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

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

• Isih tatasusunan objek

const objectArr = [
     { first_name: 'Lazslo', last_name: 'Jamf'     },
     { first_name: 'Pig',    last_name: 'Bodine'   },    
     { first_name: 'Pirate', last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// 输出
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3

4 Tapis nilai palsu daripada tatasusunan

Nilai palsu seperti 0, undefined, <.>, null , false, "" boleh ditinggalkan dengan mudah oleh ''

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// 输出
(3) [3, 6, 7]

5. Gunakan operator logik

untuk pelbagai syarat jika anda mahu Untuk mengurangkan bersarang jika...lain atau menukar kes, anda boleh menggunakan operator logik asas

. AND/OR

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// 如果尚未设置，则将 arg1 设置为 10 作为默认值
return arg1;
}

let foo = 10;  
foo === 10 && doSomething(); 
// is the same thing as if (foo == 10) then doSomething();
// 输出: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// 输出: 10

6. Alih Keluar Pendua

Anda mungkin telah menggunakan

dengan gelung for yang mengembalikan indeks pertama ditemui atau lebih besar Baharu indexOf() Mengembalikan boolean benar/salah daripada tatasusunan untuk mencari/mengalih keluar pendua. Di sinilah kita mempunyai dua kaedah yang lebih cepat. includes()

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// 输出: [5, 4, 7, 8, 9, 2]

7 Cipta objek pembilang atau pemetaan

Kebanyakan masa, anda perlu menyelesaikan masalah dengan mencipta objek pembilang atau pemetaan yang menukarkan pembolehubah Dijejaki sebagai kunci dan kekerapan/kejadiannya sebagai nilai.

let string = 'kapilalipak';

const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// 输出
{k: 2, a: 3, p: 2, i: 2, l: 2}

dan

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// 输出
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. Operator ternary bagus

Anda boleh mengelakkan keadaan bersarang menggunakan operator ternary jika…elseif…elseif .

function Fever(temp) {
    return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? &#39;Go Out and Play!!&#39;
      : temp === 97 ? &#39;Take Some Rest!&#39;;
}

// 输出
Fever(97): "Take Some Rest!" 
Fever(100): "Visit Doctor!"

9 Gelung untuk lebih pantas berbanding versi lama

• dan for memberi anda indeks secara lalai tetapi anda Anda boleh menggunakan arr[index]. for..in
• juga menerima bukan nombor, jadi elakkan. for..in
• ,forEachDapatkan elemen secara langsung. for...of
• juga boleh memberikan anda indeks, tetapi forEach tidak boleh. for...of
• dan for pertimbangkan lubang dalam tatasusunan, tetapi bukan 2 yang lain. for...of

10. Gabungkan 2 objek

Biasanya kita perlu menggabungkan berbilang objek dalam tugasan harian.

const user = { 
 name: 'Kapil Raghuwanshi', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };

const summary = {...user, ...college, ...skills};

// 输出
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"

11 Fungsi Anak panah

Ekspresi fungsi anak panah ialah alternatif padat kepada ungkapan fungsi tradisional, tetapi mempunyai had dan tidak boleh digunakan dalam semua situasi . Oleh kerana mereka mempunyai skop leksikal (skop induk) dan tidak mempunyai skop mereka sendiri

, this oleh itu mereka merujuk kepada persekitaran di mana mereka ditakrifkan. arguments

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// 输出
"Kapil"

tetapi

const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// 输出
""

12 Pilihan rantai

Berhenti jika nilai sebelum ? Tidak ditentukan atau batal dan mengembalikan

undefined。
const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// 输出: "Kapil"
user.employ?.name;
// 输出: undefined
user.employ.name
// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13. Berebut tatasusunan

menggunakan kaedah

terbina dalam. Math.random()

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0.5;
});
// 输出
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Operator penggabungan nol

Operan gabungan nol (??) ialah pengendali logik, apabila operan kirinya kosong atau Mengembalikan operan kanannya jika tidak ditentukan, sebaliknya mengembalikan operan kirinya.

const foo = null ?? 'my school';
// 输出: "my school"

const baz = 0 ?? 42;
// 输出: 0

15. Rest & Spread 运算符

那些神秘的3点...可以休息或传播！?

function myFun(a,  b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");

// 输出: 6

和

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 

lyrics;
// 输出: 
(5) ["head", "shoulders", "knees", "and", "toes"]

16. 默认参数

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

// 输出: 4

17. 将十进制转换为二进制或十六进制

在解决问题的同时，我们可以使用一些内置的方法，例如.toPrecision()或.toFixed()来实现许多帮助功能。

const num = 10;

num.toString(2);
// 输出: "1010"
num.toString(16);
// 输出: "a"
num.toString(8);
// 输出: "12"

18. 使用解构简单交换两值

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

[a,b]
// 输出
(2) [8, 5]

19. 单行回文检查

嗯，这不是一个整体的速记技巧，但它会让你清楚地了解如何使用弦乐。

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 输出: true

20.将Object属性转成属性数组

使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// 输出
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]

【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci 20 kemahiran JS untuk membantu anda meningkatkan kecekapan kerja dan tidak pernah menjadi pekerja lebih masa lagi!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!