一. 前言

这几天在平时练习的时候,发现一个很匪夷所思的问题!就是我的印象中,forEach是可以改变原数组的呀!!!???,but !为什么现在这么简单的字符串数字组成的数组,咋就永远改不了原数组那???咋就这么费劲的吗???

后来,在各种尝试无果后,硬是逼着我,无奈的打开了项目,我就想看看平时我都用的这么理所当然可以改变的forEach到底咋就可以改变了!

后来,仔细一看,我一般在项目中数组操作的都是对象数组,而不是数字字符串数组,接着上网一查才知道根本原因:原来是因为是引用类型与基本数据类型的区别呀!

参考链接:https://blog.csdn.net/Janus_lian/article/details/90403653

二. 详解

1、基本数据类型 -> 死都改不动原数组!

const array = [1, 2, 3, 4];
array.forEach(ele => {ele = ele * 3
})
console.log(array); // [1,2,3,4]

2、引用类型 -> 类似对象数组可以爽快改变偶~

const objArr = [{name: 'wxw',age: 22
}, {name: 'wxw2',age: 33
}]
objArr.forEach(ele => {if (ele.name === 'wxw2') {ele.age = 88}
})
console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]

3、那引用类型 -> 改变整个单次循环的item那? -> NO!不行

const changeItemArr = [{name: 'wxw',age: 22
}, {name: 'wxw2',age: 33
}]
changeItemArr.forEach(ele => {if (ele.name === 'wxw2') {ele = {name: 'change',age: 77}}
})
console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]

4、终极无敌屡试不爽的方法!

// 基本类型可以欧~
const numArr = [33,4,55];
numArr.forEach((ele, index, arr) => {if (ele === 33) {arr[index] = 999}
})
console.log(numArr);  // [999, 4, 55]// 引用类型也可以欧~
const allChangeArr = [{name: 'wxw',age: 22
}, {name: 'wxw2',age: 33
}]
allChangeArr.forEach((ele, index, arr) => {if (ele.name === 'wxw2') {arr[index] = {name: 'change',age: 77}}
})
console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]

总结一下

基本类型我们当次循环拿到的ele,只是forEach给我们在另一个地方复制创建新元素,是和原数组这个元素没有半毛钱联系的!所以,我们使命给循环拿到的ele赋值都是无用功!

专业的概念说就是:JavaScript是有基本数据类型引用数据类型之分的。对于基本数据类型:number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值。而Object对象的真正的数据是保存在堆内存栈内只保存了对象的变量以及对应的堆的地址,所以操作Object其实就是直接操作了原数组对象本身。

forEach 的基本原理也是for循环,使用arr[index]的形式赋值改变,无论什么就都可以改变了。

forEach到底可以改变原数组吗相关推荐

  1. 数组常用方法:是否改变原数组

    改变原数组的: shift:将第一个元素删除并且返回删除元素,空即为undefined unshift:向数组开头添加元素,并返回新的长度 pop:删除最后一个并返回删除的元素 push:向数组末尾添 ...

  2. JavaScript数组方法大全(分为会不会改变原数组)

    若看不懂注释的输出方式可以将代码粘贴到浏览器中执行观看 1. 数组通用方法 Array.from: 将一个类数组转化成数组 类数组:Set, Map,对象等可遍历对象皆为类数组 Array.from( ...

  3. 数组中map遍历会改变原数组吗?

    提到map用法,很多人想到forEach,那么这两种方法的区别是什么?会有人说,forEach会改变原数组:map不会改变原数组,返回一个新数组.事实是这样的吗?答案不是,这种说法不准确,是有条件的. ...

  4. ES6 - 不改变原数组的方法

    示例数据 let users = [{"firstName" : "alex","lastName" : "guo",& ...

  5. JS数组方法中哪些会改变原数组,哪些不会?

    前言 作为一名前端开发人员,我们每天都会与数组打交道.JS 也提供了很多操作数组的原生 API 供我们调用.在这些方法里面,有的方法会改变原数组,有些不会改变原数组.别看这一点小小的区别,往往会造成巨 ...

  6. JS数组方法-改变原数组与不改变原数组的方法集合

    改变原数组的方法 push() push() 方法向数组的 末尾添加 一个或多个元素,并返回新的长度 var arr = ['a','b','c']; console.log( arr.push('d ...

  7. js操作改变原数组的解决方法

    最近在开发的时候发现js中的循环操作会改变原数组,var一个变量承接也不行 甚至连map方法都会改变原数组,下面是解决方法 let a = ['a','b','c'] let b = [[2, 0, ...

  8. 重写数组的方法(改变原数组)

    下图是我自我学习模拟数组时总结的一些重新数组的方法: 本文我们暂不讨论不改变原数组的方法,只谈改变原数组用到的 6 种方法. 改变原数组的方法 push() 按参数顺序向数组尾部添加元素,返回新数组的 ...

  9. 不改变原数组的一些方法

    改变原数组 push / pop / shift / unshift / sort / reverse / splice 不改变原数组 concat / join --> split / toS ...

最新文章

  1. 对现有代码的分析方法随想
  2. python程序实例电话本-零基础案例,别再错过了,动手Python做一个电话本小程序!...
  3. vscode-git中的U,M和D文件标记含义
  4. const 常量_软件特攻队|const常量,不一样的新玩法
  5. 用TensorFlow可视化卷积层的方法
  6. 苏州大学实验报告模板C语言,苏州大学实验报告-实验flash在线编程实验
  7. MongoDB 官方C#驱动 封装 DbHelper
  8. 利用Arena Allocation避免HBase触发Full GC
  9. C#对象赋值出现的诡异问题,或许你也遇到过,有待你的解决
  10. pdg快速转换pdf源码_在手机上快速免费把图片转换成PDF文件
  11. 中兴f477v2超级管理员_中兴本机电信光猫超级密码获取-中兴F412/F460/F612/F660超级密码获取下载V1.0最新版-西西软件下载...
  12. 数据结构——哈希表(散列表)
  13. css中背景图像移动_深入了解:在CSS中使用编码图像(背景图像)
  14. tampermonkey油猴实现自动定时刷新页面,刷访问量
  15. node.js+cocoscreator自研斗地主游戏
  16. 如何用eclipse读取.txt文件
  17. Python成品:运用turtle模块绘画
  18. Linux端类似种子猫的软件,值得一试的四款Linux Torrent客户软件
  19. 腾讯推出“扫码购”,小程序新零售的秘密武器!
  20. mc linux 水桶服务器下载,我的世界craftBukkit水桶服三大平台安装完整教程

热门文章

  1. 你爱我,我爱你,我们“纠缠”在一起
  2. 点击事件第一次没反应,第二次才实现的问题
  3. 电气自动化学c语言有什么作用,电气工程及其自动化专业C语言课程教学改革-2019年教育文档...
  4. 程序员你知道吗?微信这功能开始收费了~
  5. 数字图像处理第六章 ——彩色图像处理(下)
  6. 一文说清DC-DC BUCK电路(非常详细)
  7. html 原生 tooltip,HTMLtooltip - 手册网
  8. 好诗:春风更比路人忙
  9. 【语义分割系列】deeplabv3相关知识点以及pytorch实现(ASSP模块)
  10. SpringBoot第一个程序