Geekly articles weekly

Yang Perlu Anda Ketahui Tentang Array JavaScript

Kami mempersembahkan kepada Anda terjemahan sebuah artikel oleh Thomas Lombart, yang diterbitkan di medium.freecodecamp.org. Terjemahan diterbitkan dengan izin dari penulis.


Contoh menggunakan metode pengurangan untuk mengurangi array

Biarkan saya membuat pernyataan yang berani: loop sering tidak berguna dan membuat kode sulit dibaca. Untuk iterasi dalam array, pencarian, elemen penyortiran, dan tindakan serupa lainnya, Anda dapat menggunakan salah satu metode di bawah ini.

Meskipun efektif, sebagian besar metode ini masih sedikit diketahui dan tidak terlalu populer. Saya akan melakukan kerja keras untuk Anda dan berbicara tentang yang paling berguna. Baca artikel ini sebagai panduan Anda untuk metode array JavaScript.

Catatan : Sebelum kita mulai, Anda perlu tahu satu hal: Saya bias terhadap pemrograman fungsional. Untuk menghindari efek samping, saya berusaha menerapkan metode yang tidak secara langsung memodifikasi array asli. Saya tidak memberitahu Anda untuk menolak untuk mengubah array sama sekali, tetapi perlu mempertimbangkan bahwa beberapa metode mengarah ke ini. Akibatnya, efek samping, perubahan yang tidak diinginkan dan, sebagai akibatnya, bug muncul.

Artikel ini awalnya diterbitkan di thomlom.dev , di mana Anda dapat menemukan lebih banyak materi pengembangan web.

Dasar-dasarnya


Ada empat metode yang perlu diketahui jika Anda bekerja dengan array. Ini adalah map , filter , reduce dan operator spread . Mereka efektif dan bermanfaat.

peta
Anda akan sering menggunakan metode map . Secara umum, setiap kali Anda perlu mengubah elemen array, pertimbangkan opsi ini.

Dibutuhkan satu parameter - fungsi yang dipanggil pada setiap elemen array, dan kemudian mengembalikan array baru sehingga tidak ada efek samping.

 const numbers = [1, 2, 3, 4] const numbersPlusOne = numbers.map(n => n + 1) console.log(numbersPlusOne) // [2, 3, 4, 5]

Anda juga dapat membuat array baru yang menyimpan hanya satu properti spesifik objek.

 const allActivities = [ { title: 'My activity', coordinates: [50.123, 3.291] }, { title: 'Another activity', coordinates: [1.238, 4.292] } ] const allCoordinates = allActivities.map(activity => activity.coordinates) console.log(allCoordinates) // [[50.123, 3.291], [1.238, 4.292]]

Jadi, ingat: ketika Anda perlu mengubah array, pikirkan tentang menggunakan peta .

filter
Nama metode ini berbicara sendiri: gunakan ketika Anda ingin memfilter array.

Seperti map , filter mengambil sebagai parameter tunggal fungsi yang dipanggil pada setiap elemen array. Fungsi ini harus mengembalikan nilai boolean:

  • true - jika Anda ingin menyimpan elemen dalam array;
  • false - jika Anda tidak ingin menyimpannya.

Akibatnya, Anda akan memiliki array baru yang benar dengan elemen yang ingin Anda tinggalkan.

Misalnya, hanya angka ganjil yang dapat disimpan dalam array.

 const numbers = [1, 2, 3, 4, 5, 6] const oddNumbers = numbers.filter(n => n % 2 !== 0) console.log(oddNumbers) // [1, 3, 5]

Anda juga bisa menggunakan filter untuk menghapus elemen tertentu dalam array.

 const participants = [ { id: 'a3f47', username: 'john' }, { id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }, ] function removeParticipant(participants, id) { return participants.filter(participant => participant.id !== id) } console.log(removeParticipant(participants, 'a3f47')) // [{ id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }];

