Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

расширения js

расширения  js

Всем привет сегодня мы с вами рассмотрим оператор расширения на примере разделения массива на аргументы функции. Мы будем рассматривать оператор расширения в основном на примерах работы с массивами.

До появления ES6, чтобы передать значения из массива в аргументы функции, программисты применяли метод apply().Пример:

function myFunction(a,b){
return a+b;
}
var data = [1,4];
var result = myFunction.apply(null,data);
console.log(result);

Результатом данного кода будет:

5

ES6 обеспечивает более простой способ основанный на использовании оператора расширения:

function myFunction(a,b){
return a+b;
}
var data = [1,4];
var result = myFunction(...data);
console.log(result);

Как видите результат точно такой же, но здесь мы использовали оператор расширения '...'.

Во время выполнения перед вызовом функции myFunction, интерпретатор javascript заменит ...data выражением 1,4

Другие применения оператора расширений:

Определение значения массива как части другого массива

var array1 = [2,3,4];
var array2 = [1,...array1,5,6,7,8,9];
console.log(array2);//Выведет массив со значениями "1,2,3,4,5,6,7,8,9"

Копирование значений из одного массива в другой

var array1 = [4];
var array2 = [1,2,3];
array2.push(...array1);
console.log(array2);//Выведет массив следующего содержания "1,2,3,4"

Использование оператора расширения для работы с параметрами функции, рассмотрим следующий код

function myFunction(a,b){
var arg = Array.prototype.slice.call(arguments, myFunction.length);
console.log(arg);
}
myFunction(1,2,3,4,5);//Выведет 3,4,5

Теперь сделаем тоже самое, но через оператор расширения

function myFunction(a,b,...arg){
console.log(arg);
}
myFunction(1,2,3,4,5);//Выведет 3,4,5

Как можно заметить код значительно сократился и стал проще, с чем это связано? А тем что объект arguments изначально не является массивом , поэтому его для начала необходимо преобразовать. Дополнительный параметр как раз наоборот изначально является массивом.

Вот такой замечательный оператор появился в ES6, пользуйтесь.

Надеюсь данная статья была интересна и понятна. Желаю успехов в освоении программирования! Удачи!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm