1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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>
|
