自学内容网 自学内容网
自学内容网 > 正文

JS进阶-内置构造函数

🕗 发布于 2024-07-10 06:47 javascript  开发语言  ecmascript  

学习目标：

  • 掌握内置构造函数

学习内容：

  1. 内置构造函数
  2. Object
  3. Array
  4. String
  5. Number
  6. 综合案例

内置构造函数：

在JavaScript中最主要的数据类型有6种：

基本数据类型字符串、数值、布尔、undefined、null
引用类型对象

其实字符串、数值、布尔等基本类型也都有专门的构造函数，这些我们称为包装类型。

JS中几乎所有的数据都可以基于构成函数创建。

 <title>基本包装类型</title>
</head>

<body>
  <script>
    // const str = 'pink'
    // console.log(str.length)
    // const num = 12
    // console.log(num.toFixed(2))
    // const str = 'pink'
    // js 底层完成， 把简单数据类型包装为了引用数据类型
    // const str = new String('pink')
  </script>

</body>
引用类型Object、Array、RegExp、Date等
包装类型String、Number、Boolean等

Object：

Object是内置的构造函数，用于创建普通对象。

//通过构造函数创建普通对象
const user =new Object({ uname: 'pink', age: 18 })

推荐使用字面量方式声明对象，而不是Object构造函数。

学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）：

  • Object.keys

作用：Object.keys静态方法获取对象中所有属性（键）。

语法：

const o = { uname: 'pink', age: 18 }
    // 1.获得所有的属性名
    console.log(Object.keys(o))  //返回数组['uname', 'age']

注意：返回的是一个数组。

  • Object.values

作用：Object.values静态方法获取对象中所有属性值。

语法：

const o = { uname: 'pink', age: 18 }
    // 2. 获得所有的属性值
    console.log(Object.values(o))  //  ['pink', 18]

注意：返回的是一个数组。

  • Object.assign

作用：Object.assign静态方法常用于对象拷贝。

使用：经常使用的场景给对象添加属性。

语法：

 const o = { uname: 'pink', age: 18 }
    // 3. 对象的拷贝
    // const oo = {}
    // Object.assign(oo, o)
    // console.log(oo)
    //添加属性
    Object.assign(o, { gender: '女' })
    console.log(o)

完整代码：

<title>Object静态方法</title>
</head>

<body>
  <script>
    const o = { uname: 'pink', age: 18 }
    // 1.获得所有的属性名
    console.log(Object.keys(o))  //返回数组['uname', 'age']
    // 2. 获得所有的属性值
    console.log(Object.values(o))  //  ['pink', 18]
    // 3. 对象的拷贝
    // const oo = {}
    // Object.assign(oo, o)
    // console.log(oo)
    Object.assign(o, { gender: '女' })
    console.log(o)
  </script>

</body>
  • 小结
  1. 什么是静态方法？

只能给构造函数使用的方法，比如Object.keys( )。

  1. Object.keys( )方法的作用是什么？

获取对象中所有属性（键）。

  1. Object.values( )方法的作用是什么？

获取对象中所有属性值（值）。

Array：

Array是内置的构造函数，用于创建数组。

const arr = new Array(3,5)
console.log(arr) //[3,5]

创建数组建议使用字面量创建，不用Array构造函数创建。

  • 数组常见实例方法-核心方法
方法作用说明
forEach遍历数组不返回，用于不改变值，经常用于查找打印输出值
filter过滤数组筛选数组元素，并生成新数组
map迭代数组返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce累计器返回函数累计处理的结果，经常用于求和等
  • reduce

作用：reduce返回累计处理的结果，经常用于求和等。

基本语法：

arr.reduce(function(){},初始值)

 //数组reduce方法
    // arr.reduce(function(上一次值,当前值){},初始值)
    const arr = [1, 5, 8]

参数： 如果有初始值，则把初始值累加到里面。

reduce执行过程：

  1. 如果没有起始值，则上一次值以数组的第一个数组元素的值。
  2. 每一次循环，把返回值给做为下一次循环的上一次值。
  3. 如果有起始值，则起始值做为上一次值。
 <title>数组reduce方法</title>
</head>

