Rumah > hujung hadapan web > tutorial js > Contoh Kaedah Tatasusunan JavaScript: Panduan Komprehensif (Kaedah)

Contoh Kaedah Tatasusunan JavaScript: Panduan Komprehensif (Kaedah)

Linda Hamilton
Lepaskan: 2024-11-04 18:28:01
asal
668 orang telah melayarinya

JavaScript Array Methods Examples: A Comprehensive Guide (Methods)

Contoh lengkap semua kaedah tatasusunan JavaScript utama.

Kategori Kaedah Tatasusunan:

1. Kaedah Pengubahsuaian (ubah suai tatasusunan asal)

  • tekan(), pop(), shift(), nyahshift(), reverse(), sort(), splice(), fill()

2. Kaedah Tidak Mengubah Suai (kembali tatasusunan/nilai baharu)

  • peta(), penapis(), concat(), slice(), toReversed(), toSorted(), toSpliced()

3. Kaedah Carian

  • indexOf(), include(), find(), findIndex(), findLast(), findLastIndex()

4. Kaedah Lelaran

  • forEach(), map(), filter(), reduce(), every(), some()

5. Kaedah Penciptaan Tatasusunan

  • Array.from(), Array.of(), Array.fromAsync()

6. Kaedah Utiliti Lain

  • sertai(), flat(), flatMap(), entri(), values(), with()

Contoh semua 31 kaedah di bawah:

1. concat() - Menggabungkan dua atau lebih tatasusunan

const arr1 = [1, 2];
const arr2 = [3, 4];
console.log(arr1.concat(arr2)); // Output: [1, 2, 3, 4]
Salin selepas log masuk

2. join() - Mencipta rentetan daripada elemen tatasusunan

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.join(', ')); // Output: "Apple, Banana, Orange"
Salin selepas log masuk

3. fill() - Mengisi elemen tatasusunan dengan nilai statik

const numbers = [1, 2, 3, 4];
console.log(numbers.fill(0)); // Output: [0, 0, 0, 0]
Salin selepas log masuk

4. includes() - Menyemak sama ada tatasusunan mengandungi elemen tertentu

const colors = ['red', 'blue', 'green'];
console.log(colors.includes('blue')); // Output: true
Salin selepas log masuk

5. indexOf() - Mencari indeks pertama unsur

const numbers2 = [1, 2, 3, 2];
console.log(numbers2.indexOf(2)); // Output: 1
Salin selepas log masuk

6. reverse() - Membalikkan elemen tatasusunan

const letters = ['a', 'b', 'c'];
console.log(letters.reverse()); // Output: ['c', 'b', 'a']
Salin selepas log masuk

7. sort() - Isih elemen tatasusunan

const unsorted = [3, 1, 4, 1, 5];
console.log(unsorted.sort()); // Output: [1, 1, 3, 4, 5]
Salin selepas log masuk

8. splice() - Menambah/mengalih elemen daripada tatasusunan

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb');
console.log(months); // Output: ['Jan', 'Feb', 'March', 'April']
Salin selepas log masuk

9. at() - Mengembalikan elemen pada indeks yang ditentukan

const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(2)); // Output: 8
Salin selepas log masuk

10. copyWithin() - Menyalin elemen tatasusunan ke kedudukan lain

const array2 = ['a', 'b', 'c', 'd', 'e'];
console.log(array2.copyWithin(0, 3, 4)); // Output: ['d', 'b', 'c', 'd', 'e']
Salin selepas log masuk

11. flat() - Mencipta tatasusunan baharu dengan elemen sub-tatasusunan digabungkan

const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // Output: [1, 2, 3, 4, 5, 6]
Salin selepas log masuk

12. Array.from() - Mencipta tatasusunan daripada objek seperti tatasusunan

console.log(Array.from('hello')); // Output: ['h', 'e', 'l', 'l', 'o']
Salin selepas log masuk

13. findLastIndex() - Mengembalikan indeks terakhir yang memenuhi syarat

const numbers3 = [5, 12, 8, 130, 44, 8];
console.log(numbers3.findLastIndex(num => num === 8)); // Output: 5
Salin selepas log masuk

14. forEach() - Melaksanakan fungsi untuk setiap elemen tatasusunan

const numbers4 = [1, 2, 3];
numbers4.forEach(num => console.log(num * 2)); // Output: 2, 4, 6
Salin selepas log masuk

15. every() - Menguji jika semua elemen melepasi keadaan

const numbers5 = [1, 2, 3, 4, 5];
console.log(numbers5.every(num => num > 0)); // Output: true
Salin selepas log masuk

16. entri() - Mengembalikan lelaran tatasusunan dengan pasangan kunci/nilai

const fruits2 = ['Apple', 'Banana'];
const iterator = fruits2.entries();
console.log([...iterator]); // Output: [[0, 'Apple'], [1, 'Banana']]
Salin selepas log masuk

