ES6 dalam Tindakan: Array Baru.* Dan Array.Prototype.* Kaedah

Artikel ini meneroka beberapa kaedah baru ES6 meningkatkan manipulasi array, dikategorikan sebagai

(kaedah kelas) dan Array.* (kaedah contoh). Kami akan mengkaji penggunaan mereka dengan contoh dan membincangkan polyfills untuk keserasian yang lebih luas. Array.prototype.* oleh Paul Miller menawarkan penyelesaian yang komprehensif untuk polyfilling kaedah ini. es6-shim

Konsep Utama:

ES6 memperkenalkan pelbagai kaedah array, termasuk
• , Array.from(), Array.prototype.find(), Array.prototype.findIndex(), Array.prototype.keys(), dan Array.prototype.values(). Array.prototype.fill()
• Membina array baru dari objek seperti array atau itable, dengan berkesan menangani cabaran umum dengan struktur seperti array. Ia disokong secara meluas kecuali di Internet Explorer. Array.from()
• dan Array.prototype.find() cari elemen array pertama yang memenuhi fungsi ujian yang diberikan. Array.prototype.findIndex() mengembalikan elemen itu sendiri; find() Mengembalikan indeksnya. Kedua -duanya mempunyai sokongan yang baik, tidak termasuk Internet Explorer. findIndex()
• dan Array.prototype.keys() menghasilkan iterator array yang menyediakan kunci dan nilai array masing -masing. Array.prototype.values() memaparkan array dengan nilai yang ditentukan dalam julat tertentu. Kaedah ini mempunyai sokongan yang luas, tidak termasuk Internet Explorer. Array.prototype.fill()

Array.from()

Mewujudkan array dari sumber-sumber seperti array atau itable. Ini menangani penyelesaian tradisional: Array.from(). [].slice.call(arrayLike)

sintaks:

Array.from(arrayLike[, mapFn[, thisArg]])

Parameter:

• : objek array-like atau iterable. arrayLike
• : fungsi yang digunakan untuk setiap elemen. mapFn
• : konteks (thisArg) untuk this. mapFn

Contoh: Argumen fungsi berganda:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Sokongan: Disokong secara meluas kecuali Internet Explorer. Polyfills boleh didapati di MDN dan dari Mathias Bynens.

Array.prototype.find()

Mengembalikan elemen pertama yang memenuhi fungsi ujian yang disediakan. Array.prototype.find()

sintaks:

Array.prototype.find(callback[, thisArg])

Parameter panggil balik:

• : elemen semasa. element
• : Indeks elemen semasa. index
• : array. array

Contoh: Mencari elemen pertama lebih besar daripada 2:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Sokongan: Disokong secara meluas kecuali Internet Explorer. Polyfill boleh didapati di MDN.

Array.prototype.findIndex()

Sama seperti find(), tetapi mengembalikan indeks elemen sepadan pertama, atau -1 jika tidak ada yang dijumpai.

Contoh: Mencari indeks elemen pertama lebih besar daripada 2:

Array.from(arrayLike[, mapFn[, thisArg]])

Sokongan: Disokong secara meluas kecuali Internet Explorer. Polyfill boleh didapati di MDN.

3

Kaedah ini mengembalikan Iterator Array untuk Kekunci dan Nilai, masing -masing. Array.prototype.keys() Contoh: Array.prototype.values()

Sokongan:

Mempunyai sokongan yang baik kecuali Internet Explorer.

mungkin memerlukan transpilation (mis., Babel).

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

keys() values()

mengisi array dengan nilai yang ditentukan. Array.prototype.fill() sintaks:

Contoh: Array.prototype.fill()

Sokongan: Disokong secara meluas kecuali Internet Explorer. Polyfills boleh didapati di MDN dan dari Addy Osmani.

Array.prototype.find(callback[, thisArg])

Kesimpulan:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

kaedah array ES6 dengan ketara meningkatkan keupayaan manipulasi pelbagai JavaScript. Walaupun kebanyakan menikmati sokongan yang meluas, pertimbangkan polyfills untuk pelayar yang lebih tua.

Soalan -soalan yang sering ditanya (diubahsuai untuk kejelasan dan kesimpulan):

Seksyen FAQ yang disediakan sudah cukup komprehensif. Untuk memperbaikinya, saya akan mencadangkan:

penyatuan:

menggabungkan soalan yang serupa (mis., Mereka tentang keserasian pelayar).

kesimpulan:
1. memendekkan jawapan semasa mengekalkan maklumat penting. Contoh kod CODE: Sertakan lebih ringkas, coretan kod ilustrasi untuk setiap kaedah.
2. Inilah contoh bagaimana menyusun semula beberapa soalan dan jawapan:
3. Q: Apakah kaedah array ES6 yang baru dan bagaimana mereka berfungsi?

a:

es6 memperkenalkan beberapa kaedah array yang kuat:

: Mengembalikan elemen pertama yang memenuhi fungsi ujian yang disediakan.

: Mengembalikan indeks elemen sepadan pertama.

• find(): Menggantikan elemen array dengan nilai statik dalam julat yang ditentukan. arr.find(x => x > 5)
• findIndex(): menyalin urutan elemen array ke kedudukan lain dalam array yang sama. arr.findIndex(x => x > 5)
• fill(): mengembalikan iterator untuk kekunci array. arr.fill(0, 2, 4)
• : Mengembalikan iterator untuk nilai array. copyWithin() arr.copyWithin(0, 3, 4)
: Membuat array baru dari objek seperti array atau itable.
• keys()
• Q: Keserasian penyemak imbas dan polyfills? values()

A: Pelayar yang paling moden menyokong kaedah ini. Walau bagaimanapun, untuk penyemak imbas yang lebih tua (terutamanya Internet Explorer), anda memerlukan polyfills (mis., es6-shim). MDN menyediakan polyfills untuk banyak kaedah ini.

Dengan menyusun semula FAQ dengan cara ini, anda boleh menjadikannya lebih cekap dan mudah difahami. Ingatlah untuk menerapkan prinsip yang sama dengan soalan dan jawapan yang selebihnya.

Atas ialah kandungan terperinci ES6 dalam Tindakan: Array Baru.* Dan Array.Prototype.* Kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!