[成都|内门弟子]JS-韦骁|2023年03月16日的日报-技能树.IT修真院

发表于： 2023-03-16 20:31:53

0 266

今天的js知识点：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Array 常用的方法 </title>
</head>
<body>
<!--    <div></div>-->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        // 实例方法 join 数组元素拼接为字符串，返回字符串

        // 实例方法 find 查找元素,返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined
        // const arr = [5, 12, 8, 130, 44]
        // const found = arr.find(item => item > 10)
        // console.log(found) // 12
        // const arr = [
        //     {
        //         name: '小米',
        //         price: 1999
        //     },
        //     {
        //         name: '华为',
        //         price: 4999
        //     },
        //     {
        //         name: 'vivo',
        //         price: 1999
        //     },
        // ]
        // // const mi = arr.find(function (item) {
        // //     // console.log(item.name)
        // //     // console.log(11)
        // //     return item.name === '华为'
        // // })
        // // console.log(mi)
        // const mi = arr.find(item => item.name === '华为')
        // console.log(mi)

        // 实例方法 every 检测数组所有元素是否都符合指定条件，如果所以元素都通过检测返回 true，否则返回 false
        // const arr = [10, 20, 30]
        // const found = arr.every(item => item >= 10)
        // console.log(found)

        // 实例方法 some 检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回true 否则返回 false

        //案例
        // const spec = { size: '40cm*48cm', color: '黑色'}
        // // console.log(Object.values(spec))
        // // 2、转换为字符串 join('/')
        // // console.log(Object.values(spec).join('/')) //把数组根据分隔符转换为字符串
        // document.querySelector('div').innerHTML = Object.values(spec).join('/')


        // 把伪数组 转换为真数组 静态方法 Array.from()
        const lis = document.querySelectorAll('ul li')
        // console.log(lis)
        // lis.pop()
        const liss = Array.from(lis)
        liss.pop()
        console.log(liss)
    </script>

</body>
</html>

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

    <script>
        //1、 split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，
        // 以一个指定的分割字串来决定每个拆分的位置。
        // split 把字符串 转换为 数组 和 join() 相反
        // const str = 'pink,red'
        // // console.log(str)
        // const arr = str.split(',')
        // console.log(arr)
        //
        // const str1 = '2008-10-1'
        // const arr1 = str1.split('-')
        // console.log(arr1)

        // 2、字符串的截取 substring( 开始的索引号【, 结束的索引号】)
        // 如果省略了 结束的索引号 ，默认取到最后
        // 结束的索引号不包含需要的截取部分
        // const str = '等下要去吃饭了'
        // console.log(str.substring(4))
        // console.log(str.substring(4,6))

        // 3、starsWith 判断是不是以某个字符开头
        // const str = '今天吃了吗'
        // console.log(str.startsWith('今天'))
        // console.log(str.startsWith('了'))
        // console.log(str.startsWith('了', 3))

        // 4、includes 判断某个字符 是不是包含在一个字符串里面
        const str = '今天你吃饭了吗'
        console.log(str.includes('今天')) // true
        console.log(str.includes('吃饭')) // true
        console.log(str.includes('你好')) // false

        // 5、 toFixed 方法 可以让数字指定保留的小数位置
        const num = 10.923
        // console.log(num.toFixed()) //11
        console.log(num.toFixed(2)) //10.92 后面的参数决定了你要保留几位小数
        const num1 = 10
        console.log(num1.toFixed(2)) //10.00

    </script>

</body>
</html>

案例练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .list {
            width: 990px;
            margin: 100px auto 0;
        }

        .item {
            padding: 15px;
            transition: all 0.5s;
            display: flex;
            border-top: 1px solid #e4e4e4;
        }

        .item:nth-child(4n) {
            margin-left: 0;
        }

        .item:hover {
            cursor: pointer;
            background-color: #f5f5f5;
        }

        .item img {
            width: 80px;
            height: 80px;
            margin-right: 10px;
        }

        .item .name {
            font-size: 18px;
            margin-right: 10px;
            color: #333;
            flex: 2;
        }

        .item .name .tag {
            display: block;
            padding: 2px;
            font-size: 12px;
            color: #999;
        }

        .item .price,
        .item .sub-total {
            font-size: 18px;
            color: firebrick;
            flex: 1;
        }

        .item .price::before,
        .item .sub-total::before,
        .amount::before {
            content: "¥";
            font-size: 12px;
        }

        .item .spec {
            flex: 2;
            color: #888;
            font-size: 14px;
        }

        .item .count {
            flex: 1;
            color: #aaa;
        }

        .total {
            width: 990px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid #e4e4e4;
            padding: 20px;
        }

        .total .amount {
            font-size: 18px;
            color: firebrick;
            font-weight: bold;
            margin-right: 50px;
        }
    </style>
</head>
<body>

        <div class="list">

        </div>
        <div class="total">
            <div>合计：<span class="amount">00.00</span></div>
        </div>

    <script>
        const goodsList = [
            {
                id: '4001172',
                name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
                price: 289.9,
                picture:
                    'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
                count: 2,
                spec: { color: '白色' },
            },
            {
                id: '4001009',
                name: "竹制干泡茶盘正方形沥水茶台品茶盘",
                price: 109.8,
                picture:
                    'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
                count: 3,
                spec: { size: '40cm*40cm', color: '黑色' },
            },
            {
                id: '4001874',
                name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
                price: 488,
                picture:
                    'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
                count: 1,
                spec: { color: '青色', sum: '一大四小' },
            },
            {
                id: '4001649',
                name: '大师监制龙泉青瓷茶叶罐',
                price: 139,
                picture:
                    'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
                count: 1,
                spec: { size: '小号', color: '紫色' },
                gift: '50g茶叶,清洗球',
            },
        ]

            // 1.渲染数据
            // 使用map方法遍历数据
            document.querySelector('.list').innerHTML = goodsList.map((item) => {
                    // console.log(item);获得准备数据中的每一组数据
                    // 解构
                    const { id, name, price, picture, count, spec, gift } = item
                    //  规格文字模块处理
                    const text = Object.values(spec).join('/')

                    // 处理赠品问题 50g茶叶,清洗球
                    const str = gift ? gift.split(",").map((item) =>
                        `<span class="tag">【赠品】${item}</span>`).join("") : ''
                    // 计算总价格
                    // 注意精度问题，因为保留两位小数，所以乘以 100 最后除以 100
                    const sum = ((count * 100 * price) / 100).toFixed(2)

                    return `
                        <div class="item">
                              <img src=${picture} alt="">
                              <p class="name">${name} ${str} </p>
                              <p class="spec">${text}</p>
                              <p class="price">${price.toFixed(2)}</p>
                              <p class="count">x${count}</p>
                              <p class="sub-total">${sum}</p>
                        </div>
                        `
                }).join('')

        // 使用数组的reduce方法 累计器 计算总价格
        const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)
        // 渲染并保留两位小数
        document.querySelector('.amount').innerHTML = total.toFixed(2)
    </script>

</body>
</html>

返回列表

【任务1】 [成都|内门弟子]JS-韦骁 | 2023年03月16日 的日报

评论

分享到

【任务1】 [成都|内门弟子]JS-韦骁 | 2023年03月16日的日报