[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_syntax [Back]  [Original]

Spread syntax - JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

Spread syntax

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 ..

Spread syntax (, )

  • :
  • ( )
  • : , "-" ( )

In this article

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 , .

js
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);

spread syntax :

js
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction(...args);

spread syntax, .

js
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:

js
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);

new spread syntax, :

js
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 :

js
var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"];
// ["head", "shoulders", "knees", "and", "toes"]

, ... .

js
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

js
const a = [[1], [2], [3]];
const b = [...a];
b.shift().shift(); // 1
//  .    ""  : 
//[[], [2], [3]]

Array.concat:

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);

spread syntax:

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

Array.unshift . spread syntax:

js
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, ]:

js
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(), .

js
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():

js
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) :

js
var obj = { key1: "value1" };
var array = [...obj]; // TypeError: obj is not iterable

Spread

spread JavaScript. . . apply() .

Rest ()

rest spread , . , rest spread : , . . rest parameters.

Specification
ECMAScript 2027 LanguageSpecification
# prod-SpreadElement
ECMAScript 2027 LanguageSpecification
# prod-ArgumentList
ECMAScript 2027 LanguageSpecification
# prod-PropertyDefinition


Web Proxy Viewer  |  New URL  |  Original Page