Rumah  >  Artikel  >  hujung hadapan web  >  Panduan untuk Menguasai Tatasusunan JavaScript

Panduan untuk Menguasai Tatasusunan JavaScript

WBOY
WBOYasal
2024-07-19 16:34:11946semak imbas

A Guide to Master JavaScript Arrays

Array ialah salah satu struktur data yang paling biasa digunakan dalam JavaScript. Ia membolehkan anda menyimpan berbilang nilai dalam satu pembolehubah dan dilengkapi dengan set kaya fungsi terbina dalam yang menjadikan memanipulasi dan bekerja dengan data menjadi mudah dan cekap. Dalam artikel ini, kami akan meneroka fungsi tatasusunan JavaScript secara terperinci, memberikan penjelasan, contoh dan ulasan untuk membantu anda menguasainya.

Pengenalan kepada Tatasusunan dalam JavaScript

Suatu tatasusunan ialah koleksi tertib item yang boleh menyimpan jenis data yang berbeza, termasuk nombor, rentetan, objek dan juga tatasusunan lain.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

Mencipta Tatasusunan

Tatasusunan boleh dibuat menggunakan literal tatasusunan atau pembina Tatasusunan.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

Hartanah Tatasusunan

  • panjang: Mengembalikan bilangan elemen dalam tatasusunan.
let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

Kaedah Tatasusunan

1. tolak()

Menambah satu atau lebih elemen pada penghujung tatasusunan dan mengembalikan panjang baharu.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. pop()

Mengalih keluar elemen terakhir daripada tatasusunan dan mengembalikan elemen itu.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. shift()

Mengalih keluar elemen pertama daripada tatasusunan dan mengembalikan elemen itu.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. unshift()

Menambah satu atau lebih elemen pada permulaan tatasusunan dan mengembalikan panjang baharu.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concat()

Menggabungkan dua atau lebih tatasusunan dan mengembalikan tatasusunan baharu.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. sertai()

Menyertai semua elemen tatasusunan ke dalam rentetan.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. terbalik()

Menterbalikkan susunan unsur dalam tatasusunan.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. slice()

Mengembalikan salinan cetek sebahagian tatasusunan ke dalam objek tatasusunan baharu.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. sambung()

Menukar kandungan tatasusunan dengan mengalih keluar, menggantikan atau menambah elemen.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. sort()

Isih elemen tatasusunan pada tempatnya dan mengembalikan tatasusunan yang diisih.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. penapis()

Mencipta tatasusunan baharu dengan semua elemen yang lulus ujian yang dilaksanakan oleh fungsi yang disediakan.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. peta()

Mencipta tatasusunan baharu dengan hasil panggilan fungsi yang disediakan pada setiap elemen dalam tatasusunan panggilan.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. mengurangkan()

Menggunakan fungsi terhadap penumpuk dan setiap elemen dalam tatasusunan untuk mengurangkannya kepada satu nilai.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

14. cari()

Mengembalikan nilai elemen pertama dalam tatasusunan yang memenuhi fungsi ujian yang disediakan.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. findIndex()

Mengembalikan indeks elemen pertama dalam tatasusunan yang memenuhi fungsi ujian yang disediakan.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. setiap()

Menguji sama ada semua elemen dalam tatasusunan lulus ujian yang dilaksanakan oleh fungsi yang disediakan.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x < 10);
console.log(allBelowTen); // Output: true

17. beberapa()

Menguji sama ada sekurang-kurangnya satu elemen dalam tatasusunan melepasi ujian yang dilaksanakan oleh fungsi yang disediakan.

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

18. termasuk()

Menentukan sama ada tatasusunan termasuk nilai tertentu antara entrinya.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

19. indexOf()

Mengembalikan indeks pertama di mana elemen tertentu boleh ditemui dalam tatasusunan, atau -1 jika ia tidak hadir.

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

20. lastIndexOf()

Mengembalikan indeks terakhir di mana elemen tertentu boleh ditemui dalam tatasusunan, atau -1 jika ia tidak hadir.

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

21. rata()

Mencipta tatasusunan baharu dengan semua elemen subtatasusunan digabungkan ke dalamnya secara rekursif sehingga kedalaman yang ditentukan.

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

22. flatMap()

Mula-mula memetakan setiap elemen menggunakan fungsi pemetaan, kemudian ratakan hasilnya menjadi tatasusunan baharu.

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

23. daripada()

Mencipta contoh tatasusunan baru yang disalin cetek daripada objek seperti tatasusunan atau boleh lelar.

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

24. isArray()

Menentukan sama ada nilai yang dihantar ialah Tatasusunan.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

25. daripada()

Mencipta

contoh Tatasusunan baharu dengan bilangan argumen yang berubah-ubah, tanpa mengira bilangan atau jenis argumen.

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

Practical Examples

Example 1: Removing Duplicates from an Array

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

Example 2: Summing All Values in an Array

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

Example 3: Flattening a Deeply Nested Array

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

Example 4: Finding the Maximum Value in an Array

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

Example 5: Creating an Array of Key-Value Pairs

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

Atas ialah kandungan terperinci Panduan untuk Menguasai Tatasusunan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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