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

发表于： 2023-03-10 21:27:25

0 252

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>Document</title>
</head>
<body>

    <script>
      //对象解构
      // const obj = {
      //   uname: '李白',
      //   age: 18
      // }
      //obj.uname
      //obj.age
      // const uname = '杜甫'

      // 解构的语法
      // const {uname, age} = {uname: '李白', age: 18}
      // //等价于 const uname = obj.uname
      // // 要求属性名和变量名必须一致才可以
      // console.log(uname)
      // console.log(age)

      //对象解构的变量名 可以重新改名 旧变量名: 新变量名
      // const {uname: username, age} = {uname: '李白', age: 18}
      // console.log(uname)
      // console.log(username)
      // console.log(age)

      // 解构数组对象
      // const obj = [{
      //   uname: '李白',
      //   age: 18
      // }]
      // const [{uname, age}] = obj
      // console.log(uname)
      // console.log(age)


      // const pig = {
      //   name: '佩奇',
      //   family:{
      //     mother: '猪妈妈',
      //     father: '猪爸爸',
      //     sister: '乔治'
      //   },
      //   age: 6
      // }
      // //多级对象解构
      // const {name, family: {mother, father, sister}, age} = pig
      // console.log(name)
      // console.log(mother)
      // console.log(father)
      // console.log(sister)
      // console.log(age)

      // const person = [
      //   {
      //     name: '佩奇',
      //     family:{
      //       mother: '猪妈妈',
      //       father: '猪爸爸',
      //       sister: '乔治'
      //     },
      //     age: 6
      //   }
      // ]
      // const [{name, family: {mother, father, sister}, age}] = person
      // console.log(name)
      // console.log(mother)
      // console.log(father)
      // console.log(sister)
      // console.log(age)




      const msg = {
        "code": 200,
        "msg": "获得新闻列表成功",
        "data": [
          {
            "id": 1,
            "title": '5G商用自己,三大运营',
            "count": 58
          },
          {
            "id": 2,
            "title": '国际头条',
            "count": 55
          },
          {
            "id": 3,
            "title": '国内趣事',
            "count": 1669
          },
        ]
      }
      // 1、请将以上msg对象 采用对象解构的方式 只选出 data 方便后面使用渲染页面
      // const {data} = msg
      // console.log(data)

      // 2、上面msg是后台传递过去的数据,我们需要把data选出当做参数传递给函数
      // const {data} = msg
      // function render({data}) {
      //   // const {data} = arr
      //   // 我们只要 data 数据
      //   // 内部处理
      //   console.log(data)
      // }
      // render(msg)

      // 3、为了防止msg里面的data名字混淆，需求渲染函数里面的数据改名为 myData
      function render({data: myDate}) {
        // 数据改名为 myData
        // 内部处理
        console.log(myDate)
      }
      render(msg)

    </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>
        //主要使用场景： 遍历数组的每个元素
        // 语法 : 被遍历的数组.forEach(function (当前数组元素，当前元素引号) {
        //         函数体
        //         })

        // 参数当前元素是必须写的，索引号可选
        // forEach 就是遍历数组 加强版for循环 适合于遍历数组对象
        const arr = ['red', 'green', 'pink']
        arr.forEach(function (item, index) {
            console.log(item) // 数组元素
            console.log(index) // 索引号
        })
    </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>
        // function fn() {
        //     console.log(123)
        // }

        //箭头函数 基本语法
        // const fn = () => {
        //     console.log(123)
        // }
        // fn()

        // const fn = (x) => {
        //     console.log(x)
        // }
        // fn(1)

        // 只有一个形参的时候，可以省略小括号
        // const fn = x => {
        //     console.log(x)
        // }
        // fn(1)

        // 只有一行代码的时候，可以省略大括号
        // const fn = x => console.log(x)
        // fn(1)

        // 只有一行代码的时候，可以省略 return
        // const fn = x => x + x
        // console.log(fn(1))

        //箭头函数可以 直接返回一个对象
        // const fn = (uname) => ({uname: uname})
        // console.log(fn('李白'))


        //利用箭头函数求和
        // const getSum = (...arr) => {
        //     let sum = 0
        //     for (let i = 0; i< arr.length; i++) {
        //         sum += arr[i]
        //     }
        //     return sum
        // }
        // let result = getSum(2, 3)
        // console.log(result)


        // 箭头函数 this  是上一层作用域的this 指向
        // const fn = () => {
        //     console.log(this) // window
        // }
        // fn()
        // //对象方法的箭头函数的 this
        // const obj = {
        //     uname: '李白',
        //     sayHi: () => {
        //         console.log(this) // window
        //     }
        // }
        // obj.sayHi()

        const obj = {
            uname: '李白',
            sayHi: function () {
                console.log(this) // 指向 obj
                let i = 10
                const count = () => {
                    console.log(this) // 指向 obj
                }
                count()
            }
        }
        obj.sayHi()
    </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>
        * {
            padding: 0;
            margin: 0;
        }
        .list {
            width: 800px;
            height: 600px;
            margin: 20px auto;
            background: #f3f4f5;
        }
        .item {
            width: 175px;
            height: 285px;
            background: #f3f4f5;
            border: 1px solid #f3f4f5;
            border-radius: 5px;
            float: left;
            margin: 10px;
        }

        .item:hover {
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
            transform: translate3d(0, -4px, 0);
            cursor: pointer;
        }
        .item img {
            width: 100%;
        }

        .item .name {
            font-size: 18px;
            margin-bottom: 10px;
            color: #666;
        }

        .item .price {
            font-size: 22px;
            color: firebrick;
        }

        .item .price::before {
            content: "￥";
            font-size: 14px;
        }

    </style>
</head>
<body>
    <div class="list">
<!--        <div class="item">-->
<!--            <img src="" alt="">-->
<!--            <p class="name"></p>-->
<!--            <p class="price"></p>-->
<!--        </div>-->
    </div>
    <script>
        const goodsList = [
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
            {
                id: '4001172',
                name: '猫',
                price: '200.00',
                picture: '../../js2-DOM/images/4.jpg'
            },
        ]

        // 1、声明一个字符串变量
        let str = ''
        //2、遍历数据
        goodsList.forEach(item => {
            // console.log(item) //得到每一个数组元素 对象
            // const {id} = item  解构
            const {name, price, picture} = item
            str += `
            <div class="item">
                <img src="${picture}" alt="">
                <p class="name">${name}</p>
                <p class="price">${price}</p>
            </div>
            `
        })
        document.querySelector('.list').innerHTML = str
    </script>



</body>
</html>

返回列表

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

评论

分享到

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