<body>
  <script>
    //数组reduce方法
    // arr.reduce(function(上一次值,当前值){},初始值)
    const arr = [1, 5, 8]


    //1.没有初始值
    // const total = arr.reduce(function (prev, current) {
    //   return prev + current
    // })
    // console.log(total)


    //上一次值     当前值    返回值  （第一次循环）
    // 1             5        6
    //上一次值     当前值    返回值  （第二次循环）
    // 6            8        14



    //2.有初始值
    // const total = arr.reduce(function (prev, current) {
    //   return prev + current
    // }, 10)
    // console.log(total)

    //上一次值     当前值    返回值  （第一次循环）
    // 10             1        11
    //上一次值     当前值    返回值  （第二次循环）
    // 11            5        16
    //上一次值     当前值    返回值  （第三次循环）
    // 16           8        24



    //3.箭头函数的写法
    const total = arr.reduce((prev, current) => prev + current, 10)
    console.log(total)

  </script>

</body>
  • 练习
 <title>练习-计算薪资案例</title>
</head>

<body>
  <script>
    // const arr = [{
    //   name: '张三',
    //   salary: 10000
    // }, {
    //   name: '李四',
    //   salary: 10000
    // }, {
    //   name: '王五',
    //   salary: 10000
    // },
    // ]
    // //计算薪资案例
    // const total = arr.reduce((prev, current) => {
    //   // console.log(prev)
    //   return prev + current.salary
    // }, 0)
    // console.log(total)

    //上一次值     当前值    返回值  （第一次遍历）
    // 0          10000     10000
    //上一次值     当前值    返回值  （第二次遍历）
    // 10000       10000     20000
    //上一次值     当前值    返回值  （第三次遍历）
    //20000       10000      30000 


    //需求： 每个人涨薪30%  当月指出多少薪资
    const arr = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 10000
    },
    ]
    //计算涨薪
    const total = arr.reduce((prev, current) => prev + current.salary * 1.3, 0)
    console.log(total)

    //上一次值     当前值    返回值  （第一次遍历）
    // 0          13000     13000
    //上一次值     当前值    返回值  （第二次遍历）
    //  13000       13000     26000
    //上一次值     当前值    返回值  （第三次遍历）
    //26000        13000      39000 

  </script>

</body>
  • 数组常见方法-其他方法
