JavaScript复习：三

三十七、数组的常用方法

<1>

        var arr = [1,2,3,4,5,6,7]

        // push后面追加元素
        // 返回值 长度
        var res = arr.push(100);
        console.log(arr);
        console.log(res);

        // pop 后面删除元素
        // 返回值 删除的元素
        var respop = arr.pop();
        
        // unshift 前面追加元素
        // 返回值 长度
        var resunshift = arr.unshift("小明");

        // shift 前面删除元素
        // 返回值 删除的这个元素
        var resshift = arr.shift();

        // splice 删除 (第几个下标，删几个)
        var ressolice = arr.splice(1,1)

        // splice 增加 (第几个小标，0（不删除任何）, 增加的)
        var ressolice = arr.splice(1,1,"小红","小白");

        // reverse 倒序

        var arr3 = [2,1,3,4]
        arr3.reverse();
        console.log(arr3);

        // sort 排序
        var arr4 = [11,21,3,56,7]
        arr4.sort();


        // sort接受一个回调函数
        arr4.sort(function(a,b){
            // return a - b; 正序排序
            // return b - a; 倒序排序
        })
        console.log(arr4);

<2>

        // 不影响原数组的方法

        // concat 拼接
        // arr1 = [1,2,3]
        // arr2 = [4,5,6]
        // var arr3 = arr1.concat(arr2);

        // var arr4 = arr2.concat(); //复制方法
        // arr4.pop()
        // console.log(arr4);

        // var arr = [1,2,3,4,5]
        // document.write(arr.join("|"));

        // join 数组=>字符串
        // var arr = []
        // for(var i=0;i<5;i++){
        //     arr.push("<li>"+i+"</li>");
        // }
        // document.write(arr.join(""));

        // slice 截取 (开始索引，结束索引)
        var arr = ["aaa","bbb","ccc"]
        var arr2 = arr.slice(0,2) //报前不报后
        
        // indexOf 正序查找 -1表示找不到 
        var arr3 = ["aaa","bbb","ccc"]
        var res = arr.indexOf("aaa",2) //2 表示从下标为2的位置开始查

        // lastindexOf 倒序查找 -1表示找不到 

<3>

        //  forEach 遍历
        // var arr = ["aaa","bbb","ccc"]
        // arr.forEach(function(item,index){
        //     console.log(item,index)
        // })

        // // map 映射
        // var arr = [1,2,3,4,5]
        // var arr2 = arr.map (function(item){
        //     return item;
        // })

        // var arr = ["aaa","bbb","ccc"]
        // var arr2 = arr.map(function(item){
        //     return "<li>"+ item +"</li>"
        // })

        // // filter 过滤
        // var arr = [100,200,300]
        // var arr2 = arr.filter(function(item){
        //     return item > 200;
        // })

        // every 每一个都要满足条件，才是true
        // var arr = [80,90,92,94]
        // var arr2 =arr.every(function(item){
        //     return item >=90
        // })
        
        // some 只要一个满足条件，就是true
        var arr = [0,90,9,4]
        var arr2 =arr.some(function(item){
            return item >=90
        })

        // find
        // var arr = [
        //     {
        //         name : "语文",
        //         grade: 90
        //     }
        //     {
        //         name : "数学",
        //         grade: 95
        //     }
        //     {
        //         name : "体育",
        //         grade: 100
        //     }
        // ]
        // var arr2 = arr.find(function(item){
        //     return item.grade==100
        // })

        // reduce 叠加
        var arr = [1,2,3,4,5]
        arr.reduce(function(prev,item){
            return prev + item;
        },0)
        // prev 0 item 1
        // prev 1 item 2
        // prev 3 item 3
        // prev 6 item 4

三十八、数组去重

        // 1-方法
        var arr=[1,2,3,4,3,5,6,2,1]
        
        // var arr2 =[]

        // for(var i = 0;i<arr.length;i++){
        //     if(arr2.indexOf(arr[i]==-1)){
        //         arr2.push(arr[i])
        //     }
        // }

        // 2-方法 利用对象
        var obj = []
        
        for(var i=0;i<arr.length;i++){
            obj[arr[i]] = "随便";
        }
        var arr2 =[]
        for(var i in obj){
            arr2.push(i-0);
        }

        //3-方法 new Set
        var set1 = new Set(arr)
        
        var arr1 = Array.from(set1) //转化为数组

三十九、字符串的基本操作

我们创建字低由也分为两种方法 字面量 和 构造函数

字面量:

var str = 'hello'

构造函数创建

var str = new String('hello')

        var str1 = "hello";
        var str2 = new String("hello");

        for(var i=0;i<str1.length;i++){
            console.log(i,str1[i]);
        }

四十、统计字符出现次数

        var str = "abcabcab";

        var obj = {};
        for(var i=0;i<str.length;i++){
            var key = str[i];
            if(obj[key]==undefined){
                obj[key] = 1;
            }else{
                obj[key]++;
            }
        }