kurangi
Menurut pendapat saya, metode ini adalah yang paling sulit dipahami. Tetapi begitu Anda menguasainya, Anda akan memiliki banyak peluang.

Biasanya, metode reduce mengambil array nilai dan menyatukannya menjadi nilai tunggal. Dibutuhkan dua parameter, fungsi callback (yang merupakan peredam ) dan nilai awal opsional (yang merupakan elemen pertama dari array secara default). Gearbox itu sendiri mengambil empat parameter:

  • baterai yang mengumpulkan nilai yang dikembalikan di gearbox ;
  • nilai array saat ini;
  • indeks saat ini;
  • array yang disebut metode reduce .

Pada dasarnya Anda hanya akan menggunakan dua parameter pertama - baterai dan nilai saat ini.

Tapi mari kita tidak masuk jauh ke dalam teori dan mempertimbangkan contoh penerapan reduce paling umum.

 const numbers = [37, 12, 28, 4, 9] const total = numbers.reduce((total, n) => total + n) console.log(total) // 90

Dalam iterasi pertama, akumulator, yang merupakan jumlah, mengambil nilai awal 37. Nilai yang dikembalikan adalah 37 + n, di mana n = 12. Kita mendapatkan 49.

Selama iterasi kedua, akumulator adalah 49, nilai yang dikembalikan adalah 49 + 28 = 77. Dan seterusnya.

Metode reduce sangat fungsional sehingga Anda dapat menggunakannya untuk membangun banyak metode array seperti map atau filter .

 const map = (arr, fn) => { return arr.reduce((mappedArr, element) => { return [...mappedArr, fn(element)] }, []) } console.log(map([1, 2, 3, 4], n => n + 1)) // [2, 3, 4, 5] const filter = (arr, fn) => { return arr.reduce((filteredArr, element) => { return fn(element) ? [...filteredArr] : [...filteredArr, element] }, []) } console.log(filter([1, 2, 3, 4, 5, 6], n => n % 2 === 0)) // [1, 3, 5]

Sebagai aturan, kami menetapkan nilai awal [] ke metode pereduksi - akumulator. Untuk map kami menjalankan fungsi yang hasilnya ditambahkan ke ujung baterai menggunakan operator spread (kami akan membicarakannya di bawah, jangan khawatir). Untuk filter melakukan hal yang hampir sama, kami hanya menjalankan fungsi filter pada elemen. Jika itu benar, kami mengembalikan array sebelumnya . Jika tidak, tambahkan elemen ke akhir array.

Mari kita lihat contoh yang lebih kompleks: sangat mengurangi array [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] menjadi [1, 2, 3, 4, 5, 6, 7, 8] .

 function flatDeep(arr) { return arr.reduce((flattenArray, element) => { return Array.isArray(element) ? [...flattenArray, ...flatDeep(element)] : [...flattenArray, element] }, []) } console.log(flatDeep([1, 2, 3, [4, [[[5, [6, 7]]]], 8]])) // [1, 2, 3, 4, 5, 6, 7, 8]

Contoh ini sangat mirip dengan map , kecuali bahwa kami menggunakan rekursi di sini. Saya tidak akan membahas rekursi secara terperinci, karena ini berada di luar cakupan topik kita, tetapi jika Anda ingin tahu lebih banyak, pergilah ke sumber yang bagus ini.

Pernyataan Spread (ES2015)
Saya setuju, ini bukan metode. Namun, operator spread membantu mencapai tujuan yang berbeda ketika bekerja dengan array. Anda dapat menerapkannya untuk memperluas nilai-nilai dari satu array di array lain, dan kemudian membuat salinan atau menghubungkan beberapa array secara bersamaan.

 const numbers = [1, 2, 3] const numbersCopy = [...numbers] console.log(numbersCopy) // [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = [...numbers, ...otherNumbers] console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6]

Catatan : pernyataan spread membuat salinan dangkal dari array asli. Tapi apa artinya "dangkal"?

