首页 > 其他分享 >05-JS中的内置类

05-JS中的内置类

时间：2024-07-08 22:19:00浏览次数：14  
标签：内置 console log 05 javascript JS var 06 Document

01 原始类型的调用

![[06-javascript基础/imgs/00041.png]]

02 Number包装类型

![[06-javascript基础/imgs/00043.png]]
示例1

<!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 num = "3.54159"
      var res = Number(num).toFixed(2)
      console.log(res, typeof res)
    </script>
</body>
</html>

![[06-javascript基础/imgs/00044.png]]
示例2

<!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 num = 3.54159
      var res = Number.parseInt(num)
      console.log(res, typeof res)
    </script>
</body>
</html>

![[06-javascript基础/imgs/00045.png]]
示例3

<!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 num = 3.54159
      var res = Number.parseFloat(num)
      console.log(res, typeof res)
    </script>
</body>
</html>

![[06-javascript基础/imgs/00046.png]]

03 Math对象

![[06-javascript基础/imgs/00047.png]]

04 String包装类型

4.1 访问字符串中某个位置的字符

<!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 name = "Hello Wrold"
    console.log(name[4])
    // charAt访问如果没有，返回的是空(所以开发中更加推荐使用这种方式，可以根据返回的结果来做判断)
    console.log(name.charAt(100))
  </script>
</body>
</html>

4.2 字符串的遍历

4.2.1 普通遍历

<!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 name = "Hello Wrold"
    for (var i = 0; i < name.length; i++) {
      console.log(name[i])
    }
  </script>
</body>
</html>

4.2.2. for...of...遍历

<!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 name = "Hello Wrold"
    for (var i of name) {
      console.log(i)
    }
  </script>
</body>
</html>

4.3 修改字符串

字符串具有不可变性
字符串在定义以后是不可修改的,接下来的操作是没有意义的

<!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 mes = "Hello Wrold"
    mes[2] = "a"
    console.log(mes)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00048.png]]
所以所谓的修改字符串其实都是生成了一个新的字符串

<!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 mes = "Hello Wrold"
    var mes1 = mes.toUpperCase()
    console.log(mes)
    console.log(mes1)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00049.png]]

4.4 查找字符串的2种方法

4.4.1 indexof

有2种结果:

  1. 搜索到了返回所在位置的索引
  2. 没有搜索到，返回-1
<!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 = "hello world"
    var str1 = "world"
    if (message.indexOf(str1) !==-1){
      console.log("字符串str1在message中");
    }
  </script>
</body>
</html>

4.4.2 includes

ES6中新增的方法，这个方法返回的结果是布尔值

<!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 = "hello world"
    var str1 = "world"
    if (message.includes(str1)){
      console.log("字符串world在message中");
    }
  </script>
</body>
</html>

4.5 字符串的判断

<!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 = "hello world"
      console.log(message.startsWith("he"));
      console.log(message.endsWith("ld"));
    </script>
  </body>
</html>

4.6 字符串的替换

不修改原来的字符串，而是新创建了一个字符串

<!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 = "hello world"
    console.log(message.replace("hello","你好"));
  </script>
</body>
</html>

4.7 获取子字符串

![[06-javascript基础/imgs/00050.png]]

4.8 字符串的拼接

<!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 str1 = "Hello"
    var str2 = " Wrold"
    var str3 = " test"
    // 第一种方法： +
    var str4 = str1 + str2
    console.log(str4)
    // 第2种方法: concat
    var str5 = str1.concat(str2)
    console.log(str4)
    console.log(str1.concat(str2, str3));
  </script>
</body>
</html>

4.9 删除首尾空格

<!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 str1 = "   Hello  "
    console.log(str1.trim())
  </script>
</body>
</html>

![[06-javascript基础/imgs/00051.png]]

4.10 字符串的切割

<!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 str1 = "aaa-bbbb-ccc"
     // 返回的是一个数组
    console.log(str1.split("-"))
    console.log(str1.split("-").join("*"))
  </script>
</body>
</html>

![[06-javascript基础/imgs/00052.png]]

05 数组包装类型

js中不支持用负索引的方式来访问数组中的元素，但是可以使用js提供的方法来实现

5.1 创建数组的方法

![[06-javascript基础/imgs/00053.png]]
如果传入的是一个数字，会被默认当成要创建一个对应长度的数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var arry1 = new Array(5)
    console.log(arry1)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00054.png]]

5.2 数组增加元素

