Baseline Widely available
Spread syntax позволÑÐµÑ ÑаÑÑиÑиÑÑ Ð´Ð¾ÑÑÑпнÑе Ð´Ð»Ñ Ð¸ÑеÑаÑии ÑлеменÑÑ (напÑимеÑ, маÑÑÐ¸Ð²Ñ Ð¸Ð»Ð¸ ÑÑÑоки) в меÑÑаÑ
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// Expected output: 6
console.log(sum.apply(null, numbers));
// Expected output: 6
СинÑакÑиÑ
ÐÐ»Ñ Ð²Ñзовов ÑÑнкÑий:
myFunction(...iterableObj);
ÐÐ»Ñ Ð»Ð¸ÑеÑалов маÑÑива или ÑÑÑок:
[...iterableObj, '4', 'five', 6];
ÐÐ»Ñ Ð»Ð¸ÑеÑалов обÑекÑа (новое в ECMAScript 2018):
let objClone = { ...obj };ÐÑимеÑÑ Spread в вÑÐ·Ð¾Ð²Ð°Ñ ÑÑнкÑий Ðамена apply
ÐбÑÑно иÑполÑзÑÑÑ Function.prototype.apply
в ÑлÑÑаÑÑ
, когда Ñ
оÑÑÑ Ð¸ÑполÑзоваÑÑ ÑлеменÑÑ Ð¼Ð°ÑÑива в каÑеÑÑве аÑгÑменÑов ÑÑнкÑии.
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);
С spread syntax вÑÑепÑиведÑнное можно запиÑаÑÑ ÐºÐ°Ðº:
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction(...args);
ÐÑбой аÑгÑÐ¼ÐµÐ½Ñ Ð² ÑпиÑке аÑгÑменÑов Ð¼Ð¾Ð¶ÐµÑ Ð¸ÑполÑзоваÑÑ spread syntax, и его можно иÑполÑзоваÑÑ Ð½ÐµÑколÑко Ñаз.
function myFunction(v, w, x, y, z) {}
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
Apply Ð´Ð»Ñ new
ÐÑзÑÐ²Ð°Ñ ÐºÐ¾Ð½ÑÑÑÑкÑÐ¾Ñ ÑеÑез клÑÑевое Ñлово new
, невозможно иÑполÑзоваÑÑ Ð¼Ð°ÑÑив и apply
напÑÑмÑÑ (apply
вÑполнÑÐµÑ [[Call]]
, а не [[Construct]]
).Ðднако благодаÑÑ spread syntax, маÑÑив Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ñ Ð»ÑгкоÑÑÑÑ Ð¸ÑполÑзован Ñо Ñловом new:
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
ЧÑÐ¾Ð±Ñ Ð¸ÑполÑзоваÑÑ new
Ñ Ð¼Ð°ÑÑивом паÑамеÑÑов без spread syntax, вам поÑÑебÑеÑÑÑ Ð¸ÑполÑзование ÑаÑÑиÑного пÑименениÑ:
function applyAndNew(constructor, args) {
function partial() {
return constructor.apply(this, args);
}
if (typeof constructor.prototype === "object") {
partial.prototype = Object.create(constructor.prototype);
}
return partial;
}
function myConstructor() {
console.log("arguments.length: " + arguments.length);
console.log(arguments);
this.prop1 = "val1";
this.prop2 = "val2";
}
var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
console.log(new myConstructorWithArguments());
// (internal log of myConstructor): arguments.length: 6
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
Spread в лиÑеÑалаÑ
маÑÑива Ðолее моÑнÑй лиÑеÑал маÑÑива
Ðез spread syntax, пÑименение ÑинÑакÑиÑа лиÑеÑала маÑÑива Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð½Ð¾Ð²Ð¾Ð³Ð¾ маÑÑива на оÑнове ÑÑÑеÑÑвÑÑÑего недоÑÑаÑоÑно и ÑÑебÑеÑÑÑ Ð¸Ð¼Ð¿ÐµÑаÑивнÑй код вмеÑÑо комбинаÑии меÑодов push
, splice
, concat
и Ñ.д. С spread syntax ÑеализаÑÐ¸Ñ ÑÑановиÑÑÑ Ð³Ð¾Ñаздо более лакониÑной:
var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"];
// ["head", "shoulders", "knees", "and", "toes"]
ÐналогиÑно ÑазвÑÑÑÑÐ²Ð°Ð½Ð¸Ñ Ð² маÑÑиве аÑгÑменÑов, ...
Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð¸ÑполÑзован повÑемеÑÑно и многокÑаÑно в лиÑеÑале маÑÑива.
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected
ÐÑимеÑание: Spread syntax на Ñамом деле пеÑеÑ
Ð¾Ð´Ð¸Ñ Ð»Ð¸ÑÑ Ð½Ð° один ÑÑÐ¾Ð²ÐµÐ½Ñ Ð³Ð»Ñбже пÑи копиÑовании маÑÑива. Таким обÑазом, он Ð¼Ð¾Ð¶ÐµÑ Ð½Ðµ подÑ
одиÑÑ Ð´Ð»Ñ ÐºÐ¾Ð¿Ð¸ÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð¼Ð½Ð¾Ð³Ð¾ÑазмеÑнÑÑ
маÑÑивов, как показÑÐ²Ð°ÐµÑ ÑледÑÑÑий пÑимеÑ: (Ñакже как и c Object.assign()
) и ÑинÑакÑÐ¸Ñ spred
const a = [[1], [2], [3]];
const b = [...a];
b.shift().shift(); // 1
// РнеÑ. ТепеÑÑ Ð½Ð° маÑÑив "а" оÑноÑÑÑÑÑ Ñакже: а
//[[], [2], [3]]
ÐÑÑÑий ÑпоÑоб конкаÑенаÑии маÑÑивов
ÐÐ»Ñ ÐºÐ¾Ð½ÐºÐ°ÑенаÑии маÑÑива ÑаÑÑо иÑполÑзÑеÑÑÑ Array.concat
:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);
С иÑполÑзованием spread syntax:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
Array.unshift
ÑаÑÑо иÑполÑзÑеÑÑÑ Ð´Ð»Ñ Ð²ÑÑавки маÑÑива знаÑений в наÑало ÑÑÑеÑÑвÑÑÑего маÑÑива. Ðез spread syntax:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Prepend all items from arr2 onto arr1
Array.prototype.unshift.apply(arr1, arr2); // arr1 is now [3, 4, 5, 0, 1, 2]
С иÑполÑзованием spread syntax [СледÑÐµÑ Ð¾ÑмеÑиÑÑ, ÑÑо Ñакой ÑпоÑоб ÑоздаÑÑ Ð½Ð¾Ð²Ñй маÑÑив arr1
. РоÑлиÑие Ð¾Ñ Array.unshift
, иÑÑ
однÑй маÑÑив не мÑÑиÑÑеÑÑÑ]:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
Spread в лиÑеÑалаÑ
обÑекÑа
ÐÑедложение Rest/Spread Properties for ECMAScript (ÑÑÐ°Ð´Ð¸Ñ 4) добавлÑÐµÑ ÑвойÑÑва spread в лиÑеÑÐ°Ð»Ñ Ð¾Ð±ÑекÑа. Ðно копиÑÑÐµÑ ÑобÑÑвеннÑе пеÑеÑиÑлÑемÑе ÑвойÑÑва данного обÑекÑа в новÑй обÑекÑ.
ÐовеÑÑ
ноÑÑное копиÑование (без пÑоÑоÑипа) или обÑединение обÑекÑов ÑепеÑÑ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ Ñ Ð¸ÑполÑзованием более коÑоÑкого, Ñем Object.assign()
, ÑинÑакÑиÑа.
var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
ÐбÑаÑиÑе внимание, ÑÑо Object.assign()
запÑÑÐºÐ°ÐµÑ setters, а spread syntax неÑ.
ÐбÑаÑиÑе внимание, ÑÑо Ð²Ñ Ð½Ðµ можеÑе замениÑÑ Ð¸Ð»Ð¸ имиÑиÑоваÑÑ ÑÑнкÑÐ¸Ñ Object.assign()
:
var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };
const merge = (...objects) => ({ ...objects });
var mergedObj = merge(obj1, obj2);
// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
var mergedObj = merge({}, obj1, obj2);
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }
РпÑиведÑнном вÑÑе пÑимеÑе опеÑаÑÐ¾Ñ ÑаÑпÑоÑÑÑÐ°Ð½ÐµÐ½Ð¸Ñ Ð½Ðµ ÑабоÑÐ°ÐµÑ Ñак, как можно бÑло Ð±Ñ Ð¾Ð¶Ð¸Ð´Ð°ÑÑ: он ÑаÑпÑоÑÑÑанÑÐµÑ Ð¼Ð°ÑÑив аÑгÑменÑов в лиÑеÑал обÑекÑа благодаÑÑ Ð¿Ð°ÑамеÑÑÑ rest.
ТолÑко Ð´Ð»Ñ Ð¸ÑеÑиÑÑемÑÑ Ð¾Ð±ÑекÑовSpread syntax ( кÑоме ÑлÑÑаев spread properties) Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð¿ÑименÑн ÑолÑко к иÑеÑиÑÑемÑм обÑекÑам (iterable objects) :
var obj = { key1: "value1" };
var array = [...obj]; // TypeError: obj is not iterable
Spread Ñ Ð±Ð¾Ð»ÑÑим колиÑеÑÑвом знаÑений
ÐÑи иÑполÑзовании spread опеÑаÑоÑа в вÑзоваÑ
ÑÑнкÑий необÑ
одимо бÑÑÑ Ð²Ð½Ð¸Ð¼Ð°ÑелÑнÑм к Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾Ð¼Ñ Ð¿ÐµÑÐµÐ¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ Ð² ÑдÑе JavaScript. СÑÑеÑÑвÑÐµÑ Ð¾Ð³ÑаниÑение по макÑималÑно Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾Ð¼Ñ ÐºÐ¾Ð»Ð¸ÑеÑÑÐ²Ñ Ð°ÑгÑменÑов ÑÑнкÑии. См. apply()
Ð´Ð»Ñ ÑÑоÑнениÑ.
СинÑакÑÐ¸Ñ Ð´Ð»Ñ rest опеÑаÑоÑа вÑглÑÐ´Ð¸Ñ Ñаким же как и Ð´Ð»Ñ spread опеÑаÑоÑа, однако он иÑполÑзÑеÑÑÑ Ð´Ð»Ñ Ð´ÐµÑÑÑÑкÑÑÑизаÑии маÑÑивов и обÑекÑов. ФакÑиÑеÑки, rest опеÑаÑÐ¾Ñ Ð¿ÑоÑивоположен spread опеÑаÑоÑÑ: поÑледний ÑаÑкладÑÐ²Ð°ÐµÑ Ð¼Ð°ÑÑив на ÑлеменÑÑ, Ñогда как пеÑвÑй ÑобиÑÐ°ÐµÑ Ð¼Ð½Ð¾Ð³Ð¾ ÑлеменÑов в один. См. rest parameters.
СпеÑиÑикаÑии СовмеÑÑимоÑÑÑ Ñ Ð±ÑаÑзеÑами СмоÑÑиÑе Ñакже...
')...
')RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4