1、字符串的基本操作
字符串
- 创建字符串
- 我们创建字符串也分为两种方法字面量和构造函数
- 字面量：var str = 'hello'
- 构造函数创建：var str = new String('hello')
<script> var str='hello' console.log(str) // length只读不能写 就是不能用length修改它的长度 // str.length=0 此代码无效 console.log(str.length) // 索引（下标） 也是只读 // str[1]="a" 此代码无效 console.log(str[1]) console.log(str+" world") // 遍历 for(var i=0;i<str.length;i++){ console.log(i,str[i]) } var str2=new String('hello') console.log(str2) console.log(str2+" world") </script>
字符集
ASCII字符集
- 我们都知道，计算机只能存储011010这样的二进制数字
- 那么我们的a~z/ A~Z/ $ / @/...之类的内容也有由二进制数字组成
- 我们可以简单的理解为，a~z/ A~Z/ $ / @/...之类的内容都有一个自己的编号，然后在计算机存储的时候，就存储的是这些编号，我们看的时候，也是透过这些编号在解析成我们要看到的内容给我们看到
- ASCII码对照表：ASCII码对照表-完整ASCII码表-我就查查询
unicode编码
- 我们看到了，ASCII只有128个字符的编码结构
- 但是因为ASCII出现的比较早，而且是美国发明的，早先时候这些内容就够用了
- 因为存储一些英文的内容，传递一些英文的文章什么的都够用了
- 那么对于这个世界来说肯定是不够的
- 因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储
- 所以就出现了Unicode编码，也叫（万国码，统一码）
- Unicode对照表就是一个和ASCII一样的对照表，只不过变得很大很大，因为存储的内容特别的多
- 而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照Unicode编码转换成数字进行存储
- 我们的UTF-8就是一种8位的Unicode字符集
2、案例-统计字符出现次数
<script> var str="abcabcab" var obj={} for(var i=0;i<str.length;i++){ console.log(str[i]) var key=str[i] if(obj[key]===undefined){ obj[key]=1 } else{ obj[key]++ } // 等同于上面的if-else // if(obj[key]){ // obj[key]++ // }else{ // obj[key]=1 // } } console.log(obj) </script>
3、字符串常用方法
1、chartAt（）
- 传入的参数是索引，返回的值是索引对应的字符
<script> var str="jack" var str1=str.charAt(0) console.log(str,str1) </script>
2、chartCodeAt（）
- 传入的参数是索引，返回值是索引对应的字符编码
<script> var str="jack" var str1=str.charCodeAt(0) console.log(str1) var arr=[] for(var i=65;i<91;i++){ // fromCharCode将数字编码转换成对应的字符 arr.push(String.fromCharCode(i)) } console.log(arr) </script>
3、toUpperCase（） 把所有字符转成大写
4、toLowerCase（） 把所有字符转成小写
<script> var str="hello WORLD" console.log(str.toUpperCase()) console.log(str.toLowerCase()) </script>
5、substr(开始索引，长度）
6、substring（开始索引，结束索引） 包前不包后 索引不要出现负数
7、slice（开始索引，结束索引） 和substring差不多
<script> var str="hello" var str1=str.substr(1,2) console.log(str1) var str2=str.substring(1,2) console.log(str2) // 从字符串的下标为3开始打印，一直到字符串后面 var str3=str.substring(3) console.log(str3) var str4=str.slice(1,2) console.log(str4) var str5=str.slice(3) console.log(str5) var str6=str.slice(3,-1) console.log(str6) </script>
8、replace 替换 只能替换遇见的第一个
<script> var str="abbbb" var str1=str.replace("a","b") console.log(str1) </script>
9、split 分割
<script> var str="a|b|c" console.log(str.split("|")) </script>
10、indexOf 从前面开始往后查
lastIndexOf 从后面开始往回查
<script> var str="hello" // 从下标为2开始往后查 console.log(str.indexOf("e",2)) // 从下标3开始往前查 console.log(str.lastIndexOf("l",3)) </script>
11、concat 拼接
<script> var str="abc" console.log(str.concat("def")) </script>
12、trim 去掉首尾空格
trimStart（） trimLeft（） 去掉首部空格
trimEnd（） trimRight（） 去掉尾部空格
<script> var str=" hello world " console.log("|"+str+"|") console.log("|"+str.trim()+"|") console.log("|"+str.trimStart()+"|") console.log("|"+str.trimEnd()+"|") </script>
4、案例-模糊查询
<script>
var str=["bkpp","abc","ddd","eee","sde","vfd","gff","bd","bf"]
var input=prompt("请输入要查询的内容")
var res=str.filter(function(item){
return item.indexOf(input) > -1
})
console.log(res)
</script>
5、json格式字符串
<script>
// json格式的字符串====>对象
// key必须加双引号
// json格式的数据必须严格按照以下格式
var str='{"name":"jack","age":13}'
console.log(str)
console.log(str.name)
// 把json格式的字符串进行解析成对象
var obj=JSON.parse(str)
console.log(obj)
console.log(obj.name)
// 把对象打包成字符串
var obj2={name:"tom"}
var str1=JSON.stringify(obj2)
console.log(obj2,str1)
</script>6、模板字符串
<script> var myhtml='<li>111</li>\ <li>222</li>\ <li>333</li>' document.write(myhtml) var myhtml2=`<li>111</li> <li>222</li> <li>333</li>` document.write(myhtml2) var myname="jack" // ${js的地盘} var str=`my name is ${myname} ${20+10}` document.write(str) var arr=["xiaoming","jack","tom"] var arr2=arr.map(function(item){ return `<li>${item}</li>` }) document.write(arr2.join("")) </script>
7、数字常用方法
1、toFixed（要保留的小数位数）
做到四舍五入
位数不够自动补0
返回类型是字符串
<script> var price=12.458654 var price1=12.3 console.log(price.toFixed(2)) // 位数不够，自动补0 console.log(price1.toFixed(2)) // 记得-0转换成数字才能进行运算，否则变成字符串拼接 console.log(price1.toFixed(2)-0+100) </script>
2、Math对象
- random 返回0-1（包含0但不包括1）之间的随机数
<script> //random console.log(Math.random()) </script>
- round 四舍五入取整
<script> console.log(Math.round(4.56)) </script>
- ceil向上取整 floor向下取整
<script> console.log(Math.ceil(4.56)) console.log(Math.floor(4.56)) </script>
- abs绝对值
<script> console.log(Math.abs(-12.3)) </script>
- sqrt 平方根
<script> console.log(Math.sqrt(9)) </script>
- pow（底数，指数）
<script> console.log(Math.pow(2,3)) </script>
- max（多个参数）
<script> console.log(Math.max(10,20,30)) </script>
- min（多个参数）
<script> console.log(Math.min(10,20,30)) </script>
- PI
<script> console.log(Math.PI) </script>
8、案例-随机整数
<script> //0-10 不包含10 // 不推荐用round，造成概率不一样，用floor会好一些 var res=Math.floor(Math.random()*10) console.log(res) // 0-10 包含10 var res1=Math.floor(Math.random()*(10+1)) console.log(res1) // 10-20 不包含20 var res2=Math.floor(Math.random()*10)+10 console.log(res2) // 10-20 包含20 var res3=Math.floor(Math.random()*10)+11 console.log(res3) // 函数 不包含 function getRan(min,max){ if(min>max){ console.error("参数有误") return } return Math.floor(Math.random()*(max-min))+min } console.log(getRan(20,30)) // 函数 包含 function getRan1(min,max){ if(min>max){ console.error("参数有误") return } return Math.floor(Math.random()*(max-min+1))+min } console.log(getRan1(20,30)) </script>
9、时间对象
Date
- js提供的内置构造函数，专门用来获取时间的
new Date()
- new Date()在不传递参数的情况下是默认返回当前时间
<script> var time=new Date() console.log(time) </script>
- new Date()在传入参数的时候，可以获取到一个你传递进去的时间
<script> var time=new Date(`2022-11-03 13:14:00`) console.log(time) </script>
- new Date()传递的参数有多种情况
1、传递一个参数，是毫秒数
<script> var time=new Date(1000) console.log(time) </script>
2、传递两个数字，第一个表示年，第二个表示月份
<script> // 0是一月 var time=new Date(2022,0) console.log(time) </script>
3、传递三个数字，前两个不变，第三个表示该月份的第几天，从1到31
<script> // 0是一月 var time=new Date(2022,0,3) console.log(time) </script>
4、多个参数
<script> // 0是一月 var time=new Date(2022,0,3,12,30,10) console.log(time) </script>
5、传字符串
<script> // 0是一月 var time=new Date("2022-11-11 12:10:6") console.log(time) </script>
10、时间对象常用方法
1、getFullYear 获取当前年份
<script> var date=new Date() console.log(date.getFullYear()) </script>
2、getMonth（） 获取当前月份
<script> var date=new Date() console.log(date.getMonth()) </script>
3、getDate（） 获取当前所在月份的天数
<script> var date=new Date() console.log(date.getDate()) </script>
4、getDay（） 获取周日0，周一-周六：1-6
<script> var date=new Date() console.log(date.getDay()) </script>
5、getHours（） 获取当前的小时
getMinutes() 分钟
getSeconds() 秒
getMilliseconds（） 毫秒
<script> var date=new Date() console.log(date.getHours()) console.log(date.getMinutes()) console.log(date.getSeconds()) console.log(date.getMilliseconds()) </script>
6、getTime（） 时间戳（距离1970年1月1号0点0分0秒的毫秒数）
<script> var date=new Date() console.log(date.getTime()) console.log(new Date(1668483171417)) </script>
7、 setFullYear（）
setMonth（）
setDate（）
没有setDay（）
setHours（）
setMinutes（）
setSeconds（）
setTime（）
<script> var date=new Date() console.log(date) date.setFullYear(2025) console.log(date) date.setMonth(5) console.log(date) date.setDate(26) console.log(date) date.setHours(13) console.log(date) date.setMinutes(14) console.log(date) date.setSeconds(6) console.log(date) date.setTime(1668483171417) console.log(date) </script>
11、定时器
定时器
在js里面，有两种定时器，倒计时定时器和间隔定时器
倒计时定时器
- 倒计时多少时间以后执行函数
- 语法：setTimeout（要执行的函数，多长时间以后执行）
- 会在你设定的时间以后，执行函数
- 清除该定时器使用clearTimeout()
<script> var timeId=setTimeout(function(){ console.log('我要执行了') },1000) console.log(timeId) //1 clearTimeout(timeId) //清除 </script>时间是按照毫秒进行计算的，1000毫秒就是1秒钟
所以会在页面打开1秒钟以后执行函数
只执行一次，就不再执行了
返回值是，当前这个定时器是页面中的第几个定时器
间隔定时器
- 语法：setInterval（）
- 立即执行
- 清除该定时器用clearInterval（）
<button id="btn1">清除定时器-间隔定时器</button> <script> var time=setInterval(function(){ console.log("我要执行了") },1000) console.log(time) console.log(btn1) //直接通过id，拿到按钮对象 btn1.onclick=function(){ console.log("btn click") clearInterval(time) } </script>
时间是按照毫秒进行计算的，1000毫秒就是1秒钟
按时间间隔执行多次
返回值是，当前这个定时器是页面中的第几个定时器
同步、异步
同步执行完才到异步执行
如果同步的一直没执行完，那么就轮不到异步来执行
12、案例-倒计时
<div id="box"></div>
<script>
// 当前时间距离的时间
var targetDate=new Date("2023/1/1")
function diffTime(currnt,target){
// 两个时间相差的时间，单位秒 ceil向上取整
var sub=Math.ceil((target-currnt)/1000)
console.log(sub)
// 天
var day=parseInt(sub/(60*60*24))
// 小时
var hours=parseInt(sub%(60*60*24) /(60*60))
// 分钟
var minutes=parseInt(sub%(60*60)/60)
// 秒
var seconds=sub%60
var obj = {
day:day,
hours:hours,
minutes:minutes,
seconds:seconds
}
return obj
}
setInterval(function(){
// 当前时间
var currntDate=new Date()
var res=diffTime(currntDate,targetDate)
// document.write(`距离2023年还有：${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`)
// document.write("<br>")
// console.log(box)
box.innerHTML=`距离2023年还有：${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`
},1000)
</script>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
