js（51-75）

数组常用方法

51影响原数组的

push

在数组后面追加元素、
返回值是长度

    let arr=[2,5,7]
    let a=arr.push(3)
    document.write(arr)
    document.write("返回值",a)

pop

    let arr=[2,5,7]
    let a=arr.pop()
    document.write(arr)
    document.write("返回值",a)

在最后删除元素
返回值是删除的元素

unshift

    let arr=[2,5,7]
    let a=arr.unshift("haha")
    document.write(arr)
    document.write("返回值",a)

在前面追加元素
返回值是长度

shift

前面删除元素
返回值是删除的元素

splice（a,b）

a表示从什么位置开始，b表示要删除的个数

删除

返回值是删除的元素

    let arr=[2,5,7,3,0]
    let a=arr.splice(2,1)
    document.write(arr)
    document.write("返回值",a)
    document.write("
")
    let b=arr.splice(0,2)
    document.write(arr)
    document.write("返回值",b)

删除了两次

增加

    let arr=[2,5,7,3]
    let a=arr.splice(0,0,"one")
//在0位置不删除元素，在零处的元素换为one，原来在0位的往后移
    document.write(arr)
    document.write("返回值",a)
    document.write("
")
    let b=arr.splice(3,0,"two","three")
    document.write(arr)
    document.write("返回值",b)

reverse

    let arr=[2,5,7,3]
    let a=arr.reverse()
    document.write(arr)
    document.write("返回值",a)

sort

sort接受一个回调函数

    let arr=[21,15,7,3]
    let a=arr.sort(function(a,b){
        return a-b
    })
    document.write(arr)
    document.write("返回值",a)
    
    a-b为正序排列
    
    b-a为倒叙排列
    

a-b如下
b-a如下

52不影响原数组的

concat串联（拼接）

    let arr1=[1,2,3]
    let arr2=[4,5,6]
    let arr3=arr1.concat(arr2)
    let arr4=arr2.concat(arr1)
    document.write(arr3,"
",arr4)

    let arr1=[1,2,3]
    let arr2=[4,5,6]
    let arr3=arr1.concat(arr2,[8,9],0)
    document.write(arr3)
    

新复制方法，不影响原来内容的

    let arr1=[1,2,3]
    let arr3=arr1.concat()
    arr3.pop()
    document.write(arr1,"
",arr3)

join

改变原来数组的逗号化为别的符号

	 let arr1=[1,2,3]
    let arr2=arr1.join("-")
    let arr3=arr1.join("|")
    document.write(arr1,"
",arr2,"
",arr3,arr1.join("$"))

slice

slice(a,b)

a,b表示位置，包头不包尾
比如1,3意为从第一位到第二位的内容

	let arr=[4,5,"a","b"]
    let a=arr.slice(1,3)
    document.write(a)

输出结果为5，a

slice(a)

从a开始到最后

	let arr=[4,5,"a","b"]
    let a=arr.slice(1)
    document.write(a)

slice（）

实现复制
负值的位置

	let arr=[4,5,"a","b"]
    let a=arr.slice()
    let b=arr.slice(1,-1)
    document.write(arr,"
",a,"
")
    document.write(b)
    
    

indexOf

检索位置
返回-1则是找不到
若有重复的元素，则只能检索到第一个个位置
可以通过lastindexOf从后往前检索

	let arr=[4,5,"a","b"]
    let a=arr.indexOf("a")
    let b=arr.indexOf(4)
    document.write(a)
    document.write("
")
    document.write(b)

53数组去重

新数组 push

	let arr=[4,3,4,4,5,"a","a","b"]
    let arr2=[]
    for (let i=0;i<arr.length;i++){
        if(arr2.indexOf(arr[i])===-1){
            arr2.push(arr[i])
        }
    }
    document.write(arr2)

利用对象

new Set

new Set只允许没有重复的数组
Array.from可以将set结构转化为数组

	let arr=[4,3,4,4,5,"a","a","b"]
    let set=new Set(arr)
    document.write(set)
    document.write("
")
    console.log(set)
    let arr2=Array.from(set)
    //将set结构转换为数组结构
    document.write(arr2)

54数组方法3

forEach

	let arr=[4,5,"a"]
    arr.forEach(function(item,index,arr){
    //元素，位置，数组名
        document.write(item,index,arr)
        document.write("
")
    })

map映射

	let arr=[4,5,"a"]
    let arr2=arr.map(function(){
        return "ha"
        //注意给ha 加上双引号
    })
   document.write(arr2)
    

	let arr=[4,5,"a"]
    let arr2=arr.map(function(item){
        return item*item
    })
   document.write(arr2)

55字符串基本操作

	let arr=[4,5,"a"]
    let arr2=arr.map(function(item){
        return "
"+item+"
"
    })
   document.write(arr2.join(" "))

filter过滤

返回值只有true和false
可以通过比较运算符灵活运用

	let arr=[1,2,7,8,9]
    let arr2=arr.filter(function(item){
        return item>5
    })
   document.write(arr2)

输出结果7,8,9

对象的使用？？

every每个

	let arr=[63,67,91,80]
    let arr2=arr.every(function(item){
        return item>=60
    })
    document.write(arr2)
	let arr3=[63,67,51,80]
    let arr4=arr3.every(function(item){
        return item>=60
    })
    document.write(arr4)

可用于判读一个学生是否挂科

some

只要一个满足就为true

find

reduce叠加

结构let arr2=arr.reduce( function(previous,item){},a)

上式中a表示初始值
prev是上一次return的结构

	let arr=[1,2,3,4]
    let arr2=arr.reduce( function(prev,item){
        return prev+item
    },0)
    document.write(arr2)

输出结果为6

55字符串

length长度（只读）

下标（只读）

遍历

56案例 统计字母出现次数

	let str="aaabbccccd"
    let obj={}
    for(let i=0;i<str.length;i++){
        
        let key=str[i]
        if(obj[key]===undefined){
            //未出现过
            obj[key]=1
        }else{
            obj[key]++
        }
    }
   console.log(obj)

	let str="aaabbccccd"
    let obj={}
    for(let i=0;i<str.length;i++){
        let key=str[i]
       
        if(obj[key]){
            obj[key]++
        }else{
            obj[key]=1
        }
    }
   console.log(obj)

57字符串常用

索引

chartAt

返回索引对应的字符

	let str="abcdef"
    let str1=str.charAt(0)
    let str2=str.charAt(3)
    document.write(str1,str2)

返回值a d

charCodeAt

返回对应的unicode编码

	let str="abcde"
    let str1=str.charCodeAt(0)
    document.write(str1)
    let arr=[]
    for(let i=65;i<91;i++){
        arr.push(String.fromCharCode(i))
	//String.fromCharCode意为把字符串编码改为字符...??
    }
   document.write(arr)

indexOf

按照字符找位置
为-1就表示没有这个字符

	let str="Hello"
    document.write(str.indexOf("H"))
    //H 别忘加双引号
    document.write("
")
    document.write(str.indexOf("l"))
    //有重复的只能识别第一个
    输出结果为0  2

lastindexOf

大小写转换

全部转换为大写toUpperCase
全部转换为小写tolowerCase

	let str="Hello"
    document.write(str.toUpperCase())
    document.write("
")
    document.write(str.toLowerCase())

截取

substr（a,b）

从a开始，截取b个

substring（a,b）

从a开始到b结束，包前不包后

slice

和上边一样

（a,b）
（a）
(a,-b)

replace(a,b)替换

a是被替换的，b是想变成的
还可用正则表达式

split分割？？

把有分隔符的（或有类似分隔符的）字符串替换为数组

	let str="Hello"
    
    console.log(str.split(""))

concat拼接

trim去掉首尾空格

trimstrat（left）去掉首部空格

trimend（right）去掉尾部空格

58案例 模糊查询

数组的filter 字符串的indexOf

    let arr=["aaa","abc","bc","ac"]
    let a=arr.filter(function(item){
        return item.indexOf("a")!==-1
        //也可换为return item.indexOf("a")>-1
        //都是可以查到这个字符的意思，也就是存在
    })
   document.write(a)

   document.write("
")

    let b=arr.filter(function(item){
        return item.indexOf("b")!==-1
    })
   document.write(b)

？？？？

有点懵，但用着很6

    let arr=["aaa","abc","bc","ac"]
    let input=prompt("请输入要查询的")
    let a=arr.filter(function(item){
        return item.indexOf(input)!==-1
    })
   document.write(a)

59 json格式字符串

JSON.parse解码

把类似对象的字符串（json）转换为对象
json是后端给前端的

let str={"name":"lucy","age":18}
    //对象
    document.write(str)
    document.write("
")

    let str2='{"name":"lucy","age":18}'
    //字符串
    document.write(str2)
    let obj=JSON.parse(str2)
    document.write("
")
    document.write(obj)
    console.log(obj)

JSON.stringfy

把前端对象要转换成json给后端？

name也可不加引号

60模板字符串

用反引号`` 括起来的字符串可以换行
可以直接包裹

标签

61数字常用方法

保留小数位数toFixed

!!!！注意tofixed的返回类型是字符串，不能再与数字进行运算
可以先通过-0或、1或*1将其变为数字类型

    let a=12.345
    let b=a.toFixed(2)
    document.write(b)
    document.write("
")
    let c=a.toFixed(4)
    document.write(c)

Math对象！

Math.random

0-1的随机数

Math.round

四舍五入取整

Math.cell

向上取整
例如将4.46化为5

Math.floor

向下取整
将4.46化为4

Math.abs

    document.write(Math.abs(-12.34))
    document.write(Math.floor(-12.34))
    document.write(Math.round(-12.34))
 

Math.sqrt( )

Math.pow

Math.max

document.write(Math.max(1,4,9))

Math.PI

62 随机整数

为了概率同，所以选择向下取整（其他或向上取整也可不过包含与范围会改变）

函数

    function fn(min,max){
        return Math.floor(Math.random()*(max-min))+min
    }
    document.write(fn(100,200))
 

时间对象Date

其实是个对象，but自动转为了字符串

格式

	let time=new Date
    document.write(time)

> （GMT+8:00意为格林秩国际标准时间+8小时，我们在东八区）

一个参数

就是毫秒数

从1970开始计时

2个参数

    let time=new Date(2023,0)
    document.write(time)
    document.write("
")
    let time2=new Date(2022,3)
    document.write(time2)

多个参

    let time=new Date(2023,0,9,19,54)
    document.write(time)

字符串

这个的一月就是一月

    let time=new Date("2023-1-9 19:56:02")
    document.write(time)

64时间对象常用方法

a.getFullYear( )

    let time=new Date()
    b=time.getFullYear()
    document.write(b)

结果为2023

    let time=new Date（）
    document.write(time.getFullYear())

输出结果2023

a.getFullMonth（）

取值0-11对应1-12月

a.getDate（）

a.getDay（）

周六为0，周一到周六为1-6

a.gethours（）

a.getminutes（）

a.getseconds（）

a.getMilliseconds（）

a.getTime（）时间戳

存于后端

？？？？

a.setFullYear( )

a.setMonth( )

a.setDate( )

没有setday（周）

a.setHours（）

    let a=new Date()
    a.setHours(13)
    document.write(a)

？？？？？？？？？？
let a=new Date()
let b=a.setHours(13)
document.write(b)

a.setminutes（）

a.setSeconds（）

a.setMilliseconds（）

65定时器

倒计时定时器setTimeout

setTimeout（funct（）{ }，时间）
只是注册

间隔定时器setInterval

每两秒执行一次
    setInterval(function(){
        document.write(new Date())
        document.write("
")
    },2000)

停止

clearTimeout

clearInterval

    <div>
        <button id="btn1">time1截止按钮button>
    div> 
    <script>
        
        let time1=setInterval(function(){
            console.log(new Date())
            console.log("
")
        },1000)
        console.log(btn1)
        btn1.onclick=function(){
            document.write("time1已清除")
            clearTimeout(time1)
        }     
    script>
body>


为什么不可以日期在文档里，只显示一下就没有了

距某天的倒计时

    <div id="box"></div>
    <script>
        let targetDate= new Date("2022/6/18")
        function difftime(current,target){
            let miao=Math.ceil((target-current)/1000);
            let day=parseInt(miao/(60*60*24));
            let hours=parseInt(miao%(60*60*24)/(60*60));
            let minutes=parseInt(miao%(60*60)/60);
            let seconds=miao%60;
            let obj={
                day:day,
                hours:hours,
                minutes:minutes,
                seconds:seconds
            }
            return obj
        }
        setInterval(function(){
            let currentDate=new Date()
            let time=difftime(currentDate,targetDate)
            document.write=(`距离**还有${time.day}天${time.hours}时${time.minutes}分${time.seconds}秒`)
            document.write("
")
        },1000)
    </script>

67初始BOM

68浏览器可视窗口的尺寸

window只获取窗口的宽高

69 浏览器的弹出层

alert

<body>
    <div>
        <button id="btn">点击button>
    div> 
    <script>
        btn.onclick=function(){
            alert("一条提示信息")
        }
    script>
body>

输入框prompt

<body>
    <div>
        <button id="btn">点击弹出输入框</button>
    </div> 
    <script>
        btn.onclick=function(){
            let a=prompt("请输入信息")
            document.write(a)
        }
    </script>
</body>

js是单线程，同一时间只能干一件事

70浏览器的地址栏

地址可读可写

        <button id="btn">点击跳转</button>
    <script>
    documen.write（locat.href）
        btn.onclick=function(){
            location.href="https://editor.csdn.net/md?not_checkout=1?not_checkout&articleId=128621371"
        }
    </script>

location.reload

刷新

71 浏览器常见事件

load

resize

大小改变时执行

        window.onresize=function(){
            document.write("resize")
        }
窗口大小每次改变时，执行函数，打印resize

scroll

        window.onresize=function(){
            document.write("resize")
        }
每次滚动滚动条时，执行函数，打印resize,

72浏览器滚动距离

    <style>
        body{
            height: 2000px;
        }
    style>
    <script>
        window.onscroll=function()
        {console.log(document.documentElement.scrollTop)
        //若水平方向也有滚动条，可写为
		window.onscroll=function()
		{console.log(document.documentElement.scrollTop||document.documentElement.scrollLeft)
        
        }
    script>

通过if语句，显示一个东西什么时候出来

回到顶部

btn.onclick=function(){
window.scrollTo(0,0)
}

btn.onclick=function(){
window.scrollTo（{
left：0，
top：0
}）
}

73浏览器打开标签

window.open

window.close

<body>
    <button id="btn1">打开</button>
    <button id="btn2">关闭</button>
    <script>
        btn1.onclick=function(){
            window.open=("https://editor.csdn.net/md?not_checkout=1?not_checkout&articleId=128621371")
        }
        btn2.onclick=function(){
            window.close=("https://mp.csdn.net/mp_blog/manage/article?spm=1000.2115.3001.5448")
        }   
    </script>
</body>

74浏览器的历史记录

history.go(正数)前进
history.go(负数）后退
数字表示跳转的网页的个数

75浏览器本地存储

localStorage永久存储

    <script>
        存
        //只能存字符串类型，其他类型会强行转换为字符串
        //可以通过       
         //JSON.stringify
         //JSON.parse使用
         
        localStorage.setItem("name","lucy")
        取
        
        localStorage.getItem("name")
        删
        
        localStorage.removeItem("name")
        清空
        
        localStorage.clear()
    </script>

sessionStorage会话存储

页面关闭就丢失

    <script>
        增加
        sessionStorage.setItem("name","lucy")
        取
        sessionStorage.getItem("name")
        删
        sessionStorage.removeItem("name")
        清空
        sessionStorage.clear()
    </script>