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
|
---
title: Array.observe()
slug: Web/JavaScript/Reference/Global_Objects/Array/observe
tags:
- Array
- ECMAScript7
- Experimental
- Expérimental(2)
- JavaScript
- Method
- Reference
- Référence(2)
translation_of: Archive/Web/JavaScript/Array.observe
---
<div>{{JSRef("Global_Objects", "Array")}}</div>
<h2 id="Summary" name="Summary">Сводка</h2>
<p>Метод <strong><code>Array.observe()</code></strong> используется для асинхронного обзора изменений в массивах, подобно тому, как метод {{jsxref("Object.observe()")}} используется для тех же целей для объектов. Он предоставляет поток изменений в порядке их возникновения.</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre>
<h3 id="Parameters" name="Parameters">Параметры</h3>
<dl>
<dt><code>arr</code></dt>
<dd>Обозреваемый массив.</dd>
<dt><code>callback</code></dt>
<dd>Функция, вызываемая на каждое сделанное изменение со следующими аргументами:
<dl>
<dt><code>changes</code></dt>
<dd>Массив объектов, каждый из которых представляет одно изменение. Эти объекты обладают следующими свойствами:
<ul>
<li><strong><code>name</code></strong>: название изменённого свойства.</li>
<li><strong><code>object</code></strong>: изменённый массив, после применения этого изменения.</li>
<li><strong><code>type</code></strong>: строка, указывающая тип произошедшего изменения. Может быть одной из <code>"add"</code>, <code>"update"</code>, <code>"delete"</code> или <code>"splice"</code>.</li>
<li><strong><code>oldValue</code></strong>: только для типов <code>"update"</code> и <code>"delete"</code>. Значение до изменения.</li>
<li><strong><code>index</code></strong>: только для типа <code>"splice"</code>. Индекс, по которому произошло изменение.</li>
<li><strong><code>removed</code></strong>: только для типа <code>"splice"</code>. Массив с удалёнными элементами.</li>
<li><strong><code>addedCount</code></strong>: только для типа <code>"splice"</code>. Количество добавленных элементов.</li>
</ul>
</dd>
</dl>
</dd>
</dl>
<h2 id="Description" name="Description">Описание</h2>
<p>Функция <code>callback</code> вызывается каждый раз, когда с массивом <code>arr</code> происходят какие-либо изменения. Параметром в неё передаётся массив со всеми произошедшими изменениями в порядке их возникновения.</p>
<div class="note">
<p>Изменения через методы объекта {{jsxref("Array")}}, например, посредством метода {{jsxref("Array.prototype.pop()")}}, будут зарегистрированы как изменения типа <code>"splice"</code>. Присваивание по индексу, в результате которого размер массива не изменится, может быть зарегистрировано, как изменение типа <code>"update"</code>.</p>
</div>
<h2 id="Examples" name="Examples">Примеры</h2>
<h3 id="Example:_Logging_all_three_different_types" name="Example:_Logging_all_three_different_types">Пример: журналирование всех трёх типов событий</h3>
<pre class="brush: js">var arr = ['a', 'b', 'c'];
Array.observe(arr, function(changes) {
console.log(changes);
});
arr[1] = 'B';
// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}]
arr[3] = 'd';
// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}]
arr.splice(1, 2, 'beta', 'gamma', 'delta');
// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}]
</pre>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<p><a href="https://github.com/arv/ecmascript-object-observe">Черновое предложение к обсуждению для ECMAScript 7</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatChrome("36")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Android</th>
<th>Chrome для Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li>{{jsxref("Array.unobserve()")}} {{experimental_inline}}</li>
<li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li>
</ul>
|
