JavaScript笔记

不同数据类型的存储模式

    <script>
        var obj={
            name:"lucy",
            age:18,
            location:"anhui"
        }
        for(var i in obj){
            console.log(obj.i)
        }
        // 复杂数据类型复制的时候是存储在堆内存里的
        // 直接复制会使得两个是一样的值，不能再改动
        var obj = {
            name="candy",
            age=18,
            address=anhui
        }
        var obj2=obj //这种方法会直接把obj的地址赋值给obj2，改变obj2会把obj也改变

        var obj2 = {}
        // 将obj中的属性遍历后赋值给obj2，则不会产生上述问题
        for(var i in obj){
            obj2[i]=obj[i]
        }
    </script>

冒泡排序

先遍历数组，再将紧挨着的两个值进行比较，如果前一个比后一个大就把俩个互换位置

   <script>   
     var numArr=[2,5,9,3,6,5]
        // 循环嵌套
        // 到第二次的时候可以减少一次循环，因为最后一个已经是最大的循环了
        for (var m=0;m<numArr.length-1;m++) {
            for(var i=0;i<numArr.length-1-m;i++){
            if (numArr[i]>numArr[i+1]) {
                var t = numArr[i]
                numArr[i]=numArr[i+1]
                numArr[i+1]=t
            }
        }
        }
        console.log(numArr)
    </script>

选择排序

假设数组中第0个就是最小索引，遍历数组后做比较，发现更小的就将其替换，直到找完找到最小的，放到第0个位置

        for(var m=0;m<numArr.length-1;m++) {
            var minindex=m
            for(var i=m+1;i<numArr.length;i++){
            if (numArr[i]<numArr[minindex]) {
                minindex=i
            }
        }
            var t=numArr[m]
            numArr[m]=numArr[minindex]
            numArr[minindex]=t
        }
        console.log(numArr)

字符串

        // 创建 
        var str1="hello"
        var str2=String("hello")

索引和下标都是只读的，无法修改值

       var str1[1]=a//报错
       //str不是数组，str[1]表示str中的第一个字符，只能读取该字符，无法改变
       str1="111"//修改了str1的值为111

• charAt() 返回在指定位置的字符

• charCodeAt() 返回在指定的位置的字符的 Unicode 编码

• fromCharCode() 从字符编码创建一个字符串

• indexOf() 检索字符串

• concat() 连接字符串

• substring() 提取字符串中两个指定的索引号之间的字符

• split() 把字符串分割为字符串数组

        str = "hello world";
        var result = str.charAt(4);
        var result = str.charCodeAt(4);
        result = String.fromCharCode(72);
        result = str.concat("hi");
        result = str.indexOf("o");//重复内容返回第一个位置，没有该内容返回-1
        result = str.indexOf("o",6);//可以指定为位置开始查找
        result = str.slice(0,5);
        result = str.substring(1,2);//类似slice，但该方法不支持负值，负值默认当做0，而且substring会自动调整参数位置，如果第二个参数小于第一个，则自动交换
        result = str.split("o");//需要一个字符串作为参数，会根据该字符串去拆分
        alert(result); 

字符串的indexof方法和数组的filter

        //数组的filter方法（过滤）  字符串的indexof方法
        var arr = ["abc","abb","bcd"]
        var res = arr.filter(
            function(item){
                return item === "abc"//接受一个回调函数当返回ture的时候，数组内部符合要求的值可以出来，返回false则出不来
            }
        )
        //返回 abc

        // indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
        // 0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...
        var str = "The full name of China is the People's Republic of China.";
        var pos = str.indexOf("China");

模糊匹配

        // 模糊匹配
        var res = arr.filter(
            function(item){
                return item.indexOf("c")!=-1//如果不等于-1则代表拥有这个字符，可以被返回
            }
        )
        console.log(res)

JSON标准格式转换

    <script>
        // json字符串==>对象
        // {"key"=123,"key"="lucy"}
        var str = '{"name":"lucy","age":18}'//此时是字符串,必须严格按照格式要求，属性名也要加引号
        var obj = JSON.parse(str)
        console.log(obj)//转换成为对象
        //Object age: 18 name: "lucy"
        // 对象==>字符串
        var obj1 = {name:"lucy"}//属性名可以不用加引号
        var str1 = JSON.stringify(obj1)
        console.log(obj1,str1)
        //Object name: "lucy" / '{"name":"lucy"}'
    </script>

数字方法

        var x = 9.656;
        // 使用toFixed（保留的位数，采取四舍五入）
        var res1 = x.toFixed(0);           // 返回 10
        var res2 = x.toFixed(2);           // 返回 9.66
        var res3 = x.toFixed(4);           // 返回 9.6560
        var res4 = x.toFixed(6);           // 返回 9.656000

数学方法

• Math.round(x) 的返回值是 x 四舍五入为最接近的整数：