实例方法说明
join数组元素拼接为字符串，返回字符串（重点）
find查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined(重点）
every检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回true，否则返回false（重点）
some检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回true，否则返回false
concat合并两个数组，返回生成新数组
sort对原数组单元值排序
splice删除或替换原数组单元
reverse反转数组
findIndex查找元素的索引值
 <title>Array常用方法</title>
</head>

<body>
  <script>
    // const arr = ['red', 'blue', 'green']
    // const re = arr.find(function (item) {
    //   return item === 'blue'
    // })
    // console.log(re)

    const arr = [
      {
        name: '小米',
        price: 1999
      },
      {
        name: '华为',
        price: 3999
      },
    ]
    // 找小米 这个对象，并且返回这个对象
    // const mi = arr.find(function (item) {
    //   // console.log(item)  //
    //   // console.log(item.name)  //
    //   console.log(111)
    //   return item.name === '华为'
    // })

    // 1. find 查找
    // const mi = arr.find(item => item.name === '小米')
    // console.log(mi)

    // 2. every 每一个是否都符合条件，如果都符合返回 true ，否则返回false
    const arr1 = [10, 20, 30]
    const flag = arr1.every(item => item >= 20)   //false
    console.log(flag)

    //3.some:只要有一个符合条件，就可以返回true，否则返回false。
    const arr2 = [10, 20, 30]
    const flag1 = arr2.some(item => item >= 20)  //true
    console.log(flag1)
  </script>

</body>
  • 练习
<title>课堂练习</title>
</head>

<body>
  <div></div>
  <script>
    const spec = { size: '40cm*40cm', color: '黑色' }
    //1. 所有的属性值回去过来  数组
    // console.log(Object.values(spec))
    // 2. 转换为字符串   数组join('/') 把数组根据分隔符转换为字符串
    // console.log(Object.values(spec).join('/'))
    document.querySelector('div').innerHTML = Object.values(spec).join('/')
  </script>

</body>
  • 数组常见方法-伪数组转换为真数组

静态方法Array.from( )

 <title>伪数组转换为真数组</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    //  Array.from(lis) 把伪数组转换为真数组
    const lis = document.querySelectorAll('ul li')
    // console.log(lis)
    // lis.pop() 报错
    const liss = Array.from(lis)
    liss.pop()
    console.log(liss)
  </script>

</body>

String：

在JavaScript中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法。

之所以具有对象特征的原因是字符串、数值、布尔型数据是JavaScript底层使用Object构造函数“包装”起来的，被称为包装类型。

  • 常见实例方法
实例属性说明
length用来获取字符串的长度(重点)
实例方法说明
split('分隔符')用来将字符串拆分成数组(重点)
substring(需要截取的第一个字符的索引[， 结束的索引号])检测是否以某字符开头(重点)
includes(搜索的字符串[,检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回true或false(重点)
toUpperCase用于将字母转换成大写
toLowerCase用于将字母转换成小写
indexOf检测是否包含某字符
endsWith检测是否以某字符结尾
replace用于替换字符串，支持正则匹配
match用于查找字符串，支持正则匹配
 <title>String常见方法</title>
</head>

<body>
  <script>
    //1. split 把字符串 转换为 数组  和 join() 相反
    // const str = 'pink,red'
    // const arr = str.split(',')
    // console.log(arr)
    // const str1 = '2022-4-8'
    // const arr1 = str1.split('-')
    // console.log(arr1)

    // 2. 字符串的截取   substring(开始的索引号[， 结束的索引号])
    // 2.1 如果省略 结束的索引号，默认取到最后
    // 2.2 结束的索引号不包含想要截取的部分
    // const str = '今天又要做核酸了'
    // console.log(str.substring(5, 7))

    // 3. startsWith 判断是不是以某个字符开头
    // const str = 'pink是很明艳的一种颜色'
    // console.log(str.startsWith('pink'))

    // 4. includes 判断某个字符是不是包含在一个字符串里面
    const str = '我喜欢pink'
    console.log(str.includes('pink')) // true
  </script>

</body>
  • 练习
 <title>课堂练习2</title>
</head>

<body>
  <div></div>
  <script>
    const gift = '50g的茶叶,清洗球'
    // 1. 把字符串拆分为数组
    // console.log(gift.split(',')) [,]
    // 2. 根据数组元素的个数，生成 对应 span标签
    // const str = gift.split(',').map(function (item) {
    //   return `<span>【赠品】 ${item}</span> <br>`
    // }).join('')

    // // console.log(str)
    // document.querySelector('div').innerHTML = str
    document.querySelector('div').innerHTML = gift.split(',').map(item => `<span>【赠品】 ${item}</span> <br>`).join('')
  </script>

</body>

Number：

Number是内置的构造函数，用于创建数值。

常用方法：
toFixed( )设置保留小数位的长度。

<title>toFixed方法</title>
</head>

<body>
  <script>
    // toFixed 方法可以让数字指定保留的小数位数
    const num = 10.923
    // console.log(num.toFixed())
    console.log(num.toFixed(1))
    const num1 = 10
    console.log(num1.toFixed(2))
  </script>

</body>

综合案例：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-购物车展示</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

    .item {
      padding: 15px;
      transition: all .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 class="item">
        <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
        <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
        <p class="spec">白色/10寸</p>
        <p class="price">289.90</p>
        <p class="count">x2</p>
        <p class="sub-total">579.80</p>
      </div> -->
  </div>
  <div class="total">
    <div>合计：<span class="amount">1000.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.根据数据渲染页面
    document.querySelector('.list').innerHTML = goodsList.map(item => {
      // console.log(item) //每一条对象
      //对象解构 item.price item.count
      const { picture, name, count, price, spec, gift } = item
      //规格文字模块处理
      const text = Object.values(spec).join('/')
      //计算小计模块  单价*数量  保留两位小数
      //注意精度问题，因为保留两位小数，所以乘以 100 最后除以100
      const subTotal = ((price * 100 * count) / 100).toFixed(2)
      //处理赠品模块  '50g茶叶，清洗球'
      const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】 ${item}</span> `).join('') : ''
      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">${subTotal}</p>
        </div>
        `
    }).join('')

    //3.合计模块
    const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)
    // console.log(total)
    document.querySelector('.amount').innerHTML = total.toFixed(2)
  </script>

</body>

</html>

原文地址：https://blog.csdn.net/m0_64105917/article/details/140311684

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024