陌上人如玉
公子世无双

es6扩展操作符的使用

//对象的复制,不更改原来的数据

export default {
  data() {
    return {
      text: {
        avalue: 'a',
        bvalue: 'b'
      }
    }
  },
  mounted() {
    this.textFun()
    console.log(this.textFun())
    //avalue:"a"
    //bvalue :"bdddd"
    console.log(this.text)
    //avalue:"a"
    //bvalue :"b"
  },
  methods: {
    textFun() {
      return {
      //不更改原来的数据
        ...this.text, 'bvalue': this.text['bvalue'] + 'dddd'
      }
    },

//数组的扩展,不修改原来的数组(区别去push unshift)

export default {
  data() {
    return {
      text: [
        { id: 1, value: '我的', name: 'wode' },
        { id: 2, value: '你的', name: 'nide' },
        { id: 3, value: '他的', name: 'tade' }
      ],
    }
  },
  mounted() {
    this.textFun()
    console.log(this.textFun())
    //{ id: 3, value: 'asdf', name: 'fda' }
    //{ id: 1, value: '我的', name: 'wode' },
    //{ id: 2, value: '你的', name: 'nide' },
    //{ id: 3, value: '他的', name: 'tade' }

    console.log(this.text)
    //{ id: 1, value: '我的', name: 'wode' },
    //{ id: 2, value: '你的', name: 'nide' },
    //{ id: 3, value: '他的', name: 'tade' }
    })
  },
  methods: {
    textFun() {
      return [
  { id: 3, value: 'asdf', name: 'fda' },
        ...this.text
      ]
    },

应用Math.max方法,简化求出一个数组最大元素的写法。

// ES5 的写法  
Math.max.apply(null, [14, 3, 77])  

// ES6 的写法  
Math.max(...[14, 3, 77]) 

//  等同于  
Math.max(14, 3, 77);  

通过push函数,将一个数组添加到另一个数组的尾部

// ES5 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
Array.prototype.push.apply(arr1, arr2);  
// ES6 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
arr1.push(...arr2); 
赞(0) 打赏
未经允许不得转载:陌上寒 » es6扩展操作符的使用

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫

支付宝扫一扫