js学习50-75

已于 2023-01-10 15:22:23 修改
阅读量198 收藏
点赞数
文章标签： javascript 学习 前端
于 2023-01-09 21:07:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72343101/article/details/128612833
版权

目录

一.数组常用方法

在这里插入图片描述

1.1方法1（影响原数组的方法）

在这里插入图片描述
在这里插入图片描述
即使用push后，push属性的返回值为数组的长度
例如：

<!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>
    
</body>
<script>
    var arr=[1,2,4,9]
    var a =arr.push(3);
    console.log(a)
</script>
</html>

显示为：
在这里插入图片描述
即数组的长度为5
请添加图片描述
使用pop后会删除后面的元素，且pop的返回值为被删掉的那个元素
例如

<!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>
    
</body>
<script>
    var arr=[1,2,4,9]
    var a =arr.pop()
    console.log(arr)
    console.log(a)
</script>

显示为：
在这里插入图片描述
在这里插入图片描述
跟push同理
在这里插入图片描述
跟pop同理

  • splice（可以在任意位置增加或删除）
    • 删除：
      语法var 变量名= 数组名.splice( 下标位置，要删除的数组数量)
<!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>
    
</body>
<script>
    var arr=[1,2,4,9]
    var res=arr.splice(1,2)
    console.log(arr)
</script>
</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>
    
</body>
<script>
    var arr=[1,2,4,9]
    var res=arr.splice(1,2)
    console.log(arr)
    console.log(res)
</script>
</html>

显示为：
在这里插入图片描述

  • 1
    • 增加：
      直接在splice中加上第三个参数
<!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>
    
</body>
<script>
    var arr=[1,2,4,9]
    var res=arr.splice(1,2,"acc")
    console.log(arr)
    console.log(res)
</script>
</html>

显示为：
在这里插入图片描述
不删除原有元素添加新元素的方法
var res=arr.splice(1,0,"acc")把第二个参数改成0

  • 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>
    
</body>
<script>
    var arr=[1,2,3,4]
    arr.reverse()
    console.log(arr)
</script>
</html>

在这里插入图片描述

  • sort排序
    直接使用sort排序会按照位数进行排列
<!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>
    
</body>
<script>
    var arr=[11,22,56,7,3]
    arr.sort()
    console.log(arr)
</script>
</html>

显示为：
在这里插入图片描述
这里个位数按照从小到大，十位数也是这样排列
使用函数的参数可以使sort来按照从小到大的顺序排列

<!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>
    
</body>
<script>
    var arr=[11,22,56,7,3]
    arr.sort(function(a,b){
        return a-b
    })
    console.log(arr)
</script>
</html>

在这里插入图片描述
在这里，a-b就是从小到大，b-a就是从大到小。

1.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>
    
</body>
<script>
    var arr1=[56,7,3]
    var arr2=[1,2,6]
    var arr3= arr1.concat(arr2,"cds")
    console.log(arr1,arr2,arr3)
</script>
</html>

在这里插入图片描述
在这里插入图片描述
可以利用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>
    
</body>
<script>
    var arr1=[56,7,3]
    var arr2=[1,2,6]
    var arr3= arr1.concat()
    console.log(arr1,arr3)
</script>
</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>
   
</body>
<script>
   var arr1=[56,7,3]
   document.write(arr1.join("|"))
</script>
</html>

在这里插入图片描述
一些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>
    
</body>
<script>
    var arr1=["aaa","bbb","ccc","ddd"]
    var arr2=arr1.slice(0,2)
    console.log(arr1,arr2)
</script>
</html>

在这里插入图片描述
如果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>
    
</body>
<script>
    var arr1=["aaa","bbb","ccc","ddd"]
    var arr2=arr1.slice(2)
    console.log(arr1,arr2)
</script>
</html>

在这里插入图片描述
不传参数就相当于复制了一份新的数组
在这里插入图片描述
这里就是数组长度加上-1

  • indexOf 返回查找元素的索引值（若值为-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>
    
