29.[前端开发-JavaScript基础]Day06-创建对象-对象补充-包装类型-数组Array

已于 2025-03-16 16:47:22 修改
阅读量235 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2025-02-27 15:35:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_55135449/article/details/145904695
版权

一、JavaScript常见内置类

1 认识包装类型

原始类型的包装类

包装类型的使用过程

2 数字类型Number

Number类的补充

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // Number构造函数 -> window.Number
    // var num = 123 // new Number(num)

    // 类属性
    // Number中本身是有自己的属性
    console.log(Number.MAX_VALUE)
    console.log(Number.MIN_VALUE)
    // integer: 整数
    console.log(Number.MAX_SAFE_INTEGER)
    console.log(Number.MIN_SAFE_INTEGER)

    // 对象的方法
    // toString(base)
    var num = 1000
    console.log(num.toString(), typeof num.toString())
    console.log(num.toString(2))
    console.log(num.toString(8))
    console.log(num.toString(16))

    // console.log(123..toString(2))

    // toFixed的使用(重要)
    var pi = 3.1415926
    console.log(pi.toFixed(3))

    // 类的方法
    // parseInt
    // parseFloat
    // 整数: 123
    // 浮点数: 小数 123.321
    var num1 = "123.521"
    console.log(Number(num1).toFixed(0))
    console.log(Number.parseInt(num1))
    console.log(Number.parseFloat(num1))

    // window对象上面
    console.log(parseInt(num1))
    console.log(parseFloat(num1))

    // function HYNumber() {
    // }
    // HYNumber.parseInt2 = function() {
    // }
    // window.parseInt2 = HYNumber.parseInt2
    // console.log(window.parseInt2 === HYNumber.parseInt2)

    console.log(parseInt === Number.parseInt)


  </script>

</body>
</html>

3 数学对象Math

Math对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // console.log(typeof Number) // function
    // var num = new Number()

    // Math -> 对象
    // window/obj/console
    // console.log(typeof Math)
    // var math = new Math()

    // Math对象的属性
    // console.log(Math.PI)

    // Math对象的方法
    // var num = 3.55
    // console.log(Math.floor(num)) // 3
    // console.log(Math.ceil(num)) // 4
    // console.log(Math.round(num)) // 4

    // 另外方法
    // random: 随机生成 [0, 1)
    console.log(Math.random())
    // 需求: [5~50)的随机数
    // [a, b)
    // y = a
    // x = b - a
    // Math.floor(Math.random() * x) + y
    for (var i = 0; i < 1000; i++) {
      var randomNum = Math.floor(Math.random() * 45) + 5
      console.log(randomNum)
    }

    // Math.pow(x, y)
    console.log(Math.pow(2, 4))

  </script>

</body>
</html>

4 字符串类型String

String类的补充（一）- 基本使用

String类的补充（二） - 修改字符串

String类的补充（三） - 查找字符串

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var message = "my name is why."
    var name = "why"

    // 判断一个字符串中是否有另外一个字符串
    // 1.indexOf(searchString, fromIndex)
    /*
      index:
        情况一: 搜索到, 搜索字符串所在索引位置
        情况二: 没有搜索到, 返回-1
    */
    //  var index = message.indexOf(name)
    //  if (message.indexOf(name) !== -1) {
    //    console.log("message中包含name")
    //  } else {
    //    console.log("message不包含name")
    //  }

    // 2.includes: ES6中新增一个方法, 就是用来判断包含关系
    // if (message.includes(name)) {
    //   console.log("message中包含name")
    // }

    // 3.startsWith: 是否以xxx开头
    // if (message.startsWith("my")) {
    //   console.log("message以my开头")
    // }

    // 4.endsWith: 是否以xxx结束
    // if (message.endsWith("why")) {
    //   console.log("message以why结尾")
    // }

    // 5.replace 替换字符串
    // var newMessage = message.replace("why", "kobe")
    // console.log(message)
    // console.log(newMessage)
    var newName = "kobe"
    var newMessage = message.replace("why", function() {
      return newName.toUpperCase()
    })
    console.log(newMessage)


  </script>

</body>
</html>

String类的补充（四）- 开头和结尾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var message = "my name is why."
    var name = "why"

    // 判断一个字符串中是否有另外一个字符串
    // 1.indexOf(searchString, fromIndex)
    /*
      index:
        情况一: 搜索到, 搜索字符串所在索引位置
        情况二: 没有搜索到, 返回-1
    */
    //  var index = message.indexOf(name)
    //  if (message.indexOf(name) !== -1) {
    //    console.log("message中包含name")
    //  } else {
    //    console.log("message不包含name")
    //  }

    // 2.includes: ES6中新增一个方法, 就是用来判断包含关系
    // if (message.includes(name)) {
    //   console.log("message中包含name")
    // }

    // 3.startsWith: 是否以xxx开头
    // if (message.startsWith("my")) {
    //   console.log("message以my开头")
    // }

    // 4.endsWith: 是否以xxx结束
    // if (message.endsWith("why")) {
    //   console.log("message以why结尾")
    // }

    // 5.replace 替换字符串
    // var newMessage = message.replace("why", "kobe")
    // console.log(message)
    // console.log(newMessage)
    var newName = "kobe"
    var newMessage = message.replace("why", function() {
      return newName.toUpperCase()
    })
    console.log(newMessage)


  </script>

