1.复制
//对象
let o1 = {id:1,code:'a'}
let obj = {...o1}
console.log(obj)//{id: 1, code: 'a'}
//数组
let a1 = [{id:1,code:'a'}]
let arr =[...a1]
console.log(arr) //[{id:1,code:'a'}]
2.修改
//对象
let o1 = {id:1,code:'a'}
let obj = {...o1,code:'aa'}
console.log(obj)//{id: 1, code: 'aa'}
3.添加
//对象
let o1 = { id: 1, code: 'a' }
let obj = { ...o1, name: 'n1' }
console.log(obj)//{id: 1, code: 'a', name: 'n1'}
//数组
let a1 = [{ id: 1, code: 'a' }]
let arr = [...a1, { id: 2, code: 'b' }]
console.log(arr) //[{id: 1, code: 'a'},{id: 2, code: 'b'}]
4.合并
//对象
let o1 = { id: 1, code: 'a' }
let o2 = { id: 1, name: 'n1' }
let obj = { ...o1, ...o2 }
console.log(obj)//{id: 1, code: 'a', name: 'n1'}
//数组
let a1 = [{ id: 1, code: 'a' }]
let a2 = [{ id: 2, code: 'b' }]
let arr = [...a1, ...a2]
console.log(arr) // [{id: 1, code: 'a'}, {id: 2, code: 'b'}]
5.字符串转数组
let str = 'abc';
let arr = [...str];
console.log(arr)//['a', 'b', 'c']
6.函数传参
<a-button @click="fun1(str, obj, arr, 666)">点击</a-button>
data () {
return {
str: 'a',
obj: { a: 'a', b: 'b' },
arr: [{ a: 1 }, { a: 2 }]
};
},
methods: {
fun1 (...args) {
console.log(args) //['a',{a:'a',b:'b'},[{a:1},{a:2}],666]
}
}
7.使用相同名的dom元素
获取class名叫aSortData的标签的数据,并把他们加到数组里
fun(){
const arr = [...document.getElementsByClassName('aSortData')]
arr.forEach((item, index) => {
this.lastArr.push(item.innerText )
})
}
使用sortable.js时用到(拖拽元素排列顺序)
sortable配置
<div class="container" ref="container">
<div v-for="(item, index) in dataArr" :key="`floor_${index}`">
<a-icon
type="menu"
class="handle"
style="cursor: s-resize; font-size: 18px"
/>
<span class="aSortData" style="margin-left: 6px; font-size: 18px">{{
item.name
}}</span>
</div>
</div>
import Sortable from 'sortablejs'
mounted () {
this.row()
},
methods: {
row () {
this.$nextTick(() => {
const el = this.$refs.container
Sortable.create(el, {
animation: 150,
group: 'name',
sort: true,
handle: '.handle'
}
)
})
},
handleOk () {
const arr = [...document.getElementsByClassName('aSortData')]
let lastArr=[]
arr.forEach((item, index) => {
lastArr.push({ id: index + 1, name: item.innerText })
})
console.log('🚀 .lastArr', lastArr)
},
}