Новини високих технологій
» » Javascript-метод Array.slice: тонкощі використання

Javascript-метод Array.slice: тонкощі використання

20-06-2018, 17:36
516
Масиви в мові jаvascript мають безліч специфічних корисних методів, що полегшують маніпуляції з даними. Частина цих функцій модифікує вихідний об'єкт, інші - створюють змінені або точні копії. До останньої групи належить корисний метод Array.slice(). Він дозволяє виділити з масиву будь подмассив і використовувати його окремо.

Синтаксис методу



array.slice([begin[, end]])

Як видно, метод приймає два аргументи, але жоден з них не є обов'язковим.

Перший параметр позначає позицію початку шуканого подмассива, другий - позицію елемента, на якому буде припинено витяг. Отже, вони повинні представляти собою цілі числа.

При відсутності аргументу end метод буде працювати до самого кінця вихідного масиву.

При відсутності обох параметрів array - просто буде скопійовано повністю.

Функція може приймати і негативні аргументи, при цьому відлік позиції почнеться з кінця масиву.

Приклади роботи

Розглянемо роботу методу slice() на прикладі простого масиву чисел:

  let arr =[5, 4, 3, 2, 1];  

Отримання подмассива з перших трьох елементів:

  console.log(arr.slice(0 3));  

Тут перший аргумент - 0. Він вказує функції, що потрібно почати з нульової позиції. А другий - 3 говорить, що потрібно зупинитися на елементі з індексом 3 не включаючи його до фінальної вибірку. У підсумку на консоль буде виведений масив, що включає в себе 5 4 і 3.

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_1 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});

Отримання подмассива з останніх трьох елементів:

  console.log(arr.slice(-3));  

Для виконання цього завдання достатньо лише одного аргументу, який позначить початок вибірки. Від'ємне значення ініціює відлік з кінця масиву. У нашому випадку це елемент зі значенням 3. Підсумковий масив включає в себе числа 321.

Обчислене значення

Особливість методу jаvascript array.slice () полягає в тому, що він не модифікує об'єкт, у контексті якого був викликаний. Це означає, що після всіх проведених операцій масив arr залишився незмінним і може бути використаний програмою для інших цілей.

Робота функції полягає у створенні нового масиву, не пов'язаного з вихідним, і заповненні його вибраними елементами. Щоб цей масив можна було використовувати у подальшому, його необхідно записати в змінну.

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_2 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});
  let arr =[5, 4, 3, 2, 1]; 
let newArr = arr.slice(1 4);

console.log(newArr); //[4, 3, 2]
console.log(arr); //[5, 4, 3, 2, 1]

З прикладу видно, що об'єкт arr залишився незміненим. Результат роботи методу став новий масив newArr .

Копіювання масивів

Цей механізм дозволяє автоматично створювати копії, не перебираючи кожний елемент послідовності вручну.

  let clone = arr.slice(); 
console.log(clone); //[5, 4, 3, 2, 1]

Виклик методу без аргументів запускає копіювання з самого початку і до кінця масиву arr . Отриманий клон абсолютно незалежний від свого джерела і дозволяє маніпулювати даними без побоювання втратити їх назавжди.

  clone[2]++; 
console.log(clone); //[5, 4, 4, 2, 1]
console.log(arr); //[5, 4, 3, 2, 1]

Тут важливо пам'ятати, що об'єкти jаvascript передаються по посиланню. Отже, якщо елементи послідовності є об'єктами, то їх зміна в копії спричинить за собою таку ж зміну в исходнике.

let arr =[
{a: 1},
[2, 3]
];

//копіюємо вихідний масив
let newArr = arr.slice();
console.log(newArr); //[{a: 1},[2, 3]]

//змінюємо копію
newArr[0].a = 7;
console.log(newArr); //[{a: 7},[2, 3]]

//вихідний масив теж змінився
console.log(arr); //[{a: 7},[2, 3]]


Без побоювань можна працювати з рядками, числами і булевими операторами значеннями, так як вони повністю копіюються у нову послідовність. При цьому додавання і видалення елементів в рамках клонованого масиву ніяк не впливає на вихідний.
Цікаво по темі
Всі способи як об'єднати масиви в php
Всі способи як об'єднати масиви в php
В php об'єднання масивів можливо кількома способами. Для цього доступні три функції: array_merge(), array_merge_recursive(), implode(). Перша функція
Sizeof PHP: розмір масивів та об'єктів, зменшення часу виконання скриптів
Sizeof PHP: розмір масивів та об'єктів, зменшення часу виконання скриптів
PHP: прискорення циклів за допомогою sizeof(), зменшення часу виконання скриптів, підрахунок об'єктів StdClass, створених з json_decode, оптимізація
Функція jQuery fadeIn(): зміна прозорості елемента
Функція jQuery fadeIn(): зміна прозорості елемента
Анімація на сучасних веб-сторінках давно стала чимось само собою зрозумілим. Розчиняються елементи, що вилітають повідомлення, ковзні галереї
Приклади застосування методу JavaScript length
Приклади застосування методу JavaScript length
Довжина рядка, числа або іншого елемента скрипта має істотне значення. Особливістю підходу мови jаvascript до поняття довжини є можливість
Об'єкти та масиви PHP: array push & pop
Об'єкти та масиви PHP: array push & pop
Стекова організація даних зручна для створення динамічної функціональності. Масиви на PHP, функції push & pop на перших і останніх елементах
Javascript Array для збереження необмеженої кількості змінних
Javascript Array для збереження необмеженої кількості змінних
Логічно масив займає проміжне положення між змінними і об'єктами. Практично не слід надавати особливого значення словам. У програмі є змінні і код.