js 中有哪些拷貝的方式

無樣發表於2019-04-13
JS

1. json轉換，深拷貝

var newObj = JSON.parse(JSON.stringify(obj))
複製程式碼

注意：function 會被轉變成 undefined

2. 迴圈遞迴將基礎型別進行賦值，深拷貝

如果是 function，很少考慮在n內，且不考慮箭頭函式

// 這裡不考慮箭頭函式的情況
function cloneDeep (obj) {
  var _types = ['number', 'string', 'boolean', 'undefined', 'function']
  if (_isBaseTypeAndFn(obj)) return obj
  var newObj
  if (Array.isArray(obj)) {
    newObj = []
    if (obj.length === 0) return newObj
    obj.forEach(function (item, index) {
      newObj[index] = cloneDeep(item)
    })
    return newObj
  }
  newObj = {}
  if (Object.keys(obj) === 0) return newObj
  for (key in obj) {
    var value = obj[key]
    newObj[key] = cloneDeep(value)
  }
  function _isBaseTypeAndFn (value) {
    return _types.indexOf(typeof value) > -1 || value === null
  }
  return newObj
}
複製程式碼

精簡版本(推薦版)

function deepCopy (obj){
    if(typeof obj === "object" && obj !== null){
        var result = obj.constructor == Array ? [] : {};
        for(let i in obj){
            result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
        }
    } else {
        var result = obj;
    }
    return result;
}
複製程式碼

測試程式碼地址

3. 原型鏈

var person = {
	name: 'liangcheng'
}
function cloneDeep (obj) {
	var F = function () {}
	F.prototype = obj
	return new F()
}
var newPerson = cloneDeep(person)
Object.keys(newPerson)
複製程式碼

person 裡面再包含一層引用，那麼該引用是共享的，類似原型屬性共享。

4. Object.create()

var person =  {
	name: 'liangcheng'
}

var newPerson = Object.create(person)
複製程式碼

和第 3 種一樣，person 裡面再包含一層引用，那麼該引用是共享的，類似原型屬性共享一樣。

5. Array.prototype.concat() 和 Array.prototype.map

這兩種都是一種淺拷貝。

var ary = [{
  name: 'liangecheng'
}]
// concat 也是一種淺拷貝
var ary1 = [].concat(ary)

ary1[0].name = 'wy'
console.log(ary[0].name) // wy
複製程式碼
var ary = [
  {
    name: 'liangecheng'
  }
]
// map 也是一種淺拷貝
var ary1 = ary.map(function (item) {
  return item
})

ary1[0].name = 'wy'
console.log(ary[0].name) // wy
複製程式碼

6. 通過new

class Person {
	name = ''
	age = 0
	contructor (argsObj: Person) {
		Object.assign(this, argsObj)
	}
}

const person = {
	name: 'liangcheng'
	arg: 16
}

const newPerson = new Person(person)
複製程式碼

和原型鏈方式一樣，屬性是引用，就共享了。

7. Object.assign()

const person = {
	name: 'liangcheng'
	arg: 16
}

const newPerson = Object.assign({}, person)
複製程式碼

相關文章