Js开发_Vue 对象&数组常用总结

①【数组去重】

methods: {
    dedupe(array) {
      return [...new Set(array)]
    },
    startCallback() {
     var arr = [1,2,2,3,3,4,4,5,5]
     console.log(this.dedupe(arr))
    }
  }

 

②【对象浅拷贝】

浅拷贝，双向改变,指向同一片内存空间

<template>
  <div class="hello">
    <button type="button" @click="startCallback()"> test </button>
  </div>
</template>
<script>
export default {
  name: 'callback',
  data () {
    return {
      dataObj: [
      ]
    }
  },
  methods: {
    startCallback() {
      var dataObj = [
        {title: 'deepclone1', index:  1},
        {title: 'deepclone2', index : 2},
        {title: 'deepclone3', index : 3}
      ]
      // 浅Copy 
      this.dataObj = dataObj;
      this.dataObj[0].title = 'change';
      console.log('before:',dataObj);　//shallow copy: change,2,3
      console.log('after:', this.dataObj);     //shallow copy: change,2,3 
    }
  }
}
</script>

 

所以把它放在深拷贝里是因为它看起来像是深拷贝而实际上它是浅拷贝。

如果该元素是个对象引用 （不是实际的对象）,slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。

如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

对于字符串数字及布尔值来说(不是 String、Number 或者 Boolean 对象) slice 会拷贝这些值到新的数组里。

在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

1.Slice 方法实现数组的单层深拷贝-将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部，即可完成数组的深拷贝。代码如下：

2.concat 方法实现数组的一层深拷贝原理更加粗暴 它是用于连接多个数组组成一个新的数组的方法。那么我们只要连接它自己即可完成数组的深拷贝。代码如下：

<template>
  <div class="hello">
    <button type="button" @click="startCallback()"> test </button>
  </div>
</template>
<script>
export default {
  name: 'callback',
  data () {
    return {
      dataObj: [],
      dataBase: []
    }
  },
  methods: {
    startCallback() {
      var dataObjBase = [
        {title: 'deepclone1', index:  1, values: {'key' : 1}},
        {title: 'deepclone2', index : 2, values: {'key' : 1}},
        {title: 'deepclone3', index : 3, values: {'key' : 1}},
      ]

      this.dataObj = dataObjBase.slice(0)
      // this.dataObj = dataObjBase.concat()
      this.dataObj[0].title = 'change';
      this.dataObj[0].values.key = '3';
      // 浅Copy 
      console.log('beforeObj:',dataObjBase);
      console.log('afterObj:', this.dataObj);
      var dataValueBase = [1,2,3,4,5]
      this.dataBase = dataValueBase.slice(0)
      // this.dataBase = dataValueBase.concat()
      // 深Copy 
      this.dataBase[0] = 100
      console.log('beforeBase:', dataValueBase);
      console.log('afterBase:', this.dataBase);
    }
  }
}
</script>

 

2.【对象深拷贝】

方法1: 在nodeJS项目中,有一个lodash模块, 可以利用它提供的方法来实现深度克隆, 或者将其下载到本地,引入它对应的js文件也可如下

lodash中文网 https://www.lodashjs.com/docs/latest 

<template>
  <div class="hello">
    <button type="button" @click="startCallback()"> test </button>
  </div>
</template>
<script>
const cloneDeep = require('lodash/clonedeep')
export default {
  name: 'callback',
  data () {
    return {
      dataObj: [
      ]
    }
  },
  methods: {
    startCallback() {
      var dataObj = [
        {title: 'deepclone1', index:  1},
        {title: 'deepclone2', index : 2},
        {title: 'deepclone3', index : 3}
      ]
      // 深いCopy
      this.dataObj = cloneDeep(dataObj)      
      this.dataObj[0].title = 'changeValue'
      console.log('ago->dataObj ', dataObj)
      console.log('after->dataObj ', this.dataObj)
    }
  }
}
</script>

方法2（JSON.parse和JSON.stringify）

<template>
  <div class="hello">
    <button type="button" @click="startCallback()"> test </button>
  </div>
</template>
<script>
export default {
  name: 'callback',
  data () {
    return {
      dataObj: [
      ]
    }
  },
  methods: {
    startCallback() {
      var dataObj = [
        {title: 'deepclone1', index:  1},
        {title: 'deepclone2', index : 2},
        {title: 'deepclone3', index : 3}
      ]
      // 深いCopy 
      this.dataObj = JSON.parse(JSON.stringify(dataObj))
      this.dataObj[0].title = 'changeValue'
      console.log('ago->dataObj ', dataObj)
      console.log('after->dataObj ', this.dataObj)
    }
  }
}
</script>

方法3. 自定义一个深拷贝函数(递归)

function deepClone(obj) {
    var result = Array.isArray(obj) ? [] : {}; // 判断当前传进来的是对象还是数组
    for(var key in obj) {
        if (obj.hasOwnProperty(key)) { // 该key是否存在
            if (typeof obj[key] === 'object' && obj[key] !== null) { 
                // obj[key]如果为object,递归调用该方法，obj[key] = arr || obj[key] = {}都为'object'
                result[key] = deepClone(obj[key]);
            } else {
                result[key] = obj[key];
            }
        }
    }
    return result;
}

方法4:自定义一个深拷贝函数(数组push)

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i in arr) {
      res.push(arr[i])
    }
    return res;
}