Rumah > hujung hadapan web > tutorial js > Operator Spread & Rest

Operator Spread & Rest

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2024-08-21 06:10:05
asal
1322 orang telah melayarinya

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
Salin selepas log masuk

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'
Salin selepas log masuk
  • 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' ]
Salin selepas log masuk

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


Salin selepas log masuk

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.
Salin selepas log masuk

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.
Salin selepas log masuk

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.

Salin selepas log masuk

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.

Salin selepas log masuk

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

Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan