JavaScript - 数组对象中实用好玩的reduce方法

已于 2024-08-12 15:23:57 修改
阅读量392 收藏 16
点赞数 13
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
于 2024-08-12 14:39:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiciqiang/article/details/141086713
版权

         JavaScript中reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

        语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

        参数配置：

参数名描述
callback执行数组中每个值 (如果没有提供  initialValue则第一个值除外)的函数，包含四个参数 
        accumulator累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
        currentValue数组中正在处理的元素。
        index数组中正在处理的当前元素的索引。 如果提供了 initialValue，则起始索引号为0，否则从索引1起始。(可选)
        array调用 reduce()的数组(可选）
initialValue可选。传递给函数的初始值

        对于reduce()方法，很多人不太了解，其实熟悉之后会发现它可以应用在很多场景中。

一、数值类型

1.1 求和

         最常见的则是通过reduce()方法进行求和处理，将每次求的和，传递给下一个迭代函数中继续处理。代码如下：

const total = [10, 20, 5, 8, 10, 120, 89].reduce((total, value) => total + value, 0)
console.log('total:', total)

        运行结果如下图：

1.2 求最小值

        结合Math.min()获取数组中最小值，默认值为数组第一位数值，将每次获取的最小值返回，传递给下一个迭代的回调函数中继续处理。代码如下：

const minValue = [10, 20, 5, 8, 10, 120, 89].reduce((minVal, value) => Math.min(minVal, value), 10)
console.log('min:', minValue)

        运行结果如下较：

1.3 求最大值

        结合Math.max()获取数组中最大值，默认值为数组第一位数值，将每次获取的最大值返回，传递给下一个迭代的回调函数中继续处理。代码如下：

const maxValue = [10, 20, 5, 8, 10, 120, 89].reduce((maxVal, value) => Math.max(maxVal, value), 10)
console.log('max:', maxValue)

        结果如下图：

1.4 数组去重

        可以通过reduce()方法，对数组进行去重处理。默认传入空数组，每次回调函数执行判断空数组中是否存在该值，不存在则追加，并返回newArr到下个迭代的回调函数中继续处理。代码如下：

const arr = [10, 20, 5, 8, 10, 20, 10, 120, 89].reduce(
    (newArr, value) => {
        newArr.indexOf(value) === -1 && newArr.push(value)
        return newArr
    }, [])
console.log('arr:', arr)

        运行结果如下图：

1.5 排序（升序）

        对数组升序排序，结合Array.filter方法过滤出还未参与判断最小值的数据，再使用Math.min获取过滤出来数组中最小值即可，代码如下：

const arr = [10, 20, 5, 8, 120, 89].reduce(
    (newArr, value, index, arr) => {
        // 过滤年上次处理过的数据
        const filter = arr.filter(item => !newArr.includes(item))
        // 获取过滤后数组中最小值
        const minValue = filter.reduce((min, val) => Math.min(min, val), filter[0])
        // 追加到新数组中
        newArr.push(minValue)
        return newArr
    }, [])
console.log('arr:', arr)

        运行后结果如下图：

1.6 排序（降序）

        降序的处理和升序方法一致，只是将求最小值换成求最大值即可，代码如下：

const arr = [10, 20, 5, 8, 120, 89].reduce(
    (newArr, value, index, arr) => {
        // 过滤年上次处理过的数据
        const filter = arr.filter(item => !newArr.includes(item))
        // 获取过滤后数组中最小值
        const maxValue = filter.reduce((max, val) => Math.max(max, val), filter[0])
        // 追加到新数组中
        newArr.push(maxValue)
        return newArr
    }, [])
console.log('arr:', arr)

        运行后结果如下图：

1.7 求平均值

        求平均值方法，则是先求和，当迭代到最后一位数值时，求出总和并除以数组长度，则得出了该数组的平均值，代码如下：

const avg = [10, 20, 5, 8, 120, 89].reduce(
    (total, value, index, arr) => {
        // 当非最后一位数值，返回其和，若是最的一位则求和后除以数组长度 求出平均值
        return index == arr.length - 1 ? (total + value) / arr.length : total + value
    }, 0)
console.log('avg:', avg)

        运行后结果如下图：

二、字符串类型

2.1 拼接字符串

        数组中对于字符串拼接处理，可以通过Array.join()方法来实现，但是reduce()方法也可以实现字符串拼接，代码如下：

const conctStr = ['apple', 'banner', 'pear', 'orange'].reduce(
    (total, value, index, arr) => {
        return index === 0 ? total + value : total + ',' + value
    }, '')
console.log('string: ', conctStr)

        运行结果如下图：

三、数组类型

3.1 扁平化 

        在JavaScript中对数组的扁平化处理，可以通过Array.flat()方法处理，这里将通过reduce()来实现对二维数组的扁平化处理。

3.1.1 二维数组

        先将默认值传入一个空数组，在每次迭代执行回调函数的时候，判断其value为数组还是正常数值，进行归类处理。代码如下：

const newArr = [[1, 3], 50, [80, 100, 23], [32, 15], 39, 23, 1].reduce(
    (newArr, value) => {
        // 如果为数组，则拼接数组并返回
        if(Array.isArray(value)) return newArr.concat(value)
        // 其他则追加到数组中即可
        newArr.push(value)
        return newArr
    }, [])
console.log('arr: ', newArr)

        运行后代码如下图：

3.1.2 多维数组

        上面是对二维数组进行扁平化处理，但是如果遇到更深层次的多维数组，则需要通过递归方法来实现。代码如下：

// 递归处理 多维数组
function flat(arr, prev){
    arr.forEach(item => {
        if(Array.isArray(item)) prev = flat(item, prev)
        else prev.push(item)
    })
    return prev
}

const newArr = [[1, 3], 50, [80, 100, 23, [83, 53]], [32, 15], 39, 23, 1].reduce(
    (newArr, value) => {
        // 如果为数组，则拼接数组并返回
        if(Array.isArray(value)) return flat(value, newArr)
        // 其他则追加到数组中即可
        newArr.push(value)
        return newArr
    }, [])
console.log('arr: ', newArr)

        运行结果如下图：

3.1.3 多维数组扁平化并去重

        如上结果可见，数组中存在重复项，当然在扁平化过程中，也可以做去重处理。代码如下：

// 递归处理 多维数组
function flat(arr, prev){
    arr.forEach(item => {
        if(Array.isArray(item)) prev = flat(item, prev)
        else if(prev.indexOf(item) === -1) prev.push(item)
    })
    return prev
}

const newArr = [[1, 3], 50, [80, 100, 23, [83, 53]], [32, 15], 39, 23, 1].reduce(
    (newArr, value) => {
        // 如果为数组，则拼接数组并返回
        if(Array.isArray(value)) return flat(value, newArr)
        // 其他则追加到数组中即可
        if(newArr.indexOf(value) === -1) newArr.push(value)
        return newArr
    }, [])
console.log('arr: ', newArr)

        运行结果中重复项则不存在了，如下图：

 3.2 筛选数据

        在数组对象中，可以通过Array.filter()方法来筛选出需要的数据，但通过reduce()方法也可以实现这一功能。代码如下：

const result = [
        {name: "Tom", age: 12},
        {name: "John", age: 15},
        {name: "Olivia", age: 14},
        {name: "Amelia", age: 12},
        {name: "Corneia", age: 13},
        {name: "Lily", age: 12},
    ].reduce((nArr, item) => {
        item['age'] == 12 && nArr.push(item)
        return nArr
    }, [])
console.log('result', result)

        运行结果如下：

3.3 模拟map()方法

        在javascript中，数组对象的map()方法，是通过指定函数处理数组的每个元素，并返回处理后的新数组。在这通过reduce()方法也可以实现，代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    }
]
// 返回新数组
const result = arr.reduce((arr, item) => arr.concat([item]), [])
console.log('result', result)

        运行结果如下：

