掘金者说-js练习map笔记

最新推荐文章于 2022-11-25 20:42:24 发布

掘金者说

最新推荐文章于 2022-11-25 20:42:24 发布

阅读量261

点赞数 1

分类专栏：掘金者说文章标签： js javascript

本文链接：https://blog.csdn.net/u010638673/article/details/106920409

版权

掘金者说专栏收录该内容

35 篇文章 0 订阅

订阅专栏

掘金者说-JavaScript简化笔记

简化前端脚本工作时候，做个小笔记，前端需要用到的JavaScript写法，在此记录一下自己再使用.find()、.map()、.filter()…。这些都是许多其他语言中存在的概念，所以适用于自己可能使用的任何其他编程语言。

使用map例子

目前有一些商品的数据,我们使用简单的例子来了解它是如何工作的。

 goodsData = [
    {id:1001, name: '苹果'},
    {id:1002, name: '香蕉'},
    {id:1003, name: '葡萄'},
    {id:1004, name: '油奈'},
 ]

使用forEach

// 必须事先穿件一个空数组
var goodsIds = [];
goodsData.forEach( goods => {
    goodsIds.push(goods.id);
});
console.log(goodsIds)

输出：

> Array [1001, 1002, 1003, 1004]

使用map

// 写法1 需要ES6支持，Babel或TypeScript
var goodsIds1 = goodsData.map(goods => {
    return goods.id
})
console.log(goodsIds1)

// 写法2
const goodsIds2 = goodsData.map(goods => goods.id);
console.log(goodsIds2)

以上基本上都要有两个参数，一个回调和一个可选上下文的。回调正度数组中的每个值运行，并返回结果数组中的每个新增。

其他案例：

 goodsData = [
    {goodsId:1001, goodsName: '苹果',goodsType: 1},
    {goodsId:1002, goodsName: '香蕉',goodsType: 1},
    {goodsId:1003, goodsName: '葡萄',goodsType: 1},
    {goodsId:1004, goodsName: '油奈',goodsType: 1},
    {goodsId:1005, goodsName: '白菜',goodsType: 2},
    {goodsId:1006, goodsName: '花菜',goodsType: 2},
 ]


//将商品ID转换字符串IDs，与此同时可以filter里面的 e.goodsId 相等于 e.checked 复选框
const ids = goodsData.filter( e => e.goodsId).map(e => e.goodsId).join(',')
console.log(ids)

//将商品中查找指定商品对象，例如：商品ID为1001
const item = goodsData.find( e => e.goodsId === 1001)
console.log(item)

// 获取商品总数量，与此同时可以filter里面的 e.goodsId 相等于 e.checked 复选框
const size = goodsData.filter( e => e.goodsId).length
console.log(size)