Mari kita bincangkan tentang pengendali penyebaran dalam ES6

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu berkaitan tentang operator pengembangan Operator pengembangan S6 mempunyai sintaks yang sangat mudah Ia menggunakan tiga Tanda titik ".. .". Anda boleh menukar tatasusunan kepada jujukan parameter yang dipisahkan koma Mari kita lihat. Saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Pengendali pengembangan ES6, Sintaksnya sangat mudah, menggunakan tiga noktah untuk mewakili "...". Anda boleh menukar tatasusunan kepada jujukan parameter yang dipisahkan koma.

Ia mengembangkan objek boleh lelar ke dalam elemen individunya Objek boleh lelar ialah sebarang objek yang boleh dilalui menggunakan gelung for of , seperti: tatasusunan, rentetan, Map, Set , DOM nod, dsb.

Sintaks asas

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

Operator ini digunakan terutamanya untuk panggilan fungsi

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

Dalam kod di atas, dua baris array.push(...items) dan add(...numbers) ialah kedua-duanya adalah panggilan fungsi, dan semuanya menggunakan operator spread. Operator ini menukar tatasusunan menjadi jujukan parameter. Ungkapan

juga boleh diletakkan selepas operator pengembangan

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

Jika operator pengembangan diikuti dengan tatasusunan kosong, ia tidak akan memberi kesan.

[...[], 1]
// [1]

Terdapat banyak lagi kegunaan operator spread...

1 >

Menggunakan fungsi Math.max() untuk mendapatkan nilai maksimum ialah:

const m = Math.max(1, 2, 3); //结果为3

Gunakan kaedah apply dalam kombinasi dengan Math.max( ):

Tetapi jika anda ingin mengira nilai maksimum dalam tatasusunan, jelas sekali tatasusunan tidak boleh digunakan secara langsung sebagai parameter Math.max() , kita perlu mengembangkannya. Sebelum ES6, kami juga perlu menggabungkan permohonan untuk memproses:

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}

console.log(max(arr));

ES6 boleh dikembangkan dengan mudah menggunakan operator spread (... Contoh di atas menjadi:

var arr = [2, 4, 8, 6, 0];
console.log(Math.max(...arr));  // 3

). 2. Aplikasi operator spread

1. Menggabungkan tatasusunan

Pengendali spread memberi kami cara baharu untuk menggabungkan tatasusunan

// ES5 apply 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1   [0, 1, 2, 3, 4, 5]

Gunakan operator spread untuk mengembangkan tatasusunan ke dalam senarai parameter dengan mudah

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true

Dalam kod di atas,

dan a3 digunakan dalam dua cara berbeza Tatasusunan baharu digabungkan, tetapi ahli mereka adalah rujukan kepada ahli tatasusunan asal Ini adalah salinan cetek. Jika nilai yang ditunjukkan oleh rujukan diubah suai, ia akan ditunjukkan dalam tatasusunan baharu secara serentak. a4

Nota: Kedua-dua kaedah ini adalah salinan cetek, jadi anda perlu memberi perhatian apabila menggunakannya.

2. Salin tatasusunan

Tatasusunan ialah jenis data komposit Jika anda menyalinnya secara langsung, anda hanya menyalin penunjuk ke data asas struktur. Tidak mengkloning tatasusunan yang benar-benar baru.

ES5 hanya boleh menggunakan penyelesaian untuk menyalin tatasusunan.

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

Dalam kod di atas,

akan mengembalikan klon tatasusunan asal dan mengubah suai a1 tidak akan menjejaskan a2. a1

Operator spread menyediakan cara mudah untuk menyalin tatasusunan.

//拷贝数组
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷贝数组
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

Ingat: tatasusunan masih diperoleh melalui penuding, jadi kami tidak menyalin tatasusunan itu sendiri, kami hanya menyalin penunjuk baharu.

3 Tukar pseudo-array kepada array

Objek ialah koleksi nod, biasanya diwakili oleh atribut , seperti NodeList dan kaedah, seperti yang dikembalikan oleh Node.childNodes . document.querySelectorAll

        像 NodeList 和 arguments 这种伪数组，类似于数组，但不是数组，没有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach() 来迭代

        可以通过扩展运算符将其转为数组，如下：

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

        注意：使用扩展运算符将伪数组转换为数组有局限性，这个类数组必须得有默认的迭代器且伪可遍历的

4.与解构赋值结合

        扩展运算符可以与解构赋值结合起来，用于生成数组

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

下面是另外一些例子：

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest  // []
const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

        注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  报错

5. 字符串

        ES6的扩展语法可以很简单的把一个字符串分割为单独字符的数组：

[...'hello']
// [ "h", "e", "l", "l", "o" ]

6.Map 和 Set 结构，Generator 函数

        扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

        Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

        上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。

        如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错。

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Mari kita bincangkan tentang pengendali penyebaran dalam ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!