首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么当我更改find()返回的值时,原始数组会发生更改

当你更改find()返回的值时,原始数组会发生更改的原因是因为find()方法返回的是数组中满足条件的第一个元素的引用,而不是该元素的副本。因此,当你修改该引用指向的值时,原始数组中对应的元素也会被修改。

这是因为在JavaScript中,数组是引用类型,当你将数组赋值给一个变量时,实际上是将数组的引用赋值给了该变量。因此,无论你通过哪个变量修改数组中的元素,都会影响到原始数组。

如果你想避免修改原始数组,可以使用解构赋值或者Array.from()方法来创建一个新的数组副本,然后对副本进行修改,例如:

代码语言:txt
复制
const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray]; // 使用解构赋值创建副本
// 或者 const newArray = Array.from(originalArray); 使用Array.from()方法创建副本

const foundElement = newArray.find(element => element === 3);
foundElement = 10; // 修改副本中的值,不会影响原始数组

这样,对副本进行的修改不会影响原始数组的内容。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Go 切片使用绕坑指南

在Go中按传递为什么有时会更改切片?...新切片具有新“长度”属性,该属性不是指针,但仍指向同一数组。因此,我们函数内代码最终会反转原始切片所引用数组,但是原始切片长度属性还是之前长度,这就是造成了上面 1被丢掉原因。...为什么? 如前所述,当我们调用 append创建一个新切片。...于是 系统分配了一个新数组,让切片指向该数组当我们最终在 reverse函数内开始反转切片中元素,它不再影响我们初始数组,而是在完全不同数组上运行。...最终,这意味着开发人员需要知道他们传递数据类型以及所调用函数可能如何影响它们。当你将切片传递给其他函数或方法,应该注意函数可能,也可能不会更改原始切片中元素。

1.2K20

从Vue源代码中来聊聊方法

到底使用哪一个原始以前是由内部操作决定。在ES6中,通过Symbol.toPrimitive方法可以更改那个暴露触发。...传递这些参数,Symbol.toPrimitve返回分别是:数字,字符串或无类型偏好。...对与绝大多数标准对象,数字模式有以下特性,根据优先级顺序排序如下: 调用valueOf方法,如果结果为原始返回。 否则,调用toString()防范,如果为原始,则返回。...如果再无可选,则抛出错误。 同样,对与大多数标准对象,字符串模式具有以下优先级: 调用toString()方法,如果结果为原始返回。 否则,调用valueOf方法,如果结果为原始,则返回。...当调用数组toString()方法时候,究竟发生了什么。