Salinan seperti itu akan menggandakan elemen asli sesedikit mungkin. Jika Anda memiliki larik dengan angka, string atau nilai boolean ( tipe primitif ), tidak ada masalah dan nilainya benar-benar diduplikasi. Namun, berbagai hal berbeda dengan objek dan array : hanya referensi ke nilai asli yang disalin. Oleh karena itu, jika Anda membuat salinan dangkal dari array termasuk objek dan mengubah objek dalam array yang disalin, itu juga akan diubah dalam aslinya, karena mereka memiliki referensi yang sama .

 const arr = ['foo', 42, { name: 'Thomas' }] let copy = [...arr] copy[0] = 'bar' console.log(arr) // No mutations: ["foo", 42, { name: "Thomas" }] console.log(copy) // ["bar", 42, { name: "Thomas" }] copy[2].name = 'Hello' console.log(arr) // /!\ MUTATION ["foo", 42, { name: "Hello" }] console.log(copy) // ["bar", 42, { name: "Hello" }]

Jadi, jika Anda ingin membuat salinan nyata dari array yang berisi objek atau array, Anda bisa menggunakan fungsi lodash seperti cloneDeep . Namun jangan menganggap diri Anda wajib melakukan ini. Tujuan Anda adalah untuk mengetahui cara kerja semuanya di bawah tenda .

Metode yang bermanfaat


Di bawah ini Anda akan menemukan metode lain yang juga berguna untuk diketahui dan yang dapat berguna untuk memecahkan masalah seperti menemukan elemen dalam array, menghapus bagian dari array, dan banyak lagi.

termasuk (ES2015)
Apakah Anda pernah menggunakan indexOf untuk mengetahui apakah ada elemen dalam array atau tidak? Cara yang buruk untuk memeriksanya, bukan?

Untungnya, metode yang includes melakukan validasi untuk kami. Tetapkan parameter untuk menyertakan, dan itu akan mencari elemen dalam array.

 const sports = ['football', 'archery', 'judo'] const hasFootball = sports.includes('football') console.log(hasFootball) // true

concat
Metode concat dapat digunakan untuk menggabungkan dua atau lebih array.

 const numbers = [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = numbers.concat(otherNumbers) console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6] // You can merge as many arrays as you want function concatAll(arr, ...arrays) { return arr.concat(...arrays) } console.log(concatAll([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12])) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

forEach
Jika Anda ingin melakukan tindakan untuk setiap elemen array, Anda bisa menggunakan metode forEach . Dibutuhkan fungsi sebagai parameter, yang pada gilirannya juga membutuhkan tiga parameter: nilai saat ini, indeks, dan array.

 const numbers = [1, 2, 3, 4, 5] numbers.forEach(console.log) // 1 0 [ 1, 2, 3 ] // 2 1 [ 1, 2, 3 ] // 3 2 [ 1, 2, 3 ]

indexOf
Metode ini digunakan untuk mengembalikan indeks pertama di mana elemen dapat ditemukan dalam array. Juga, indexOf sering memeriksa keberadaan elemen dalam array. Jujur, sekarang saya jarang menggunakannya.

 const sports = ['football', 'archery', 'judo'] const judoIndex = sports.indexOf('judo') console.log(judoIndex) // 2

temukan
Metode find mirip dengan filter . Anda harus menyediakannya dengan fungsi yang menguji setiap elemen array. Namun, find berhenti menguji item segera setelah menemukan item yang lulus tes. Ini bukan filter yang mengulang seluruh array terlepas dari keadaan.

 const users = [ { id: 'af35', name: 'john' }, { id: '6gbe', name: 'mary' }, { id: '932j', name: 'gary' }, ] const user = users.find(user => user.id === '6gbe') console.log(user) // { id: '6gbe', name: 'mary' }

