一. 前言

这几天在平时练习的时候,发现一个很匪夷所思的问题!就是我的印象中,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. 显微镜下的大明内容_《显微镜下的大明》epub、mobi、azw3
  2. Django 操作Mysql数据库 对表进行增删改查
  3. 如何为linux释放内存和缓存
  4. PHP基础封装简单的MysqliHelper类
  5. 你是AI王者吗?2018人工智能专业期末考试,66666奖学金等你来
  6. 获得无向图连通子图_讲透学烂二叉树(一):图的概念和定义—各种属性特征浅析...
  7. [翻译]asp.net ajax xml-script教程(二)
  8. 数据结构之栈的应用:表达式求值
  9. DWR自学笔记(1)HelloWorld
  10. java比赛_javamq
  11. DataGridView 禁用自动生成列
  12. wdatepicker不展示秒_华为电源键只能开关机?其实还隐藏了这5个作用,一般人不知道...
  13. LeetCode 669. 修剪二叉搜索树(Trim a Binary Search Tree)
  14. vue无法监听对象的属性的增加和删除
  15. 基于java的KTV点歌选歌系统
  16. 如何快速将 Linux 系统制作成 ISO 镜像文件?
  17. 计算机光驱里有硬盘,笔记本电脑光驱位装机械硬盘有以下危害
  18. (1)QlikView概述
  19. UPS BP650CH实现nas自动关机
  20. 用python创建widows窗口

热门文章

  1. AtCoder题解——Beginner Contest 170——E - Smart Infants
  2. 邵阳学院计算机系老师,谢兵(信息工程系)老师 - 邵阳学院 - 院校大全
  3. 怎么使用JavaScript代码?
  4. html 变量命名规范,JavaScript 变量命名规则
  5. 盖茨连续12年福布斯富豪榜第1(附排名)
  6. access sql 取余_SQL 教程
  7. 论创新工场、职业发展、offer如何比较选择、移动互联网
  8. git push--解决 /etc/ssh/ssh_config: Bad configuration option: permitrootlogin 问题
  9. python中change的用法_Python pandas.DataFrame.pct_change函数方法的使用
  10. npm插件XLSX使用记录