前端
面试题
前端
面试题

一 手写浅拷贝函数的代码实现

1.1 浅拷⻉

浅拷⻉，指的是创建新的数据，这个数据有着原始数据属性值的⼀份精确拷⻉

如果属性是基本类型，拷⻉的就是基本类型的值。如果属性是引⽤类型，拷⻉的就是内存地址

即浅拷⻉是拷⻉⼀层，深层次的引⽤类型则共享内存地址

下⾯简单实现⼀个浅拷⻉

function shallowClone(obj) {
 const newObj = {};
 for(let prop in obj) {
 if(obj.hasOwnProperty(prop)){
 newObj[prop] = obj[prop];
 }
 }
 return newObj;
 }

在 JavaScript 中，存在浅拷⻉的现象有：

  • Object.assign
  • Array.prototype.slice() , Array.prototype.concat()
  • 使⽤拓展运算符实现的复制

1.1.1 Object.assign

var obj = {
 age: 18,
 nature: ['smart', 'good'],
 names: {
 name1: 'fx',
 name2: 'xka'
 },
 love: function () {
 console.log('fx is a great girl')
 }
 }
 var newObj = Object.assign({}, fxObj);

1.1.2 slice()

const fxArr = ["One", "Two", "Three"]
 const fxArrs = fxArr.slice(0)
 fxArrs[1] = "love";
 console.log(fxArr) // ["One", "Two", "Three"]
 console.log(fxArrs) // ["One", "love", "Three"]

1.1.3 concat()

const fxArr = ["One", "Two", "Three"]
 const fxArrs = fxArr.concat()
 fxArrs[1] = "love";
 console.log(fxArr) // ["One", "Two", "Three"]
 console.log(fxArrs) // ["One", "love", "Three"]

1.1.4 拓展运算符

const fxArr = ["One", "Two", "Three"]
 const fxArrs = [...fxArr]
 fxArrs[1] = "love";
 console.log(fxArr) // ["One", "Two", "Three"]
 console.log(fxArrs) // ["One", "love", "Three"]