Apakah fungsi tiga titik dalam es6?

Tiga titik es6 bukan fungsi, tetapi pengendali. Tiga titik "..." merujuk kepada "operator kembangkan", yang boleh mengembangkan objek boleh lelar ke dalam elemen berasingan yang dipanggil objek boleh lelar ialah sebarang objek yang boleh dilalui menggunakan gelung for, seperti tatasusunan , Rentetan, Peta, Set, nod DOM, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Pengendali kembangkan... telah diperkenalkan dalam ES6, yang mengembangkan objek boleh lelar ke dalam elemen individunya Objek boleh lelar yang dipanggil ialah sebarang objek yang boleh dilalui menggunakan gelung for, seperti: tatasusunan (. tatasusunan Kaedah biasa), rentetan, Peta (pemahaman Peta), Set (bagaimana untuk menggunakan Set?), nod DOM, dsb.

Pengendali hamparan tatasusunan

Pengendali hamparan (hamparan) ialah tiga titik (...). Ia seperti operasi songsang bagi parameter rehat, menukar tatasusunan menjadi 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 fungsi penggantian

Memandangkan pengendali hamparan boleh mengembangkan tatasusunan, kaedah apply ialah tidak lagi diperlukan, Tukar tatasusunan kepada parameter fungsi.

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])

Mohon

• Salin tatasusunan

  // ES5 的写法
  const a1 = [1, 2];
  const a2 = a1.concat();
  // ES6 的写法
  const a1 = [1, 2];
  const a2 = [...a1];
  //或
  const [...a2] = a1;

• Menggabungkan tatasusunan

  // ES5 的写法
  [1, 2].concat(more);
  arr1.concat(arr2, arr3);
  // ES6 的写法
  [1, 2, ...more];
  [...arr1, ...arr2, ...arr3]

• digabungkan dengan memusnahkan tugasan

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

  Nota: Jika operator hamparan digunakan untuk tugasan tatasusunan, ia hanya boleh diletakkan Digit terakhir parameter, jika tidak ralat akan dilaporkan.

• Tukar rentetan

  Pengendali hamparan juga boleh menukar rentetan kepada tatasusunan sebenar dan boleh mengecam aksara Unikod empat bait dengan betul.

  'x\uD83D\uDE80y'.length // 4
  [...'x\uD83D\uDE80y'].length // 3
  
  let str = 'x\uD83D\uDE80y';
  str.split('').reverse().join('') // 'y\uDE80\uD83Dx'
  [...str].reverse().join('')      // 'y\uD83D\uDE80x'

• Objek yang melaksanakan antara muka Iterator

  Mana-mana objek antara muka Iterator (lihat bab Iterator) boleh ditukar kepada tatasusunan sebenar menggunakan operator spread .

• Struktur Peta dan Tetapkan, fungsi Penjana

  • Operator pengembangan secara dalaman memanggil antara muka Iterator struktur data, jadi selagi objek mempunyai Iterator antara muka, Anda boleh menggunakan operator spread, seperti struktur Peta.

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

  • Selepas fungsi Generator dijalankan, ia mengembalikan objek traverser, jadi operator spread juga boleh digunakan.

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

  • Jika anda menggunakan operator hamparan pada objek tanpa antara muka Iterator, ralat akan dilaporkan.

Pengendali sambungan objek

Konsep

Pemusnahan objek penugasan digunakan untuk mendapatkan nilai daripada objek, yang bersamaan dengan memberikan semua yang boleh dilalui (boleh dikira) tetapi belum membaca sifat objek sasaran itu sendiri kepada objek yang ditentukan. Semua kunci dan nilainya akan disalin ke objek baharu.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

Nota:

• Memandangkan penetapan penstrukturan memerlukan bahagian kanan tanda sama ialah objek, jadi jika bahagian kanan daripada tanda sama ialah undefined atau null, ralat akan dilaporkan kerana ia tidak boleh ditukar menjadi objek.

• Tugasan memusnahkan mestilah parameter terakhir, jika tidak, ralat akan dilaporkan.

• Salinan tugasan memusnahkan adalah salinan cetek, iaitu, jika nilai kunci ialah nilai jenis komposit (tatasusunan, objek, fungsi), maka tugasan memusnahkan menyalin a merujuk kepada nilai ini dan bukannya salinan nilai ini.

  let obj = { a: { b: 1 } };
  let { ...x } = obj;
  obj.a.b = 2;
  x.a.b // 2

• Penugasan pemusnah pengendali hamparan tidak boleh menyalin sifat yang diwarisi daripada objek prototaip.

  let o1 = { a: 1 };
  let o2 = { b: 2 };
  o2.__proto__ = o1;
  let { ...o3 } = o2;
  o3 // { b: 2 }
  o3.a // undefined
  
  
  const o = Object.create({ x: 1, y: 2 });
  o.z = 3;
  
  let { x, ...newObj } = o;
  let { y, z } = newObj;
  x // 1
  y // undefined
  z // 3
  
  let { x, ...{ y, z } } = o;
  // SyntaxError: ... must be followed by an identifier in declaration contexts

Gunakan

• Kembangkan parameter fungsi dan perkenalkan operasi lain .

function baseFunction({ a, b }) {
// ...
}
function wrapperFunction({ x, y, ...restConfig }) {
// 使用 x 和 y 参数进行操作
// 其余参数传给原始函数
return baseFunction(restConfig);
}

• Dapatkan semula semua atribut boleh dilalui objek parameter dan salinnya ke objek semasa.

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

//上面的例子只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。
// 写法一
const clone1 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
obj
);
// 写法二
const clone2 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)

• Gabung dua objek.

  let ab = { ...a, ...b };
  // 等同于
  let ab = Object.assign({}, a, b);
  
  
  //如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。
  let aWithOverrides = { ...a, x: 1, y: 2 };
  // 等同于
  let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
  // 等同于
  let x = 1, y = 2, aWithOverrides = { ...a, x, y };
  // 等同于
  let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

• Ubah suai sifat bahagian objek sedia ada.

  let newVersion = {
  ...previousVersion,
  name: 'New Name' // Override the name property
  };

  Lain-lain

  • Jika anda meletakkan atribut tersuai di hadapan operator spread, ia menjadi nilai atribut lalai bagi objek baharu.
  • Seperti operator spread untuk tatasusunan, operator spread untuk objek boleh diikuti dengan ungkapan.
  • Jika pengendali hamparan diikuti oleh objek kosong, ia tidak mempunyai kesan.
  • Jika parameter operator spread ialah null atau undefined, kedua-dua nilai ini akan diabaikan dan tiada ralat akan dilaporkan.

  • Jika terdapat fungsi nilai get dalam objek parameter pengendali pengembangan, fungsi ini akan dilaksanakan.

  [Cadangan berkaitan: tutorial video javascript, Video pengaturcaraan]

  Atas ialah kandungan terperinci Apakah fungsi tiga titik dalam es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!