在JavaScript中map()方法的基本语法：

最新推荐文章于 2023-12-08 17:54:13 发布

m0_51447556

最新推荐文章于 2023-12-08 17:54:13 发布

阅读量208

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_51447556/article/details/130711026

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在JavaScript中，map()是一个数组方法，它允许你对数组中的每个元素执行一个指定的操作，并返回一个新的数组。map()方法会遍历原始数组的每个元素，并将每个元素传递给回调函数进行处理。回调函数返回的值将被添加到新的数组中。

以下是使用map()方法的基本语法：

const newArray = originalArray.map((currentValue, index, array) => {
  // 操作和转换逻辑
  return transformedValue;
});

参数解释：

currentValue：当前遍历到的元素的值。
index（可选）：当前遍历到的元素的索引。
array（可选）：原始数组。

回调函数可以执行各种操作和转换，例如对每个元素进行计算、修改元素的属性或返回一个新的对象。

下面是一个简单的示例，将数组中的每个元素乘以2并返回新的数组：

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers);  // 输出: [2, 4, 6, 8, 10]

map()方法不会修改原始数组，而是返回一个新的数组，因此可以将其赋值给一个变量来存储转换后的结果。

除了基本的转换，你还可以执行更复杂的操作，如条件判断、字符串处理等。map()方法在处理数组时非常有用，可以简化代码并快速生成新的数组。

在react中v-for的使用：

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

<body>
    <div id="demo">
        
    </div>
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/babel.js"></script>
    <!-- ES6 JSX -->
    <script type="text/babel">
        let data = {
            arr:[
                <p key='1'>a</p>,
                <p key='2'>b</p>,
                <p key='3'>c</p>
            ],
            arr2:[{
                name:"lt",
                age:20
            },{
                name:"ly",
                age:18
            },{
                name:"lh",
                age:24
            }]
        }
        let directive = {
            vFor(arr){
                let arrHtml = arr.map((item,index)=>{
                    console.log(item)
                    return <li key={index}>{item.name}</li>
                })
                //console.log(arrHtml)
                return arrHtml;
            }
        }
        ReactDOM.render(
            <div>
                <ul>
                    {
                        directive.vFor(data.arr2)
                    }
                </ul>
                <p style={{
                    display:'none'
                }}>显示或者隐藏</p>
            </div>,
            document.querySelector("#demo")
        )
    </script>
</body>
</html>