diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/id/web/javascript/reference/global_objects/array/slice/index.html | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/id/web/javascript/reference/global_objects/array/slice/index.html')
-rw-r--r-- | files/id/web/javascript/reference/global_objects/array/slice/index.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/id/web/javascript/reference/global_objects/array/slice/index.html b/files/id/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..44f018ba65 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>slice()</strong></code> mengembalikan sebuah salinan dangkal dari sebagian array menjadi sebuah objek array baru yang dimulai dari <code>start</code> sampai <code>end</code> (<code>end</code> tidak termasuk) dimana <code>start</code> dan <code>end</code> merupakan index dari item yang ada di array tersebut. Tidak merubah array asli.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.slice([<var>start</var>[, <var>end</var>]]) +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code><var>start</var></code> {{optional_inline}}</dt> + <dd>Indeks berbasis nol untuk memulai ekstraksi.</dd> + <dd><br> + Indeks negatif dapat digunakan, menunjukkan offset dari akhir urutan.. <code>slice(-2)</code> mengekstrak dua elemen terakhir dari urutan.</dd> + <dd>Jika <code><var>start</var></code> tidak terdefinisi, <code>slice</code> memulai dari indeks ke <code>0</code>.</dd> + <dd>Jika <code><var>start</var></code> lebih besar dari indeks urutan, array kosong akan dikembalikan.</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd>Indeks berbasis nol untuk mengakhiri ekstraksi. <code>slice</code> mengekstrak hingga tapi tidak termasuk <code><var>end</var></code>. Sebagai contoh, <code>slice(1,4)</code> mengekstrak elemen kedua menuju elemen ke-empat (indeks elemen 1, 2, dan 3).</dd> + <dd> + <p>Indeks negatif bisa digunakan,<br> + menunjukkan offset dari akhir urutan. <code>slice(2,-1)</code> mengekstrak elemen ketiga menuju elemen kedua-ke-terakhir dalam urutan.</p> + </dd> + <dd>Jika <code><var>end</var></code> dihillangkan, <code>slice</code> mengekstrak melalui akhir dari urutan (<code><var>arr</var>.length</code>).</dd> + <dd>Jika <code><var>end</var></code> lebih besar dari panjang urutan, <code>slice</code> mengkstrak melalui akhir urutan (<code><var>arr</var>.length</code>).</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Array baru berisi elemen yang diekstrak.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>slice</code> does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array as follows:</p> + +<ul> + <li>For object references (and not the actual object), <code>slice</code> copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays.</li> + <li>For strings, numbers and booleans (not {{jsxref("String")}}, {{jsxref("Number")}} and {{jsxref("Boolean")}} objects), <code>slice</code> copies the values into the new array. Changes to the string, number, or boolean in one array do not affect the other array.</li> +</ul> + +<p>If a new element is added to either array, the other array is not affected.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Return_a_portion_of_an_existing_array">Return a portion of an existing array</h3> + +<pre class="brush: js notranslate">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +let citrus = fruits.slice(1, 3) + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 id="Using_slice">Using <code>slice</code></h3> + +<p>In the following example, <code>slice</code> creates a new array, <code>newCar</code>, from <code>myCar</code>. Both include a reference to the object <code>myHonda</code>. When the color of <code>myHonda</code> is changed to purple, both arrays reflect the change.</p> + +<pre class="brush: js notranslate">// Using slice, create newCar from myCar. +let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } } +let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'] +let newCar = myCar.slice(0, 2) + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +console.log('myCar = ' + JSON.stringify(myCar)) +console.log('newCar = ' + JSON.stringify(newCar)) +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) + +// Change the color of myHonda. +myHonda.color = 'purple' +console.log('The new color of my Honda is ' + myHonda.color) + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) +</pre> + +<p>This script writes:</p> + +<pre class="notranslate">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h3 id="Array-like_objects">Array-like objects</h3> + +<p><code>slice</code> method can also be called to convert Array-like objects/collections to a new Array. You just {{jsxref("Function.prototype.bind", "bind")}} the method to the object. The {{jsxref("Functions/arguments", "arguments")}} inside a function is an example of an 'array-like object'.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3] +</pre> + +<p>Binding can be done with the {{jsxref("Function.prototype.call", "call()")}} method of {{jsxref("Function.prototype")}} and it can also be reduced using <code>[].slice.call(arguments)</code> instead of <code>Array.prototype.slice.call</code>.</p> + +<p>Anyway, it can be simplified using {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js notranslate">let unboundSlice = Array.prototype.slice +let slice = Function.prototype.call.bind(unboundSlice) + +function list() { + return slice(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3]</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> |