深聊js中的浅拷贝

概念：「新的对象复制已有对象中非对象属性的值和对象属性的引用」。也可以理解为：「一个新的对象直接拷贝已存在的对象的对象属性的引用」，即浅拷贝。常见的浅拷贝的情景如下

1. Object.assign

let user = { name: 'lp', skill: {js:90,css:80}}
let cuser = Object.assign({},user)
cuser.name = 'lxp'
cuser.skill.css = 90
console.log('user =>',user) // user => { name: 'lp', skill: { js: 90, css: 90 } }
console.log('cuser =>',cuser) // cuser => { name: 'lxp', skill: { js: 90, css: 90 } }

2. Array.prototype.slice()

let person = ['lp','peng',{name:'8888'}]
let cperson = Array.prototype.slice.call(person)
cperson[0] = 'lp88888'
cperson[2]['name'] = 'ping9999'
console.log('person=>',person) // person=> [ 'lp', 'peng', { name: 'ping9999' } ]
console.log('cperson =>',cperson) // cperson => [ 'lp88888', 'peng', { name: 'ping9999' } ]

3. Array.prototype.concat()

let user  = [{name: "lipeng"},   {age: 28}];
let user1 = [{age: 20},{addr: "七台河"}];
let user2 = user.concat(user1);
user1[0]["age"] = 25;
console.log(user);  // [ { name: 'lipeng' }, { age: 28 } ]
console.log(user1); // [ { age: 25 }, { addr: '七台河' } ]
console.log(user2); // [ { name: 'lipeng' }, { age: 28 }, { age: 25 }, { addr: '七台河' } ]

4. 扩展运算符（...）

let user = { name: "lp", skill: { JavaScript: 90, CSS: 80}};
let cuser = {...user};
cuser.name = "lxp";
cuser.skill.CSS = 90;
console.log('user =>',user) // user => { name: 'lp', skill: { JavaScript: 90, CSS: 90 } }
console.log('cuser =>',cuser) // cuser => { name: 'lxp', skill: { JavaScript: 90, CSS: 90 } }

5.浅拷贝的实现原理

function cloneShallow(source) {let target = Array.isArray(source) ? [] : {};for (let key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}return target;
}