</body>
<script>
    var arr1=["aaa","bbb","ccc","ddd"]
    var arr2=arr1.indexOf("ccc")
    var arr3=arr1.indexOf("abc")
    console.log(arr2,arr3)
</script>
</html>

显示为；
在这里插入图片描述
若有相同的值，indexOf只会查找第一个元素，可以在iindexOf中添加第二个参数，第二个参数的意思就是从这个索引开始查询

<!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>
    
</body>
<script>
    var arr1=["aaa","bbb","ccc","ddd","ccc"]
    var arr4=arr1.indexOf("ccc")
    var arr2=arr1.indexOf("ccc",3)
    var arr3=arr1.indexOf("abc")
    console.log(arr2,arr3,arr4)
</script>
</html>

在这里插入图片描述
在这里插入图片描述
从后面开始查找，与indexOf类似

1.3方法3

在这里插入图片描述
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>
    
</body>
<script>
    var arr=["aaa","bbb","ccc","ddd"]
    arr.forEach(function(item,index,arr){
        console.log(item,index,arr)
    })
</script>
</html>

item为数组内容，index为索引，arr为原数组
显示为：
在这里插入图片描述
在这里插入图片描述
会返回所有元素（使用item时）
在这里插入图片描述

<!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>
    
</body>
<script>
    var arr=[1,2,3,4]
    var arr2=arr.map(function(item){
        return item*item
    })
    console.log(arr2)
</script>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述
显示为：
在这里插入图片描述
在这里插入图片描述
像电商平台中的价格筛选
filter的回调函数返回值只有ture和flase，ture代表这个数值可以通过，flase表示不能通过
例如

<!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>
    
</body>
<script>
    var arr=[1,2,3,4]
    var arr1=arr.filter(function(){
        return true
    })
    console.log(arr1)
</script>
</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>
    
</body>
<script>
    var arr=[1,2,3,4]
    var arr1=arr.filter(function(item){
        return item>2
    })
    console.log(arr1)
</script>
</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>
    
</body>
<script>
    var arr=[
        {
            name:"aaa",
            price:111
        },
        {
            name:"bbb",
            price:200
        },
        {
            name:"ccc",
            price:300,
        }
    ]
    var arr1=arr.filter(function(item){
        return item.price>200
    })
    console.log(arr1)
</script>
</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>
    
</body>
<script>
    var arr=[
        {
            name:"aaa",
            price:111
        },
        {
            name:"bbb",
            price:200
        },
        {
            name:"ccc",
            price:300,
        }
    ]
    var arr1=arr.every(function(item){
        return item.price>200
    })
    console.log(arr1)
</script>
</html>

在这里插入图片描述
上述every代码就是会将所有price的值与200进行对比，若有一个小于等于200，就会返回flase，只有全部大于200才会返回ture
证明arr中的对象不是都大于200.
在这里插入图片描述
如果说将every类比做数学逻辑中的且，那么，some就是或

<!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>
    
</body>
<script>
    var arr=[
        {
            name:"aaa",
            price:111
        },
        {
            name:"bbb",
            price:200
        },
        {
            name:"ccc",
            price:300,
        }
    ]
    var arr1=arr.some(function(item){
        return item.price>200
    })
    console.log(arr1)
</script>
</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>
    
</body>
<script>
    var arr=[
        {
            name:"aaa",
            price:111
        },
        {
            name:"bbb",
            price:200
        },
        {
            name:"ccc",
            price:300,
        }
    ]
    var arr1=arr.find(function(item){
        return item.price==200
    })
    console.log(arr1)
</script>
</html>

在这里插入图片描述
在这里插入图片描述
reduce第一个参数为回调函数，第二个参数为初始值，若初始值为100，就会从100开始相加

 <!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>
    
</body>
<script>
    var arr=[1,2,3,3]
    var arr1=arr.reduce(function(prev,item){
        return prev+item
    },100)
    console.log(arr1)