</body>
</html>

String类的补充（五） - 获取子字符串

String类的补充（六） - 其他方法

5 数组Array使用详解

认识数组（Array）

数组的创建方式

数组的基本操作

数组的添加、删除方法（一）

数组的添加、删除方法（二）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // var names = ["abc", "cba", "nba", "mba", "abcd"]

    // 1.在数组的尾部添加和删除元素
    // // push方法
    // names.push("why", "kobe")
    // console.log(names)
    // // pop方法
    // names.pop()
    // names.pop()
    // console.log(names)

    // // 2.在数组的头部添加和删除元素
    // // unshift方法
    // names.unshift("why", "kobe")
    // console.log(names)
    // // shift方法
    // names.shift()
    // console.log(names)

    // 3. 在任意位置添加/删除/替换元素
    var names = ["abc", "cba", "nba", "mba", "abcd"]
    // 参数一: start, 从什么位置开始操作元素
    // 参数二: deleteCount, 删除元素的个数

    // 3.1.删除元素
    // names.splice(1, 2)
    // console.log(names)

    // 3.2.新增元素
    // deleteCount: 0, 后面可以添加新的元素
    // names.splice(1, 0, "why", "kobe")
    // console.log(names)

    // 3.3.替换元素
    names.splice(1, 2, "why", "kobe", "james")
    console.log(names)

  </script>

</body>
</html>

length属性

数组的遍历

数组方法 – slice、cancat、 join

数组方法 – 查找元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    /*
      indexOf方式.
      手动for循环
      数组的find方法
    */

    // 1.数组中存放的是原始类型
    var names = ["abc", "cba", "nba", "mba"]

    // 1.1. indexOf
    // 可以找到, 返回对应的索引
    // 没有找到, 返回-1
    // console.log(names.indexOf("nbb"))


    // 2.数组中存放的是对象类型
    // var students = [
    //   { id: 100, name: "why", age: 18 },
    //   { id: 101, name: "kobe", age: 30 },
    //   { id: 102, name: "james", age: 25 },
    //   { id: 103, name: "why", age: 22 }
    // ]

    // 查找的是id为101的学生信息
    // 2.1. 自己写一个for循环
    // var stu = null
    // for (var i = 0; i < students.length; i++) {
    //   if (students[i].id === 101) {
    //     stu = students[i]
    //     break
    //   }
    // }

    // // 判断上面的算法有没有找到对应的学生
    // if (stu) {
    //   console.log("找到了对应的101学生", stu)
    // } else {
    //   console.log("没有找到对应的101学生")
    // }

    // 2.2. find方法: 高阶函数
    var students = [
      { id: 100, name: "why", age: 18 },
      { id: 101, name: "kobe", age: 30 },
      { id: 102, name: "james", age: 25 },
      { id: 103, name: "why", age: 22 }
    ]
    
    var stu = students.find(function(item) {
      if (item.id === 101) return true
    })
    console.log(stu)

  </script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var names = ["abc", "cba", "nba"]

    // forEach函数: 可以帮助我遍历数组
    // for (var i = 0; i < names.length; i++) {
    //   console.log(names[i])
    // }

    // 1.hyForEach版本一(大部分同学掌握)
    function hyForEach(fn) {
      for (var i = 0; i < names.length; i++) {
        fn(names[i], i, names)
      }
    }

    hyForEach(function(item, index, names) {
      console.log("-------", item, index, names)
    })

    // 2.hyForEach版本二
    // function hyForEach(fn, arr) {
    //   for (var i = 0; i < arr.length; i++) {
    //     fn(arr[i], i, arr)
    //   }
    // }

    // hyForEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // }, names)

    // hyForEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // }, [123, 321, 111, 222])


    // 3.hyForEach版本三
    // names.hyForEach = function(fn) {
    //   for (var i = 0; i < this.length; i++) {
    //     fn(this[i], i, this)
    //   }
    // }

    // names.hyForEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // })

    // names.forEach(function(item, index, names) {
    //   console.log("-------", item, index, names)
    // })
    

    // 4.hyForEach版本四(了解)
    Array.prototype.hyForEach = function(fn, thisArgs) {
      for (var i = 0; i < this.length; i++) {
        fn(this[i], i, this)
      }
    }

    // names.hyForEach(function(item, index, names) {
    //   console.log("------", item, index, names)
    // })

    // var students = [
    //   { id: 100, name: "why", age: 18 },
    //   { id: 101, name: "kobe", age: 30 },
    //   { id: 102, name: "james", age: 25 },
    //   { id: 103, name: "why", age: 22 }
    // ]

    // students.hyForEach(function(item, index, stus) {
    //   console.log("++++++", item, index, stus)
    // })

  </script>


