数组的遍历方法的区别

数组的5中遍历方法,forEach,map,some,every,filter

1.forEach

没有返回值(返回值为undefined),可以改变数组本身

forEach到底可以改变原数组吗?

这几天在平时练习的时候,发现一个很匪夷所思的问题!就是我的印象中,forEach是可以改变原数组的呀!!!???,but !为什么现在这么简单的字符串数字组成的数组,咋就永远改不了原数组那???咋就这么费劲的吗???
后来,在各种尝试无果后,硬是逼着我,无奈的打开了项目,我就想看看平时我都用的这么理所当然可以改变的forEach到底咋就可以改变了!
后来,仔细一看,我一般在项目中数组操作的都是对象数组,而不是数字字符串数组,接着上网一查才知道根本原因:原来是因为是引用类型与基本数据类型的区别呀!

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

    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]的形式赋值改变,无论什么就都可以改变了。

2.map

返回一个新的数组

var arr = [12, 3]
let aa = arr.map(item=>item*2)
console.log(arr,aa) //[12,3]   [24,6]

3.filter

返回新数组,里面的值为符合要求的值

var arr = [12, 3]
let aa = arr.filter(item=>item>5)
console.log(arr,aa) //[12,3]   [12]

4.every

对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true
原数组不变,返回值为布尔值

var arr = [12, 3]
let aa = arr.every(item=>item>5)
console.log(arr,aa) //[12,3]  false
let bb = arr.every(item=>item>2)
console.log(arr,bb) //[12,3]  true

5.some

对数组中的每一项运行给定的函数,如果该函数对只要其中一项返回true,则返回true;
原数组不变,返回值为布尔值

var arr = [12, 3]
let aa = arr.some(item=>item>5)
console.log(arr,aa) //[12,3]  true
let bb = arr.some(item=>item>22)
console.log(arr,bb) //[12,3]  false
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值