В этой статье мы собираемся обсудить полезные методы Array, которые поставляются со стандартом ES6 из JavaScript, мы обсудим «СТАРУЮ» реализацию этого методы, а также узнайте, как эти новые методы упрощают жизнь для разработчиков программного обеспечения, использующих стандарт JavaScript ES6.

Наброски

Что такое ES6?

Встроенные методы Array из ES6.

Предварительные требования

Знание стандартов JavaScript ES5 и ES6.

Конечно же, базовые знания программирования :)

Что такое ES6?

На протяжении многих лет стандарт ECMAScript 2015 / ES6 представлял собой новый способ написания кодов JavaScript благодаря удобству, которое он обеспечивает в синтаксисе, и относительном понимании, которое он обеспечивает в виде небольших «фрагментов кода».

Но что такое ES6? ES6 просто относится к стандарту, на котором построен JavaScript. ES (ECMAScript), как следует из названия, представляет собой язык сценариев, который использовался для сценариев на стороне клиента в WWW, а позже он был внедрен в качестве стандарта для JavaScript, чтобы обеспечить гибкость веб-страниц в разных странах. разные клиенты (браузеры).

ES6 был первоначально опубликован в 2015 году, отсюда и название ECMAScript 2015. Этот стандарт всегда меняется с годами, чтобы добавлять уникальные функции, которые помогают улучшить крупномасштабную разработку программного обеспечения и помогают упростить древний синтаксис в чтобы облегчить жизнь разработчикам программного обеспечения, отсюда и термин «Syntactic-Suga r».

Спасательные методы массива

Понятия не имею, из мира ли вы «строго типизированных» языков программирования, таких как Java или C #. Но здесь, в мире слабо типизированного, но мощного языка под названием JavaScript, мы называем любую функцию, хранящуюся в объекте, методом. И на всякий случай, если вы не знаете («YDK»), прелесть этого мощного языка заключается в том, что «почти все является объектом». О да !!, даже Массив является объектом в JavaScript, и поэтому я собираюсь объяснить полезные методы, которые могут помочь добавить еще 10 лет к продолжительность жизни каждого разработчика JavaScript. :)

Array.from ()

Это очень важный метод, который каждый разработчик должен использовать в своем наборе инструментов. Проще говоря, этот метод используется для копирования значений, хранящихся в Array A, в Array B. Этот конкретный метод - настоящая палочка-выручалочка для меня как разработчика JavaScript, потому что я не знал, как бы я справился с древними циклами For-Loops.

Этот метод принимает 3 аргумента для своей реализации:

Первый - это массив, из которого нужно скопировать.

Вторая - это необязательная функция, которую можно использовать для сопоставления элементов скопированного массива с новым массивом.

третий также является необязательным объектом, который можно использовать во втором аргументе.

ES5 реализация Array.from ()

//Using the old ES5 standard
var numbers = [1,2,3,4,5]; //Initialize an array called numbers 
var copyNums = []; //Initialize an empty array called copyNums
for(var i = 0; i < numbers.length; i++){ //General for-loop
    copyNums[i] = numbers[i]
}
copyNums // => [1,2,3,4,5]

Как дела обстоят сейчас (ES6)

//Using the modern ES6 standard
let numbers = [1,2,3,4,5]; //Initialize an array...
let copyNums = Array.from(numbers) //one-liner :)
copyNums // => [1,2,3,4,5]
//Using this method with 3 arguments
let copyNums = Array.from(numbers, function(num){
        return num*this.Obj;
}, {Obj: 5})
copyNums //=>[5,10,15,20,25] Pretty cool :)

Из предыдущих блоков кода вы определенно можете видеть, что стандарт ES6 не только упрощает или упрощает чтение кода, но и увеличивает продолжительность вашей жизни как разработчика на много лет.

Array.of ()

В ES6 этот метод используется для создания и возврата нового Array независимо от количества переданных ему аргументов. В некотором смысле он использует значение аргументов как свои собственные элементы. Давайте быстро посмотрим на реализацию.

ES5 реализация Array.of ()

//ES5 
var numbers = [1,2,3,4,5] //Using Array literal to initiate an Array
numbers // => [1,2,3,4,5]
//A quirk using the Array constructor
var numbers = new Array(1000) //This is meant to be a single element
numbers //=> [empty x 1000] Created undefined elements 1000x

Как это делается (ES6)

let numbers = Array.of(1,2,3,4,5); //Using the Array.of() method
numbers // => [1,2,3,4,5]
//ES6 implementation
let numbers = Array.of(1000);
numbers //=> [1000] Created an Array element with a value 1000

Предыдущие блоки кода показали четкую разницу между ES5 и ES6. Достаточно простая реализация метода Array.of (). Первый метод может привести к изнурительным ошибкам, которые сложно вовремя обнаружить.

Array.fill ()

Это еще одна замечательная функция ES6. Судя по имени метода (fill), этот метод значительно заполняет массив переданными ему аргументами, а также предоставляет нам начало и конец передаются в качестве аргументов массива, который необходимо заполнить. Давайте быстро увидим это в действии.

Реализация ES5

var numbers = [1,2,3,4];
for(i=0; i < numbers.length; i++){  //Ancient For-Loop  :)
   numbers[i] = 2000
}
numbers // [2000,2000,2000,2000]

Реализация ES6

let numbers = [1,2,3,4];
numbers.fill(2000);
numbers //=> [2000,2000,2000,2000]
numbers //=> [2000,2000,2000,2000]
//Use of the 2nd(start) argument in the fill method
numbers.fill(2000, 2); //elements in 2nd index & above are filled
numbers //=> [1,2,2000,2000] Awesome!!!
//Use of the 3rd(end) argument in the fill method
let numbers = [1,2,3,4,5,6];
numbers.fill(200,2,4) // start index = 2, end index=4
numbers //=> [1,2,200,200,5,6]

