path: root/files/ru/web/javascript/reference/global_objects/array/slice/index.html

---
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 &lt; 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 &gt;= 9, поддерживают данное поведение.)</p>

<pre class="brush: js notranslate">/**
 * Прокладка для "исправления" отсутствия поддержки в IE &lt; 9 применения slice
 * к хост-объектам вроде NamedNodeMap, NodeList и HTMLCollection
 * (технически, поскольку хост-объекты зависят от реализации,
 * по крайней мере, до ES2015, IE не обязан так работать).
 * Также работает для строк, исправляет поведение IE &lt; 9, позволяя явно указывать undefined
 * вторым аргументом (как в Firefox), и предотвращает ошибки, возникающие при
 * вызове на других объектах DOM.
 */
(function () {
  'use strict';
  var _slice = Array.prototype.slice;

  try {
    // Не может использоваться с элементами DOM в IE &lt; 9
    _slice.call(document.documentElement);
  } catch (e) { // В IE &lt; 9 кидается исключение
    // Функция будет работать для истинных массивов, массивоподобных объектов,
    // NamedNodeMap (атрибуты, сущности, примечания),
    // NodeList (например, getElementsByTagName), HTMLCollection (например, childNodes)
    // и не будет падать на других объектах DOM (как это происходит на элементах DOM в IE &lt; 9)
    Array.prototype.slice = function(begin, end) {
      // IE &lt; 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 &gt;= 0) ? start: len + start;

      // Обрабатываем отрицательное значение end
      var upTo = (end) ? end : len;
      if (end &lt; 0) {
        upTo = len + end;
      }

      // Фактически ожидаемый размер среза
      size = upTo - start;

      if (size &gt; 0) {
        cloned = new Array(size);
        if (this.charAt) {
          for (i = 0; i &lt; size; i++) {
            cloned[i] = this.charAt(start + i);
          }
        } else {
          for (i = 0; i &lt; 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>