[
  { id: 10023, name: 'John', age: 20, address: '北京市中南海', gender: '男' },
  {
    id: 10024,
    name: 'Amerlia',
    age: 23,
    address: '北京市中南海',
    gender: '男'
  },
  { id: 10025, name: 'Lily', age: 21, address: '北京市中南海', gender: '女' }
]

四、对象类型

4.1 数组转换对象

        将二维数组中的值，通过对象的键值对的形式展示出来，代码如下：

const result = [
        ["Tom", 12],
        ["John", 15],
        ["Olivia", 14],
        ["Amelia", 12],
        ["Corneia", 13],
        ["Lily", 12]
    ].reduce((obj, item) => {
        if(Array.isArray(item) && item.length == 2) obj[item[0]] = item[1] 
        return obj
    }, {})
console.log('result', result)

        运行结果如下图：

4.2 通过key值提取数据

        例如在表格中，当用户点击“修改按钮”时，要从行数据中提取修改所需要的初始参数，如每个单独取出不仅麻烦，还容易出错。这里则可以通过reduce()方法，统一提出并组装成Object返回。代码如下：

// 表格中 行数据
const rowData = {
    id: 10023,
    name: "John",
    age: 20,
    address: "北京市中南海",
    gender: '男',
    originAddress: "山东威海",
    status: 1,
    birthday: "1988/10/30",
    wage: 3000
}
// 要提取的 编辑数据
const editData = ["id", "name", "age"].reduce((obj, key) => {
                    if(rowData[key]) obj[key] = rowData[key]
                    return obj
                }, {})
