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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
---
title: Array.prototype.indexOf()
slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
---
<div>{{JSRef}}</div>
<p>Phương thức <strong>indexOf()</strong> sẽ trả về giá trị index đầu tiên của mảng, nơi mà nó đc tìm thấy trong mảng, hoặc trả về -1 nếu không tồn tại trong mảng.</p>
<div class="note">
<p><strong>Chú ý:</strong> sử dụng indexOf() cho String, xem ở đây {{jsxref("String.prototype.indexOf()")}}.</p>
</div>
<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div>
<h2 id="Cú_pháp">Cú pháp</h2>
<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
<h3 id="Các_tham_số">Các tham số</h3>
<dl>
<dt><code>searchElement</code></dt>
<dd>Phần tử cần tìm trong mảng.</dd>
<dt><code>fromIndex</code> {{optional_inline}}</dt>
<dd>Vị trí index nơi bắt đầu tìm kiếm. Nếu index lớn hơn hoặc bằng số phần tử trong mảng, <strong>-1</strong> sẽ được trả về, việc tìm kiếm sẽ không xảy ra. Nếu giá trị <code>fromIndex</code> là một số âm, vị trí index được tính từ cuối mảng. Lưu ý: cho dù <code>fromIndex</code> là số âm, kết quả tìm kiếm vẫn tính từ đầu mảng trở về sau. Nếu index bằng 0, cả mảng sẽ được tìm kiếm. Mặc định: 0 (cả mảng sẽ được tìm kiếm)</dd>
</dl>
<h3 id="Giá_trị_trả_về">Giá trị trả về</h3>
<p>Index đầu tiên của phần tử tìm thấy trong mảng; <strong>-1</strong> nếu không tìm thấy.</p>
<h2 id="Mô_tả">Mô tả</h2>
<p><code>indexOf()</code> sẽ so sánh giá trị <code>searchElement</code> với các phần tử của mảng sử dụng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">so sánh chặt</a> (tương đương với việc so sánh toán tử ba-dấu-bằng <code>===</code>)</p>
<h2 id="Ví_dụ">Ví dụ</h2>
<h3 id="Sử_dụng_indexOf">Sử dụng <code>indexOf()</code></h3>
<p>Ví dụ sau sẽ dùng <code>indexOf()</code> để tìm vị trí của giá trị trong một mảng.</p>
<pre class="brush: js">var array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
</pre>
<h3 id="Tìm_tất_cả_các_lần_xuất_hiện_của_phần_tử">Tìm tất cả các lần xuất hiện của phần tử</h3>
<pre class="brush: js">var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
indices.push(idx);
idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]
</pre>
<h3 id="Xác_định_phần_tử_đã_tồn_tại_trong_mảng_hay_chưa_và_cập_nhật_lại_mảng">Xác định phần tử đã tồn tại trong mảng hay chưa và cập nhật lại mảng</h3>
<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
if (veggies.indexOf(veggie) === -1) {
veggies.push(veggie);
console.log('New veggies collection is : ' + veggies);
} else if (veggies.indexOf(veggie) > -1) {
console.log(veggie + ' already exists in the veggies collection.');
}
}
var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
updateVegetablesCollection(veggies, 'spinach');
// New veggies collection is : potato,tomato,chillies,green-pepper,spinach
updateVegetablesCollection(veggies, 'spinach');
// spinach already exists in the veggies collection.
</pre>
<h2 id="Polyfill">Polyfill</h2>
<p><code>indexOf()</code> được thêm vào đặc tả ECMA-262, phiên bản 5; nên có thể nó không có sẵn trong tất cả trình duyệt. Bạn có thể work around bằng cách thêm vào đoạn code bên dưới vào đầu script. Polyfill này sẽ giúp bạn vẫn sử dụng được <code>indexOf</code> dù trình duyệt nào đó vẫn chưa hỗ trợ sẵn. Giải thuật của polyfill này tương đương với đặc tả của <code>indexOf</code> trong ECMA-262, 5th edition, với yêu cầu {{jsxref("Global_Objects/TypeError", "TypeError")}} và {{jsxref("Math.abs()")}} không bị thay đổi.<br>
</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// This version tries to optimize by only checking for "in" when looking for undefined and</span>
<span class="comment token">// skipping the definitely fruitless NaN search. Other parts are merely cosmetic conciseness.</span>
<span class="comment token">// Whether it is actually faster remains to be seen.</span>
<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>indexOf<span class="punctuation token">)</span>
<span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>indexOf <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">Object<span class="punctuation token">,</span> max<span class="punctuation token">,</span> min</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="string token">"use strict"</span>
<span class="keyword token">return</span> <span class="keyword token">function</span> <span class="function token">indexOf</span><span class="punctuation token">(</span><span class="parameter token">member<span class="punctuation token">,</span> fromIndex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span> <span class="operator token">===</span> <span class="keyword token">null</span> <span class="operator token">||</span> <span class="keyword token">this</span> <span class="operator token">===</span> <span class="keyword token">undefined</span><span class="punctuation token">)</span>
<span class="keyword token">throw</span> <span class="function token">TypeError</span><span class="punctuation token">(</span><span class="string token">"Array.prototype.indexOf called on null or undefined"</span><span class="punctuation token">)</span>
<span class="keyword token">var</span> that <span class="operator token">=</span> <span class="function token">Object</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">,</span> Len <span class="operator token">=</span> that<span class="punctuation token">.</span>length <span class="operator token">>>></span> <span class="number token">0</span><span class="punctuation token">,</span> i <span class="operator token">=</span> <span class="function token">min</span><span class="punctuation token">(</span>fromIndex <span class="operator token">|</span> <span class="number token">0</span><span class="punctuation token">,</span> Len<span class="punctuation token">)</span>
<span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token"><</span> <span class="number token">0</span><span class="punctuation token">)</span> i <span class="operator token">=</span> <span class="function token">max</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> Len <span class="operator token">+</span> i<span class="punctuation token">)</span>
<span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">>=</span> Len<span class="punctuation token">)</span> <span class="keyword token">return</span> <span class="operator token">-</span><span class="number token">1</span>
<span class="keyword token">if</span> <span class="punctuation token">(</span>member <span class="operator token">===</span> <span class="keyword token">void</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// undefined</span>
<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="punctuation token">;</span> i <span class="operator token">!==</span> Len<span class="punctuation token">;</span> <span class="operator token">++</span>i<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>that<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">===</span> <span class="keyword token">void</span> <span class="number token">0</span> <span class="operator token">&&</span> i <span class="keyword token">in</span> that<span class="punctuation token">)</span> <span class="keyword token">return</span> i
<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>member <span class="operator token">!==</span> member<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// NaN</span>
<span class="keyword token">return</span> <span class="operator token">-</span><span class="number token">1</span> <span class="comment token">// Since NaN !== NaN, it will never be found. Fast-path it.</span>
<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">// all else</span>
<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="punctuation token">;</span> i <span class="operator token">!==</span> Len<span class="punctuation token">;</span> <span class="operator token">++</span>i<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>that<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">===</span> member<span class="punctuation token">)</span> <span class="keyword token">return</span> i
<span class="keyword token">return</span> <span class="operator token">-</span><span class="number token">1</span> <span class="comment token">// if the value was not found, then return -1</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Object<span class="punctuation token">,</span> Math<span class="punctuation token">.</span>max<span class="punctuation token">,</span> Math<span class="punctuation token">.</span>min<span class="punctuation token">)</span></code></pre>
<p>Tuy nhiên, nếu bạn muốn hiểu rõ mọi chi tiết của đặc tả ECMA, và không mấy quan tâm đến performance hay cần phải ngắn gọn, thì bạn nên tham khảo đoạn polyfill bên dưới:</p>
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
// 1. Let o be the result of calling ToObject passing
// the this value as the argument.
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let lenValue be the result of calling the Get
// internal method of o with the argument "length".
// 3. Let len be ToUint32(lenValue).
var len = o.length >>> 0;
// 4. If len is 0, return -1.
if (len === 0) {
return -1;
}
// 5. If argument fromIndex was passed let n be
// ToInteger(fromIndex); else let n be 0.
var n = fromIndex | 0;
// 6. If n >= len, return -1.
if (n >= len) {
return -1;
}
// 7. If n >= 0, then Let k be n.
// 8. Else, n<0, Let k be len - abs(n).
// If k is less than 0, then let k be 0.
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
// 9. Repeat, while k < len
while (k < len) {
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the
// HasProperty internal method of o with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
// i. Let elementK be the result of calling the Get
// internal method of o with the argument ToString(k).
// ii. Let same be the result of applying the
// Strict Equality Comparison Algorithm to
// searchElement and elementK.
// iii. If same is true, return k.
if (k in o && o[k] === searchElement) {
return k;
}
k++;
}
return -1;
};
}
</pre>
<h2 id="Đặc_tả">Đặc tả</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Đặc tả</th>
<th scope="col">Trạng thái</th>
<th scope="col">Ghi chú</th>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td>Định nghĩa lần đầu. Được hiện thực trong JavaScript 1.6.</td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2>
<div>
<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
</div>
<h2 id="Lưu_ý_về_tương_thích">Lưu ý về tương thích</h2>
<ul>
<li>Kể từ Firefox 47 {{geckoRelease(47)}}, phương thức này không còn trả về <code>-0</code>. Ví dụ: <code>[0].indexOf(0, -0)</code> sẽ luôn trả về <code>+0</code> ({{bug(1242043)}}).</li>
</ul>
<h2 id="Tương_tự">Tương tự</h2>
<ul>
<li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
<li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
<li>{{jsxref("String.prototype.indexOf()")}}</li>
</ul>
|