</script>
</html>

在这里插入图片描述
把100改成0
在这里插入图片描述
原理：
//第一次：prev 0 item 1
//第二次：prev 1 item 2
//第三次：prev 3 item 3
//第四次：prev 6 item 3
再相加就变成了9
若初始值为字符串，就会拼串

二.数组去重

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>
    
</body>
<script>
    var arr1=[1,1,2,3,4,5,5,7,7,6,8,8]
    var arr2=[]
    for(var i=0;i<arr1.length;i++){
        if(arr2.indexOf(arr1[i])==-1){
            arr2.push(arr1[i])
        }
    }
    console.log(arr2)
</script>
</html>

在这里插入图片描述

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>
    
</body>
<script>
    var arr1=[1,1,2,3,4,5,5,7,7,6,8,8]
    var obj={}
    for(i=0;i<arr1.length;i++){
        obj[arr1[i]]=0
    }
    console.log(obj)
    var arr2=[]
    for(var i in obj){
        arr2.push(i-0)
    }
    console.log(arr2)
</script>
</html>

显示为：
请添加图片描述

2.2方法三

set结构中不能有重复的内容
new set

<!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>
    
</body>
<script>
    var arr1=[1,1,2,3,4,5,5,7,7,6,8,8]
    var set1=new Set(arr1)
    console.log(set1)
</script>
</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>
    
</body>
<script>
    var stn=new String("hello")
    console.log(stn)
</script>
</html>

在这里插入图片描述
即字符串也有length属性，跟数组类似
在这里插入图片描述
只能读不能写，即不能修改
在这里插入图片描述
与length同理

四.字符串练习

<!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>
    
</body>
<script>
    var str="abcabcab"
    var obj={}
    for(var i=0;i<str.length;i++){
        console.log(str[i])
        var n=str[i]
        // if(obj[n]==undefined){
        //     obj[n]=1
        // }
        // else{
        //     obj[n]++
        // }
        if(obj[n]){
            obj[n]++
        }
        else
        {
            obj[n]=1
        }
    }
    console.log(obj )
</script>
</html>

在这里插入图片描述

五.字符串的常用方法

在这里插入图片描述
使用chartAt(索引)方法可以返回索引所对应的字符

<!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>
    
</body>
<script>
    var str="abcabcab"
    var str1=str.charAt(2)
    console.log(str1)
</script>
</html>

在这里插入图片描述
在这里插入图片描述
chartCodeAt(索引)返回字符所对应的字符编码(ASCII编码表)

<!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>
    
</body>
<script>
    var str="abcabcab"
    var str1=str.charCodeAt(2)
    console.log(str1)
</script>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
formCharCode可以将获取的数字转化为相对应的字符，根据ASCII表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

toUpperCase()可以将字符串所有字母转化为大写，toLowerCase()可以将字符串所有字母转化为小写

<!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>
    
</body>
<script>
    var str="aBsadCVcaCSD"
    var str1=str.toLowerCase()
    var str2=str.toUpperCase()
    console.log(str1,str2)
</script>
</html>

在这里插入图片描述
在这里插入图片描述

  • substr
<!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>
    
</body>
<script>
    var str="aBsadCVcaCSD"
    var str1=str.substr(0,3)
    console.log(str1)
</script>
</html>

在这里插入图片描述

  • substring(包前不包后)

不能利用负数

且索引只包括前面不包括后面

<!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>
    
</body>
<script>
    var str="aBsadCVcaCSD"
    var str1=str.substring(0,3)
    console.log(str1)
</script>
</html>

在这里插入图片描述
可以看到，索引3所对应的a没有被截取
若只传输一个参数，会从那个参数的索引传递到最后一个索引

<!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>
    
</body>
<script>
    var str="aBsadCVcaCSD"
    var str1=str.substring(1)
    console.log(str1)
</script>
</html>

