一、字串
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) setInterval() 方法接受兩個引數，第一個引數是函式，第二個引數是時間（單位毫秒)
取消呼叫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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/386612.html
標籤：其他