What do three dots represent in JavaScript?

In JavaScript, three dots "..." represent the spread operator, which is a new addition in ES6. It can add array expressions or strings in the syntax during function call/array construction. Level expansion; you can also expand object expressions in a "key-value" manner when constructing literal objects.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

When we look at js code, three dots (...) often appear. What does it mean? What's the use?

Now I will share with you the things about the three points

What do they mean?

The real name of the three dots (...) is the expansion operator, which is a new addition in ES6. It can expand array expressions or strings at the syntax level during function calls/array construction; You can also expand the object expression in a key-value manner when constructing a literal object

Literals generally refer to the simplicity of [1,2,3] or {name:'chuichui'} The construction method, multi-layer nested arrays and objects are powerless with three points

To put it bluntly, it means taking off the clothes, whether it is braces ([]) or curly braces ({}) , it’s no big deal, take them all off, take them off!

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//对象
var man = {name:'chuichui',height:176}
console.log({...man}) / {name:'chuichui',height:176}

What’s the use?

It has a wide range of uses, we can see it everywhere, here are a few common examples

Use it when copying

//数组的复制
var arr1 = ['hello']
var arr2 =[...arr1]
arr2 // ['hello']
//对象的复制
var obj1 = {name:'chuichui'}
var obj2 ={...arr}
ob12 //  {name:'chuichui'}

Use it when merging

//数组的合并
var arr1 = ['hello']
var arr2 =['chuichui']
var mergeArr = [...arr1,...arr2]
mergeArr  // ['hello','chuichui']
// 对象分合并
var obj1 = {name:'chuichui'}
var obj2 = {height:176}
var mergeObj = {...obj1,...obj2}
mergeObj // {name: "chuichui", height: 176}

Use it to convert characters to arrays

var arr1 = [...'hello']
arr1 // ["h", "e", "l", "l", "o"]

Use it to pass parameters to functions

Can be combined with normal functions and used flexibly

function f(v,w,x,y,z){ }
var args = [2,3]
f(1,...args,4,...[5])

When we want to add elements in an array Use it when iterating as function parameters!

function f(x,y,z){}
var args = [1,2,3]
f(...args)

// 以前的方法
f.apply(null,args);

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What do three dots represent in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!