forEach和map

lianflower

已于 2022-09-22 14:22:56 修改

阅读量60

点赞数

文章标签： javascript 前端 java

于 2022-09-21 20:31:01 首次发布

本文链接：https://blog.csdn.net/lianflower/article/details/126980047

版权

JavaScript 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

js中map()是否会改变原数组_周末笔记的博客-CSDN博客_js map 改变原数组

forEach到底可以改变原数组吗？ - 掘金

面试：Map和forEach的区别 - 掘金

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // forEach和map都可以用来遍历数组
        // forEach返回undefined，map返回遍历后的新数组（map中要使用return域据返回，不然返回的新数组中的值全是undefined）
        // 如果数组中的元素是基本类型，则无法改变原数组
        // 如果数组中的元素是引用类型，则可以改变原数组，但是不能改变整个item，例如将[{name: 'coco'}, {name: 'lanlan'}]改为[1, {name: 'lanlan'}]，这种情况无法改变原数组
        // 其实即使是基本类型，在遍历时也可以使用原数组+索引改变原数组：原数组名[index]
        // 对于引用类型，如果不想改变原数组，则可以先对原数组进行深拷贝，然后遍历深拷贝后的新数组
        // map可以执行链式调用，可以在遍历完后执行filter、reduce等方法，foreach则不能
        // foreach和map在遍历时都不能使用break语句中断，会报异常，如果非要使用break，则可以使用for循环遍历


        
        // 如果数组中是基本类型，则无法改变原数组
        // let arr = [1, 2, 3];
        // let result = arr.forEach(e => {
        //     e = e * 2;
        // })
        // console.log(arr);               // [1, 2, 3]
        // console.log(result);            // undefined

        // let arr = [1, 2, 3];
        // let result = arr.forEach(e => {
        //     e = e * 2;
        //     return e;
        // })
        // console.log(arr);               // [1, 2, 3]
        // console.log(result);            // undefined

        // let arr = [1, 2, 3];
        // let result = arr.map(e => {
        //     e = e * 2;
        // })
        // console.log(arr);               // [1, 2, 3]
        // console.log(result);            // [undefined, undefined, undefined]

        // let arr = [1, 2, 3];
        // let result = arr.map(e => {
        //     e = e * 2;
        //     return e;
        // })
        // console.log(arr);                // [1, 2, 3]
        // console.log(result);             // [2, 4, 6]




        // 如果数组中是引用类型，则可以改变原数组，但是不能改变整个item，例如想把[{name: 'coco'}, {name: 'lanlan'}]改为[1, {name: 'lanlan'}]
        // let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        // let result = arr.forEach(e => {
        //     e.name = e.name + 'xx';
        // })
        // console.log(arr);               // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]
        // console.log(result);            // undefined

        // let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        // let result = arr.forEach(e => {
        //     e.name = e.name + 'xx';
        //     return e;
        // })
        // console.log(arr);               // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]
        // console.log(result);            // undefined

        // let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        // let result = arr.map(e => {
        //     e.name = e.name + 'xx';
        // })
        // console.log(arr);               // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]
        // console.log(result);            // [undefined, undefined, undefined]

        // let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        // let result = arr.map(e => {
        //     e.name = e.name + 'xx';
        //     return e;
        // })
        // console.log(arr);               // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]
        // console.log(result);            // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]


        // 但是不能改变整个item
        // let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        // let result = arr.forEach(e => {
        //     if (e.name == 'coco') {
        //         e = {
        //             name: 'cocoxx'
        //         }
        //     }
        // })
        // console.log(arr);               // [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}]
        // console.log(result);            // undefined

        // let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        // let result = arr.map(e => {
        //     if (e.name == 'coco') {
        //         e = {
        //             name: 'cocoxx'
        //         }
        //     }
        // })
        // console.log(arr);               // [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}]
        // console.log(result);            // [undefined, undefined, undefined]




        // 其实即使是基本类型，在遍历时也可以使用原数组+索引改变原数组的值：原数组名[index]
        // let arr = [1, 2, 3];
        // let result = arr.forEach((e, index) => {
        //     arr[index] = e * 2;
        // })
        // console.log(arr);               // [2, 4, 6]

        // let arr = [1, 2, 3];
        // let result = arr.map((e, index) => {
        //     arr[index] = e * 2;
        // })
        // console.log(arr);               // [2, 4, 6]

        

        
        // 对于引用类型，如果不想改变原数组，则可以先对原数组进行深拷贝，然后遍历深拷贝后的新数组
        let arr = [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}];
        let newArr = JSON.parse(JSON.stringify(arr));
        let result = newArr.map(e => {
            e.name = e.name + 'xx';
            return e;
        })
        console.log(arr);               // [{name: 'coco'}, {name: 'mumu'}, {name: 'lanlan'}]
        console.log(newArr);            // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]
        console.log(result);            // [{name: 'cocoxx'}, {name: 'mumuxx'}, {name: 'lanlanxx'}]

    </script>
</body>
</html>