<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS深拷贝的几种方法</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script>
let origin = ['李白','赵云','王昭君','裴擒虎','元歌']
/**
* 1. Object.assign() 实现深拷贝 --- 个人常用
*/
// let target = Object.assign([],origin)
/**
* 2. JSON.parse() 和 JSON.stringify() 实现深拷贝
*/
// let target = JSON.parse(JSON.stringify(origin))
/**
* 3. lodash 里面的 cloneDeep() 方法 实现深拷贝
* vue 中使用 ：
* a. npm i --save lodash 下载依赖
* b. import _ from 'lodash' 在 组件 中引入
* c. 用法和下面的一样
*/
let target = _.cloneDeep(origin)
target.pop() // 修改 target 数组后
console.log('origin',origin) // origin ["李白", "赵云", "王昭君", "裴擒虎"]
console.log('target',target) // target ["李白", "赵云", "王昭君", "裴擒虎", "元歌"]
</script>
</body>
</html>