记录一些常用的javascript语法：日期类型、集合类型

最新推荐文章于 2024-06-25 22:45:00 发布

shiyueshis

最新推荐文章于 2024-06-25 22:45:00 发布

阅读量128

点赞数

分类专栏：小技巧文章标签： javascript

本文链接：https://blog.csdn.net/shiyueshis/article/details/106588197

版权

小技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习js-F12查看浏览器console</title>
</head>

<body>
    <script>
        // 1. 日期 参考：https://wangdoc.com/javascript/stdlib/date.html
        const now = new Date();
        console.log('当前年份', now.getFullYear());
        console.log('当前月份', now.getMonth() + 1);
        console.log('当前号', now.getDate());
        // 2. 数组
        const monthDataSource = [];
        for (let i = 1; i <= 12; i++) {
            monthDataSource.push({
                label: i + '月',
                value: i
            });
        }
        console.log('monthDataSource', monthDataSource);
        // 数组排序
        monthDataSource.sort((a, b) => {
            return b.value - a.value;
        });
        console.log('monthDataSource逆序后', monthDataSource);
        // 3. Map
        const subscriptionList = [{
            'productCode': 'rds',
            'productName': 'RDS云数据库',
            'year': 2020,
            'month': 4,
            'expenditure': 20000,
        }, {
            'productCode': 'redis',
            'productName': '云数据库redis版',
            'year': 2020,
            'month': 4,
            'expenditure': 1800,
        }];
        const payAsYouGoList = [{
            'productCode': 'redis',
            'productName': '云数据库redis版',
            'year': 2020,
            'month': 4,
            'expenditure': 868,
        }, {
            'productCode': 'dts',
            'productName': '数据传输',
            'year': 2020,
            'month': 4,
            'expenditure': 20,
        }];
        // 统计所有的云产品类型和对应名称
        const productCodeNameMap = new Map();
        subscriptionList.forEach(item => {
            if (!productCodeNameMap.has(item.productCode)) {
                productCodeNameMap.set(item.productCode, item.productName);
            }
        });
        payAsYouGoList.forEach(item => {
            if (!productCodeNameMap.has(item.productCode)) {
                productCodeNameMap.set(item.productCode, item.productName);
            }
        });
        console.log('productCodeNameMap', productCodeNameMap);
        // Map遍历 遍历Map 注意：value在前，key在后
        productCodeNameMap.forEach((value, key) => {
            console.log(key + '->' + value);
        });
        // Map添加元素（key，value）用set
        // Map删除元素（根据key），用delete
        // 创建一个新的Map必须用new Map，比如Map abc = new Map()；不能用Map abc = {}（这相当于声明abc是个对象）

        // 统计每种云产品类型当月的花费
        const productCodeExpenditureMap = new Map();
        subscriptionList.forEach(item => {
            if (!productCodeExpenditureMap.has(item.productCode)) {
                productCodeExpenditureMap.set(item.productCode, item.expenditure);
            } else {
                productCodeExpenditureMap.set(item.productCode, productCodeExpenditureMap.get(item
                    .productCode) + item.expenditure);
            }
        });
        payAsYouGoList.forEach(item => {
            if (!productCodeExpenditureMap.has(item.productCode)) {
                productCodeExpenditureMap.set(item.productCode, item.expenditure);
            } else {
                productCodeExpenditureMap.set(item.productCode, productCodeExpenditureMap.get(item
                    .productCode) + item.expenditure);
            }
        });
        console.log('productCodeExpenditureMap', productCodeExpenditureMap);
        // Map的遍历。Map转数组（List）。一般table控件的数据源都是数组（数组元素是对象），通过对象的key映射column。
        const productExpendList = [];
        productCodeExpenditureMap.forEach((v, k) => {
            productExpendList.push({
                code: k,
                name: productCodeNameMap.get(k),
                expenditure: v,
            });
        });
        console.log('productExpendList', productExpendList);

        // 4. Object.keys
        console.log('------------学习Object.keys------------');
        const tableColumn = {
            Id: 'ID',
            name: '姓名',
            age: '年龄',
            address: '地址',
        };
        Object.keys(tableColumn).map(col => {
            if (col === 'name') {
                console.log('col是name，可以做些特殊渲染。');
            } else {
                console.log(col, tableColumn[col]);
            }
        });

    </script>
</body>

</html>

shiyueshis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一些常用的javascript语法：日期类型、集合类型

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学习js-F12查看浏览器console</title></head><body>
复制链接

扫一扫

专栏目录