Jadi, gunakan metode filter ketika Anda ingin memfilter seluruh array, dan metode find ketika Anda yakin bahwa Anda sedang mencari elemen unik dalam array.
temukanIndex
Metode ini hampir sama dengan find , tetapi mengembalikan indeks elemen pertama yang ditemukan alih-alih elemen itu sendiri.

 const users = [ { id: 'af35', name: 'john' }, { id: '6gbe', name: 'mary' }, { id: '932j', name: 'gary' }, ] const user = users.findIndex(user => user.id === '6gbe') console.log(user) // 1

Anda mungkin berpikir bahwa findIndex dan indexOf adalah hal yang sama. Tidak juga. Parameter pertama dari indexOf adalah nilai primitif (nilai Boolean, angka, string, nilai yang tidak ditentukan, atau karakter), sedangkan parameter pertama findIndex adalah fungsi callback.

Oleh karena itu, ketika Anda perlu menemukan indeks elemen dalam array nilai primitif, Anda bisa bekerja dengan indexOf . Jika Anda memiliki elemen yang lebih kompleks, seperti objek, gunakan findIndex .

mengiris
Saat Anda perlu mengambil bagian dari array atau menyalin array, Anda bisa merujuk ke metode slice . Tapi hati-hati: seperti operator spread, slice mengembalikan salinan dangkal .

 const numbers = [1, 2, 3, 4, 5] const copy = numbers.slice()

Di awal artikel, saya menyebutkan bahwa loop seringkali tidak berguna. Mari saya tunjukkan bagaimana cara menyingkirkannya.

Misalkan Anda ingin mengembalikan sejumlah pesan obrolan dari API dan Anda hanya perlu melihatnya lima. Berikut adalah dua pendekatan: satu dengan loop, yang lain dengan metode slice .

 // The "traditional way" to do it: // Determine the number of messages to take and use a for loop const nbMessages = messages.length < 5 ? messages.length : 5 let messagesToShow = [] for (let i = 0; i < nbMessages; i++) { messagesToShow.push(posts[i]) } // Even if "arr" has less than 5 elements, // slice will return an entire shallow copy of the original array const messagesToShow = messages.slice(0, 5)

beberapa
Jika Anda ingin memeriksa apakah setidaknya satu elemen array lulus tes, Anda bisa menggunakan some . Seperti map , filter atau find , some metode menggunakan fungsi callback sebagai satu-satunya parameter, dan kemudian mengembalikan true jika setidaknya satu elemen melewati pemeriksaan, dan false jika tidak.

some juga cocok untuk bekerja dengan izin.

 const users = [ { id: 'fe34', permissions: ['read', 'write'], }, { id: 'a198', permissions: [], }, { id: '18aa', permissions: ['delete', 'read', 'write'], } ] const hasDeletePermission = users.some(user => user.permissions.includes('delete') ) console.log(hasDeletePermission) // true

setiap
Metode ini mirip dengan some , kecuali memeriksa bahwa setiap elemen (dan bukan satu ) cocok dengan kondisi.

 const users = [ { id: 'fe34', permissions: ['read', 'write'], }, { id: 'a198', permissions: [], }, { id: '18aa', permissions: ['delete', 'read', 'write'], } ] const hasAllReadPermission = users.every(user => user.permissions.includes('read') ) console.log(hasAllReadPermission) // false

flat (ES2019)
Ini adalah metode yang benar-benar baru di dunia JavaScript. Biasanya flat membuat array baru, menghubungkan semua elemen array bersarang. Dibutuhkan satu parameter - angka yang menunjukkan seberapa banyak Anda ingin mengurangi dimensi array.

 const numbers = [1, 2, [3, 4, [5, [6, 7]], [[[[8]]]]]] const numbersflattenOnce = numbers.flat() console.log(numbersflattenOnce) // [1, 2, 3, 4, Array[2], Array[1]] const numbersflattenTwice = numbers.flat(2) console.log(numbersflattenTwice) // [1, 2, 3, 4, 5, Array[2], Array[1]] const numbersFlattenInfinity = numbers.flat(Infinity) console.log(numbersFlattenInfinity) // [1, 2, 3, 4, 5, 6, 7, 8]

