Artikel yang menerangkan secara terperinci cara berbeza untuk menggunakan operator spread dalam JavaScript

Artikel ini akan membawa anda melalui cara yang berbeza menggunakan operator spread dalam JavaScript, serta perbezaan utama antara operator spread dan operator selebihnya saya harap ia akan membantu anda!

diwakili oleh tiga titik ( ... Operator penyebaran JavaScript telah diperkenalkan dalam ES6. Ia boleh digunakan untuk mengembangkan elemen dalam koleksi dan tatasusunan menjadi elemen individu tunggal.

Pengendali hamparan boleh digunakan untuk mencipta dan mengklon tatasusunan dan objek, menghantar tatasusunan sebagai hujah fungsi, mengalih keluar pendua daripada tatasusunan dan banyak lagi.

Sintaks

Pengendali hamparan hanya boleh digunakan pada objek boleh lelaran. Ia mesti digunakan sebelum objek boleh lelar tanpa sebarang pemisahan. Contohnya:

console.log(...arr);

Fungsi dan parameter

Ambil kaedah Math.min() sebagai contoh. Kaedah ini menerima sekurang-kurangnya satu nombor sebagai hujah dan mengembalikan nombor terkecil antara argumen yang diluluskan.

Jika anda mempunyai tatasusunan nombor dan anda ingin mencari minimum di antara nombor-nombor ini, maka tanpa operator spread anda perlu lulus elemen satu demi satu menggunakan indeksnya, atau gunakan Kaedah apply() untuk lulus tatasusunan sebagai parameter. Contohnya:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

Perhatikan bahawa parameter pertama ialah null kerana parameter pertama digunakan untuk menukar nilai fungsi panggilan this.

Pengendali spread ialah penyelesaian yang lebih mudah dan boleh dibaca untuk menghantar elemen tatasusunan sebagai argumen kepada fungsi. Contohnya:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

Cipta Tatasusunan

Pengendali hamparan boleh digunakan untuk mencipta tatasusunan baharu daripada tatasusunan sedia ada atau objek boleh lelar lain yang mengandungi Symbol.iterator () kaedah . Ini adalah objek yang boleh diulang menggunakan gelung for...of.

Sebagai contoh, ia boleh digunakan untuk mengklon tatasusunan. Jika anda hanya menetapkan nilai tatasusunan sedia ada kepada tatasusunan baharu, membuat perubahan pada tatasusunan baharu akan mengemas kini tatasusunan sedia ada:

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

Dengan menggunakan operator hamparan, anda boleh mengklon tatasusunan sedia ada ke dalam tatasusunan yang baharu, dan sebarang perubahan yang dibuat pada tatasusunan baharu tidak akan menjejaskan tatasusunan sedia ada:

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

Perlu diambil perhatian bahawa ini hanya akan mengklon tatasusunan satu dimensi. Ia tidak berfungsi dengan tatasusunan berbilang dimensi.

Pengendali hamparan juga boleh digunakan untuk menggabungkan berbilang tatasusunan menjadi satu. Contohnya:

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

Anda juga boleh menggunakan operator hamparan pada rentetan untuk mencipta tatasusunan dengan setiap item ialah aksara dalam rentetan:

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

Mencipta Objek

Pengendali hamparan boleh digunakan dengan cara yang berbeza untuk mencipta objek.

Ia boleh digunakan untuk mengklonkan objek lain. Contohnya:

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

Ia juga boleh digunakan untuk menggabungkan berbilang objek menjadi satu. Contohnya:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

Ambil perhatian bahawa jika objek berkongsi nama sifat yang sama, nilai yang dikembangkan oleh objek terakhir akan digunakan. Contohnya:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

Operator spread boleh digunakan untuk mencipta objek daripada tatasusunan, di mana indeks dalam tatasusunan menjadi harta dan nilai pada indeks itu menjadi nilai harta itu. Contohnya:

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

Ia juga boleh digunakan untuk mencipta objek daripada rentetan, di mana indeks dalam rentetan menjadi sifat dan aksara pada indeks itu menjadi nilai harta itu. Contohnya:

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

Tukar NodeList kepada Array

NodeList ialah koleksi nod, yang merupakan elemen dalam dokumen. Elemen diakses melalui kaedah dalam koleksi, seperti item atau entries, tidak seperti tatasusunan.

Anda boleh menukar NodeList kepada Array menggunakan operator spread. Contohnya:

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

Alih keluar pendua daripada tatasusunan

Objek set ialah koleksi yang hanya menyimpan nilai unik. Sama seperti NodeList, Set boleh ditukar kepada tatasusunan menggunakan operator spread.

Memandangkan Set hanya menyimpan nilai unik, ia boleh digandingkan dengan operator spread untuk mengalih keluar pendua daripada tatasusunan. Contohnya:

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

operator hamparan dan operator rehat

operator rehat juga merupakan pengendali tiga titik ( ...), tetapi ia digunakan dalam berbeza tujuan. Operator selebihnya boleh digunakan dalam senarai argumen fungsi untuk menunjukkan bahawa fungsi menerima bilangan argumen yang tidak ditentukan. Parameter ini boleh dikendalikan sebagai tatasusunan.

Contohnya:

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

Dalam contoh ini, operator selebihnya digunakan sebagai hujah kepada fungsi calculateSum. Anda kemudian melingkari item dalam tatasusunan dan menambahnya untuk mengira jumlahnya.

Anda kemudiannya boleh menghantar pembolehubah sebagai argumen kepada fungsi satu demi satu calculateSum atau lulus elemen tatasusunan sebagai argumen menggunakan operator hamparan:

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

Kesimpulan

Pengendali penyebaran membolehkan anda melakukan lebih banyak lagi dengan lebih sedikit baris kod sambil memastikan kod anda boleh dibaca. Ia boleh digunakan dengan iterables untuk menghantar argumen kepada fungsi, atau untuk mencipta tatasusunan dan objek daripada iterables lain.

[Cadangan berkaitan: tutorial video javascript, Video pengaturcaraan asas]

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara berbeza untuk menggunakan operator spread dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!