day10 - JavaScript字符串切割数据地址过滤数据日期对象相关知识定时器页面停留时间倒计时
Posted 小高今天早睡了吗？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 ;以上是关于day10 - JavaScript字符串切割数据地址过滤数据日期对象相关知识定时器页面停留时间倒计时的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript之切割路径并返回对应的值splitnewURLSearchParamsgeturl处理URL的查询字符串