在这里插入图片描述

  • slice
    与substring一样，与上述数组的效果一样
    首字母大写
<!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>
    
</body>
<script>
    var str="sanchishuai"
    console.log(str.substring(0,1).toUpperCase()+str.substring(1))
</script>
</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>
    
</body>
<script>
    var str="sanchishuai"
    var str1=str.replace("a","*")
    console.log(str1)
</script>
</html>

在这里插入图片描述
只能替换遇到的第一个，若想都替换，使用for循环或是以后学的正则表达式
在这里插入图片描述
split可以将一个字符串分割成一个数组

<!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>
    
</body>
<script>
    var str="a,b,c,d"
    console.log(str.split(","))
</script>
</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>
    
</body>
<script>
    var str="a,b,c,d"
    console.log(str.split(""))
</script>
</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>
    
</body>
<script>
    var arr=["aaa","abc","bcc","bcd","ddd","ccd"]
    var res=arr.filter(function(item){
        return item.indexOf("b")>-1
    })
    console.log(res)
</script>
</html>

在这里插入图片描述
在这里插入图片描述
简单的查询

七.json格式字符串

前后端链接的通道
可以转化为对象
要求严格，属性名必须加上双引号，后面不能由多余的，
在这里插入图片描述

格式
var 变量名='{ "属性名"：值，"属性名"：值}'或var 变量名="{ '属性名'：值，'属性名'：值}"
转化方式
var 对象名 =JSON.parse(json字符串名)

<!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>
    
</body>
<script>
    var str='{"name":"json","age":18}'
    var obj=JSON.parse(str)
    console.log(obj)
</script>
</html>

显示为：
在这里插入图片描述
当然，也可以用json将js的对象转化为json的形式
语法；var json字符串名 =JSON.stringify(对象名)

<!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>
    
</body>
<script>
    var str={"name":"json","age":18}
    var obj=JSON.stringify(str)
    console.log(obj,str)
</script>
</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 b="shuaibi"
        var a=`my name is ${b}`
        document.write(a)
    </script>
</body>
</html>

在这里插入图片描述

注： var a=my name is ${b}这里用到了反引号，而不是常用的双引号单引号，且${b}这个大括号就相当于一个js环境，所有的js的东西都可以使用
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

九.数字（number）常用方法

在这里插入图片描述
toFixed()保留小数位
且返回类型是字符串（如果要进行数值的加减，需要先把返回值-0再进行操作）
参数就是小数的位数

<!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 a=123.12345
        console.log(a.toFixed(3))
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

数学方法
在这里插入图片描述
随机数，可以取随机数取值范围是0~1不包括1但是包括0，传参数没有太大作用，还是随机生成数
在这里插入图片描述

<!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 a=123.61
        var b=123.12
        console.log(Math.round(b))
        console.log(Math.round(a))
        
    </script>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述
即ceil向上取整，floor向下取整

<!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 a=123.61
        var b=123.12
        console.log(Math.ceil(b))
        console.log(Math.floor(a))
        
    </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 a=123.61
        var b=-123.12
        console.log(b)
        console.log(Math.abs(b))
        
    </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 a=16
        var b=-123.12
        console.log(Math.sqrt(a))
        console.log(Math.abs(b))
        
    </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>
        console.log(Math.pow(2,4))
    </script>
</body>
</html>

显示为：16
在这里插入图片描述
求最大值，可以传多个参数
请添加图片描述
求最小值，可以传多个参数

<!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(Math.max(1,2,4,56,1,3))
        console.log(Math.min(1,2,4,56,1,3))
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
圆周率
在这里插入图片描述

十.随机整数

0-10不包含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 res=Math.floor(Math.random()*10)
       console.log(res)
   </script>
</body>
</html>

0-10包含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 res=Math.floor(Math.random()*11)
       console.log(res)
   </script>
</body>
</html>

把random后面乘的数转换成11就行了，同理，若是0-100，把数就换成100
10-20不包含20