四十一、字符串常用方法

        // chartAt(索引) 返回索引对应的字符
        // var str = "zhangzhengyu"
        // var str1 = str.charAt(2);

        // chartAt(索引) 返回索引对应的字符ASCll编码

        // toUpperCase()大写 toLowerCase()手写

        // 截取 
        // substr    (开始索引，长度) 
        // substring (开始索引，结束索引)
        // slice     (开始索引，结束索引)

        // replace 替换
        // var str = "avdwadwa";
        // var str1 = str.replace("a","&");

        // // split 分割(把字符串分割成数组)
        // var str = "abcd"
        // console.log(str.split(""))

        // indexOf lastIndexOf -1表示不存在
        // var str1 = "abcd";
        // console.log(str1.indexOf("a",1))

        // concat 连接字符串 +
        // var str = "abvd";
        // var str1 = str.concat("ef");
        // var str1 = str + "ef";

        // trim 去掉首位空格
        // trimStart() trimLeft()去掉首空格
        // trimEnd() trimRiht()去掉首空格
        var str = " hello world ";
        console.log("|"+ str.trim() +"|")

四十二、模糊查询

        var arr = ["aaa","abc","bcc","bcd","ddd"];
        // 数组的filter 字符的indexOf
        var input = prompt("请输入查询的内容")
        var res = arr.filter(function(item){
            return item.indexOf("b")!==-1
        })
        console.log(res);

四十三、json格式字符串

        // split 字符串==>对象
        // {"name":"zhangzhengyu","age":18} 严格要求

        var str = '{"name":"zhangzhengyu","age":18}';
        
        var obj = JSON.parse(str)

        // 前端->后端
        var obj1 = {name:"zhangzhengyu",age:18};
        var str1 = JSON.stringify(obj1);

四十四、模糊字符串

    // es6 ``
    var num = `<li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>`

    var myname = `zhangzhengyu`;
    var str = `my name is ${myname} ${30} ${10>20?`aaa`:`bbb`}`
    document.write(str);

四十五、数字常用方法

        // Number toFixed() 保留小数位，不足会自动补0
        // 返回是字符串 可以通过-0来隐式转换 

        // var price = 123.4567
        // console.log(price.toFixed(2))

        // Math 对象
        // random 0-1随机数
        console.log(Math.random());

        // round 四舍五入取整

        // ceil  向上取整
        // floor 向下取整
        // abs   绝对值
        // sqrt  平方根
        // pow   (底数，指数)
        // max   (多个参数最大的)
        // max   (多个参数最小的)
        // PI

四十六、随机整数

        // 0-10 不包含10
        var res = Math.floor(Math.random()*10)
        // 0-10 包含10
        var res = Math.floor(Math.random()*(10+1))
        // 10-20 不包括20
        var res = Math.floor(Math.random()*10)+10
        // 10-20 不包括20
        var res = Math.floor(Math.random()*(10+1))+10

        // 函数 --  min-max 不包含
        function getRnd(min,max){
            if(min>max){
                console.error("参数有误");
                return;
            }
            return Math.floor(Math.random()*(max-min + 1))+min
        }
        console.log(getRnd(200,300))

四十七、时间对象

        var date = new Date() 
        console.log(date); //自动转换为字符串

        // new Date 传参

        // 1个传参 毫秒数
        var date1 = new Date(10000);

        // 2个传参 3个参数
        var date2 = new date(2023,0,3,10,10,10) //2023年1月3日10点10分10秒

        // 字符串
        var date3 = new date("2023-10-10 10:10:10")
        var date3 = new date("2023/10/10 10:10:10")

四十八、时间对象常用方法

        var date = new Date();
    //getFullYear()   
    //getMonth()   
    //getDay()  
    //getHours
    //getMinutes()
    //getSeconds()
    //getMillisecondes()

    // getTime()时间戳
    console.log(date.getTime())

    // 设置
    date.setFullYear(2024);

四十九、定时器

    // 定时器
    // 在js里面，有两种定时器 倒计时定时器 和 间隔定时器

    // 倒计时定时器

    // 倒计时多少时间以后执行函数
    // 语法: setTimeout(要执行的函数，多长时间以后执行)
    // 会在你设定的时间以后，执行函数
    // var timerId = setTimeout(function () {
    // console.1og('我执行了')
    // }，1000)
    // console.1og(timerId) // 1
    // 时间是按照毫秒进行计算的，1000毫秒就是1秒钟
    // 所以会在页面打开1秒钟以后执行函数
    // 只执行一次,就不在执行了
    // 返回值是，当前这个定时器是页面中的第几个定时器
    
    // 倒计时定时器
    // winodw.alert()
    
    var time1 = setTimeout(function(){          //注册定时器
        console.log("zhangzhengyu")
    },2000)
    // setInterval
    var time2 = setInterval(function(){         //注册间隔定时器
        console.log(new Date())
    },1000)

    // clearInterval ()
    console.log(btn1,btn2)          //直接通过id,拿到按钮对象
    btn1.onclick = function(){
        console.log("btn1 click")
        clearInterval (time1)
    }
    btn2.onclick = function(){
        console.log("btn2 click")
        clearInterval (time2)
    }