• Math.pow(x, y) 的返回值是 x 的 y 次幂：

• Math.sqrt(x) 返回 x 的平方根：

• Math.abs(x) 返回 x 的绝对（正）值：

• Math.ceil(x) 的返回值是 x 上舍入最接近的整数：

• Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

• Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数：

随机数字

        // min--max(不包含最大值)
        function getRnd (max,min){
            return Math.floor(Math.random()*(max-min))+min
        }
        console.log(getRnd(20,30))

        // min--max(包含最大值)
        function getRnd (max,min){
            return Math.floor(Math.random()*(max-min+1))+min
        }
        console.log(getRnd(20,30))

Date

    <script>
        var date = new Date()
        console.log(date)//返回当前时间

        var date1 = new Date(10000)//一个参数为毫秒数
        var date2 = new Date(2023,3,3,10,10,10)//多个参数指定日期
        var date3 = new Date("2023-7-18 10:10:10")//传字符串必须按照指定格式
        var date3 = new Date("2023/7/18 10:10:10")
    </script>

toDateString() 方法将日期转换为更易读的格式

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();//获取时间戳，返回自 1970 年 1 月 1 日以来的毫秒数
</script>

定时器

    <script>
        // 注册定时器
        // setTimeout(function(需要运行的代码),倒计时-以毫秒为单位)
        var time1=setTimeout(
            function(){
                alert("lucky")
            },3000//以毫秒为单位
        )
        // setTimeout(
        //         alert("888"),6000//以毫秒为单位
        // )
        //会在3秒之后开始执行代码，运行完成后结束

        var date = new Date()
        // 注册间隔定时器
        // setInterval(function(){执行语句},间隔时间--毫秒为单位)
        var time2= setInterval(
            function(){
                console.log(date)
            },3000//以毫秒为单位
        )

        // 清除两个计时器clearInterval/clearTimeout
//在html中写    <button id="btn1">清除定时计时器</button>
            // <button id="btn2">清除间隔定时器</button>
//此时获取按钮，则js代码要写在html中按钮注册之后
        // 获取计时器并绑定单击响应函数
        btn1.onclick = function(){
            clearTimeout(time1)
        }
        btn2.onclick = function(){
            clearInterval(time2)
        }
        // console.log(time1,time2)//返回计时器的顺序
    </script>

倒计时效果

    <script>
        // <!-- 两个时间相减会返回时间戳
        var now = {}
        var target = new Date("2023/6/18")
        console.log(target-now)//返回时间戳
        function diffTime(now,target){
            var sub = Math.ceil((target-now)/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 second = sub%60
            var obj = {
                day:day,
                hour:hour,
                minutes:minutes,
                second:second
            }
            return obj
        }
    
        setInterval(function(){
            var now = new Date()//这个now是定义在回调函数内部，作用域只有回调函数内
            var res = diffTime(now,target)
            // document.write(`距离618还有${res.day}天，${res.hour}时，${res.minutes}分${res.second}秒`)
            // document.write("<br>")
            box.innerHTML =`距离618还有${res.day}天，${res.hour}时，${res.minutes}分${res.second}秒`
        },1000)
    </script>

BOM

浏览器可视窗口的尺寸

console.log(window.innerHeight,innerHeight)
console.log(window.innerWidth,innerWidth)

弹出层

btn.onclick = function(){
var res =prompt("输入用户名")
console.log(res)
}
//点击按钮后弹出一个输入框，输入后内容会被打印在控制台

浏览器的地址信息

console.log(location.href)
btn.onclick=function(){
location.href="http://www.baidu.com"
}
//按下安按钮会转到 百度页面

页面重新加载

btn.onclick=function(){
location.reload()
}
// resize检测窗口大小  /横屏竖屏

获取滚动条距离

console.log(document.documentElement.scrollTop||document.body.scrollTop)
console.log(document.documentElement.scrollLeft||document.body.scrollLeft)

scrollTo滚动到指定位置

        btn.onclick=function(){
            window.scrollTo(0,0)
            或
            window.scrollTo{
                left:0,
                top:0
            }
        }

浏览器打开新页面

        // 浏览器打开标签页
        btn.onclick=function(){
            window.open("http://www.baidu.com")
        }//点击按钮可打开一个新页面
        btn.onclick=function(){
            window.close("http://www.baidu.com")
        }//点击按钮可关闭原来的页面

浏览器历史记录

        // 浏览器的历史记录
        window.history.back()
        // 用来退回历史记录，回到前一个页面
        window.history.forward()
        // 回到刚刚关闭的页面
        window.history.go(-1/1/...)

浏览器的本地储存

        // 存储只能存字符串，不能存对象，如果要存储对象，就要使用JSON进行转换
        localStorage.setItem()
        localStorage.getItem()
        localStorage.removeItem()
        localStorage.clear()