<!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 res=Math.floor(Math.random()*10)+10
       console.log(res)
   </script>
</body>
</html>

10-20包含20

<!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 res=Math.floor(Math.random()*11)+10
       console.log(res)
   </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>
        //函数从最小值到最大值不包含
        function getRad(min,max){
            if(min>max){
                console.error("参数有误")
            }
            return Math.floor(Math.random()*(max-min))+min
        }
        console.log(getRad(41,40))
    </script>
</body>
</html>

在这里插入图片描述
同理，包含加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 date=new Date()
        console.log(date)//自动转为字符串
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注：时间会从1970年开始添加

<!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(1000)
        console.log(date)
    </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 date=new Date(2023,10)
        console.log(date)
    </script>
</body>
</html>

在这里插入图片描述

注：月份与数组一样，是从0开始记录的，所以上述代码第二个参数虽然是10，但是显示的是11月份

多个参数

<!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(2023,7,9,10,5,10)
        console.log(date)
    </script>
</body>
</html>

在这里插入图片描述
2023年8月9日，10：05：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 date=new Date("2023-8-9 10:5:10")
        console.log(date)
    </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 date=new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth())
        console.log(date.getDate())
    </script>
</body>
</html>

在这里插入图片描述
即现在是2023年1月9日，因为月份是从0开始计数，所以是一月
在这里插入图片描述
获取周的信息，周日是0，周一到周六是1-6
在这里插入图片描述

从上到下分别是，获取：时，分，秒，毫秒
在这里插入图片描述
即现在距离1970年的毫秒数

<!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()
        console.log(date.getTime())

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

在这里插入图片描述

在这里插入图片描述
单独设置一个新的时间
在这里插入图片描述
在这里插入图片描述
从上至下分别是新设置的年，月，日，时，分，秒。
在这里插入图片描述
设置一个时间戳

十三.定时器

在这里插入图片描述

  • 倒计时计时器
    在这里插入图片描述
    setTimeout()
<!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>
        setTimeout(function(){
            alert("nbnb")
        },2000)
    </script>
</body>
</html>
  • 间隔计时器
    setInterval(要执行的函数，多长时间后执行)
    与倒计时计时器原理基本相同语法也类似，只是将倒计时转换成了间隔
<!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>
        setInterval(function(){
            console.log("nnnn")
        },2000)
    </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 time1=setInterval(function(){
            console.log(new Date())
        },1000)
        var time2=setTimeout(function(){
            alert("nbnb")
        },2000)
        console.log(time1,time2)
    </script>
</body>
</html>

在这里插入图片描述
这里的1指的是time1，2就是time2
先注册的就是1，后注册的是2

  • 清除定时器
    通过clearTimeout()方法来清除
    下面的代码使用了一些后面的东西
<!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>
    <button id="btn1">清除1</button>
    <button id="btn2">清除2</button>
    <script>
        var time1=setInterval(function(){
            console.log(new Date())
        },1000)
        var time2=setTimeout(function(){
            alert("nbnb")
        },2000)
        console.log(time1,time2)
        console.log(btn1,btn2)//直接通过id，拿到按钮对象
        btn1.onclick=function(){
            console.log("btn1 click")
            clearTimeout(time1)
        }
        btn2.onclick=function(){
            console.log("btn2 click")
            clearTimeout(time2)
        }
    </script>
</body>
</html>

在这里插入图片描述

点击按钮就会清除计时器

  • 异步执行问题
    在这里插入图片描述

异步执行即，按照顺序，原本是setTimeout先执行，再执行console.log（“2222222”），但是由于计时器的存在，使得setTimeout的语句后执行，这样就叫做异步执行
同步执行是一定在异步执行之前的
若同步执行陷入死循环，则异步永远也不会执行

十四.倒计时

