js ...扩展运算符

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)
    },
   }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值