首页
学习
活动
专区
工具
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()方法的时候,究竟发生了什么。

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

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

    57910

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

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

    38520

    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)方法。

    45330

    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 则直接返回一个新数组,其中不含被删除的元素,且包含所添加的元素。

    27810

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

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

    24120

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

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

    49830

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

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

    1.7K30

    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

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

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

    68740

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

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

    15710

    JavaScript常用数组方法

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

    13110

    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.6K10

    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

    函数式编程,真香

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

    82520
    领券