<!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 curdate=new Date()
        var tardate=new Date("2023/1/11")
        console.log(tardate-curdate)//时间戳差值
    </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>
    <div id="box">

    </div>
    <script>
        var tardt=new Date("2023/1/11")
        function dtime(sur,tar){
            var sub = Math.ceil((tar-sur)/1000)
            var day =parseInt(sub/(60*60*24))
            var hour =parseInt(sub%(60*60*24)/(60*60))
            var minutes= parseInt(sub%(60*60)/60)
            var seconds=sub%60
           var obj={
                day:day,
                hour:hour,
                minutes:minutes,
                seconds:seconds
            }
            return obj
        }
        setInterval(function(){
            var surdt=new Date()
            var res=dtime(surdt,tardt)
            // document.write(`后天还有${res.day}天，${res.hour}小时，${res.minutes}分钟，${res.seconds}秒`)
            // document.write("<br>")
            box.innerHTML=`后天还有${res.day}天，${res.hour}小时，${res.minutes}分钟，${res.seconds}秒`
        },1000)
    </script>
</body>
</html>

这里的innerHTML属性会覆盖掉上一个的值，所以可以显示出动态效果

十五.BOM

  • 引入
    在这里插入图片描述

获取浏览器窗口的尺寸

在这里插入图片描述

<!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(window.innerHeight,innerHeight)
        console.log(window.innerWidth,innerWidth)
    </script>
</body>
</html>

在这里插入图片描述
这里的宽和高都是包括滚动条的，且是只算显示出来的区域
在这里插入图片描述
即上面白色的区域

浏览器的弹出层

  • alert 是在浏览器弹出一个提示框

    window.alert('我是一个提示框')

    在这里插入图片描述

    • 这个弹出层知识一个提示内容，只有一个确定按钮
    • 点击确定按钮以后，这个提示框就消失了

  • confirm 是在浏览器弹出一个询问框

    var boo = window.confirm('我是一个询问框')
console.log(boo)

    在这里插入图片描述

    • 这个弹出层有一个询问信息和两个按钮
    • 当你点击确定的时候，就会得到 true
    • 当你点击取消的时候，就会得到 false

  • prompt 是在浏览器弹出一个输入框

    var str = window.prompt('请输入内容')
console.log(str)

在这里插入图片描述

  • 这个弹出层有一个输入框和两个按钮
  • 当你点击取消的时候，得到的返回值是 null
  • 当你点击确定的时候得到的返回值就是你输入的内容

浏览器的地址信息

  • 在 window 中有一个对象叫做 location
  • 就是专门用来存储浏览器的地址栏内的信息的

location.href

  • location.href 这个属性存储的是浏览器地址栏内 url 地址的信息

    console.log(window.location.href)
    • 会把中文变成 url 编码的格式

  • location.href 这个属性也可以给他赋值

 window.location.href = './index.html'
 // 这个就会跳转页面到后面你给的那个地址

location.reload

  • location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理
  window.location.reload()
  • 注意： 不要写在全局，不然浏览器就会一直处在刷新状态

浏览器的常见事件

浏览器的 onload 事件

  • 这个不在是对象了，而是一个事件

  • 是在页面所有资源加载完毕后执行的

    window.onload = function () {
  console.log('页面已经加载完毕')
}

在 html 页面中把 js 写在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 这个代码执行的时候，body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div

      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 页面中把 js 写在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>

    <script>
    	// 这个代码执行的时候，body 已经加载完毕了
      // 在这里就可以获取到 div，写不写 window.onload 就无所谓了

      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </body>
</html>

浏览器的 onresize 事件

  • 这个 onresize 事件是当浏览器窗口的大小发生改变的时候触发
    <script>
     window.onresize=function(){
        console.log("aaaa")
     }
</script>

浏览器的 onscroll 事件

  • 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发

  • 或者鼠标滚轮滚动的时候出发

    window.onscroll = function () {
  console.log('浏览器滚动了')
}
    • 注意：前提是页面的高度要超过浏览器的可是窗口才可以

