JS教程三部分

数组常用方法1

push方法

push后面会追加一些元素

var res = arr.push("")
console.log = (res)

返回值的长度是追加过后的长度

pop方法

pop从后面删除元素

var respop = arr.pop()
console.log = (respop)

返回值是删除了后面的元素的数组

unshift方法

从前面追加元素

            var resunshift = arr.unshift("tiechui")
            console.log(resunshift)

shift方法

从前面删除元素

var resshift = arr.shift()
console.log(resshift)

splice方法

从任意位置

splice删除

 var ressplice = arr2.splice(1,2)

其中，(1,2)中第一个数字1表示从1号位置开始删除，第二个数字2表示从选定位置删除两个元素

splice增加

var ressplice = arr2.splice(1,0,增加的元素)

其中，(1,0,增加的元素)第一个数字1表示从一号位置开始，因为标签与上面相同，0表示不进行删除元素，与splice删除不同的是多了第三个元素，第三个元素就是增加的元素

resver倒序

resver会把数组的顺序进行倒序
语法：arr3.reverse()

sort排序

sort接受一个回调函数
它可以将回调函数的返回值进行排序

arr3.sort()

数组常用方法2

contact拼接

例如：

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

            console.log(arr3)

不影响原数组

join数组

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

可以将数组中的,改变成其他形式的间隔，如上，就是将，变成|

slice截取（开始索引和结束索引）

            var arr2 = arr.slice(0,2)//从零号位置到二号位置
            var arr2 = arr.slice(2)//指第二个位置
            var arr2 = arr.slice()//选取所有

indexOf

此语法主要用于寻找参数的位置
输出-1即代表找不到
具体用法如下

lastindexOf

从最后一个元素开始查找

var arr = ["aaa","bbb","ccc","ddd","eee"]
var res = arr.lastIndexOf("aaa",5)
console.log(res)

数组去重

方法一：

            var arr = [1,2,3,4,5,6,76,3,1]
            var arr2 = []
            for(var i = 0 ;i<arr.length;i++){
                if(arr2.indexOf(arr[i])===-1){
                    arr2.push(arr[i])
                }
            }
            console.log(arr,arr2)

方法二：

            var arr = [1,2,3,4,5,6,76,3,1]
            var obj ={}
            for(var i = 0 ;i < arr.length;i++){
                obj[arr[i]] ="随便"
            }
            console.log(obj)
            var arr2 = []
            for(var i in obj ){
                arr2.push(i=0)
            }
            console.log(arr2)

**方法三：**最快捷，最好用

var arr = [1,2,3,4,5,6,76,3,1]
var set1 = new Set(arr)
console.log(set1)
var arr1 = Array.from(set1)
console.log(arr1)

数组常用方法三

foreach遍历

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

map映射

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

filter过滤

var arr = [100,200,300]
var arr2 = arr.filter(function(item){
    return item>200
})
console.log(arr2)

every每一个

            var arr = [80,90,92,94]
            var arr2 = arr .every(function(item){
                return item>=90
            })
            console.log(arr2)

some某些

            var arr = [90,90,2,94]
            var arr2 = arr.some(function(item){
                return item>=90
            })
            console.log(arr2)

find查找的方法

用法如下

            var arr2 = arr.find(function(item){
                return item>=90
            })
            console.log(arr2)

reduce叠加

            var arr = [1,2,3,4,5]
            arr.reduce(function(prev,item){
                return prev+item
            },0)
            console.log(arr2)

内容三十，字符串

创建字符串

字面量

var str = "hello"

构造函数法创建字面量

var str2 = new String("World")

属性

length-只读

字符串和数组一样也有length
它的length是只读的

索引-只读

和数组一样的索引，但是是只能读，不能写

遍历

仍然是基本数据类型

字符串常用方法

charAt（索引）返回索引对应的字符

            var str = "xiaoming"
            var str1 = str.charAt(4)
            console.log(str,str1)

四号字母既是m

与charAt相似的是charCodeAt

            var str = "xiaoming"
            var str1 = str.charCodeAt(4)
            console.log(str,str1)

将上面代码中的charAt改成charCodeAt，返回的值不再是m，而是m所代表的ASCⅡ码的值
m的ASCⅡ的值为109

toUpperCase和toLowerCase 大写和小写

            var str = "hello"
            console.log(str.toUpperCase())//全部改成大写
            console.log(str.toLowerCase())//全部改成小写

截取

各个截取方法：

substr（开始索引，长度）
substring（开始索引，结束索引）
slice（开始索引，结束索引）

结合上面的大写和小写，可以做到仅开头大写

var str = "hello"          
console.log(str.substring(0,1).toUpperCase()+str.substring(1))

replace替换

            var str ="aafaawfw"
            var str1 = str.replace("a","*")
            console.log(str1)

如上所示，就是将代码中的a替换成*

split分割

主要是将元素转换分割符

有规则的字符串

            var str = "a|b|c|d"
            console.log(str.split("|"))

索引位置

            var str = "abcda"
          	console.log(str.indexOf("a",1))
            console.log(str.lastIndexOf("a",3))

concat连接字符串

        var str = "abcd"
        var str1 =str +"ef"
        console.log(str1)

trim去掉首尾空格

trimStart() trimleft() 去掉首空格
trimEnd() trimRight() 去掉尾空格

json格式字符串

方法一：

        var str = '{"name":"xiaoming","age":100}'
        var obj = JSON.parse(str)
        console.log(obj)

格式严格，需满足关键字key要加引号，后面的属性名根据情况加不加引号
格式如下：{"key":110,"key":"123"}