17. values() - Mengembalikan lelaran tatasusunan dengan nilai

const fruits3 = ['Apple', 'Banana'];
const values = [...fruits3.values()];
console.log(values); // Output: ['Apple', 'Banana']
Salin selepas log masuk

18. toReversed() - Mengembalikan tatasusunan terbalik baharu

const arr4 = [1, 2, 3];
console.log(arr4.toReversed()); // Output: [3, 2, 1]
console.log(arr4); // Original array unchanged: [1, 2, 3]
Salin selepas log masuk

19. toSorted() - Mengembalikan tatasusunan diisih baharu

const arr5 = [3, 1, 2];
console.log(arr5.toSorted()); // Output: [1, 2, 3]
console.log(arr5); // Original array unchanged: [3, 1, 2]
Salin selepas log masuk

20. toSpliced() - Mengembalikan tatasusunan baharu dengan operasi sambatan

const arr6 = [1, 2, 3];
console.log(arr6.toSpliced(1, 1, 'two')); // Output: [1, 'two', 3]
console.log(arr6); // Original array unchanged: [1, 2, 3]
Salin selepas log masuk

21. with() - Mengembalikan tatasusunan baharu dengan elemen diganti

const arr7 = [1, 2, 3];
console.log(arr7.with(1, 'two')); // Output: [1, 'two', 3]
console.log(arr7); // Original array unchanged: [1, 2, 3]
Salin selepas log masuk

22. Array.fromAsync() - Mencipta tatasusunan daripada async iterable

async function* asyncGenerator() {
  yield 1;
  yield 2;
}
Array.fromAsync(asyncGenerator()).then(array => console.log(array)); // Output: [1, 2]
Salin selepas log masuk

23. Array.of() - Mencipta tatasusunan daripada argumen

console.log(Array.of(1, 2, 3)); // Output: [1, 2, 3]
Salin selepas log masuk

24. map() - Mencipta tatasusunan baharu dengan hasil panggilan balik

const numbers6 = [1, 2, 3];
console.log(numbers6.map(x => x * 2)); // Output: [2, 4, 6]
Salin selepas log masuk

25. flatMap() - Peta dan meratakan hasil

const arr8 = [1, 2, 3];
console.log(arr8.flatMap(x => [x, x * 2])); // Output: [1, 2, 2, 4, 3, 6]
Salin selepas log masuk

26. reduce() - Mengurangkan tatasusunan kepada nilai tunggal (kiri ke kanan)

const numbers7 = [1, 2, 3, 4];
console.log(numbers7.reduce((acc, curr) => acc + curr, 0)); // Output: 10
Salin selepas log masuk

27. reduceRight() - Mengurangkan tatasusunan kepada nilai tunggal (kanan ke kiri)

const numbers8 = [1, 2, 3, 4];
console.log(numbers8.reduceRight((acc, curr) => acc + curr, 0)); // Output: 10
Salin selepas log masuk

28. some() - Menguji jika sekurang-kurangnya satu elemen melepasi syarat

const numbers9 = [1, 2, 3, 4, 5];
console.log(numbers9.some(num => num > 4)); // Output: true
Salin selepas log masuk

29. find() - Mengembalikan elemen pertama yang melepasi syarat

const numbers10 = [5, 12, 8, 130, 44];
console.log(numbers10.find(num => num > 10)); // Output: 12
Salin selepas log masuk

30. findIndex() - Mengembalikan indeks pertama yang melepasi syarat

const numbers11 = [5, 12, 8, 130, 44];
console.log(numbers11.findIndex(num => num > 10)); // Output: 1
Salin selepas log masuk

31. findLast() - Mengembalikan elemen terakhir yang melepasi syarat

const numbers12 = [5, 12, 8, 130, 44];
console.log(numbers12.findLast(num => num > 10)); // Output: 44
Salin selepas log masuk

Perkara utama:

  • Setiap kaedah mempunyai tugas tertentu, seperti mengisih, membalikkan atau mencari elemen dalam tatasusunan.
  • Sesetengah kaedah mengubah suai tatasusunan asal, seperti sort() dan reverse().
  • Sesetengah kaedah mengembalikan tatasusunan baharu, seperti map() dan penapis().
  • Sesetengah kaedah moden, seperti toSorted() dan toReversed(), pastikan tatasusunan asal tidak berubah dan kembalikan tatasusunan baharu.

? Berhubung dengan saya di LinkedIn:

Saya kerap berkongsi cerapan tentang JavaScript, Node.js, React, Next.js, kejuruteraan perisian, struktur data, algoritma dan banyak lagi. Mari berhubung, belajar dan berkembang bersama!

Ikuti saya: Nozibul Islam

Atas ialah kandungan terperinci Contoh Kaedah Tatasusunan JavaScript: Panduan Komprehensif (Kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan