03-JS中的内置类

已注销
54 阅读5分钟

01 原始类型的调用

00041.png

02 Number包装类型

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>

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>

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>

00046.png

03 Math对象

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>

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>

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 获取子字符串

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>

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>

00052.png

05 数组包装类型

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

5.1 创建数组的方法

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>

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>

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>

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>

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>

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>

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>

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>

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>

00062.png

5.6.3 数组的查找

00063.png

find方法解析

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>

00065.png

5.6.4 实现foreach函数

  • 第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 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>

00066.png

  • 第2个版本

解决names数组名写活

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

00067.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 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>

00068.png

  • 第4个版本

解决第3个版本不够通用的问题(上面只能针对names这个数组)

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

00069.png

06 其它常用包装类型

6.1 过滤函数filter

<!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 nums = [11, 13, 20, 24, 50, 80, 100]
    var newNums = nums.filter(function(item){
      return item % 2 === 0
    })
    console.log(newNums)
  </script>
</body>
</html>

6.2 映射map

<!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 nums = [10, 20, 30]
    var newNums = nums.map(function(item){
      return item * item
    })
    console.log(newNums)
  </script>
</body>
</html>

00070.png

6.3 累加reduce

<!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 nums = [10, 20, 30]
    // preValue表示第一的值
    // 0表示初始化值
    var res = nums.reduce(function(preValue, item){
      return preValue + item
    },0)
    console.log(res)
  </script>
</body>
</html>
avatar
文章
阅读
粉丝