Array.find ()

О, еще одна крутая функция. Метод find используется для поиска определенного элемента в массиве. Давайте рассмотрим небольшой пример:

Синтаксис ES6

let numbers = [1,2,3,4,5];
let item = numbers.find(item => item > 3); //An arrow function is used here
item // => 4

Этот метод довольно понятен и прост для понимания. Обратите внимание: этот метод не возвращает массив, а возвращает конкретное значение, которое соответствует условному тесту, переданному в стрелочной функции.

Array.findIndex ()

В дополнение к Array.find () этот метод используется для поиска индекса определенного значения. Да и не забывайте, это просто просто.

Синтаксис ES6

let numbers = [1,2,3,4]
let numIndex = numbers.findIndex(item => item === 4);
numIndex // => 3

Подобно тому, как метод find возвращает значение, этот метод также возвращает значение (индекс значения, которое вы хотите найти).

Array.copyWithin ()

Как следует из названия, Array.copyWithin () используется для копирования значений массива в том же самом массиве, довольно просто. Требуется 3 аргумента:

1-й аргумент - это индекс в массиве, который нужно перезаписать.

Второй аргумент - это индекс данных, которые вы хотите скопировать из массива.

Третий аргумент, хотя и необязательный, - это количество копий, которое вы хотите.

Давайте перейдем к делу.

ES6 метод

let numbers = [1,2,3,4,5,6,7,8,9];
numbers.copyWithin(2,5);
numbers // => [1,2,6,7,8,9,7,8,9] 
//With the use of the 3rd argument
numbers.copyWithin(2,0,2);
numbers // => [1,2,1,2,5,6,7,8,9]

Всегда помните, что метод copyWithin всегда использует индексы в качестве аргументов. (x, y, z), где x - индекс массива, y - индекс, содержащий данные, z - количество копий.

Array.keys (), Array.values ​​(), Array.entries ()

Я решил поговорить об этих трех последних методах, потому что они являются наиболее интересными методами, входящими в стандарт ES6. Это унаследованные методы от глобального объекта в JavaScript. Если вы помните, я сказал, что почти все в JavaScript - это объекты, это в точности правда. Эти методы также поставляются с новыми конструкторами под названием Map и Set, представленными в ES6. В этих методах использовался итератор Array, иначе известный как оператор распространения (…), если бы я еще мог вспомнить свои дни в школе, это также называется «многоточие »на английском языке.

Array.keys ()

Метод .keys () используется для перечисления количества ключей, запрещенных массивом. Когда я упомянул ключи, я имел в виду индекс, который содержит определенный элемент в заданном массиве . Позвольте мне упростить это, приведя пример:

Синтаксис ES6

let numbers = [1,2,3,4,5]; //The usual array literal definition
numbers.keys() // This won't work because we need an Iterator(...)
//Let us make use of the Array Iterator
let arrKeys = () => console.log(...numbers.keys());
arrKeys(); // => 0,1,2,3,4

Хотя я использовал функцию стрелки, это не должно быть сложно. Этот метод используется для вывода списка всех ключей (индекса) массива.

Array.values ​​()

Как и предыдущий метод, метод .values ​​() возвращает все значения данного массива с использованием, конечно, итератора массива . вместо обычного ES5 метод перебора массива и регистрации массива [index], я полагаю, это значительно упрощает жизнь.

let numbers = [1,2,3];
console.log(...numbers.values()) // 1,2,3

Array.entries ()

Вы когда-нибудь слышали о сопоставлении данных типа ключ / значение? Что ж, теперь мы можем что-то сделать с этой новой силой, которую нам дает JavaScript. Это довольно просто: метод. entries () возвращает ключи и значения определенного массива и сохраняет их в новом массиве. Давайте разберемся еще больше: метод .entries () возвращает индекс и значение массива. Не забывайте, когда я упоминаю ключ, я имею в виду index.

Рассмотрим небольшой пример:

let nums = [1,2,3];
//Simple implementation with ES6 syntax
console.log(...nums.entries()) //=> [0,1] [1,2] [2,3]

В предыдущем примере показаны индекс и значение, соответствующее этому индексу, все сохраненные в новом массиве. А новый сформированный массив Array имеет свойство length, равное 2.

ЗАКЛЮЧЕНИЕ

С прогрессирующим развитием технологий профессионалу в области программного обеспечения необходимо быть знакомым с различными новыми инструментами и знаниями, которые помогут ускорить разработку программного обеспечения . Мне выпала честь написать 9 мощных методов массива ES6, которые помогают улучшить читаемость кода. Со временем в стандарт ECMAScript будут добавлены новые функции, и i будет здесь, чтобы просветить вас, моя уважаемая аудитория.

Если вам понравился этот пост, не забудьте дать 50 аплодисментов и подписаться на нашу публикацию, чтобы получать больше обновлений.

Спасибо, что прочитали мою статью. Здесь, в моем блоге или медиа я регулярно пишу о backend-разработке, цифровом маркетинге и системе управления контентом. Чтобы читать мои будущие сообщения, просто присоединяйтесь к моей публикации или нажмите Подписаться. Также не стесняйтесь связываться со мной через Twitter, Facebook, Instagram.

Если вы интересуетесь серверной разработкой (или являетесь энтузиастом Интернета), оба (Mobile | Web | Desktop) видео подписываются на мой канал Youtube, мы опубликуем сборник полных справочных руководств и руководств, подобных этому. для ремесленников.

Если вам понравился этот пост, обязательно дайте нам знать, поделитесь им с друзьями и подпишитесь на мой растущий канал.

Поделиться - это забота.