浏览器的滚动距离

  • 浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离
  • 浏览器没有动，只不过是页面向上走了
  • 所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
  • 所以不是在用 window 对象了，而是使用 document 对象

scrollTop

  • 获取的是页面向上滚动的距离,只要浏览器的滚动条滚动，就会出现滚动距离，显示滚上去的距离

  • 一共有两个获取方式

    • document.body.scrollTop
    • document.documentElement.scrollTop
    window.onscroll = function () {
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
}
    • 两个都是获取页面向上滚动的距离
    • 区别：
      • IE 浏览器
        • 没有 DOCTYPE 声明的时候，用这两个都行
        • 有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
      • Chrome 和 FireFox
        • 没有 DOCTYPE 声明的时候，用 document.body.scrollTop
        • 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop（一般用这个）
      • Safari
        • 两个都不用，使用一个单独的方法 window.pageYOffset

  • 所以使用的时候一般是把console.log(document.body.scrollTop)和console.log(document.documentElement.scrollTop)一起使用，确保兼容性
    即在这里插入图片描述
    这种形式

scrollLeft

  • 获取页面向左滚动的距离

  • 也是两个方法

    • document.body.scrollLeft

    • document.documentElementLeft

      window.onscroll = function () {
  console.log(document.body.scrollLeft)
  console.log(document.documentElement.scrollLeft)
}

    • 两个之间的区别和之前的 scrollTop 一样

  • 用法：

<!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>
    <style>
        div{height: 3003px;}
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        console.log(document.documentElement.scrollTop||document.body.scrollTop)
         if((document.documentElement.scrollTop||document.body.scrollTop)>100){
            console.log("显示1111")
         }
         else{
            console.log("显示2222")
         }
    </script>
</body>
</html>

浏览器打开新标签页

  • 使用window的open属性,可以打开新标签页
<!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>
    <button id="btn">
        111111
    </button>
    <script>
        btn.onclick=function(){
            window.open("https://www.baidu.com")
        }
    </script>
</body>
</html>
  • 使用window的close属性,可以关闭本身的标签页

浏览器的历史记录

  • window 中有一个对象叫做 history
  • 是专门用来存储历史记录信息的

history.back

  • history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮
    window.history.back()
    • 前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forword

  • history.forword 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮
    window.history.forward()
    • 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

浏览器本地存储

会把数据存储在浏览器的一个加密文件内
localStorage

//增（存），只能存字符串，所以，如果要存储多个数据，可以利用JSON字符串把对象转化为字符串，取出时再转化为对象
localStorage.setItem("name","kerwin")//第一个参数是名称，可以任意取，第二个参数是要取的数据
//取
localStorage.getItem("name")//返回值为取出来的数据
//删
localStorage.removeItem("name")
//清空
localStorage.clear()

增（存），只能存字符串，所以，如果要存储多个数据，可以利用JSON字符串把对象转化为字符串，取出时再转化为对象

例如

<!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>
    <button id="btn">
        111111
    </button>
    <script>
        btn.onclick=function(){
            localStorage.setItem("name","6666")
        }
    </script>
</body>
</html>

点击按钮后
在这里插入图片描述
sessionStorage

//增
sessionStorage.setItem("name","kerwin")
//取
sessionStorage.getItem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionStorage.clear()

localStorage与sessionStorage的区别
请添加图片描述

案例-记住用户名

<!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>
    <div>
        用户名：
        <input type="text" id="username">
    </div>
    <div>
        密码：
        &nbsp;&nbsp;
        <input type="password" id="password">
    </div>
    <div>
        <button id="login">登录</button>
    </div>
    </button>
    <script>
        var urn=localStorage.getItem("uesrname")
        var psn=localStorage.getItem("password")

            username.value=urn
            password.value=psn
        	
        login.onclick=function(){
            localStorage.setItem("uesrname",username.value)
            localStorage.setItem("password",password.value)
        }
    </script>
