es6 引用数组，数组发生改变 （es6 引用类型的数据引用的时候怎么不改变原始数据）

最新推荐文章于 2023-11-30 16:02:57 发布
最新推荐文章于 2023-11-30 16:02:57 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： es6 vue js 文章标签： es6引用类型数据和基本类型数据 vue引用数据 vue引用数据类型引用的时候如何不改变原始值 es6 如何引用数组不改变其原始值 es6引用类型数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hero_rong/article/details/85601159
版权
vue 同时被 3 个专栏收录
53 篇文章 1 订阅
订阅专栏
js
48 篇文章 1 订阅
订阅专栏
es6
18 篇文章 1 订阅
订阅专栏

 

 

vue项目 ，定义了一个变量，然后 this.requirements 和 this.showRequirements 都赋值为 requ ，在 this.requirements 发生改变

之后， this.showRequirements 也发生了改变 。但是我并不想它改变 。

为什么会改变呢？因为数组是引用类型的数据，所以，当指向为同一个指针的时候，改变这个数组的值会影响到另一个指针所指代的值（即同步）。

我这里用的是es6的语法，可以复制一个数组比如：this.requirements = [...requ] ，复制数组，原始数组不会改变 。 

科普一下：基本类型的数据，引用的时候数据不会发生变化，引用类型的数据，引用的时候原始数据会发生变化。

基本类型：number ,string, 布尔值，undefined，null

引用类型：对象，数组，除了基本类型的都是引用类型

 

 

