Ringkaskan 15 kemahiran pembangunan JavaScript (tersusun dan dikongsi)

Artikel ini akan berkongsi dengan anda beberapa petua yang sering digunakan dalam projek JavaScript mempunyai banyak ciri hebat yang kebanyakan pemula dan pembangun pertengahan tidak tahu. Semoga ia membantu semua orang.

1. Tambahkan sifat secara bersyarat pada objek

Kita boleh menggunakan operator pengembangan (. . .) untuk menambah sifat dengan cepat pada objek JS secara bersyarat.

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

Pengendali && mengembalikan ungkapan dinilai terakhir jika setiap operan menilai kepada benar. Jadi objek {umur: 16} dikembalikan, yang kemudiannya dikembangkan untuk menjadi sebahagian daripada objek orang itu.

Jika syarat palsu, JavaScript akan melakukan sesuatu seperti ini:

const person = {
  id: 1,
  name: '前端小智',
  ...(false), 
};
// 展开 `false` 对对象没有影响
console.log(person); // { id: 1, name: 'John Doe' }

2 Semak sama ada atribut wujud dalam objek

Anda boleh menggunakan kata kunci dalam untuk menyemak sama ada sifat tertentu wujud dalam objek JavaScript.

const person = { name: '前端小智', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

3. Nama sifat dinamik dalam objek

Mudah untuk menetapkan sifat objek menggunakan kekunci dinamik. Hanya gunakan ['key name'] untuk menambah sifat:

const dynamic = 'flavour';
var item = {
  name: '前端小智',
  [dynamic]: '巧克力'
}
console.log(item); // { name: '前端小智', flavour: '巧克力' }

Helah yang sama boleh digunakan untuk merujuk sifat objek menggunakan kekunci dinamik:

const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'

4. Gunakan kekunci dinamik untuk memusnahkan objek

Kami tahu bahawa apabila memusnahkan objek, anda boleh menggunakan: untuk menamakan semula atribut yang dimusnahkan. Tetapi, adakah anda tahu bahawa anda juga boleh menyahbina sifat objek apabila nama kunci adalah dinamik?

const person = { id: 1, name: '前端小智' };
const { name: personName } = person;
console.log(personName); // '前端小智'

Sekarang, kami menggunakan kunci dinamik untuk menyahbina sifat:

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template); // Good bye

5 Penggabungan nilai nol

Pengendali ?? berguna apabila kita ingin menyemak sama ada pembolehubah adalah batal atau tidak ditentukan. Apabila operan kirinya adalah null atau undefined, ia mengembalikan operan kanan, jika tidak ia mengembalikan operan kirinya.

const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0

Dalam contoh ketiga, 0 dikembalikan kerana walaupun 0 dianggap palsu dalam JS, ia bukan batal atau tidak ditentukan. Anda mungkin berfikir bahawa kami boleh menggunakan operator || tetapi terdapat perbezaan antara keduanya

Anda mungkin berfikir bahawa kami boleh menggunakan operator || di sini, tetapi terdapat perbezaan antara keduanya.

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0

6. Rantaian pilihan?.

Adakah kita sering menghadapi ralat seperti ini: TypeError: Tidak boleh membaca sifat 'foo' daripada null. Ini adalah masalah yang menjengkelkan bagi setiap pembangun. Rangkaian pilihan telah diperkenalkan untuk menyelesaikan masalah ini. Mari lihat:

const book = { id:1, title: 'Title', author: null };
// 通常情况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined

Anda juga boleh menggunakan rangkaian fungsi pilihan berikut:

const person = {
  firstName: '前端',
  lastName: '小智',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined

7. Gunakan operator

!! Pengendali boleh digunakan untuk menukar hasil ungkapan kepada nilai Boolean (benar atau palsu):

const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false

8 . Rentetan dan Integer Menukar

Gunakan operator untuk menukar rentetan kepada nombor dengan cepat:

const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'

Untuk menukar nombor kepada rentetan dengan cepat, anda juga boleh menggunakan operator, diikuti dengan Rentetan kosong:

const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'

Penukaran jenis ini sangat mudah, tetapi ia menghasilkan kurang kejelasan dan kebolehbacaan kod. Oleh itu, pembangunan sebenar memerlukan pemilihan dan penggunaan yang teliti.

9 Periksa nilai palsu dalam tatasusunan

Semua orang sepatutnya menggunakan kaedah tatasusunan: tapis, beberapa, setiap, kaedah ini. boleh digunakan bersama kaedah Boolean untuk menguji nilai benar dan salah.

const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false

Berikut ialah cara ia berfungsi. Kami tahu bahawa kaedah tatasusunan ini menerima fungsi panggil balik, jadi kami lulus Boolean sebagai fungsi panggil balik. Fungsi Boolean sendiri menerima parameter dan mengembalikan benar atau salah bergantung pada kebenaran parameter. Jadi:

myArray.filter(val => Boolean(val));

bersamaan dengan:

myArray.filter(Boolean);

10. Susunan rata

dalam Prototaip Array There ialah kaedah rata yang boleh membuat tatasusunan tunggal daripada tatasusunan.

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat(); 
//[ { id: 1 }, { id: 2 }, { id: 3 } ]

Anda juga boleh menentukan tahap kedalaman, menyatakan sejauh mana struktur tatasusunan bersarang harus diratakan. Contohnya:

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

11.Object.entry

Kebanyakan pembangun menggunakan kaedah Object.keys untuk mengulangi objek. Kaedah ini hanya mengembalikan tatasusunan kunci objek, bukan nilai. Kita boleh menggunakan Object.entry untuk mendapatkan kunci dan nilai.

const person = {
  name: '前端小智',
  age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]

Untuk mengulangi objek, kita boleh melakukan perkara berikut:

Object.keys(person).forEach((key) => {
  console.log(`${key} is ${person[key]}`);
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key} is ${value}`);
});
// name is 前端小智
// age is 20

Kedua-dua kaedah di atas mengembalikan hasil yang sama, tetapi Object.entry lebih mudah untuk mendapatkan nilai kunci berpasangan.

kaedah 12.replaceAll

Dalam JS, untuk menggantikan semua kejadian rentetan dengan rentetan lain, kita perlu menggunakan ungkapan Biasa berikut ditunjukkan:

const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

Tetapi dalam ES12, kaedah baharu yang dipanggil replaceAll telah ditambahkan pada String.prototype, yang menggantikan semua kejadian rentetan dengan nilai rentetan lain.

str.replaceAll('-', ' '); // Red Green Blue

13 Pemisah nombor

Anda boleh menggunakan garis bawah sebagai pemisah nombor, yang boleh mengira nombor 0 dengan mudah. nombor.

// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000

下划线分隔符也可以用于BigInt数字，如下例所示

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = 'on';

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。

const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a) {
  a = b
}

检查a的值是否为真，如果为真，那么更新a的值。使用逻辑或 ||操作符也可以做同样的事情。

const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);

使用空值合并操作符 ??:

const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined) {
  a = b;
}

注意：??操作符只检查 null 或 undefined 的值。

【相关推荐：javascript学习教程】

Atas ialah kandungan terperinci Ringkaskan 15 kemahiran pembangunan JavaScript (tersusun dan dikongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!