Cara menggunakan operator spread dalam es6

Penggunaan operator spread es6: 1. Salin tatasusunan, sintaks "[...array]"; 2. Cantumkan tatasusunan, sintaks "[...array1,...array2]"; elemen pada tatasusunan, sintaksnya ialah "[...array, 'element value']" 4. Gunakannya dengan objek Math untuk mengira nilai maksimum, nilai minimum atau jumlah 5. Hantarkan parameter tak terhingga kepada fungsi; sintaksnya ialah " const myFunc=(...args)=>{};"; 6. Tukar rentetan kepada tatasusunan aksara, sintaksnya ialah "[...rentetan]".

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Pengenalan kepada operator spread dalam es6

Pengendali spread … telah diperkenalkan dalam ES6 untuk mengembangkan objek boleh lelar ke dalam elemen individunya, jadi -dipanggil objek iterable ialah sebarang objek yang boleh dilalui menggunakan gelung for, seperti: tatasusunan (kaedah tatasusunan biasa), rentetan, Peta (Pemahaman Peta), Set (bagaimana menggunakan Set?), nod DOM, dsb.

Ia seperti operasi songsang bagi parameter rehat, menukar tatasusunan kepada jujukan parameter yang dipisahkan dengan koma. Operator spread boleh digunakan bersama dengan parameter fungsi biasa, dan ungkapan juga boleh diletakkan selepasnya, tetapi jika ia diikuti dengan tatasusunan kosong, ia tidak akan memberi kesan.

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

Maksud

Kaedah guna bagi fungsi penggantian

Memandangkan pengendali hamparan boleh mengembangkan tatasusunan, kaedah pakai tidak lagi diperlukan dan tatasusunan ditukar kepada parameter fungsi.

10 penggunaan operator spread (...)

1 >Kita boleh menggunakan operator spread untuk menyalin tatasusunan, tetapi maklum bahawa ini adalah

salinan cetek

.

Dengan cara ini kita boleh menyalin tatasusunan asas, ambil perhatian bahawa ia tidak berfungsi dengan tatasusunan berbilang peringkat atau tatasusunan dengan tarikh atau fungsi.

const arr1 = [1,2,3];
const arr2 = [...arr1];
console.log(arr2);
// [ 1, 2, 3 ]

2. Menggabungkan tatasusunan Katakan kita mempunyai dua tatasusunan yang ingin kita gabungkan menjadi satu Kaedah

, tetapi Kini anda boleh menggunakan pengendali penyebaran:

concat

Kami juga boleh mengaturnya dengan cara yang berbeza untuk menunjukkan yang mana satu harus didahulukan.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]

Selain itu, pengendali pengembangan juga sesuai untuk menggabungkan berbilang tatasusunan:

const arr3 = [...arr2, ...arr1];
console.log(arr3);
[4, 5, 6, 1, 2, 3];

const output = [...arr1, ...arr2, ...arr3, ...arr4];

Tambah elemen pada tatasusunan

let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

4. Tambah atribut pada objek Andaikan anda mempunyai objek

, tetapi ia tiada

harta benda. userage

Untuk menambah

const user = {
  firstname: 'Chris',
  lastname: 'Bongers'
};

pada objek

ini, kami boleh sekali lagi menggunakan operator spread. userage

const output = {...user, age: 31};

5 Gunakan fungsi Math() Andaikan kita mempunyai susunan nombor dan kita ingin mendapatkan yang terbesar daripada. nilai nombor ini, nilai minimum atau jumlah.

Untuk mendapatkan nilai minimum, kita boleh menggunakan operator spread dan kaedah

const arr1 = [1, -1, 0, 5, 3];

.

Math.min

Begitu juga, untuk mendapatkan nilai maksimum, anda boleh melakukan ini:

const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);
console.log(min);
// -1

Seperti yang anda lihat, nilai maksimum ialah

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(...arr1);
console.log(max);
// 5

, dan jika kami mengalih keluar

, ia akan kembali 5. 53Anda mungkin tertanya-tanya, apakah yang berlaku jika kami tidak menggunakan operator spread?

Ini mengembalikan

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);
console.log(max);
// NaN

NaN

kerana JavaScript tidak mengetahui nilai maksimum tatasusunan itu.

6. Parameter rehat Andaikan kita mempunyai fungsi dengan tiga parameter.

Kita boleh memanggil fungsi ini seperti berikut:

const myFunc(x1, x2, x3) => {
    console.log(x1);
    console.log(x2);
    console.log(x3);
}

Tetapi apa yang berlaku jika kita mahu menghantar tatasusunan.

myFunc(1, 2, 3);

Kami boleh menggunakan operator spread untuk mengembangkan tatasusunan ini ke dalam fungsi kami.

const arr1 = [1, 2, 3];

Di sini, kami membahagi tatasusunan kepada tiga parameter berasingan dan menghantarnya kepada fungsi.

myFunc(...arr1);
// 1
// 2
// 3

const myFunc = (x1, x2, x3) => {
  console.log(x1);
  console.log(x2);
  console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3

7 Hantar parameter tak terhingga ke fungsi Katakan kita mempunyai fungsi yang menerima parameter tak terhingga, seperti ditunjukkan di bawah: <.>

Jika sekarang kita memanggil fungsi ini dengan berbilang parameter, kita akan melihat perkara berikut:

const myFunc = (...args) => {
  console.log(args);
};

Pulangan:

myFunc(1, 'a', new Date());

Kemudian , kita boleh gelung secara dinamik melalui parameter.

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]

8 Tukar nodeList kepada tatasusunan

Katakan kita menggunakan operator spread untuk mendapatkan semua pada halaman:

pDi sini anda dapat melihat bahawa kami mendapat 3

daripada dom.

const el = [...document.querySelectorAll('p')];
console.log(el);
// (3) [p, p, p]

Kini kita boleh mengulangi elemen ini dengan mudah kerana ia adalah tatasusunan. p

const el = [...document.querySelectorAll('p')];
el.forEach(item => {
  console.log(item);
});
// <p></p>
// <p></p>
// <p></p>

9. Menyahbina pembolehubah

Menyahbina objek

Andaikan kita mempunyai objek :

userSekarang kita boleh memecahkan ini kepada pembolehubah individu menggunakan operator spread.

const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};

Di sini, kami memusnahkan

objek dan memusnahkan

const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }

ke dalam

pembolehubah dan selebihnya objek menjadi user pembolehubah. firstname

解构数组

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

10、展开字符串（字符串转字符数组）

String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下：

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

进而可以简单进行字符串截取，如下：

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

11、数组去重

与 Set 一起使用消除数组的重复项，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

12、打印日志

在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

【相关推荐：web前端开发】

Atas ialah kandungan terperinci Cara menggunakan operator spread dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!