{"id":27367,"date":"2023-06-04T21:33:12","date_gmt":"2023-06-04T21:33:12","guid":{"rendered":"https:\/\/matob.web.id\/note\/?p=27367"},"modified":"2023-06-04T21:33:12","modified_gmt":"2023-06-04T21:33:12","slug":"belajar-typescript-array","status":"publish","type":"post","link":"https:\/\/matob.web.id\/note\/belajar-typescript-array\/","title":{"rendered":"Belajar TypeScript &#8211; Array"},"content":{"rendered":"<p>Array adalah tipe khusus dari tipe data yang dapat menyimpan beberapa nilai dari tipe data yang berbeda secara berurutan menggunakan sintaks khusus.<\/p>\n<p><a href=\"https:\/\/matob.web.id\/note\/belajar-typescript-array\/\">TypeScript mendukung array<\/a>, mirip dengan JavaScript.\u00a0Ada dua cara untuk mendeklarasikan array:<\/p>\n<p>1. Menggunakan tanda kurung siku.\u00a0Metode ini mirip dengan cara Anda mendeklarasikan array dalam JavaScript.<\/p>\n<p><code>let fruits: string[] = ['Apple', 'Orange', 'Banana'];<\/code><\/p>\n<p>2. Menggunakan tipe array generik, Array&lt;elementType&gt;.<\/p>\n<p><code>let fruits: Array&lt;string&gt; = ['Apple', 'Orange', 'Banana'];<\/code><\/p>\n<p>Kedua metode menghasilkan output yang sama.<\/p>\n<p>Tentu saja, Anda selalu dapat menginisialisasi array seperti yang ditunjukkan di bawah ini, tetapi Anda tidak akan mendapatkan keuntungan dari sistem tipe TypeScript.<\/p>\n<p><code>let arr = [1, 3, 'Apple', 'Orange', 'Banana', true, false];<\/code><\/p>\n<p>Array dapat berisi elemen dari semua tipe data, angka, string, atau bahkan objek.<\/p>\n<p>Array dapat dideklarasikan dan diinisialisasi secara terpisah.<\/p>\n<div>\n<div>\n<div>Contoh: Deklarasi dan Inisialisasi Array<\/div>\n<\/div>\n<div>\n<pre><code>let fruits: Array&lt;string&gt;;\r\nfruits = ['Apple', 'Orange', 'Banana'];\r\nlet ids: Array&lt;number&gt;;\r\nids = [23, 34, 100, 124, 44];\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Array di TypeScript dapat berisi elemen dari tipe data yang berbeda menggunakan sintaks tipe array generik, seperti yang ditunjukkan di bawah ini.<\/p>\n<div>\n<div>\n<div>Contoh: Multi Tipe Array<\/div>\n<\/div>\n<div>\n<pre><code>let values: (string | number)[] = ['Apple', 2, 'Orange', 3, 4, 'Banana'];\r\n\/\/ or\r\nlet values: Array&lt;string | number&gt; = ['Apple', 2, 'Orange', 3, 4, 'Banana'];\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h2>Mengakses Elemen Array pada TypeScript :<\/h2>\n<p>Elemen array dapat diakses menggunakan indeks elemen misalnya\u00a0<code>ArrayName[index]<\/code>.\u00a0Indeks array dimulai dari nol, maka indeks elemen pertama adalah nol, indeks elemen kedua adalah satu dan seterusnya.<\/p>\n<div>\n<div>\n<div>Contoh: Akses Elemen Array<\/div>\n<\/div>\n<div>\n<pre><code>let fruits: string[] = ['Apple', 'Orange', 'Banana'];\r\nfruits[0]; \/\/ returns Apple\r\nfruits[1]; \/\/ returns Orange\r\nfruits[2]; \/\/ returns Banana\r\nfruits[3]; \/\/ returns undefined\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Gunakan loop for untuk mengakses elemen array seperti yang ditunjukkan di bawah ini.<\/p>\n<div>\n<div>\n<div>Contoh: Akses Elemen Array menggunakan Loop<\/div>\n<\/div>\n<div>\n<pre><code>let fruits: string[] = ['Apple', 'Orange', 'Banana'];\r\nfor(var index in fruits)\r\n{\r\n console.log(fruits[index]); \/\/ output: Apple Orange Banana\r\n}\r\nfor(var i = 0; i &lt; fruits.length; i++)\r\n{\r\n console.log(fruits[i]); \/\/ output: Apple Orange Banana\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h2>Metode Array TypeScript<\/h2>\n<p>Tabel berikut mencantumkan semua metode Array yang dapat digunakan untuk tujuan yang berbeda.<\/p>\n<div>\n<table>\n<thead>\n<tr>\n<th>metode<\/th>\n<th>Keterangan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>pop()<\/td>\n<td>Menghapus elemen terakhir dari array dan mengembalikan elemen itu<\/td>\n<\/tr>\n<tr>\n<td>push()<\/td>\n<td>Menambahkan elemen baru ke array dan mengembalikan panjang array baru<\/td>\n<\/tr>\n<tr>\n<td>sort()<\/td>\n<td>Mengurutkan semua elemen array<\/td>\n<\/tr>\n<tr>\n<td>concat()<\/td>\n<td>Menggabungkan dua array dan mengembalikan hasil gabungan<\/td>\n<\/tr>\n<tr>\n<td>indexOf()<\/td>\n<td>Mengembalikan indeks kecocokan pertama dari nilai dalam array (-1 jika tidak ditemukan)<\/td>\n<\/tr>\n<tr>\n<td>copyWithin()<\/td>\n<td>Menyalin urutan elemen dalam array<\/td>\n<\/tr>\n<tr>\n<td>fill()<\/td>\n<td>Mengisi array dengan nilai statis dari indeks awal yang disediakan hingga indeks akhir<\/td>\n<\/tr>\n<tr>\n<td>shift()<\/td>\n<td>Menghapus dan mengembalikan elemen pertama dari array<\/td>\n<\/tr>\n<tr>\n<td>splice()<\/td>\n<td>Menambah atau menghapus elemen dari array<\/td>\n<\/tr>\n<tr>\n<td>unshift()<\/td>\n<td>Menambahkan satu atau lebih elemen ke awal array<\/td>\n<\/tr>\n<tr>\n<td>includes()<\/td>\n<td>Memeriksa apakah array berisi elemen tertentu<\/td>\n<\/tr>\n<tr>\n<td>join()<\/td>\n<td>Menggabungkan semua elemen array menjadi string<\/td>\n<\/tr>\n<tr>\n<td>lastIndexOf()<\/td>\n<td>Mengembalikan indeks terakhir dari elemen dalam array<\/td>\n<\/tr>\n<tr>\n<td>slice()<\/td>\n<td>Mengekstrak bagian dari array dan mengembalikan array baru<\/td>\n<\/tr>\n<tr>\n<td>toString()<\/td>\n<td>Mengembalikan representasi string dari array<\/td>\n<\/tr>\n<tr>\n<td>toLocaleString()<\/td>\n<td>Mengembalikan string lokal yang mewakili array<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Contoh berikut menunjukkan beberapa metode array.<\/p>\n<div>\n<div>\n<div>Contoh: Metode Array<\/div>\n<div>\n<pre><code>var fruits: Array&lt;string&gt; = ['Apple', 'Orange', 'Banana'];\r\nfruits.sort();\r\nconsole.log(fruits); \/\/output: [ 'Apple', 'Banana', 'Orange' ]\r\nconsole.log(fruits.pop()); \/\/output: Orange\r\nfruits.push('Papaya');\r\nconsole.log(fruits); \/\/output: ['Apple', 'Banana', 'Papaya']\r\nfruits = fruits.concat(['Fig', 'Mango']);\r\nconsole.log(fruits); \/\/output: ['Apple', 'Banana', 'Papaya', 'Fig', 'Mango']\r\nconsole.log(fruits.indexOf('Papaya'));\/\/output: 2<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Array adalah tipe khusus dari tipe data yang dapat menyimpan beberapa nilai dari tipe data yang berbeda secara berurutan menggunakan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":27363,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[6],"tags":[],"class_list":["post-27367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer-internet"],"_links":{"self":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts\/27367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/comments?post=27367"}],"version-history":[{"count":0,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/posts\/27367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/media\/27363"}],"wp:attachment":[{"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/media?parent=27367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/categories?post=27367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/matob.web.id\/note\/wp-json\/wp\/v2\/tags?post=27367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}