方法二：

        var obj1 = {name:"tiechui"}
        var str1 = JSON.stringify(obj1)
        console.log(obj1,str1)
        

模板字符串

模块一

字符串在手动换行时会有报错现象，为了消去这种现象，可以在换行后面位置加上\

        var myhtml = '<li>1111</li>\
            <li>2222</li>\
            <li>3333</li>'
        document.write(myhtml)

模块二

        var myname = "xiaoming"
        var str = `my name is ${myname}`
        document.write(str)

反引号：反引号不同于正常的引号，在上述案例使用反引号时同时使用${ }可以在${ }内部添加变量

内容三十一，数字常用方法

toFixed保留小数

        var price = 123.465
        var sum = price.toFixed(2)-0+100
        console.log(sum.toFixed(2))

其中， var sum = price.toFixed(2)-0+100之所以要这么做是因为toFixed返回值是字符串，需要先-0将其变成Number类型再进行其他相加，如果直接相加的话会造成数字粘合的情况

math对象

random随机数

		console.log(Math.random())

产生的数是随机的，每次刷新网页的数字也不同

round四舍五入取整

		console.log(Math.round(4.46))

会对数字进行四舍五入的取整

随机整数

1，不包含10

        var res = Math.floor(Math.random()*10)
        console.log(res)

2，包含10

        var res = Math.floor(Math.random()*（10+1)
        console.log(res)

3，函数法

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

ceil向上取整和floor向下取整

顾名思义，向下取整
例如：

        console.log(Math.floor(4.96))

abs绝对值

sqrt平方根

pow指数

max多个参数取最大

min多个参数取最小

PI

数字“派”

内容三十二，时间参数

时间对象

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

返回值为当前时间
其中，Date()中填写

填写一个

表示距离标准时间的毫米数

填写多个个

按照年，月-1，日，时，分，秒排列

时间对象常用方法

        var date = new Date()
        console.log(date.getFullYear())//获取年份
        console.log(date.getMonth())//获取月份
        console.log(date.getDate())//获取日期
        console.log(date.getDay())//获取周
        console.log(date.getHours())//获取小时
        console.log(date.getMinutes())//获取分钟
        console.log(date.getSeconds())//获取秒
        console.log(date.getMilliseconds())//获取毫秒
        console.log(date.getTime())//时间戳，距离标准时间的时间秒数

也可以改变时间
例如：

        date.setFullYear(2025)
        console.log(date)

但是不能对周几进行改变，因为周是按照其他日期推算的

定时器

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

倒计时定时器

倒计时目标时间以后执行函数
语法：setTimeout(要执行的函数，多久执行)
会在设定时间后执行函数

1，注册定时器

        setTimeout(function(){
            console.log("kerwin")
        },2000)

2，注册间隔定时器

        setInterval(function(){
            console.log(new Date())
        },2000)

内容三十三，BOM

BOM：浏览器对象模型
这是操作浏览器的能力
我们可以操作那些内容

获取浏览器的相关信息（窗口的大小）
操作浏览器进行页面跳转
获取当前浏览器地址栏的信息
操作浏览器的滚动条
浏览器的信息（浏览器的版本）
让浏览器出现一个弹出框
。。。

BOM的核心就是window对象
window是浏览器内置的一个对象，里面包含着操作浏览器的方法

获取浏览器的尺寸

语言：window.innerHeight,innerHeight和window.innerWidth,innerWidth

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

弹出层

alert警告框

    <button id="btn">cli</button>
    <script>
        btn.onclick = function(){
            setTimeout(function(){
                alert("缓存清除")
            },2000)
        }
    </script>

询问框

    <button id="btn">cli</button>
    <script>
            btn.onclick = function(){
                var res = confirm("你确定删除吗")
                console.log(res)
                if(res){

                }else{
                    
                }
            }
    </script>

输入框

    <button id="btn">cli</button>
    <script>
            btn.onclick = function(){
                var res = prompt("请输入用户名")
            }
    </script>

浏览器的地址信息

        console.log(location.href)

可以通过其获得浏览器的地址

用处：

下一个页面
刷新

（都是需要bottom按钮的协助）

浏览器的常用事件

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

onload

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

        window.onload = function(){
            console.log("加载完成")
            console.log(btn)
        }

resize

改变大小

        window.onresize = function(){
            console.log("resize")
        }

onscroll

判断滚动距离是否达到指定距离

        window.onscroll = function(){
            console.log("scroll")
        }

浏览器页面的滚动距离

通过下面代码可以实现对滚动距离的监视

       window.onscroll = function(){
           >console.log(document.documentElement.scrollT>op ||document.body.scrollTop)
       }

还可以实现像京东一样下拉之后显示回到顶部按钮

    <div style="height: 300px;width: 100px;"></div>
    <button id="btn">回到顶部</button>
    <script>
        if( (document.documentElement.scrollTop ||document.body.scrollTop)>100){
            console.log("显示回到顶部按钮")
        }else{
            console.log("隐藏回到顶部按钮")
        }
        btn.onclick = function(){
            window.scrollTo(o,o)
        }
        </script>

浏览器的历史记录

window中有一个对象叫做history，但是首先要保证浏览器有历史记录

forward和back

如下就是使用forward

    <button id="btn"></button>
    <script>
        btn.onclick = function(){
            history.forward()
        }
        </script>

go

go可以同时跳转多个页面

        btn.onclick = function(){
            history.go(-3)
        }

如上就是往前跳转了三个页面