flatMap (ES2019)
Coba tebak apa yang dilakukan metode ini? Saya yakin Anda akan mengerti satu nama.

Pertama, ini menjalankan fungsi pemetaan untuk setiap elemen, dan kemudian menyusutkan array pada suatu waktu. Sesederhana itu!

 const sentences = [ 'This is a sentence', 'This is another sentence', "I can't find any original phrases", ] const allWords = sentences.flatMap(sentence => sentence.split(' ')) console.log(allWords) // ["This", "is", "a", "sentence", "This", "is", "another", "sentence", "I", "can't", "find", "any", "original", "phrases"]

Dalam contoh ini, Anda memiliki banyak kalimat dalam array dan Anda ingin mendapatkan semua kata. Alih-alih menggunakan metode map dan membagi semua kalimat menjadi kata-kata dan kemudian memperpendek array, Anda dapat menggunakan flatMap .

Kemudian Anda dapat menghitung jumlah kata dengan fungsi reduce (ini tidak berlaku untuk flatMap , saya hanya ingin menunjukkan kepada Anda contoh lain dari menggunakan metode reduce ).

 const wordsCount = allWords.reduce((count, word) => { count[word] = count[word] ? count[word] + 1 : 1 return count }, {}) console.log(wordsCount) // { This: 2, is: 2, a: 1, sentence: 2, another: 1, I: 1, "can't": 1, find: 1, any: 1, original: 1, phrases: 1, }

Metode flatMap juga sering digunakan dalam pemrograman reaktif. Anda dapat melihat contohnya di sini .

bergabunglah
Jika Anda perlu membuat string berdasarkan elemen array, metode join adalah yang Anda butuhkan. Ini memungkinkan Anda untuk membuat garis baru dengan menghubungkan semua elemen array, dipisahkan oleh pemisah yang disediakan.

Misalnya, menggunakan join Anda dapat menampilkan secara visual semua peserta dalam suatu kegiatan.

 const participants = ['john', 'mary', 'gary'] const participantsFormatted = participants.join(', ') console.log(participantsFormatted) // john, mary, gary

Dan ini adalah contoh yang lebih realistis di mana Anda dapat memfilter peserta dan mendapatkan nama mereka.

 const potentialParticipants = [ { id: 'k38i', name: 'john', age: 17 }, { id: 'baf3', name: 'mary', age: 13 }, { id: 'a111', name: 'gary', age: 24 }, { id: 'fx34', name: 'emma', age: 34 }, ] const participantsFormatted = potentialParticipants .filter(user => user.age > 18) .map(user => user.name) .join(', ') console.log(participantsFormatted) // gary, emma

dari
Ini adalah metode statis yang membuat array baru dari objek seperti-array atau iterable, seperti string. Ini bisa berguna ketika Anda bekerja dengan model objek dokumen.

 const nodes = document.querySelectorAll('.todo-item') // this is an instance of NodeList const todoItems = Array.from(nodes) // now, you can use map, filter, etc. as you're workin with an array!

Apakah Anda melihat bahwa kami menggunakan jenis array alih-alih instance array? Itu sebabnya metode ini disebut statis.

Kemudian Anda bisa bersenang-senang dengan node, misalnya mendaftar pendengar acara untuk masing-masing menggunakan metode forEach .

 todoItems.forEach(item => { item.addEventListener('click', function() { alert(`You clicked on ${item.innerHTML}`) }) })

Modifikasi Array Layak Diketahui


Berikut ini adalah metode standar lainnya. Perbedaannya adalah mereka memodifikasi array asli. Tidak ada yang salah dengan perubahan, tetapi Anda harus mempertimbangkan ini saat bekerja.

Jika Anda tidak ingin memodifikasi larik asli saat bekerja dengan metode ini, buat permukaan atau salinan lengkap di muka.

 const arr = [1, 2, 3, 4, 5] const copy = [...arr] // or arr.slice()

semacam
Ya, sort memodifikasi array asli. Bahkan, ia mengurutkan elemen-elemen array di tempatnya. Metode pemilahan default mengubah semua elemen menjadi string dan mengurutkannya dalam urutan abjad.

 const names = ['john', 'mary', 'gary', 'anna'] names.sort() console.log(names) // ['anna', 'gary', 'john', 'mary']

Hati-hati: jika Anda, misalnya, beralih dari bahasa Python, maka metode sort saat bekerja dengan array angka tidak akan memberi Anda hasil yang diinginkan.

 const numbers = [23, 12, 17, 187, 3, 90] numbers.sort() console.log(numbers) // [12, 17, 187, 23, 3, 90]

Lalu bagaimana cara mengurutkan array? Metode sort mengambil satu fungsi - fungsi perbandingan . Dibutuhkan dua parameter: elemen pertama ( ) dan elemen kedua untuk perbandingan ( b ). Perbandingan antara kedua elemen ini membutuhkan digit untuk dikembalikan:

  • jika nilainya negatif - a diurutkan sebelum b ;
  • jika nilainya positif, b diurutkan sebelum a ;
  • jika nilainya 0, tidak ada perubahan.

Lalu Anda bisa mengurutkan angka.

 const numbers = [23, 12, 17, 187, 3, 90] numbers.sort((a, b) => a - b) console.log(numbers) // [3, 12, 17, 23, 90, 187]

Atau Anda dapat mengurutkan tanggal dari yang terbaru.

 const posts = [ { title: 'Create a Discord bot under 15 minutes', date: new Date(2018, 11, 26), }, { title: 'How to get better at writing CSS', date: new Date(2018, 06, 17) }, { title: 'JavaScript arrays', date: new Date() }, ] posts.sort((a, b) => a.date - b.date) // Substracting two dates returns the difference in millisecond between them console.log(posts) // [ { title: 'How to get better at writing CSS', // date: 2018-07-17T00:00:00.000Z }, // { title: 'Create a Discord bot under 15 minutes', // date: 2018-12-26T00:00:00.000Z }, // { title: 'Learn Javascript arrays the functional way', // date: 2019-03-16T10:31:00.208Z } ]

isi
Metode fill memodifikasi atau mengisi semua elemen array dari indeks awal hingga akhir dengan nilai yang ditentukan. Contoh penggunaan fill sangat baik adalah mengisi array baru dengan data awal.

 // Normally I would have called a function that generates ids and random names but let's not bother with that here. function fakeUser() { return { id: 'fe38', name: 'thomas', } } const posts = Array(3).fill(fakeUser()) console.log(posts) // [{ id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }]

mundur
Menurut saya, nama metode sepenuhnya menjelaskan esensinya.

 const numbers = [1, 2, 3, 4, 5] numbers.reverse() console.log(numbers) // [5, 4, 3, 2, 1]

pop
Metode ini menghapus elemen terakhir dari array dan mengembalikannya.

 const messages = ['Hello', 'Hey', 'How are you?', "I'm fine"] const lastMessage = messages.pop() console.log(messages) // ['Hello', 'Hey', 'How are you?'] console.log(lastMessage) // I'm fine

Metode yang bisa diganti


Di bagian terakhir, Anda akan menemukan metode yang mengubah array asli dan yang mudah ditemukan sebagai alternatif. Saya tidak mengatakan bahwa mereka perlu didiskon, saya hanya ingin menyampaikan kepada Anda bahwa beberapa metode memiliki efek samping dan dapat diganti.

