Rumah  >  Artikel  >  hujung hadapan web  >  Operator Spread & Rest

Operator Spread & Rest

WBOY
WBOYasal
2024-08-21 06:10:051214semak imbas

Spread & Rest Operator

  • Bentuk tatasusunan baharu daripada tatasusunan sedia ada dengan kurang hingar aksara.
  • Spread mengekstrak elemen sebagai nilai. Ia adalah fungsi yang tidak boleh diubah.
  • [] ialah cara untuk menulis tatasusunan baharu. Oleh itu, spread tidak mengubah tatasusunan asal.
  • Spread berfungsi pada semua iterable, bukan hanya pada tatasusunan.
  • Iterables: String, Array, Map, Set iaitu kebanyakannya struktur data terbina kecuali jenis data objek.
  • Perbezaan daripada Pemusnahan: Mengekstrak semua elemen daripada tatasusunan dan tidak mencipta pembolehubah baharu, hanya digunakan di tempat yang memerlukan nilai CSV.
  • DIGUNAKAN apabila kita membina tatasusunan, atau apabila kita menghantar nilai ke dalam fungsi.
const nums = [5,6,7];
const newNums = [1,2, nums[0],nums[1],nums[2]];
console.log(newNums); // [ 1, 2, 5, 6, 7 ]

is reduced to 

const nums = [5,6,7];
const newNums = [1,2, ...nums];
console.log(newNums); // [ 1, 2, 5, 6, 7 ]
console.log(...newNums); // 1 2 5 6 7

1. Cantumkan dua tatasusunan bersama-sama

const arr1 = [1,2,3,4,5];
const arr2 = [6,7,8,9];

let nums = [...arr1,...arr2];
nums; // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]


const firstname = "Peter";
const fullName = [...firstname,' ',"P."];
fullName; // [ 'P', 'e', 't', 'e', 'r', ' ', 'P.' ]

console.log(...firstname); // 'P' 'e' 't' 'e' 'r'
  • PUNCA RALAT: Operator spread tidak berfungsi di dalam rentetan templat kerana rentetan templat tidak menjangkakan berbilang nilai di dalamnya.

2. Mencipta Salinan Cetek tatasusunan

const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya']
};

const frnz = [...girl.friends];
console.log(frnz); // [ 'Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya' ]
console.log(girl.friends); // [ 'Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya' ]

Sebarkan kerja pada objek juga walaupun ia tidak boleh diulang.

let male = {
  "firstName": "Gangadhar",
  "lastName": "Shaktimaan"
}

let female = {
  "firstName": "Geeta",
  "lastName": "Vishwas"
}

let x = {...male, born: 1950};
let y = {...female, born: 1940};

x; // { firstName: 'Gangadhar',   lastName: 'Shaktimaan',   born: 1950 }
y; // { firstName: 'Geeta',  lastName: 'Vishwas',  born: 1940 }```




## Shallow Copy of objects:

let male = {
  "firstName": "Gangadhar",
  "lastName": "Shaktimaan"
}

let character = {...male, firstName: 'Wonderwoman'};

male;         // { firstName: 'Gangadhar', lastName: 'Shaktimaan' }
character;    // { firstName: 'Wonderwoman', lastName: 'Shaktimaan' }

- First name for character object is changed although it was extracted from male object


Corak Rehat & Parameter Rehat:

  • Rehat melakukan kebalikan daripada spread tetapi mempunyai sintaks yang sama seperti spread.
  • Spread digunakan untuk membina tatasusunan baharu atau menghantar nilai kepada fn. dalam kedua-dua kes, penyebaran digunakan untuk mengembangkan elemen dalam kedua-dua kes.
  • Rehat menggunakan sintaks yang sama tetapi untuk memekatkan nilai tersebut menjadi satu
  • Spread adalah untuk membongkar elemen daripada tatasusunan, selebihnya adalah untuk membungkus elemen ke dalam tatasusunan. ```

Perbezaan dalam sintaks operator hamparan dan rehat:
Operator sebaran => ... digunakan pada RHS pengendali tugasan.
nombor const = [9,4, ...[2,7,1]];

Pengendali rehat => ... akan berada di LHS pengendali tugasan dengan memusnahkan
const [x,y,...z] = [9,4, 2,7,1];

## Rest syntax collects all the elements after the last elements into an array. Doesn't include any skipped elements. 
- Hence, it should be the last element in the destructuring assignment.
- There can be only one rest in any destructuring assignment.

biar diet = ['piza', 'burger','mi','panggang','sushi','dosa','uttapam'];

biar [pertama, ,ketiga, ...lain] = diet;
pertama;
ketiga;
yang lain;

- Rest also works with objects. Only difference is that elements will be collected into a new object instead of an arrray.

hari biarkan = { 'mon':1,'sel':2,'wed':3,'thu':4, 'jum':5, 'sab':6, 'sun':7};
biarkan {duduk, matahari, ...bekerja} = hari;
lepaskan = {sat, sun};

bekerja; // { isn: 1, tue: 2, wed: 3, thum: 4, fri: 5 }
padam; // { Sabtu: 6, matahari: 7 }

- Although both look same, but they work differently based on where they are used.

Perbezaan Halus b/w Rehat & Hampar:

  • Operator spread digunakan di mana kita akan menulis nilai yang dipisahkan dengan koma
  • Corak rehat digunakan, kami akan menulis nama pembolehubah yang dipisahkan dengan koma.

Atas ialah kandungan terperinci Operator Spread & Rest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn