每天学么点儿技术花活儿（八月篇）

最新推荐文章于 2024-09-23 16:28:19 发布

原创最新推荐文章于 2024-09-23 16:28:19 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

4 篇文章

订阅专栏

本文探讨了JavaScript中数组引用与深拷贝的区别，解释了如何使用JSON方法实现深拷贝，避免数据变动引起的副作用。同时，针对React中出现的属性重复错误，提供了有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据深层拷贝

var arr1 = [1,2,3];
var arr2 = arr1;
arr1 = [9,2,3]; // 重新给arr1赋值
arr2 => (3) [1, 2, 3]   // arr2 没跟着arr1改变而变化

var arr1 = [1,2,3];
var arr2 = arr1;
arr1[0] = 9; // 重新给arr第一个元素赋值 
arr2 => (3) [9, 2, 3] // arr2 跟着arr1改变而变化

造成以上的原因是，第一种情况，arr1 指向内存的地址，随着新数组的赋值而发生了改变，而 arr2 仍然指向 arr1 之前指向的地址，故不随着 arr1 改变而发生改变，他们已经不是指向同一个地址了，而第二种情况，只修改数组中某一个下标元素，并不会新生成内存地址，故 arr1,arr2 始终指向的是同一个内存地址，所以 arr2 随 arr1 改变而改变。

由上面的现象，我们可以更好滴理解深层拷贝，通过创建新的字符串解析成 json ,得到旧数据的备份而不影响旧数据：

let newData = JSON.parse(JSON.stringify(oldData))

React编译报错 No duplicate props allowed react/jsx-no-duplicate-props

No duplicate props allowed  react/jsx-no-duplicate-props

报错原因：因统一标签内存在多个className 导致

<div className="todolist" className={this.state.showMsg?'red':'green'}>

解决方案：ES6拼接字符串，将表达式返回的类名 ‘red’ / ‘green’ 与不变的类名 ‘todolist’ 进行字符串拼接

className = {`${返回动态类名的表达式} 静态类名字符串`}
即:
<div className={`${this.state.showMsg?'red':'green'} todolist`}>