console.log('result', editData)

        运行结果如下图：

4.3 对象与对象合并

        在某些需求中，要将数组中每个对象元素，合并成一个Object再进行业务处理，这也可以使用reduce()方法来实现。代码如下：

// 数据
const arrList = [
    {
        id: 10023,
        name: "John",
        age: 20,
        gender: '男'
    },
    {
        address: "北京市中南海",
        originAddress: "山东威海"
    }
]
// 将每个元素合并到一个对象中
const result = arrList.reduce((obj, item) => Object.assign(obj, item), {})
console.log('result', result)

        运行结果如上图：

4.4 模拟find()方法

        在javascript中，数组对象的find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

        这里则通过reduce()方法实现查询数组第一个满足条件的元素，否则返回null。代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    },
]
// 查询数组中第一个为 name为Amerlia数据
const result = arr.reduce((obj, item) => {
    if(null === obj && item.name == 'Amerlia') obj = item
    return obj
}, null)
console.log('result', result)

        运行结果如下图：

        通过reduce()方法实现查询数组最后一个满足条件的元素，否则返回null。代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    },
    {
        id: 10026,
        name: "Amerlia",
        age: 19,
        address: "北京市中南海",
        gender: '男'
    }
]
// 查询数组中最后一个为 name为Amerlia数据
const result = arr.reduce((obj, item) => {
    if(item.name == 'Amerlia') obj = item
    return obj
}, null)
console.log('result', result)

        运行结果如下图：

        获取第一个满足条件的元素，和获取最后一个满足条件的元素，实是只在obj上的区别。

  • 获取一个满足条件元素，当obj值不为null时，则后期元素都不判断了，直接返回第一次匹配上的元素即可。
  • 获取最后一个满足条件元素，不管obj值是否为null，都将判断到最后一个元素为止。

4.5 归类处理

        当一个数组中，出现多个name重名的元素，则可以通过reduce()将其归类处理。代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    },
    {
        id: 10026,
        name: "Amerlia",
        age: 19,
        address: "北京市中南海",
        gender: '男'
    }
]
// 归类数据
const result = arr.reduce((arr, item) => {
    // 当新name对应字段为undefined时，为对创建一个并赋值空数组
    if('undefined' === typeof arr[item.name]) arr[item.name] = []
    // 追加到对应分类中
    arr[item.name].push(item)
    return arr
}, [])
console.log('result', result)

        运行结果如下：

[
  John: [
    {
      id: 10023,
      name: 'John',
      age: 20,
      address: '北京市中南海',
      gender: '男'
    }
  ],
  Amerlia: [
    {
      id: 10024,
      name: 'Amerlia',
      age: 23,
      address: '北京市中南海',
      gender: '男'
    },
    {
      id: 10026,
      name: 'Amerlia',
      age: 19,
      address: '北京市中南海',
      gender: '男'
    }
  ],
  Lily: [
    {
      id: 10025,
      name: 'Lily',
      age: 21,
      address: '北京市中南海',
      gender: '女'
    }
  ]
]

五、布尔类型

5.1 模拟every()方法

         在javascript中，数组对象的every()方法，是用来检测数值元素的每个元素是否都符合条件。其实使用reduce()方法，也可以实现其结果。

        判断数组中，是否子元素都为数组类型。代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
]
// 如果flag为true，并且item为数组类型，则返回true。如果其中一个不是数组，则返回false
const result = numbers.reduce((flag, item) => flag && Array.isArray(item), true)
console.log('result', result)

        运行结果如下图：

        将numbers数组中添加一个非数组类型数据，再查看下结果。代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2],
    10
]
// 如果flag为true，并且item为数组类型，则返回true。如果其中一个不是数组，则返回false
const result = numbers.reduce((flag, item) => flag && Array.isArray(item), true)
console.log('result', result)

        运行结果如下图：