Hero_rong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6之 二进制数组
01-08
ES6之 二进制数组 二进制数组（ArrayBuffer对象、 TypedArray 视图和DataView视图）是 JavaScript 操作二进制数据的一个接口。这些对象早就存在，属于独立的规格， ES6 将它们纳入了 ECMAScript 规格，并且增加了新...
js引用复制如何改变复制数组不改变原数组
衣乌安、随笔
08-18 1万+
我们需要知道的是object和array类型的变量为引用类型，也就是说其存储的实际上并不是具体的值而是一个指向堆内存的地址。 因此当我们把一个引用类型如‘数组’，赋值给另一个变量时，实际上是把另一个变量指向了与之相同的地址，当我们改变其中一个时，实际上改变了堆内存中的存储内容　，相应的所有指向该地址的数组都发生了变化： 有时我们并不想要类似的事情发生要如任何解决呢？下面介绍两种简单的方法 ...
数组方法中会更改原数组，不会更改原数组（详细）
qq_20623665的博客
12-23 2507
数组方法中会更改原数组，不会更改原数组 如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。会提取原数组中从第二个元素开始一直到第四个元素的所有元素（索引为 1, 2, 3 的元素）。
js对象或数组赋值不改变原对象或数组
就是这么屌
02-01 3145
js对象和数据赋值
不影响原数组的方法
最新发布
babywenever的博客
11-30 27
【代码】不影响原数组的方法。
es6,js 数组截取并保留原数组
周家大小姐
08-10 2362
const timeData = ['2021/8/5', '2021/8/6', '2021/8/7', '2021/8/8', '2021/8/9', '2021/8/10', '2021/8/11'] const timeDatax = timeData.map((item) => item.slice(5)) console.log('timeDatax', timeDatax) console.log('tim...
JavaScript 改变赋值的数组对象值不改变原数组对象的值
MyNameIsXiaoLai的博客
01-23 1407
https://blog.csdn.net/qq_24909089/article/details/84023581 问题原因： 原始值和引用值 在 ECMAScript 中，变量可以存在两种类型的值，即原始值和引用值。 原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。 引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（p...
面试官：JavaScript中使用forEach会改变原来的数组吗?
zhangwenok的博客
05-15 4588
面试官：JavaScript中使用forEach会改变原来的数组吗? JavaScript是有基本数据类型与引用数据类型之分的。
基本类型、包装类型、引用类型、String等作为实参传递后值会不会改变？
十一月廿七风雨大作
03-05 3325
在局部变量表中，JVM 会为每个基本数据类型变量分配一定的存储空间，并将其存储在栈帧中。例如，一个 int 类型的变量需要 4 个字节的存储空间，JVM 会在局部变量表中分配 4 个字节的空间，并将其用于存储该变量的值。具体来说，引用类型变量在栈中分配一个固定大小的存储空间，用于存储指向堆中对象的地址。如果该引用类型变量没有被使用，那么在垃圾回收器执行垃圾回收时，该对象会被回收，其在堆中占用的存储空间会被释放。3、当方法执行完毕并返回时，会将方法返回值压入栈中，同时将栈帧出栈，方法的局部变量表也随之销毁。
ES6&tip1——forEach()能不能改变原数组？
weixin_45740510的博客
04-27 758
文章目录forEach()介绍forEach()能不能改变原数组？1、数组的元素是基本数据类型2、数组的元素是引用数据类型(直接修改整个元素对象时，无法改变原数组)3、数组的元素是引用数据类型：（修改`元素对象`里的某个属性时，可以改变原数组）如果你需要通过 forEach 修改原数组，建议用 forEach 里面的参数 2 和参数 3 来做，具体请看下面的标准做法 forEach()介绍 forEach()方法需要一个回调函数（这种函数，是由我们创建但不是由我们调用的）作为参数 回调函数中传递三个参数：
改变原数组的方法和不改变原数组的方法
sunxiaobai1的博客
03-04 2966
改变原数组的方法和不改变原数组的方法 1.改变原数组的方法 var arr = [] arr.splice() arr.reverse() arr.fill() arr.copyWithin() arr.sort() arr.push() arr.pop() arr.unshift() arr.shift() arr.splice() // 1.删除功能。 let arr = ['a', 'b', 'c', '
关于JavaScript数组去重的一些理解汇总
11-19
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。 关键字：任何类型都可以存储、...
helper-meth:Ruby喜欢Javascript中针对原始数据类型的有用的帮助器方法。 不太冗长
05-15
JavaScript中有关字符串，数组，对象，数字的有用方法 ES6中引入的Array's includes方法的改进版本。 对数组和对象内的值进行深度/嵌套检查。 使用递归。 有速记方法 一些方法的灵感/命名来自于ruby语言。 安装 ...
JavaScript 数据类型
01-21
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 JavaScript 拥有动态类型 JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型： 实例 var x;  // x 为 undefinedvar x = 5;  ...
面试食谱：学习数据结构，算法和面向对象概念的游乐场
02-05
面试食谱 该存储库将包含几个代码段以及有关数据结构，算法和面向对象概念的有用资源。 Feel free to contribute to this ... 映射是一个对象，可让我们存储键值对，其中键和值都可以是对象，原始值或两者的组合。
在vue项目中 ， 将字符串转数组 split（）
热门推荐
Hero_rong的博客
12-21 8万+
console.log(this.cityItem.fullName); console.log(this.cityItem.fullName.split('')); 在vue项目中，遇到一个常用的方法split（），因为常用，又容易记混，所以在此记录 split(' ') ，将字符串以空格为界限切割为数组， 引号里面可以写参数，比如...
es6 删除数组指定元素
Hero_rong的博客
12-14 4万+
arr.splice(arr.findIndex(item => item.id === id), 1) //item 只是参数可以写成 i 或者 v 都可以 ， //后面的额id是数组的id，是不能随便写的，如果你数组里面写的是id，这里就写id，如果数组里面写的是num，那这里就写num ， //=== 后面的id是你想要删除的元素的id号，同理，如果你数组里面写的是num，那这里...
vue 滚动条到顶部或者到指定位置
Hero_rong的博客
12-26 3万+
首先在 html 里面给你要滚动的元素设置属性ref='box' 这就相当于是DOM操作了 ， 然后 根据 属性名找到则个元素就可以操作啦，嘻嘻
element el-input 去掉边框
Hero_rong的博客
11-19 3万+
element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的 我们需要这样子的 然后我们常规操作，border: none;或者 border: 0; 发现行不通，哈哈哈哈哈 tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。 然后就就，就发现个好东西，>>>， &g...
es6数组filter
09-10
### 回答1： ES6中的数组filter()方法用于从数组中筛选出符合条件的元素，并将这些元素以一个新的数组形式返回。它接收一个回调函数作为参数，该回调函数用于检查数组中的每个元素是否符合条件。 filter()方法的语法如下： ``` array.filter(callback[, thisArg]) ``` 其中，callback是一个函数，它可以接收三个参数： - currentValue：当前元素的值。 - index（可选）：当前元素在数组中的下标。 - array（可选）：当前数组对象。 此外，filter()方法还可以接收一个可选的thisArg参数，用于指定callback函数中this关键字的值。 下面是一个示例代码，演示如何使用filter()方法从数组中筛选出所有大于等于10的元素： ``` const numbers = [2, 5, 8, 10, 15, 20]; const filteredNumbers = numbers.filter(function(number) { return number >= 10; }); console.log(filteredNumbers); // [10, 15, 20] ``` 在上面的代码中，我们定义了一个名为numbers的数组，然后使用filter()方法从该数组中筛选出所有大于等于10的元素，并将这些元素存储在一个名为filteredNumbers的新数组中。最后，我们使用console.log()方法输出filteredNumbers数组的内容，以验证过滤操作是否成功。 ### 回答2： ES6中的数组filter()是一种用于遍历数组并根据指定条件筛选出符合条件的元素的方法。 filter()方法通过传入一个函数作为参数来实现筛选功能。该函数接受当前被遍历的数组元素作为参数，并返回一个布尔值。返回true的元素将被保留在新的数组中，而返回false的元素将被过滤掉。 下面是一个示例： ```javascript const numbers = [1, 2, 3, 4, 5]; // 使用filter()方法筛选出所有大于2的数字 const filteredNumbers = numbers.filter(number => number > 2); console.log(filteredNumbers); // 输出 [3, 4, 5] ``` 在上面的例子中，原始数组numbers有5个元素。通过使用filter()方法，并传入一个箭头函数作为参数，我们筛选出所有大于2的数字。最终，被保留下来的数字被存储在新的数组filteredNumbers中，并通过打印输出。 filter()方法不会改变原始数组，而是返回一个新的数组，其中包含符合条件的元素。因此，我们可以将其结果赋值给一个新的变量。 除了箭头函数，我们还可以将一个名为predicate（断言）的普通函数作为filter()方法的参数。例如： ```javascript const numbers = [1, 2, 3, 4, 5]; // 所有能被2整除的数字 function isEven(number) { return number % 2 === 0; } const evenNumbers = numbers.filter(isEven); console.log(evenNumbers); // 输出 [2, 4] ``` 在这个例子中，我们定义了一个名为isEven()的函数，用于判断一个数字是否为偶数。然后，我们通过传递isEven函数作为参数给filter()方法来筛选出所有偶数。最终，结果存储在变量evenNumbers中并通过打印输出。 总结来说，ES6中的数组filter()方法提供了一种便捷的方式来筛选出数组中符合条件的元素，使我们可以轻松地处理数组数据。 ### 回答3： ES6中的数组filter()方法可以根据指定的条件过滤数组中的元素并返回一个新的数组。filter()方法接收一个回调函数作为参数，该函数在对数组的每个元素进行遍历时被调用。 回调函数接收三个参数，分别是当前遍历的元素、元素的索引和原始数组。该回调函数返回一个布尔值，如果返回为true，那么该元素就会被包含在最终的新数组中，否则会被过滤掉。 例如，我们有一个数组arr = [1, 2, 3, 4, 5]，我们想要过滤出所有的偶数。我们可以使用filter()方法来实现这个功能： ``` const arr = [1, 2, 3, 4, 5]; const evenNumbers = arr.filter((num) => num % 2 === 0); console.log(evenNumbers); // 输出 [2, 4] ``` 在上述代码中，回调函数`(num) => num % 2 === 0`检查每个元素是否为偶数，如果是偶数，则返回true，否则返回false。filter()方法根据返回值来决定是否将该元素添加到新数组evenNumbers中。 需要注意的是，filter()方法不改变原始数组，而是返回一个新的数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值