day10 – JavaScript字符串、切割数据地址、过滤数据、日期对象相关知识、定时器、页面停留时间、倒计时
一、字符串
1.字符串创建方式
1.字面量方式：
var str = 'hello' ; //string
2.new String() 方式
var str = new String('hello') ; //object
2.字符串的角标的长度
字符串的长度和角标只能读取，不能改写
// 字符串的长度和角标只能读取，不能改写
var str = 'hello' ;
console.log(str.length) ; // 5
console.log(str[0]) ; // h
str[5] = 'w' ; //无效
console.log(str) ; //hello 说明str[5] = 'w'是无效的
3.字符串的方法
- includes：判断字符串中是否存在某个值，存在返回true，不存在返回false
var str = 'hello' ;
console.log(str.includes('m')) ; //false
console.log(str.includes('h')) ; //true
- indexOf：判断字符串中是否存在某个值,存在就返回角标，不存在就返回-1
var str = 'hello' ;
console.log(str.indexOf('m')) ; // -1
console.log(str.indexOf('h')) ; // 0
- lastIndexOf：判断字符串中是否存在某个值,存在就返回最后出现的值的角标，不存在就返回-1
var str = 'hello' ;
console.log(str.lastIndexOf('m')) ; // -1
console.log(str.lastIndexOf('l')) ; // 3
- concat：字符串拼接
var str = 'hello' ;
var str2 = ' world' ;
console.log(str.concat(str2)) ; //hello world
- slice(开始下标,结束下标)：截取，包头不包尾
var str = 'hello' ;
console.log(str.slice(2 , 4)) ; //ll
- charAt(index) ：访问角标对应的值
var str = 'hello' ;
console.log(str.charAt(0)) ; // h
- charCodeAt(index)：访问角标对应的值的ASCII值
var str = 'hello' ;
console.log(str.charCodeAt(1)) ; // 101
- String.fromCharCode()：把ASCII值转成对应的字符
console.log(String.fromCharCode(98)) // b
- substring(开始下标,结束下标)；截取，包头不包尾； 只能用于字符串， 参数不能为负数
var str = 'hello' ;
console.log(str.substring(0 , 3)) // hel
- substr(开始下标,截取个数)；
var str = 'hello' ;
console.log(str.substr(1 , 2)) ; // el
- trim() ：去掉首尾的空格，返回新字符串
var str = ' hello ' ;
console.log(str.trim()) ; //hello
- split():通过 分隔符 切割字符串为数组
var str = ' hello ' ;
console.log(str.split('')) ; //['h', 'e', 'l', 'l', 'o']
console.log(str.split(' ')) ; //['hello']
console.log(str.split('e')) ; //['h', 'llo']
- replace(old , new) ：替换(默认只会替换第一个)
var str = ' hello ' ;
console.log(str.replace('l' , 'm')) ; // hemlo
- toUpperCase() ：大写
var str = ' hello ' ;
console.log(str.toUpperCase()) ; //HELLO
- toLowerCase() ：小写
var str = 'HELLO' ;
console.log(str.toLowerCase()) ; // hello
二、js 切割 url 地址（字符串方法）
1.单个值
var url = 'https://www.baidu.com/s?ie=UTF-8&wd=baidu' ;
//获取url中"?"符后的字串
console.log(url.split("?")[1]) ; //ie=UTF-8&wd=baidu
2.切割？后面的部分并且转换存储在数组中
var url = 'https://www.baidu.com/s?ie=UTF-8&wd=baidu' ;
//获取url中"?"符后的字串
var str = url.split('?')[1] ;
//将获取的字符串安装&切割成数组
var arr = str.split('&') ;
//遍历数组
var res = [] ;
for(var i = 0 ; i < arr.length ; i++){
//将数组中的值按照=切割
var list = arr[i].split('=') ;
//添加到res中去
res.push(list) ;
}
console.log(res) ; //[['ie', 'UTF-8'];['wd', 'baidu']] ;
使用map()方法切割
map( ): map( ) 改变数组中的值，返回一个新的数组 必须return
var url = 'https://www.baidu.com/s?ie=UTF-8&wd=baidu' ;
var str = url.split('?')[1] ;
var arr = str.split('&') ;
var res = arr.map(function (v){
return v.split('=') ;
})
console.log(res) ; //[['ie', 'UTF-8'],['wd', 'baidu']] ;
3. 切割？后面的部分并且转换成对象
var url = 'https://www.baidu.com/s?ie=UTF-8&wd=baidu' ;
var str = url.split('?')[1] ;
var arr = str.split('&') ;
//切割后存储在对象中
var res = arr.map(function (v){
//遍历这个新数组，将数据放入对象中去
var obj = {} ;
//将里面的数组单个元素,再次进行拆分为一个新的单个数组
var list = v.split('=') ;
//分别将数组的第一和第二个元素 作为 对象的属性名和属性值
obj[list[0]] = list[1] ;
return obj
})
打印输出一下
console.log(res) ;
三、filter数据过滤
1.过滤数组
var arr = ['hello' , 'hi' , 'hei' , 'hehe' , 'xixi' , 'pupu'];
//找到包含h的
var res = arr.filter(function (v) {
return v.includes('h') ;
})
console.log(res) ; //['hello', 'hi', 'hei', 'hehe']
2.过滤对象
var data = [
{
title : '小米11' ,
content : '轻薄5G,内外兼修' ,
price : 1999
},
{
title : '小米青春版2' ,
content : '轻薄5G,内外兼修2' ,
price : 1299
},
{
title : '小米家庭11' ,
content : '轻薄5G,内外兼修' ,
price : 1999
}
]
var res2 = data.filter(function (v) {
//过滤对象title中包含11的
return v.title.includes('11')
})
四、日期对象
日期对象的作用是记录时间，显示的是区时。在JavaScript中 1970.1.1 0:0:0 是标准时间
1.日期对象的创建方法：
- 无参创建：拿到的是电脑的当前时间
var date = new Date() ;
console.log(date) ; //Sun Dec 19 2021 01:50:21 GMT+0800 (中国标准时间)
- 有参创建：拿到的是特定时间的日期对象
var date = new Date(0) ; //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
console.log(date) ;
//1000这个参数是一个毫秒值 从1970年1月1日00:00:00开始加上这一个毫秒值
//数字单参创建,毫秒数 1s = 1000ms
var date2 = new Date(1000) ;
console.log(date2) ; //Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)
//数字多参创建 年月日时分秒
//注意：月份是从0开始的，时间可以自动计算
var date3 = new Date(2020,13,1,1,1,1) ;
console.log(date3) ; //Mon Feb 01 2021 01:01:01 GMT+0800 (中国标准时间)
//字符串单参创建 年[-*,]月[-*,]日 时：分：秒
//时间是正常的，也是不能自动计算的
var date4 = new Date('2021-1-1 1:1:1') ;
console.log(date4) ; //Fri Jan 01 2021 01:01:01 GMT+0800 (中国标准时间)
2.日期对象的方法：
- 获取年份
var date = new Date() ;
var year = date.getFullYear() ;
console.log(year) ; //2021
- 获取月份 注：月份是从 0 开始的
var month = date.getMonth() + 1;
console.log(month) ; //12
- 获取日期/天(1-31)
var day = date.getDate() ;
console.log(day) ; //19
- 获取星期 注：星期也是从0开始 ，星期天0 0-6
var week = date.getDay() ;
console.log(week) ; //0
- 获取小时 （0-23）
var hour = date.getHours() ;
console.log(hour) ; // 17
- 获取分钟（0-59）
var minute = date.getMinutes() ;
console.log(minute) ; // 20
- 获 取秒 / 取秒数（0-59）
var second = date.getSeconds() ;
console.log(second);
利用封装函数获取日期
var date = formatDate() ;
document.write(date) ;
function formatDate(){
var date = new Date() ;
var year = date.getFullYear() ;
var month = date.getMonth() + 1;
var day = date.getDate() ;
var week = date.getDay() ;
var hour = date.getHours() ;
var minute = date.getMinutes() ;
var second = date.getSeconds() ;
var arr = ['星期天' , '星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六'];
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + ' ' + arr[week]
}
注：在日期对象中，set/get既能获取又能赋值 get只能获取
3.设置时间
可以通过set设置年月日，时分秒。但是星期不能设置，会报错。
var date = new Date() ;
//设置年份
date.setFullYear(2020) ;
//设置月份 时间可以自动计算
dote.setMonth(12) ;
//设置日期
date.setDate(10) ;
//设置小时
date.setHours(10) ;
//设置分钟
date.setMinutes(10) ;
//设置秒
date.setSeconds(1000) ;
4.获取上个月、本月天数
- 获取上个月天数分析：本月的第0天也就是上个月的最后一天
var date = new Date() ;
date.setDate(0) ;
console.log(date) ;
- 获取本月天数分析：获取本月天数，我们可以先把日期推到下个月，然后再把日期推到第0天，此时就是本月的天数。
var date = new Date('2021-1-31') ;
// 把日期推到下个月 32-58
date.setDate(33) ;
// 把日期推到第0天，也就是上个月的最后一天
nextMonth.setDate(0) ;
console.log(date);
五、定时器
1.定时器的作用：
- 重复的闹钟
- 每隔一段时间，做一件事
2.延时器的作用：
- 一段时间后做一件事
3.间歇调用：
setInterval(fn , time) 方法接受两个参数，第一个参数是函数，第二个参数是时间（单位毫秒)
取消调用clearInterval()
4.JS中用变量存储定时器的时候，变量存储的是页面当中的第几个定时器：
var t1= setInterval(function () {
console.log(666) ;
},1000)
//t1的值为1，当前是第一个定时器
var t2 = setInterval(function (){
console.log(777) ;
},2000)
//t2的值为2 当前是第二个定时器
5.同步和异步：
JS的任务队列分为两种，同步任务和异步任务：
- 同步任务：即后一个任务需等待前一个任务结束后，才能执行，程序的执行顺序与任务的排列顺序是一致的、同步的；
- 异步任务：即每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序是不一致的、异步的。（同时干很多事情）
6.单线程和多线程：
- 单线程：一次干一件事情
- 多线程：一次干很多事情
js一种单线程的语言
js主要是进行标签操作(无法一边修改标签，一边删除标签)
js代码同步为主的(从上往下一个个的执行代码)
js代码中也存在一些异步程序 事件处理函数，定时器
js代码执行顺序
1 先在主线程上执行同步代码，遇到异步，就放在任务队列中
2 所有的同步执行完毕以后，如果任务队列中有已经到时间了，可以执行了，（这个任务就可以在主线程上执行）
接下来看个简单的例子吧~
分析：按照我们的写法，应该是先执行t1,t2,再打印1，2 。但是定时器是异步的，在js代码中的执行顺序：是现在主线程上执行同步代码的，遇到异步，就放在任务队列中了。等所有的同步执行完毕后，再执行异步。
var t1 = setInterval(function () {
console.log(666);
},1000)
var t2 = setInterval(function () {
console.log(777);
},2000)
document.onclick = function () {
console.log(999);
}
console.log(1);
console.log(2);
7.页面停留时间：
<h1 id = "time"></h1>
<script>
var oH1 = document.getElementById('time') ;
var count = 0 ;
oH1.innerHTML = '你在页面停留了' + count + 's' ;
setInterval(function () {
count++ ;
oH1.innerHTML = '你在页面停留了' + count + 's' ;
},1000)
</script>
8.走动的时间：
<h1 id="time"></h1>
<script>
//补零
var oH1 = document.getElementById('time') ;
var res = formatDate() ;
oH1.innerHTML = res ;
setInterval(function () {
var res = formatDate() ;
oH1.innerHTML = res ;
},1000)
function formatDate() {
var date = new Date() ;
var year = date.getFullYear() ;
// 月份是从0开始的
var month = date.getMonth() + 1;
var day = date.getDate() ;
// 星期也是从0开始 ，星期天0 0-6
var week = date.getDay() ;
var hour = date.getHours() ;
var minute = date.getMinutes() ;
var second = date.getSeconds() ;
var arr = ['星期天' , '星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六'];
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + ' ' + arr[week]
}
</script>
8.倒计时实现：
<h1>距离下课还有<span id='time'></span></h1>
<script>
var oTime = document.getElementById('time') ;
//目标时间
var tt = new Date('2021-12-19 23:0:0')
showDate(tt) ;
function showDate(t) {
var future = new Date(t) ;
//当前时间
var now = new Date() ;
// 时间是可以相减的 --- 毫秒数
var gap = future - now ;
allSeconds = parseInt(gap / 1000) ;
//判断倒计时是否结束
if(allSeconds <= 0){
oTime.innerHTML = '时间已过期了' ;
return
}
//获取小时
var h = parseInt(allSeconds / 3600) ;
//计算分钟
var m = parseInt(allSeconds % 3600 /60) ;
//计算秒
var s = allSeconds % 60 ;
oTime.innerHTML = h + ':' + m + ':' + s ;
}
// setInterval的第三个包括后面的参数都是给第一个函数的参数
// var t = setInterval(showDate,1000,tt)
var t = setInterval(function (){
showDate(tt) ;
console.log(tt) ;
console.log(allSeconds) ;
if(allSeconds <= 0) {
console.log(666) ;
clearInterval(t) ;
}
})
</script>
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码