js中... 的用法

在uniapp中初始化的项目碰到了这么一个用法。

import Vue from 'vue'
import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App
})
app.$mount()

在之前的项目中也有用到这样的用法，但是没有理解透这个...的实际作用是什么。

三点是es6中出现的扩展运算符。作用是遍历当前使用的对象能够访问到的所有属性，并将属性放入当前对象中。结合上面的代码来看就是Vue中能访问到所有名为App的属性都放入Vue中。那么此时就存在一个问题，重名了怎么办，当重名的时候将会选取后者。

扩展运算符的用法还有其他值得注意的地方，下面的例子可以很好的演示：

var a = {"a":"a","b":"b"}
var b = {...a} //{"a":"a","b":"b"}
var c = {...a,"b":"b1"} //{"a":"a","b":"b1"}
var d = {...a,...{"a":"a1","b":"b1"}} //{"a":"a1","b":"b1"}

这个放入当前对象的操作是会影响到被复制的对象的，因为...这个操作是一种引用，并不是直接将数据放入当前的对象里，用下面的例子去描述：

var a = {1:1,2:2}
var b = {...a} //此时b为{1:1,2:2}
b.2=3
console.log(a) //{1:1,2:3}
console.log(b) //{1:1,2:3}

这个时候的a已经被影响到了，因为改变的是引用的对象，所以本质上更改的是a的属性。

更详细的数组赋值等，可以参考下面的链接：

https://blog.csdn.net/astonishqft/article/details/82899965

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！