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

.

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

concat

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

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

harta benda. userage

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

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.

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

Math.min

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

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

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

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

kerana JavaScript tidak mengetahui nilai maksimum tatasusunan itu.

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

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

myFunc(1, 2, 3);

const arr1 = [1, 2, 3];

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 {}
  }
]

Katakan kita menggunakan operator spread untuk mendapatkan semua pada halaman:

pDi sini anda dapat melihat bahawa kami mendapat 3

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>

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

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

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!