JS50-75

数组常用方法2

不影响原数组的方法：
1.contact拼接

arr1.contact(arr2)

var arr4=arr1.concat(）//复制方式,
arr4.pop() //用于测试是否会改变arr1空间 参考用  复制时可省略
console.log(arr1,arr4)

2.join转换为字符串

//join数组=>字符串
[1,2,3,4,5]
var arr
document.write(arr.join("I"))


var arr=[]
for(var i=0;i<5;i++){
arr.push("<li>"+i+"</li>")
3
document.write(arr.join(""))

3.slice截取

可用于截取出关键数组

var arr = ["aaa","bbbb","ccc","ddd","eeee"]
var arr2 = arr.slice(0,2)
console.log(arr,arr2)
包前不包后

同理，不传参的情况下可以实现数组的复制

var arr2 = arr.slice（）

slice可以包负数

indexof

//indexof -1 找不到
var arr = ["aaa","bbb","ccc","ddd","eee"]
var res = arr.indexOf("ccc")
console.log(res)

如果发现重名的只会发现第一个
可以使用lastindexof找出最后一个

数组去重

//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])
}
console.log(arr,arr2)

使用arr2作为载体，判断arr2中是否有重复的
方法2：利用对象
思路：将数组中每一项当做对象中的key值 因为obj的key值只能有一个

var obj={}
for(var i=0;ikarr.length;i++){
obj[arr[i]]＝"随便"
}
console.log(obj)
var arr2 =[]
for(var i in obj){
arr2.push(i-0//将字符串转为数字)
console.log(arr2)

方法3：new Set

var set1= new Set(arr)

数组常用方法3

1.foreach遍历

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

map映射

var arr2 = arr.map(function(item){
return item/item*item*item等
}）
console.log(arr2)

filter过滤

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

every每一个

例子：判断是否每一个都满足条件
返回值：对错

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

some只要满足一个

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

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

字符串的基本操作

//length 只读
str1.length = 0
console.log(str1)
//索引/下标只读
console.log(str1[1])

字符串常用方法

chartAT索引

//chartAt(索引）返回索引对应的字符
"kerwin"
var str
str.charÁt(0)
var str1
console.log(str,str1)

结果为k

charCodeAt

转换大小写

console.log(str.toUpperCase())
console.log(str.toLowerCase())

将二进制数字转回字母

var arr = []
for(var i=65;i<91;i++){
// console.log(String.fromCharCode(i))
arr.push(String.fromCharCode(i))
console.log(arr)

截取

//截取substr(开始索引,长度)substring（开始索引 结束索引） slice（开始索引 结束索引）
"kerwin"
var str
var str1 = str.substr(0,2)  从第0个位置截2个
console.log(str1)

替换replace

//replace替换-正则表达式
 var str ="abdwadwa"
 var str1 = str.replace("a","*")
 console.log(str1)

split 分割 join

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

contact

//concat 连接字符串+
"abcd"
var str
 var str1 = str.concat("ef")
 或者
var str1 =str + "ef"
console.log(str1)

trim

//trim去掉首尾空格
//trimStart（）trimLeft（）去掉首空格
//trimEnd（）trimRight（）去掉尾空格

模糊查询

//数组的filter 字符的indexof
arr.filter(function(item){
var res
return item.indexof("b")|-1
}）
console.log(res)

json格式字符串

//json字符串==》对象
'{"name":"kerwin","age":100}'
var str
console.log(str)
var obj=JSON.parse(str)
console.log(obj)

模板字符串

var myhtml
<li>11111</li>
<li>2222</li>
<li>3333</li>>
"kerwin"
var myname
var str = my name is ${myname}
document.write(str)

数字常用方法

1.Number toFixed()

// var price = 123.45678
var price = 123.4
console.log(price.toFixed(2)

小数点
2. Math对象

//Math对象
//random//0-1-随机整数
console.log(Math.random())
小于多少就乘以多少
//round四舍五入取整
console.log(Math.round(4.46))
// ceil向上 floor向下
console.log(Math.floor(4.96))
//abs绝对值
console.log(Math.abs(-10.2))
//sqrt平方根9
console.log(Math.sqrt(8))
//pow(底数，指数）
console.log(Math.pow(3,3))
//max（多个参数）
console.log(Math.max(10,50,20,34))
//min（多个参数）
console.log(Math.min(10,50,20,34))
//PI
console.log(Math.PI)

案例随机整数笔记

//0-10 不包含10
var res = Math.floor(Math.random()*10)
// 0-10 包含10
var res = Math.floor(Math.random()*(10+1))
console.log(rès)
// 10-20不包含20
var res = Math.floor(Math.random()*10)+10
console.log(res)
// 10-20 包含20
var res = Math.floor(Math.random()*(10+1))+10

运用函数的总结：

function getRnd(minj,max){
return Math.floor(Math.random()*(max-min))+min

事件对象

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

//new Date传参
//1个传参毫秒数
var datel= new Date(10000)
console.log(date1)
// 1970 1 1 0:0:1

//2个参数3个参
var date2 = new Date(2023,0)|
console.log(date2)

// var date3= new Date("2023-10-10 10:10:10")
var date3= new Date("2023/10/10 10:10:10")
console.log(date3)

时间对象常用方法

var date = new Date()
//getFullYear()
console.log(daite.getFullYear())
//getMonth() 0-11===>1-12
console.log(date.getMonth())
//getDate()
console.log(date.getDate())

//getDay（）周日a周一-周六1-6
console.log(date.getDay())
//getHours
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log(date.getMilliseconds())
//getTime(）时间戳
console.log(date.getTime())

设置：

//设置
console.log(date)
date.setFullYear(2025)
console.log(date)
date.setMonth(5)
console.log(date)

不可以setday因为会根据前面自动推算

定时器

//倒计时 注册定时器
//window.alert()
setTimeout(function(){
console.log("kerwin")
},200g)
//注册间隔定时器
//setInterval
setInterval(function(){
},1000）

如果将其定义返回值会是其的顺序（第n个定时器则返回n）

<button>id="btn1">清除定时器-延时</button>
<button>id="btn2">清除定时器-间隔</button>
console.log(btn1,btn2)//直接通过id,拿到按钮对象
btn1.onclick = function(){
console.log("btn1 click")
clearTimeout(time1)
}

BOM

浏览器尺寸

浏览器弹出层

1. alert
2. 询问框

btn.onclick=function(){
var res=confirm("你确定删除吗？")
console.log(res)

浏览器的地址栏

<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()
}

浏览器的常见事件

window.onload = function(){
//页面所有得资源都加载完后执行（图片，视频，dom）
console.log("加载完成")
}
// resize 窗口页面改变
window.onresize = function()E
console.log("resize")
//scroll滚动条
window.onscroll=function()(
console.log("scrol1”，“滚动距离达到指定距离了?）

浏览器滚动距离

// document.documentElement.scrollTop
window.onscroll = function(){
console.log(document.documentElement.scrollTop)
![在这里插入图片描述](https://img-blog.csdnimg.cn/13b8b8e46f64498fb838ed5cf6b520a3.png#pic_center)

window.onscroll = function(){

console.log(document.documentElement.scrollTop||document.body.scrollTop)
万无一失保证低版本浏览器也支持

scrollTo：可以用于回到顶部比如：

btn.onclick = function()[
window.scrollTo(0,0)
//1.两个数字

浏览器打开标签页

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

window.close

浏览器的历史记录

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

btn.onclick =function(){
// location.href="02.html"
// history.forward()
history.go(1) } go用于回退

浏览器本地存储

全部清除：

btn4.onclick =function(){
// console.log(){
localStorage.clear
（）}

//存，只能存字符串，不能存对象，
localStorage.setItem("obj",JSON.stringify({name:"kerwin",
age:100y))

永久存储 localStorage
会话存储 sessionstorage 关闭页面就丢失

记住用户名

</div>
<div>
密码：
<input type="password"id="password">
</div>
<div>
<button id="login">登录</button>
</div>
<script>
//先获取用户名密码信息进行存储
var uservalue = localStorage.getItem("username")
var passvalue = localStorage.getItem("password")
if(uservalue && passvalue ) 
username.value = uservalue
password.value=passvalue
login.onclick=function(){
console.log(username.value,password.value)
localStorage.setItem("username",username.value)
localStorage.setItem("password",password.value)
}
</script>