qianran ✍️笔记 2021-03-06

js中…什么意思，js中三个点怎么用

我们在看js代码时经常会出现（…）三个点的东西，它究竟是什么意思？又有何用处？
下面我就给大家分享一下三个点的那些事

什么意思？

三个点（…）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开

字面量一般指[1,2,3]或者{name:’chuichui’}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了

说白了就是把衣服脱了，不管是大括号（[]）、花括号（{}），统统不在话下，全部脱掉脱掉！

<span class="hljs-comment">// 数组</span>
<span class="hljs-selector-tag">var</span> number = <span class="hljs-selector-attr">[1,2,3,4,5,6]</span>
console<span class="hljs-selector-class">.log</span>(...number) <span class="hljs-comment">//1 2 3 4 5 6</span>
<span class="hljs-comment">//对象</span>
<span class="hljs-selector-tag">var</span> man = {name:<span class="hljs-string">'chuichui'</span>,<span class="hljs-attribute">height</span>:<span class="hljs-number">176</span>}
console<span class="hljs-selector-class">.log</span>({...man}) / {name:<span class="hljs-string">'chuichui'</span>,<span class="hljs-attribute">height</span>:<span class="hljs-number">176</span>}

// 数组

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}

有什么用？

它的用处很广泛，我们随处都可以看到，下面是几个常见的例子

复制用它

<span class="hljs-regexp">//</span>数组的复制
var arr1 = [<span class="hljs-string">'hello'</span>]
var arr2 =[...arr1]
arr2 <span class="hljs-regexp">//</span> [<span class="hljs-string">'hello'</span>]
<span class="hljs-regexp">//</span>对象的复制
var obj1 = {name:<span class="hljs-string">'chuichui'</span>}
var obj2 ={...arr}
ob12 <span class="hljs-regexp">//</span>  {name:<span class="hljs-string">'chuichui'</span>}

//数组的复制

var arr1 = ['hello']

var arr2 =[...arr1]

arr2 // ['hello']

//对象的复制

var obj1 = {name:'chuichui'}

var obj2 ={...arr}

ob12 // {name:'chuichui'}

合并用它

<span class="hljs-comment">//数组的合并</span>
<span class="hljs-selector-tag">var</span> arr1 = <span class="hljs-selector-attr">[<span class="hljs-string">'hello'</span>]</span>
<span class="hljs-selector-tag">var</span> arr2 =<span class="hljs-selector-attr">[<span class="hljs-string">'chuichui'</span>]</span>
<span class="hljs-selector-tag">var</span> mergeArr = <span class="hljs-selector-attr">[...arr1,...arr2]</span>
mergeArr  <span class="hljs-comment">// ['hello','chuichui']</span>
<span class="hljs-comment">// 对象分合并</span>
<span class="hljs-selector-tag">var</span> obj1 = {name:<span class="hljs-string">'chuichui'</span>}
<span class="hljs-selector-tag">var</span> obj2 = {<span class="hljs-attribute">height</span>:<span class="hljs-number">176</span>}
<span class="hljs-selector-tag">var</span> mergeObj = {..<span class="hljs-selector-class">.obj1</span>,...obj2}
mergeObj <span class="hljs-comment">// {name: "chuichui", height: 176}</span>

//数组的合并

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}

字符转数组用它

var arr1 = [...<span class="hljs-string">'hello'</span>]
arr1 <span class="hljs-regexp">//</span> [<span class="hljs-string">"h"</span>, <span class="hljs-string">"e"</span>, <span class="hljs-string">"l"</span>, <span class="hljs-string">"l"</span>, <span class="hljs-string">"o"</span>]

1 2	var arr1 = [...<span class="hljs-string">'hello'</span>] arr1 <span class="hljs-regexp">//</span> [<span class="hljs-string">"h"</span>, <span class="hljs-string">"e"</span>, <span class="hljs-string">"l"</span>, <span class="hljs-string">"l"</span>, <span class="hljs-string">"o"</span>]

函数传参用它

可以和正常的函数相结合，灵活使用

function <span class="hljs-built_in">f</span>(v,w,x,y,z){ }
<span class="hljs-keyword">var</span> <span class="hljs-keyword">args</span> = [2,3]
<span class="hljs-built_in">f</span>(1,...<span class="hljs-keyword">args</span>,4,...[5])

function f(v,w,x,y,z){ }

var args = [2,3]

f(1,...args,4,...[5])

当我们想把数组中的元素迭代为函数参数时，用它！

function <span class="hljs-built_in">f</span>(x,y,z){}
<span class="hljs-keyword">var</span> <span class="hljs-keyword">args</span> = [1,2,3]
<span class="hljs-built_in">f</span>(...<span class="hljs-keyword">args</span>)

<span class="hljs-comment">// 以前的方法</span>
f.apply(null,<span class="hljs-keyword">args</span>);

function f(x,y,z){}

var args = [1,2,3]

f(...args)

// 以前的方法

f.apply(null,args);

感受?

用了三个点感觉一切都可以省略，一切尽在不言中，你慢慢品☕️

最后 ?

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞?哦，阿门~

欢迎转载，请尊重作者劳动成果，保留原站链接
老念博客🌈 » js中…什么意思，js中三个点怎么用

qianran 普通

分享到：