diff options
Diffstat (limited to 'files/ru/web/javascript/reference/global_objects/array/slice/index.html')
| -rw-r--r-- | files/ru/web/javascript/reference/global_objects/array/slice/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.html b/files/ru/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..1b35c36e24 --- /dev/null +++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,242 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - Référence(2) +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>slice()</strong></code> возвращает новый массив, содержащий копию части исходного массива.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>begin</code> {{optional_inline}}</dt> + <dd>Индекс (счёт начинается с нуля), по которому начинать извлечение.</dd> + <dd>Если индекс отрицательный, <code>begin</code> указывает смещение от конца последовательности. Вызов <code>slice(-2)</code> извлечёт два последних элемента последовательности.</dd> + <dd>Если <code>begin</code> неопределен, <code>slice()</code> начинает работать с индекса <code>0</code>.</dd> + <dd>Если <code>begin</code> больше длины последовательности вернется пустой массив.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Индекс (счёт начинается с нуля), по которому заканчивать извлечение. Метод <code>slice()</code> извлекает элементы с индексом меньше <code>end</code>.</dd> + <dd>Вызов <code>slice(1, 4)</code> извлечёт элементы со второго по четвёртый (элементы по индексам 1, 2 и 3).</dd> + <dd>Если индекс отрицательный, <code>end</code> указывает смещение от конца последовательности. Вызов <code>slice(2, -1)</code> извлечёт из последовательности элементы начиная с третьего элемента с начала и заканчивая вторым с конца.</dd> + <dd>Если <code>end</code> опущен, <code>slice()</code> извлекает все элементы до конца последовательности (<code>arr.length</code>).</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Новый массив, содержащий извлеченные элементы.</p> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Метод <code>slice()</code> не изменяет исходный массив, а возвращает новую «одноуровневую» копию, содержащую копии элементов, вырезанных из исходного массива. Элементы исходного массива копируются в новый массив по следующим правилам:</p> + +<ul> + <li>Ссылки на объекты (но не фактические объекты): метод <code>slice()</code> копирует ссылки на объекты в новый массив. И оригинал, и новый массив ссылаются на один и тот же объект. То есть, если объект по ссылке будет изменён, изменения будут видны и в новом, и в исходном массивах.</li> + <li>Строки и числа (но не объекты {{jsxref("Global_Objects/String", "String")}} и {{jsxref("Global_Objects/Number", "Number")}}): метод <code>slice()</code> копирует значения строк и чисел в новый массив. Изменения строки или числа в одном массиве никак не затрагивает другой.</li> +</ul> + +<p>Если к любому массиву будет добавлен новый элемент, это никак не повлияет на другой массив.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Example_Return_a_portion_of_an_existing_array" name="Example:_Return_a_portion_of_an_existing_array">Пример: возврат части существующего массива</h3> + +<pre class="brush: js notranslate">// Пример: наши хорошие друзья цитрусовые среди фруктов +var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго']; +var citrus = fruits.slice(1, 3); + +// citrus содержит ['Апельсин', 'Лимон'] +</pre> + +<h3 id="Example_Using_slice" name="Example:_Using_slice">Пример: использование метода <code>slice()</code></h3> + +<p>В следующем примере метод <code>slice()</code> создаёт новый массив, <code>newCar</code>, из массива <code>myCar</code>. Оба содержат ссылку на объект <code>myHonda</code>. Когда цвет в объекте <code>myHonda</code> изменяется на багровый, оба массива замечают это изменение.</p> + +<pre class="brush: js notranslate">// Используя slice, создаём newCar из myCar. +var myHonda = { color: 'красный', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'в хорошем состоянии', 'приобретена в 1997']; +var newCar = myCar.slice(0, 2); + +// Отображаем значения myCar, newCar и цвет myHonda +// по ссылкам из обоих массивов. +console.log('myCar = ' + myCar.toSource()); +console.log('newCar = ' + newCar.toSource()); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Изменяем цвет myHonda. +myHonda.color = 'багровый'; +console.log('Новый цвет моей Honda - ' + myHonda.color); + +// Отображаем цвет myHonda по ссылкам из обоих массивов. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Этот скрипт выведет:</p> + +<pre class="brush: js notranslate">myCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2, + 'в хорошем состоянии', 'приобретена в 1997'] +newCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2] +myCar[0].color = красный +newCar[0].color = красный +Новый цвет моей Honda - багровый +myCar[0].color = багровый +newCar[0].color = багровый +</pre> + +<h2 id="Array-like" name="Array-like">Массивоподобные объекты</h2> + +<p>Метод <code>slice()</code> также может использоваться для преобразования массивоподобных объектов / коллекций в новый массив <code>Array</code>. Вам просто нужно привязать метод к объекту. Псевдомассив {{jsxref("Functions_and_function_scope/arguments", "arguments")}} внутри функции как раз является примером «массивоподобного объекта».</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Привязка может быть осуществлена посредством функции .<code>call()</code> из прототипа функции {{jsxref("Function.prototype")}}, также запись может быть сокращена до <code>[].slice.call(arguments)</code> вместо использования <code>Array.prototype.slice.call()</code>. В любом случае, она может быть упрощена посредством использования функции {{jsxref("Function.prototype.bind()", "bind()")}}.</p> + +<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Streamlining_cross-browser_behavior" name="Streamlining_cross-browser_behavior">Совершенствование кросс-браузерного поведения</h2> + +<p>Хотя спецификация не требует от хост-объектов (например, объектов DOM) следовать поведению Mozilla при преобразовании с помощью <code>Array.prototype.slice()</code> и IE < 9 так не делает, версии IE, начиная с 9-й это умеют. «Прокладывание» позволяет добиться надёжного кросс-браузерного поведения. Пока другие современные браузеры будут поддерживать эту способность, что и делают в настоящее время IE, Mozilla, Chrome, Safari и Opera, разработчики, читая (поддерживающий DOM) код функции <code>slice()</code>, опирающийся на эту прокладку, не будут вводиться в заблуждение его семантикой; они могут смело полагаться на текущую семантику, являющуюся, видимо, <em>де-факто</em> стандартным поведением. (Прокладка также исправляет поведение IE, позволяя работать со вторым аргументом <code>slice()</code>, явно определённым как {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}}, поскольку более ранние версии IE такое не позволяют, но все современные браузеры, в том числе IE >= 9, поддерживают данное поведение.)</p> + +<pre class="brush: js notranslate">/** + * Прокладка для "исправления" отсутствия поддержки в IE < 9 применения slice + * к хост-объектам вроде NamedNodeMap, NodeList и HTMLCollection + * (технически, поскольку хост-объекты зависят от реализации, + * по крайней мере, до ES2015, IE не обязан так работать). + * Также работает для строк, исправляет поведение IE < 9, позволяя явно указывать undefined + * вторым аргументом (как в Firefox), и предотвращает ошибки, возникающие при + * вызове на других объектах DOM. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Не может использоваться с элементами DOM в IE < 9 + _slice.call(document.documentElement); + } catch (e) { // В IE < 9 кидается исключение + // Функция будет работать для истинных массивов, массивоподобных объектов, + // NamedNodeMap (атрибуты, сущности, примечания), + // NodeList (например, getElementsByTagName), HTMLCollection (например, childNodes) + // и не будет падать на других объектах DOM (как это происходит на элементах DOM в IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 будет недоволен аргументом end, равным undefined + end = (typeof end !== 'undefined') ? end : this.length; + + // Для родных объектов Array мы используем родную функцию slice + if (Object.prototype.toString.call(this) === '[object Array]') { + return _slice.call(this, begin, end); + } + + // Массивоподобные объекты мы обрабатываем самостоятельно + var i, cloned = [], + size, len = this.length; + + // Обрабатываем отрицательное значение begin + var start = begin || 0; + start = (start >= 0) ? start: len + start; + + // Обрабатываем отрицательное значение end + var upTo = (end) ? end : len; + if (end < 0) { + upTo = len + end; + } + + // Фактически ожидаемый размер среза + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Изначальное определение. Реализована в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<div> +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div> + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> |