</body>
</html>
三池丶
关注
leetcode打家劫舍带输入输出-js-ts-Algorithms:Typescript与Javascript算法以及数据结构练习
06-30
Javascript 重构技巧 算法 以及 数据结构 练习 环境: typescript: ^4.3.2 ts-node: ^10.0.0 Typescript 语法和类型 学习 : 我的 Leetcode : 数据结构: Leetcode 解题: # 题名 难度 1 简单 2 中等 3 中等 4 困难 5 ...
JavaScript实现图片倒影效果 - reflex.js
10-21
JavaScript 实现图片倒影效果是一种常见的前端特效，用于增加页面的视觉吸引力。在本文中，我们将探讨如何使用 reflex.js 库来创建这种效果。...学习并熟练掌握 reflex.js 的用法，无疑将对你的前端开发技能大有裨益。
three.js和vue.js学习 -- 创建一个3d模型demo
qq_44787943的博客
04-08 2411
写在开头 转载链接： https://zhuanlan.zhihu.com/p/333615381 https://techbrood.com/threejs/docs 属于对该项目的学习，对于其中基础部分的细分和笔记 准备 three的流程参考图 Part1：创建项目，引入three 同样使用vue-cli脚手架直接搭建vue项目 cd 到当前项目目录下 vue init webpack xxxxx xxx表示项目名称 安装 three npm install -D three 引入three im
D3.js 基础学习笔记
985小菜鸡
06-01 3825
D3 stands for Data-Driven Documents. D3.js 是一个用于根据数据操作文档的 JavaScript 库。D3.js 是一个在大量网站中使用的动态、交互式、在线数据可视化框架。
javascript学习-svg绘制条形图
qq_43368682的博客
08-02 529
代码： 主要用来理解svg，不是重点 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .axis{ stroke: #999; stroke-width: 2px; } </style> </head> <
JS基础学习
2301_80956581的博客
03-24 1744
【代码】【无标题】
Tomcat学习--Smart Tomcat 安装部署
骑牛小道士
11-12 4745
Tomcat 学习
学习css的clip-path属性
gaotlantis的博客
07-11 536
通过本文的学习,你将会学到认识并学习css属性clip-path的一些用法搭配使用JS在网站上创建好玩的交互效果clip-path是 CSS 的一个属性，它允许你定义一个剪裁区域，用于裁剪元素的显示区域。这个剪裁区域可以是基本形状、SVG 路径、或是外部图像等。被裁剪的元素只会显示在定义的剪裁区域内，超出部分会被隐藏。
AutoJs学习-截屏器
空名先生
09-04 5429
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
web可视化学习----tween.js前端动画库
Bill的博客
01-20 3676
web可视化学习—-tween.js前端动画库tween.js是一个强大的js动画库特点：性能：基于底层高效率的方法; 精度：简单的完成复杂动画的实现; 帧率：帧平滑意味着页面上可大量符合流媒体; JQuery:依赖jQuery的易用性; 简单使用：简单的快速使用;1.开始使用tween.js$( element ).tween( { property : options } );optio
three.js学习-智慧城市
weixin_43909743的博客
10-16 1852
three.js实现的智慧城市
2024最新版JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理
Amo Xiang的博客
05-02 1944
本文从原理的角度讲解JS是如何进行混淆的，混淆实际上就是把核心的js代码计算逻辑混淆掉从而增加阅读难度的一种方法，执行的效果是等同的，本文的内容是学好AST混淆和还原JS代码的基础，希望读者要引起重视。
JavaScript - Complete JavaScript professional tips secrets
07-03
ctx.arc(75, 75, 50, 0, Math.PI*2, true); // 绘制圆形 ctx.closePath(); ctx.stroke(); // 实际绘制路径 ``` #### 第二章：函数 **第一节：函数作用域** 在JavaScript中，每个函数都有自己的作用域，这意味着在...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 852
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 414
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 379
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 576
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1163
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 319
【代码】如何使用Redisson的布隆过滤器？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值