5.2 模拟some()方法

        在javascipt中，数组对象的some()方法，是用来检测数组元素中是否有元素符合指定条件。在这也可以通过reduce()方法，来实现这一结果。

        判断数组中，子元素是否存在非数组类型元素。（注意：默认值 传false）代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    10,
    [1,6, 8, 5, 4, 2]
]
// 如是有一个元素为非数组，则返回true。
// 当flag被赋值为true后，则后续不会执行到!(Array.isArray(item))，直接返回flag结果
const result = numbers.reduce((flag, item) => flag || !(Array.isArray(item)), false)
console.log('result', result)

        运行结果如下：

        此时将数组中全部改为数组类型，再查看下结果。代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
]
// 如是有一个元素为非数组，则返回true
const result = numbers.reduce((flag, item) => flag || !(Array.isArray(item)), false)
console.log('result', result)

        运行结果如下图：

5.3 模拟includes()方法

        在javascript中，数组对象的includes()方法，是用来判断一个数组是否包含一个指定的值。这里也可以通过reduce()方法实现这一结果，代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
]
// 判断数组中是否存在100
const result = numbers.reduce((flag, item) => flag || item.indexOf(100) !== -1, false)
console.log('result', result)

        结果如下图：

        此判断逻辑，则和模拟some()方法是相似的。都是将默认值先置为false，当其中一项为true时，后续都为true，最终返回true结果。

六、自定义reduce()方法

        由此可见，reduce()方法可以使用在多种场景中，其灵活性较强，能实现千变化化的结果。而且这些丰富的api方法，是在ES6版本基础之上新增的，如果一些老项目中也希望拥有reduce()方法，则可以自行实现。代码如下：

// 实现reduce()方法
Array.prototype.myReduce = function(callback, preValue){
    for(var i = 0; i < this.length; i++) {
        // 如果上个值未定义，则默认取第一个
        if('undefined' === typeof preValue) {
            // 第一个值为默认值，从第二个值开始迭代
            preValue = callback(this[i], this[i + 1], i + 1, this)
            i++ // 迭代到下一个
        } else {
            preValue = callback(preValue, this[i], i, this)
        }
    }
    return preValue
}
// 求和
const result = [1, 2, 3, 4, 5].myReduce(function(total, value){
    return total + value
}, 0)
console.log('result', result)

        运行结果如下图：

        

觉醒法师
关注
  • 13
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript类数组对象转换为数组对象的方法实例分析
12-04
本文实例分析了JavaScript类数组对象转换为数组对象的方法。分享给大家供大家参考，具体如下： 1、类数组对象： 拥有length属性，可以通过下标访问； 不具有数组所具有的方法。 2、为什么要将类数组对象转换为数组...
JavaScript中数组对象的那些自带方法介绍
12-11
/** * 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method。 * 全文没啥营养，不过最后性能测试的部分，倒是抛出了一些疑问。 */ 赋值方法 （Mutator methods） 这些方法直接修改数组自身 pop 和 push Array.pop...
JavaScript-数组方法-删除、插入、替换.源码
04-30
JavaScript_数组方法-删除、插入、替换.源码
js代码-数组对象根据某个值相同合并分组
07-14
总之，理解并熟练运用JavaScript中的数组方法，尤其是`reduce()`，对于处理和组织数据至关重要。通过这种方式，我们可以高效地对数组对象进行分组和合并，从而更好地管理和展示数据。在阅读和学习`main.js`文件时，...
详解JavaScript中数组的reduce方法
10-20
js函数中有三个在特定场合很好用的函数:...而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 417
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 578
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
song854601134的博客
08-12 117
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 414
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 307
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Markdown】Markdown 中的语言简称
最新发布
EleganceJiaBao的博客
08-12 438
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 458
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
【Ajax使用说明】Ajax、Axios以及跨域
aaaa_aaab的博客
08-12 638
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
【Vue3】图片未加载成功前占位
菜就多练
08-08 328
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
高级java每日一道面试题-2024年8月12日-网络篇-说一下JSONP的实现原理?
qq_43071699的博客
08-12 365
JSONP是一种非官方的跨域数据交换协议，它允许在网页中通过标签的src属性从其他域名（网站）安全地获取数据。由于浏览器的同源策略限制，直接通过Ajax等方式跨域请求数据通常是不被允许的，而JSONP则巧妙地绕过了这一限制。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 165
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1598
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 834
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
ECMAScript6中的模块：export导出、import导入
pan_junbiao的博客
08-12 567
早期的 JavaScript 程序很小，通常被用来执行独立的脚本任务，在 Web 页面中需要的地方提供一定的交互。随着 Web 应用程序变得越来越复杂，有必要考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，这就是模块化编程。模块化编程就是将一个复杂的程序根据一定的规则封装成一个或多个文件，并组合在一起。使用这种方式，可以将代码分解到多个文件中，每个文件都称为一个模块。一个模块通常是一个类或者多个函数组成的方法库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值