Ciri Baharu Luar Biasa dalam JavaScript ES(4)

Versi ECMAScript terkini, ES15, memperkenalkan beberapa ciri baharu untuk memberikan pengalaman pembangun yang hebat untuk pembangun Javascript. Peningkatan ini merentasi kawasan yang berbeza, daripada sintaks Javascript yang dikemas kini dan pengendalian data kepada kemajuan dalam keselamatan, prestasi dan alatan yang ditujukan untuk produktiviti pembangun.

1. Pengumpulan Susunan

Salah satu ciri yang paling menarik (juga salah satu kegemaran peribadi saya) dalam ES15 ialah kaedah Object.groupBy().
Cara ini memudahkan cara mengumpulkan elemen dalam tatasusunan, berdasarkan kriteria tertentu. Ini menjadikan manipulasi data lebih cekap dan kurang terdedah kepada ralat.

Contoh:

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

Dengan menggunakan ciri ini, kami boleh mengurangkan keperluan untuk fungsi tersuai atau perpustakaan pihak ketiga yang biasa kami gunakan untuk pengumpulan tatasusunan.

Juga dengan ciri ini, kami boleh menjadikan kod kami lebih mudah difahami dan diselenggara dengan menyatakan niat kami secara langsung

2. Operator Saluran Paip (|>)

Kadangkala kita perlu menggunakan pelbagai fungsi sebagai proses rantaian. Dalam senario seperti itu, kita boleh menggunakan pengendali saluran paip (|>) untuk memudahkan proses rantaian.

Contoh:

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

Cara tradisional untuk melakukan di atas ialah ini

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = square(increment(double(5)));
console.log(result);

// Output: 121

Dengan menggunakan operator saluran paip, kami boleh menggunakan gaya pengaturcaraan yang lebih berfungsi. Daripada itu, kami boleh menjadikan kod kami lebih mudah dibaca dengan mengalih keluar kerumitan panggilan fungsi bersarang dalam.

3. Operator Rangkaian Kaedah (?.())

ES15 mengembangkan rantaian pilihan dengan memperkenalkan Pengendali Rangkaian Kaedah baharu. Pengendali Rangkaian Kaedah ini menambah keselamatan pada penyeruan kaedah dalam objek bersarang dalam.

Contoh:

const data = {
  user: {
    getName: () => 'Tim'
  }
};

console.log(data.user?.getName?.());  // Output: 'Alice'
console.log(data.user?.getAge?.());  // Output: undefined

Pengendali rantaian kaedah (?.()) membolehkan anda menggunakan kaedah dengan selamat pada objek yang berpotensi batal atau tidak ditentukan. Ini mengurangkan risiko ralat masa jalan yang disebabkan oleh kaedah panggilan.

4. Tetapkan Kaedah Penambahbaikan

ES15 memperkenalkan beberapa peningkatan pada objek Set, termasuk kaedah baharu seperti kesatuan, persimpangan, perbezaan dan Perbezaan simetri. Kaedah ini memudahkan operasi set biasa.

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

const unionSet = setA.union(setB);
const differenceSet = setA.difference(setB);
const intersectionSet = setA.intersection(setB);
const symmetricDifferenceSet = setA.symmetricDifference(setB);

console.log(unionSet); // Output: {1, 2, 3, 4, 5}
console.log(differenceSet); // Output: {1, 2}
console.log(intersectionSet); // Output: {3}
console.log(symmetricDifferenceSet); // Output: {1, 2, 4, 5}

• kesatuan
  Kaedah kesatuan() bagi Set kejadian mengambil set dan mengembalikan set baharu yang mengandungi elemen yang terdapat dalam salah satu atau kedua-dua set ini dan set yang diberikan.

• perbezaan
  Kaedah difference() bagi Set contoh mengambil set dan mengembalikan set baharu yang mengandungi elemen dalam set ini tetapi bukan dalam set yang diberikan.

• persimpangan
  Kaedah intersection() set contoh mengambil set dan mengembalikan set baharu yang mengandungi elemen dalam set ini dan set yang diberikan.

• Perbezaan simetri
  Kaedah symmetricDifference() bagi contoh Set mengambil set dan mengembalikan set baharu yang mengandungi elemen sama ada dalam set ini atau set yang diberikan, tetapi tidak dalam kedua-duanya.

5. Modul JSON yang Dipertingkatkan

Dalam versi ECMAScript sebelumnya, pembangun bergantung pada pengikat atau pemuat untuk mengimport fail JSON. ES15 kini menyokong import dinamik dan pengesahan skema, menjadikannya lebih mudah untuk bekerja dengan data berstruktur dan memastikan data yang diimport mematuhi format yang diharapkan.

Anda kini boleh mengimport data JSON secara langsung, sama seperti mengimport modul JavaScript.

Contoh:

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

Walau bagaimanapun, perubahan ini mungkin memecahkan kod yang bergantung pada cara yang lebih lama dan bukan standard untuk mengimport JSON atau jika alat binaan tertentu dikonfigurasikan dengan gelagat yang lebih lama.

Atas ialah kandungan terperinci Ciri Baharu Luar Biasa dalam JavaScript ES(4). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!