68530
  • 提高你 JavaScript 技能10 个面试题

    首先,array sort 方法对原始数组进行排序,并返回对该数组引用。这意味着当你调用 arr2.sort() ,arr2 数组对象将会被排序。 当你比较对象数组排序顺序并不重要。...我们 dog 显然有 speak 这个操作。当我们调用 Pogo speak 输出什么?...Dog 实例,我们都会将该实例 speak 属性设置为返回字符串 woof 函数。...展开操作和重命名 查看以下代码中有单个对象数组当我们扩展该数组更改 0 索引对象上 firstname 属性时会发生什么?...所以在一个数组中修改对象 firstName 属性,也将会在另一个数组更改。 9. 数组方法绑定 在以下情况下输出什么?

    57610

    const关键字秘密:为什么它不总是像你想象那样

    (hi); // -> 5 有趣是,当我使用const创建一个对象,我可以自由地更改它: const person = { name: 'Hassan', }; person.name = 'Sujata...重新分配我们标签 当我们使用 let 关键字创建一个变量,我们能够更改该标签所引用“事物”。 例如,我们可以将我们 fruits 标签指向一个新: 这被称为重新分配。...原始数据类型 到目前为止,我们看到所有示例都涉及对象和数组。但是如果我们有一个“原始”数据类型,例如字符串、数字或布尔,该怎么办呢?...我们只能更改标签指向数字。 这适用于所有原始类型,包括字符串、布尔、null等。 如上所述,在JavaScript中,原始是不可变;它们不能被编辑。但如果他们能做到呢?...这显然让人感到困惑和无助,这就是为什么在JavaScript中基本类是不可变

    37820

    Java Challengers#1:JVM中方法重载

    我们将更多地使用这些和其他类型,所以花一点间来回顾Java中原始类型。 表1. Java中原始类型 ? 为什么我们要使用方法重载?...calculate(int firstNumber, int secondNumber){} void calculate(int secondNumber, int thirdNumber){}} 你也不能通过更改方法签名中返回类型来重载方法...用于可变数量参数,可变参数基本上是由三个点指定数组(...)我们可以传递许多int我们想要给这个方法数字。....); // We could continue… 可变参数非常方便,因为可以直接传递给方法。如果我们使用数组,我们必须使用实例化数组。...宽化:一个实际例子 当我们将数字1直接传递给executeAction方法,JVM自动将其视为一个int。这就是为什么这个数字不适用于该executeAction(short var)方法。

    45130

    50道JavaScript详解面试题,你需要了解一下

    答案是输出为10,因为将对象传递给函数对象相似,仅传递其,而不传递对内存位置实际引用。这就是为什么更改仅影响函数范围内参数原因。 3、控制台输出是什么?...6、数组对象是JavaScript中原始对象吗? 在JavaScript中,我们处理大多数事物都是对象,类似地,数组只是JavaScript中特殊对象,它们具有其他对象所没有的属性。...答案是C,当我们需要等待执行直到所有的都被解决,Promise.all()非常有用。 13、控制台输出是什么,为什么? 在这种情况下,我们有&运算符,它与&&运算符完全不同。...&是按位运算符,当我们比较11和3,它将与1011和0011二进制相同。结果,只有都为1位保持为1,返回输出为0011,它是3二进制表示形式, 因此3记录在控制台上。 14、Object。...它返回h,因为数组在JavaScript中是从零开始,因此arr [2] [1]将可以访问外部数组第3个元素和内部数组第2个元素,从而得出“ h”。

    3.5K40

    ECMAScript 2023:为JavaScript带来新数组复制方法

    当我们通过操作让对象产生变异,则会产生一种副作用,导致系统其他位置发生意外行为。 举例来说,当 reverse 一个数组时会发生如下情况。...新方法可随副本变化 此次公布新方法正是为此而生。toSorted、toReversed、toSpliced 和 with 都能复制原始数组、变更副本再返回结果。...Array.prototype.toSorted 其中 toSorted 函数返回一个新、经过排序数组。...,因为原始数组发生了变异。...splice 是在提供索引处删除和添加元素来更改现有数组,再返回一个包含数组中所删除元素数组。toSpliced 则直接返回一个新数组,其中不含被删除元素,且包含所添加元素。

    26510

    【总结】1861- ECMAScript 2023:为JavaScript带来新数组复制方法

    当我们通过操作让对象产生变异,则会产生一种副作用,导致系统其他位置发生意外行为。 举例来说,当 reverse 一个数组时会发生如下情况。...新方法可随副本变化 此次公布新方法正是为此而生。toSorted、toReversed、toSpliced 和 with 都能复制原始数组、变更副本再返回结果。...Array.prototype.toSorted 其中 toSorted 函数返回一个新、经过排序数组。...,因为原始数组发生了变异。...splice 是在提供索引处删除和添加元素来更改现有数组,再返回一个包含数组中所删除元素数组。toSpliced 则直接返回一个新数组,其中不含被删除元素,且包含所添加元素。

    23720

    Vue学习笔记之计算属性和侦听器

    return this.msg } } }) 当我点击按钮时候更改了当前数据...为什么这样呢? 因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变,所有依赖com.currentMsg绑定也更新。...计算属性只有在它相关依赖发生改变才会重新求值。这就意味着只要msg还没有发生变化,多次访问currentMsg计算属性立刻返回之前计算结果,而不比再次执行函数。同样。...每当触发重新渲染,调用方法将总会执行函数。 我们为什么需要缓存?假设我们有一个性能开销比较大计算属性 A,它需要遍历一个巨大数组并做大量计算。然后我们可能有其他计算属性依赖于 A 。...,触发computed中setter方法,从而将newValue,赋值给msg。

    49630

    通过实例,理解 Vue3 响应式设计

    ---- 响应式指的是变量(如:数组、字符串、数字、对象等)在其或它引用任何其他变量在声明后发生更改时更新能力。...上面的代码片段是 JavaScript 非响应式特性经典示例——因此,为什么更改没有反映在 sentence 变量中呢?...需要注意是,当访问在模板部分或 setup() 之外返回 ref 属性,它们 自动浅展开 。这意味着作为对象 refs 仍然需要一个 .value 才能被访问。...从上面的示例中,我们可以看到,当我们使用响应式 cars 对象或 NumberOfHondas 更新 Honda ,两个实例中都会更新。...与 toRefs 不同是,我们不需要担心在创建源数据中是否存在该属性,因为如果在创建此 ref 该属性不存在,而是返回 null,它仍然会被存储 作为一个有效属性,有一个观察者形式,所以当这个改变

    1.6K30

    21个Java Collections面试问答

    当我们put通过传递键值对来调用方法,HashMap使用带有哈希Key hashCode()来查找存储键值对索引。...当我们get通过传递Key来调用method,它再次使用hashCode()在数组中找到索引,然后使用equals()方法找到正确Entry并返回。下图将清楚地解释这些细节。...阈值是容量乘以负载因子,并且如果Map大小大于阈值,则每当我们尝试添加条目,HashMap都会将Map内容重新映射为容量更大数组。...Collection values():返回此映射中包含Collection视图。集合由Map支持,因此对Map更改反映在集合中,反之亦然。...Set > entrySet():返回此映射中包含映射Set视图。该集合由Map支持,因此对Map更改反映在集合中,反之亦然。

    2K40

    【NumPy 数组副本 vs 视图、NumPy 数组形状、重塑、迭代】

    副本拥有数据,对副本所做任何更改都不会影响原始数组,对原始数组所做任何更改也不会影响副本。 视图不拥有数据,对视图所做任何更改都会影响原始数组,而对原始数组所做任何更改都会影响视图。...视图返回原始数组。 NumPy 数组形状 数组形状是每个维中元素数量。 获取数组形状 NumPy 数组有一个名为 shape 属性,该属性返回一个元组,每个索引具有相应元素数量。...这些功能属于 numpy 中级至高级部分。 NumPy数组迭代 迭代意味着逐一遍历元素。 当我们在 numpy 中处理多维数组,可以使用 python 基本 for 循环来完成此操作。...如需返回实际、标量,我们必须迭代每个维中数组。...(arr): print(x) 迭代不同数据类型数组 我们可以使用 op_dtypes 参数,并传递期望数据类型,以在迭代更改元素数据类型。

    13910

    教你如何在 React 中逃离闭包陷阱 ...

    我们知道,React.memo 封装组件上每个 props 都必须是原始,或者在重新渲染是保持不变。否则,memoization 就是不起作用。...我们刚刚就创建了一个所谓 "过期闭包"。每个闭包在创建都是冻结当我们第一次调用 something 函数,我们创建了一个变量中包含 "first" 闭包。...然后,我们把它保存在 something 函数之外一个对象中。 当我们下一次调用 something 函数,我们将返回之前创建闭包,而不是创建一个带有新闭包新函数。...我们在 onClick 中从未更新过,你能告诉我为什么吗? 当然,这又是一个过期闭包。当我们创建 onClick ,首先使用默认状态(undefined)形成闭包。...因此,当我更改 useEffect 中 ref 对象 current 属性,我们可以在 useCallback 中访问该属性,这个属性恰好是一个捕获了最新状态数据闭包。

    61240

    JavaScript常用数组方法

    返回:一个新数组,每个元素都是回调函数返回 concat concat()方法用于合并两个或多个数组 此方法不会更改现有数组,而是返回一个新数组 返回:新Array实例 push push(...)方法将一个或多个元素添加到数组末尾,并返回数组新长度 返回:当调用该方法,新length属性将被返回。...pop pop()方法从数组中删除最后一个元素,并返回该元素。 此方法会更改数组长度。...slice slice()方法返回一个新数组对象,这一对象是一个由begin和end决定数组浅拷贝(包括begin,不包括end) 原始数组不会被改变 返回:一个含有被提取元素数组 shift...find find()方法返回数组中满足提供测试函数第一个元素。否则返回undefined。

    12810

    95道MongoDB面试题(含答案),1万字详细解析!

    字段可以包含其他文档,数组及文档数组。 ? 2、mongodb有哪些特点? (1)MongoDB 是一个面向文档存储数据库,操作起来比较简单和容易。...它是当前备份集群(replica set)中负责处理所有写入操作主要节点/成员。在一个备份集群中,当失效备援(failover)事件发生,一个另外成员变成primary。...更新操作立即发生在旧分片(shard)上,然后更改才会在所有权转移(ownership transfers)前复制到新分片上。...30、当更新一个正在被迁移块(Chunk)上文档时会发生什么? 更新操作立即发生在旧块(Chunk)上,然后更改才会在所有权转移前复制到新分片上。...更新操作立即发生在旧块(Chunk)上,然后更改才会在所有权转移前复制到新分片上。 40、MongoDB在A:{B,C}上建立索引,查询A:{B,C}和A:{C,B}都会使用索引吗?

    8.1K30

    史上最全 python常见面试题(一)

    每次next()被调用时,生成器返回它脱离位置(它记忆语句最后一次执行位置和所有的数据) 区别:生成器能做到迭代器能做所有事,而且因为自动创建了__iter__()和next()方法,生成器显得特别简洁...,find,mv,su,date Python中yield用法 yield简单说来就是一个生成器,这样函数它记住上次返 回在函数体中位置。...经由内存池登记内存到最后还是回收到内存池,并不会调用 C free 释放掉.以便下次使用.对于简单Python对象,例如数值、字符串,元组(tuple不允许被更改)采用是复制方式(深拷贝?...,也就是说当将另一个变量B赋值给变量A,虽然A和B内存空间仍然相同,但当A发生变化时,重新给A分配空间,A和B地址变得不再相同 web框架部分 1.django 中当一个用户登录 A 应用服务器...正向代理 是一个位于客户端和原始服务器(origin server)之间服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得内容返回给客户端

    1.5K10

    函数式编程,真香

    总之,当我们在设计应用程序时候,我们应该考虑是否遵守了以下设计原则。 可扩展性--我是否需要不断地重构代码来支持额外功能? 易模块化--如果我更改了一个文件,另一个文件是否会受到影响?...改变一个全局变量、属性或数据结构 改变一个函数参数原始 处理用户输入 抛出一个异常 屏幕打印或记录日志 查询 HTML 文档,浏览器 Cookie 或访问数据库 举一个简单例子 var counter...我们看到纯函数输出结果是一致,可预测,相同输入会有相同返回,这个其实也被称为引用透明。 引用透明 引用透明是定义一个纯函数较为正确方法。...纯度在这个意义上表面一个函数参数和返回之间映射关系。如果一个函数对于相同输入始终产生相同结果,那么我们就说它是引用透明。 这个概念很容易理解,简单举两个例子就行了。...,修改了原始引用,可以看到原始 arr 变成了 [1, 2, 3]。

    81720

    43道JavaScript面试题

    在我们声明(初始化)它们之前,它们是不可访问。 这被称为“暂时死区”。 当我们在声明变量之前尝试访问变量,JavaScript抛出一个ReferenceError。...首先,变量c为对象保存一个。 之后,我们将d指定为c与对象相同引用。 image.gif 更改一个对象,可以更改所有对象。 ---- 7. 下面代码输出是什么?...虽然它看起来像一个数字,但它并不是一个真正数字:它有一堆额外功能,是一个对象。 当我们使用==运算符,它只检查它是否具有相同。 他们都有3,所以它返回true。...译者注:==引发隐式类型转换,右侧对象类型自动拆箱为Number类型。 然而,当我们使用===操作符,类型和都需要相等,new Number()不是一个数字,是一个对象类型。...当我们想在catch块之外console.log(x),它返回undefined,而y返回2。 ---- 39.

    1.8K20
    领券