5.2.1 数组的尾部添加元素

<!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 arr1 = ["abc", "cba", "nba"]
    arr1.push("test")
    console.log(arr1)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00055.png]]

5.2.2 数组的尾部删除元素

<!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 arr1 = ["abc", "cba", "nba"]
    arr1.pop()
    console.log(arr1)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00056.png]]

5.2.3 数组的头部添加元素

<!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 fruit = ["苹果","橘子","香蕉"]
    fruit.unshift("西瓜");
    console.log(fruit);
  </script>
</body>
</html>

![[06-javascript基础/imgs/00057.png]]

5.2.4 删除数组的头部元素

<!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 fruit = ["苹果","橘子","香蕉"]
    fruit.shift("苹果");
    console.log(fruit);
  </script>
</body>
</html>

![[06-javascript基础/imgs/00058.png]]

5.3 数组的splice方法(会修改原数组)

该方法可以实现数组测增删改查

5.3.1 删除操作

第一个参数：从什么位置开始
第二个参数: 删除元素的个数

<!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 strvar = ["abc","cba","nba","abcd"]
    strvar.splice(1,2)
    console.log(strvar);
  </script>
</body>
</html>

![[06-javascript基础/imgs/00059.png]]

5.3.2 新增操作

<!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 strvar = ["abc","cba","nba","abcd"]
    // 1表示的是在第1位置,0表示的不是删除的意思，而是增加的意思,123表示增加的元素(后面可以增加多个)
    strvar.splice(1,0,"123")
    console.log(strvar);
  </script>
</body>
</html>

![[06-javascript基础/imgs/00060.png]]

5.3.3 替换

<!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 strvar = ["abc","cba","nba","abcd"]
    // 1表示的是在第1位置,2表示增加2个元素,"123" 456表示增加的元素(后面可以增加多个)
    strvar.splice(1,2,"123",456)
    console.log(strvar);
  </script>
</body>
</html>

5.4 数组的length属性

5.4.1 获取数组的长度

<!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 strvar = ["abc","cba","nba","abcd"]
    console.log(strvar.length)
  </script>
</body>
</html>

5.4.2 清空数组

<!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 array = ["abc","cba","nba","abcd"]
    array.length = 0
    console.log(array)
  </script>
</body>
</html>

5.5 数组的遍历

5.5.1 for循环

<!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 array = ["abc","cba","nba","abcd"]
    for (var i = 0; i < array.length; i++){
      console.log(array[i])
    }
  </script>
</body>
</html>

5.5.2 for ... in ....

<!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 array = ["abc","cba","nba","abcd"]
    for (var index in array){
      console.log(array[index])
    }
  </script>
</body>
</html>

5.5.3 for ...of...

<!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 array = ["abc","cba","nba","abcd"]
    for (var item of array){
      console.log(item)
    }
  </script>
</body>
</html>

5.6 数组的其它方法

5.6.1 数组的截取slice

不修改原数组

<!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 array = ["abc","cba","nba","abcd", "ABC", "kobe"]
    // 默认截到最后
    console.log(array.slice(2))
    // 指定截取的范围(前包后不包)
    console.log(array.slice(2,4))
  </script>
</body>
</html>

![[06-javascript基础/imgs/00061.png]]

5.6.2 数组的拼接concat

<!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 array1 = ["abc","cba","nba"]
    var array2 = ["item1","item2"]
    // 后面可以写多个数组
    var newarry = array1.concat(array2)
    console.log(newarry)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00062.png]]

5.6.3 数组的查找

![[06-javascript基础/imgs/00063.png]]
find方法解析
![[06-javascript基础/imgs/00064.png]]
代码示例

<!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 students = [
      {id: 100, name: "kobe"},
      {id: 101, name: "james"},
      {id: 102, name: "lili"},
      {id: 103, name: "tom"}
    ]

    var stu = students.find(function(item){
      if (item.id === 100) return true
    })
    console.log(stu)
  </script>
</body>
</html>

![[06-javascript基础/imgs/00065.png]]

5.6.4 实现foreach函数

<!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"]
    function yfForEach(fn) {
      for (var i = 0; i < names.length; i++) {
        fn(names[i], i, names)
      }
    }

    yfForEach(function(item, index, names){
      console.log(item, index, names)
    })
  </script>
</body>
</html>

![[06-javascript基础/imgs/00066.png]]

<!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"]
    function yfForEach(fn, arry) {
      for (var i = 0; i < arry.length; i++) {
        fn(arry[i], i, arry)
      }
    }

    yfForEach(function(item, index, names){
      console.log(item, index, names)
    }, [123, 321, 234])
  </script>
</body>
</html>

![[06-javascript基础/imgs/00067.png]]

<!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"]
    names.yfForEach = function(fn){
      for (var i = 0; i < this.length; i++) {
        fn(this[i], i, this)
      }
    }

    names.yfForEach(function(item, index, names){
      console.log(item, index, names)
    })

  </script>
</body>
</html>

![[06-javascript基础/imgs/00068.png]]

<!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"]

    Array.prototype.yfForEach = function(fn){
      for (var i = 0; i < this.length; i++) {
        fn(this[i], i, this)
      }
    }

    names.yfForEach(function(item, index, names){
      console.log(item, index, names)
    })

  </script>
</body>
</html>

![[06-javascript基础/imgs/00069.png]]

标签：内置,console,log,05,javascript,JS,var,06,Document
From： https://www.cnblogs.com/yufc/p/18290801

相关文章

  • json数据写入到mysql数据中
    importpymysql#json文件中格式一个列表包含一个个的字典数据#[{"title":"胖猫事件-21岁游戏代练胖猫跳江身亡，PUA捞女女主谭竹遭网友报告视频","cover":"https://suvip888.com/20240516/U8NEMN2P/1.jpg","m3u8_url":"https://vodvip888.com/20240516/U8NEMN2P/......
  • 【js面试题】深入理解尾递归及其在JavaScript中的应用
    面试题：举例说明尾递归的理解，以及应用场景引言：在编程中，递归是一种常见的解决问题的方法，它允许函数调用自身来解决问题。然而，递归如果不当使用，可能会导致栈溢出错误，特别是在处理大量数据时。尾递归是一种特殊的递归形式，它能够优化递归调用，避免栈溢出的问题。本文将深入探......
  • 【JSP+Servlet+Maven】——优质外卖订餐系统之概论部分
    ......
  • CSE 105 Summer Session
    CSE 105Summer Session 1 2024Homework 1Due date: Sunday July 7 at 11:59pmInstructionsOne member of the group should upload your group submission to Gradescope. During thesubmissionprocess,theywillbepromptedtoaddthenameso......
  • 前端面试题29（js闭包和主要用途）
    JavaScript中的闭包是一个非常强大的特性，它允许一个函数访问并操作其词法作用域之外的变量。闭包的形成主要依赖于函数的作用域链，即函数可以访问在其外部定义的变量，即使外部函数已经执行完毕。下面我会通过几个方面来帮助你理解闭包的概念：闭包的定义闭包是一个函数及其......
  • Maven工程下：alibaba fastjson2的各种序列化:java对象转json对象、json对象转java对象
    pom文件导入fastjson2坐标：<dependency><groupId>com.alibaba.fastjson2</groupId><artifactId>fastjson2</artifactId><version>2.0.51</version></dependency>UserVO对象：@Data@AllArgsConstructor......
  • java比较json对象是否相等
    一、需求需要对比这2个json字符串是否完全一样(不用管顺序)1Stringdui="{\"adGroupVO\":{\"campaignId\":\"CAMPAIGN201912101000004559\",\"adGroupChannel\":{\"channelType\":\"SMS\",\"resourceCode\&......
  • [NodeJS] Streams流式数据处理
    在现代应用开发中，数据处理的效率和资源管理尤为重要。NodeJS作为一种高效的JavaScript运行时环境，通过其强大的流（Stream）功能，提供了处理大规模数据的便捷方式。流式数据处理不仅能够优化内存使用，还可以提高数据处理的实时性和效率。下文将介绍NodeJS中的流概念、流的类型以及如何利......
  • 获取Echarts的geoJson文件（省市/区县）
    1.获取市的级别直接使用阿里云提供的工具直接获取： https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=32.62087018318113&lng=118.43261718749999&zoom=4和 https://map.easyv.cloud/和 https://geojson.hxkj.vip/  2.获取县和区的细到街道的geoJson，需......
  • Nuxt框架中内置组件详解及使用指南（三）
    title:Nuxt框架中内置组件详解及使用指南（三）date:2024/7/8updated:2024/7/8author:cmdragonexcerpt:摘要：“Nuxt3框架中与组件的深度使用教程，包括如何使用这两个组件进行页面导航和加载指示的自定义配置与实战示例。”categories:前端开发tags:Nuxt3组件NuxtL......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99