The … syntax in ES6

Intro

Recently, I’m studying in React for my Uni subject advanced internet programming, I found something I don’t really understand about an syntax in the tutorial, so I decided to record it there, in order to remember it for the future.

What is …

… is an extend operation operator that add into the ES6, it usually used in the function when there are multiple arguments ( you don’t exactly know how much), or in the array merging.

Where is used?

Sum up all the values

function add(...vals){
  let sum=0;
  for(let i=0;i<vals.length;i++){
    sum+=vals[i];
  }
  return sum;
}

So it can be called like this:

add(1,2,3,4,5,6);
> 21

or merging up arrays

var a = [1,2]
var b = [3,4]
a.push(...b)

so the a will become [1, 2, 3, 4]

Separate string into char array

[...'hello']
-> ["h", "e", "l", "l", "o"]

reference from https://www.jianshu.com/p/86cbabeda999