JavaScript expand operator (Spread operator) Introduction

This article describes the deployment JavaScript operator (operator the Spread) .... This article is for ES6 beginners.

You can expand the operator (Spread operator) ...extended string and an array of objects. Expand operator (Spread) is three dots (...), the object may be converted to an iterative parameter sequence separated by commas. As inverse rest parameters.

An array

An array, for example, first create an array,

const a = [1, 2, 3],
          b = [4,5,6];

You can easily assign an array:

const c = [...a]  // [1,2,3]

You can also easily spliced ​​two arrays:

const d = [...a，...b] //  [1,2,3,4,5,6]

Can be spliced ​​as follows

const d = [...a,4, 5, 6] //  [1,2,3,4,5,6]

B if we want an array element of the array is fully inserted into a rear (without generating a new array), you can do this:

const a = [1,2,3];
a.push(...b);

B if we want an array element of the array is fully inserted into a front face (does not generate a new array), you can do this:

const a = [1,2,3];
a. unshift(...b);

Class array of objects become array

The operator can expand an object into a real array-array:

var list=document.getElementsByTagName('a');
var arr=[..list];

For objects

Operators can also be used to expand an object. You can clone an object in the following ways:

const newObj = { ...oldObj }

Note: If the property value is an object, it will only generate a reference to the object, but not deep copy. That is, the operator does not expand a deep copy all attributes recursively. And, only enumerated attribute can be copied, not copied prototype chain.

It can also be used to merge two objects.

const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }

Of course, it can also be applied to the following conditions:

const others = {third: 3, fourth: 4, fifth: 5}
const items = { first:1, second:1, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

If multiple objects have the same attributes merge, the object behind the front object will override properties, such as

const obj1 = { a: 111, b: 222 };
const obj2 = { b: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111,  b: 333, d: 444 }

const obj1 = {a:111,b:222}
const merged = {a:222,...obj1}; 
console.log(merged); // -> { a: 111,  b: 333 }

const obj1 = {a:111,b:222}
const merged = {...obj1,a:222}; 
console.log(merged); // -> { a: 222,  b: 333 }

A string

By expanding the operator can put a string into an array of characters, corresponding to

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

The above code is equivalent to:

const hey = 'hey'
const arrayized = hey.split('') // ['h', 'e', 'y']

A function parameter passing

By expanding operator, through an array of parameter passing to a function:

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

Iterator interface for an object having

Iterator objects having interface structure Map and Set, Generator function may be used to expand the operator, such as:

var s = new Set();
s.add(1);
s.add(2);
var arr = [...s]// [1,2]

function  * gen() {
    yield 1;
    yield 2;
    yield 3;
}

var arr = [...gen()]  // 1，2，3

If a map, each key and value will turn into an array:

var m = new Map();
m.set(1,1)
m.set(2,2)
var arr = [...m] // [[1,1],[2,2]]

Note that the following code will complain, because obj is not an Iterator object:

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

Welcome to public concern number "ITman tert-Biao." Tert-Biao, has 10 years of development experience, the incumbent system architects, technical director, technical trainer, professional planners. Familiar with Java, JavaScript. There are in-depth studies in computer graphics, WebGL, front-end visualization. For programmers thinking skills training and training, career planning programmers and programmers have a keen interest in financial investments.