五十、倒计时

        var currentDate = new Date()
        var targetDate = new Date(" 2022/6/18 ")
        function diffTime ( current, target){
        var sub = Math. ceil( ( target - current)/ 1000)

        // console.log(sub)
        //天

        var day = parseInt(sub/ (60*60*24))

        // console. log(day)

        var hours =parseInt( sub%(60*60*24) / (60*60))
        var minutes=parseInt(sub%(60*60/60))
        var seconds = sub$60
        console. log (hours)
        var obj={
            day:day,
            hours:hours,
            minutes:minutes,
            seconds:seconds
        }
        return obj;
        }

五十一、BOM

BOM (Browser object Mode1) :浏览器对象模型

其实就是操作浏览器的一些能力
我们可以操作哪些内容
获取一些浏览器的相关信息(窗口的大小)
操作浏览器进行页面跳转
获取当前浏览器地址栏的信息
操作浏览器的滚动条
浏览器的信息(浏览器的版本)
让浏览器出现一个弹出框( alert / confirm / prompt )
BOM的核心就是window对象
window是浏览器内置的一个对象，里面包含着操作浏览器的方法

<1>.获取浏览器窗口的尺寸

innerHeight和innerwidth
这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)

var windowHeight = window. innerHeight
console.1og (windowHeight)
var windowwidth = window. innerwidth
console.1og (windowwidth)

<2>.浏览器的弹出层

        //  alert

        //  btn.onclick = function(){ 
        //     setTimeout ( function( ){
        //     alert("缓存清除成功")
        // },2000)}

        // 询问框
        // btn.onclick = function(){
        //     var res = confirm( "你确定删除吗? ")
        //     console. log(res)
        //     if(res){

        //     }else{
        //     }  
        // }

        // 输入框 prompt
        // btn.onclick = function( ){
        //     var res= prompt(" 请输入你得用户名")
        //     console.log(res )

        //     alert("111111" )
        //     console.log ( " 222222222222222" )
        // }

<3>.浏览器的地址信息

    <button id="btn">下一个页面</button>
    <button id="btn2">刷新</button>
    <script>
        console. log(location. href) //地址

            btn. onclick = function(){
            location.href = "http: , /Www. baidu.com"
            }

        // reload
        btn2.onclick = function(){
            location. reload()
        }

<4>.浏览器的常见事件

        window. onload = function(){
        //页面所有得资源都加载完后执行 (图片，视频， dom)
        console. log("加载完成" )
        console. log(btn)
        }

    </script>
</head>
<body>
    <button id="btn">click</button>
    <script>
    // resize
    window.onresize = function(){
    console.log("resize")
    }
    window.onscroll = function(){
    console.log("scrol1","滚动距离达到指定距离了? ")
    }

<5>.浏览器的滚动距离

    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
        // document.documentElement.scrollTop
        // console.log( document.documentElement.scrollTop)
        // console.log(document. body.scrollTop)
        window . onscroll =function(){
        // console.log (document.documentElement.scrol1Top)
        // console.log(document.body.scrol1Top)
        //兼容性
        console.log(document.documentElement.scrollTop ||
        document.body.scrollTop)
        }

<6>.浏览器打开标签页

    <button id="btn">close</button>
    <button id="btn2">close</button>
    <script>
        // location.href = ""
        // window. open("")

        btn.onclick = function(){
        window.open("http://WWw.baidu.com")
        }
        //window.close()
        btn2.onclick = function(){
        window.close()
        }

<7>.浏览器的历史记录

    <a href="02. html">aaa</a>
    <button id= "btn" >前进02.html</button>
    <script>
        btn. onclick = function(){
        // location.href="02.html"
        // history.forward()
        history .go(1)
        }

    <button id="btn">history.back()</button>

    <script>
    btn.onclick = function(){
    //history.back()
    history.go(-1)
    }

<8>.浏览器本地存储

    <button id="btn">存</button>
    <button id="btn2">取</button>
    <button id="btn3">删</button>
    <button id="btn4">清除</button>
    <button></button>
        <script>
        btn.onclick = function(){
        //console.log( )
        localstorage.setItem(" age","200") 
        }
        btn2.onclick = function(){
        //console.log( )
        console.log(localstorage.getItem("age"))
        }
        btn3.onclick = function(){
        //console.log( ) 
        localStorage.removeItem("name")
        }
        btn4.onclick = function(){
        //console.log( ) 
        localStorage.clear()
        }
        //永久存储localStorage
        //会话存储sessionStorage 关闭页面就丢失