mendorong
Metode ini sering digunakan. Ini memungkinkan Anda untuk menambahkan satu atau lebih elemen ke array, serta membangun array baru berdasarkan yang sebelumnya.

 const todoItems = [1, 2, 3, 4, 5] const itemsIncremented = [] for (let i = 0; i < items.length; i++) { itemsIncremented.push(items[i] + 1) } console.log(itemsIncremented) // [2, 3, 4, 5, 6] const todos = ['Write an article', 'Proofreading'] todos.push('Publish the article') console.log(todos) // ['Write an article', 'Proofreading', 'Publish the article']

Jika Anda perlu membuat array berdasarkan yang lain, seperti dalam metode itemsIncremented , ada map sesuai, filter atau reduce itemsIncremented yang sudah biasa bagi kami. Sebagai contoh, kita dapat mengambil map untuk melakukan ini.

 const itemsIncremented = todoItems.map(x => x + 1)

Dan jika Anda ingin menggunakan push ketika Anda perlu menambahkan elemen baru, maka operator spread berguna.

 const todos = ['Write an article', 'Proofreading'] console.log([...todos, 'Publish the article'])

sambatan
splice sering diakses untuk membersihkan elemen pada indeks tertentu. Anda dapat melakukan hal yang sama dengan metode filter .

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(2, 1) // remove one element at index 2 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = months.filter((month, i) => i !== 3) console.log(monthsFiltered) // ['January', 'February', 'April', 'May']

Anda mungkin bertanya: bagaimana jika saya harus menghapus banyak elemen? Kemudian gunakan slice .
 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(1, 3) // remove thirds element starting at index 1 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = [...months.slice(0, 1), ...months.slice(4)] console.log(monthsFiltered) // ['January', 'February', 'April', 'May']

bergeser
Metode shift menghapus elemen pertama dari array dan mengembalikannya. Untuk melakukan ini dalam gaya pemrograman fungsional, Anda dapat menggunakan pernyataan spread atau rest.

 const numbers = [1, 2, 3, 4, 5] // With shift const firstNumber = numbers.shift() console.log(firstNumber) // 1 console.log(numbers) // [2, 3, 4, 5] // Without shift const [firstNumber, ...numbersWithoutOne] = numbers console.log(firstNumber) // 1 console.log(numbersWithoutOne) // [2, 3, 4, 5]

tidak tergoyahkan
Metode unshift memungkinkan Anda untuk menambahkan satu atau lebih elemen ke awal array. Seperti shift , Anda dapat melakukan ini dengan operator spread.

 const numbers = [3, 4, 5] // With unshift numbers.unshift(1, 2) console.log(numbers) // [1, 2, 3, 4, 5] // Without unshift const newNumbers = [1, 2, ...numbers] console.log(newNumbers) // [1, 2, 3, 4, 5]

TL; DR


  • Ketika Anda ingin melakukan beberapa operasi dengan array, jangan gunakan loop for dan jangan menemukan kembali roda, karena kemungkinan besar ada metode dari atas yang dapat melakukan apa yang Anda butuhkan.
  • Paling sering Anda akan menggunakan map , filter , reduce metode dan operator penyebaran - ini adalah alat penting untuk pengembang apa pun.
  • Ada juga banyak metode array yang menyenangkan untuk diketahui: slice , some , flatMap , dll. Kenali mereka dan terapkan jika perlu.
  • Efek samping dapat menyebabkan perubahan yang tidak diinginkan. Ingatlah bahwa beberapa metode memodifikasi array asli Anda.
  • Metode slice dan operator spread membuat salinan dangkal. Akibatnya, objek dan subarrays akan memiliki tautan yang sama - ini juga perlu diingat.
  • Metode lama yang mengubah array dapat diganti dengan yang baru. Anda memutuskan apa yang harus dilakukan.

Sekarang Anda tahu semua yang harus Anda ketahui tentang array JavaScript. Jika Anda menyukai artikel ini , klik tombol "Pat" (hingga 50 kali, jika Anda mau :-)) dan bagikan. Dan jangan ragu untuk membagikan kesan Anda di komentar!

Source: https://habr.com/ru/post/id446902/

More articles:


All Articles