</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.原始类型的查找
    var names = ["abc", "cba", "nba", "mba"]

    // 原生find方法
    var findName = names.find(function(item, index, arr) {
      console.log(item, index, arr)
      return item === "nba"
    })
    console.log(findName)

    // 2.数组中对象类型的查找
    var students = [
      { id: 100, name: "why", age: 18 },
      { id: 101, name: "kobe", age: 30 },
      { id: 102, name: "james", age: 25 },
      { id: 103, name: "why", age: 22 }
    ]

    // var findStu = students.find(function(item) {
    //   return item.id === 101
    // })
    // console.log(findStu)

    // 3.自己实现hyFind(百分90以上的不要求)
    Array.prototype.hyFind = function(fn) {
      // var item = undefined
      for (var i = 0; i < this.length; i++) {
        var isFlag = fn(this[i], i, this)
        if (isFlag) {
          // item = this[i]
          // break
          return this[i]
        }
      }
      // return item
    }

    var findStu = students.hyFind(function(item, index, arr) {
      console.log(item)
      return item.id === 101
    })
    console.log(findStu)
    
  </script>

</body>
</html>

数组的排序 – sort/reverse

数组的其他高阶方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.forEach函数
    var names = ["abc", "cba", "nba", "mba"]

    // 三种方式, 新增一种方式
    names.forEach(function(item) {
      console.log(item, this)
    }, { name: "why" })

    // 2.filter函数: 过滤
    // var nums = [11, 20, 55, 100, 88, 32]
    // 2.1. for循环实现
    // var newNums = []
    // for (var item of nums) {
    //   if (item % 2 === 0) {
    //     newNums.push(item)
    //   }
    // }
    // 2.2. filter实现
    // var newNums = nums.filter(function(item) {
    //   return item % 2 === 0
    // })
    // console.log(newNums)


    // 3.map函数: 映射
    // var nums = [11, 20, 55, 100, 88, 32]
    // var newNums = nums.map(function(item) {
    //   return item * item
    // })
    // console.log(newNums)

    // 4.reduce
    // var nums = [11, 20, 55, 100, 88, 32]
    // var result = 0
    // for (var item of nums) {
    //   result += item
    // }
    // console.log(result)
    // 第一次执行: preValue->0 item->11
    // 第二次执行: preValue->11 item->20
    // 第三次执行: preValue->31 item->55
    // 第四次执行: preValue->86 item->100
    // 第五次执行: preValue->186 item->88
    // 第六次执行: preValue->274 item->32
    // 最后一次执行的时候 preValue + item, 它会作为reduce的返回值

    // initialValue: 初始化值, 第一次执行的时候, 对应的preValue
    // 如果initialValue没有传呢?
    // var result = nums.reduce(function(preValue, item) {
    //   console.log(`preValue:${preValue} item:${item}`)
    //   return preValue + item
    // }, 0)
    // console.log(result)

    // reduce练习
    // var products = [
    //   { name: "鼠标", price: 88, count: 3 },
    //   { name: "键盘", price: 200, count: 2 },
    //   { name: "耳机", price: 9.9, count: 10 },
    // ]
    // var totalPrice = products.reduce(function(preValue, item) {
    //   return preValue + item.price * item.count
    // }, 0)
    // console.log(totalPrice)


    // 综合练习: 
    var nums = [11, 20, 55, 100, 88, 32]

    // 过滤所有的偶数, 映射所有偶数的平方, 并且计算他们的和
    // var total = nums.filter(function(item) {
    //   return item % 2 === 0
    // }).map(function(item) {
    //   return item * item
    // }).reduce(function(preValue, item) {
    //   return preValue + item
    // }, 0)
    // console.log(total)

    // var total = nums.filter(item => item % 2 === 0)
    //                 .map(item => item * item)
    //                 .reduce((preValue, item) => preValue + item, 0)
    // console.log(total)

  </script>

</body>
</html>

6 Date类型的使用

时间的表示方式

时区对比图

创建Date对象

dateString时间的表示方式

Date获取信息的方法

Date设置信息的方法

Date获取Unix时间戳

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // var date = new Date(1132324234242)
    // console.log(date)

    // Date对象, 转成时间戳
    var date = new Date()
    var date2 = new Date("2033-03-03")

    // 方法一: 当前时间的时间戳
    var timestamp1 = Date.now()
    console.log(timestamp1)

    // 方法二/三将一个date对象转成时间戳
    var timestamp2 = date.getTime()
    var timestamp3 = date2.valueOf()
    console.log(timestamp2, timestamp3)

    // 方法四: 了解
    console.log(+date)


    // 计算这个操作所花费的时间
    var startTime = Date.now()
    for (var i = 0; i < 100000; i++) {
      console.log(i)
    }
    var endTime = Date.now()
    console.log("执行100000次for循环的打印所消耗的时间:", endTime - startTime)


    // 封装一个简单函数
    function testPerformance(fn) {
      var startTime = Date.now()
      fn()
      var endTime = Date.now()
    }

  </script>

</body>
</html>

Date.parse方法

时间格式化的方法（JS高级讲解）

m0_zj
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值