Home  >  Article  >  Web Front-end  >  What do three dots represent in JavaScript?

What do three dots represent in JavaScript?

青灯夜游
青灯夜游Original
2021-10-28 16:41:0213479browse

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.

What do three dots represent in JavaScript?

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn