JS學習筆記（五）-JavaScript內建物件和資料型別總結與JS第一階段個人小結
技術標籤：前端字串javascripthtml5
2021.1.15
文章目錄
JS學習筆記（五）
JS內建物件
內建物件
- JavaScript中的物件分為三種：自定義物件，內建物件和瀏覽器物件。
- 前面兩種物件是JS基礎內容，屬於ECMAScript；
- 第三個瀏覽器物件屬於我們JS獨有的，我們在學習JS API時重點講解。
- 內建物件就是指JS語言自帶的一些物件，這些物件供開發者使用，並提供了一些常用的或是最基本而必要的功能(屬性和方法)。
- 內建物件最大的優點就是幫助我們快速開發。
- JavaScript提供了多個內建物件：Math、Date、Array、String等。
查文件
MDN
學習一個內建物件的使用，只要學會其常用成員的使用即可，我們可以通過查文件學習，可以通過MDN/W3C來查詢。
Mozilla開發者網路(MDN)提供了有關開放網路技術(Open Web)的資訊，包括HTML、CSS和全球資訊網及HTML5應用的API。
MDN官方網址：https://developer.mozilla.org/zh-CN/
如何學習物件中的方法
- 查閱該方法的功能
- 檢視裡面引數的意義和型別
- 檢視返回值的意義和型別
- 通過demo進行測試
Math物件
Math數學物件不是一個建構函式，所以我們不需要new來呼叫，而是直接使用裡面的屬性和方法即可。例如：
console.log(Math.PI);//一個屬性 圓周率
console.log(Math.max(-1,-10));//-1
console.log(Math.max(1,99,'Ludwig'));// NaN
console.log(Math.max());//-Infinity
練習：封裝自己的數學物件
利用物件封裝自己的數學物件，裡面有PI、最大值和最小值。
<script>
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 9, 85, 7));
</script>
Math概述
Math物件不是建構函式，它具有數學常數和函式的屬性和方法。
跟數學相關的運算（求絕對值，取整，最大值等）可以使用Math中的成員。
Math.PI //圓周率
Math.floor() //向下取整，往小了取（floor地板）
Math.ceil() //向上取整，往大了取（ceil天花板）
Math.round() //四捨五入版，就近取整。
//注意.5特殊，往大了取，如：-3.5結果是-3
Math.abs() //絕對值
Math.max()/Math.min() //求最大和最小值
Note：console.log(Math.abs(’-1’));//輸出結果為1，說明abs()方法存在隱式轉換，會把字串型的’-1’轉換為數字型的’-1’。
隨機數方法random()
- random()返回一個隨機的小數。範圍屬於[0,1)。
- 這個方法裡面不跟引數。
- 我們想得到兩個數字之間的隨機整數，並且包含這兩個整數。
查閱MDN文件可知：
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值，我們只需將其封裝到函式裡去,呼叫即可。
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));
- 隨機點名
var arr=['張三','李四','王五','陳六'];
console.log(arr[getRandom(0,arr.length-1)]);
日期物件
Date()日期物件是一個建構函式，必須使用new來呼叫建立我們的日期物件。
Note:
var arr=new Array();//建立一個數組物件
var obj=new Object();//建立了一個物件例項
使用Date
var date = new Date();
console.log(date);
- 如果沒有引數，返回當前系統時間
- 引數常用的寫法
- 數字型 2021,1,14
- 字串型 ‘2021-1-14 8:8:8’//常用
var date1=new Date(2021,1,14); console.log(date1);//返回的是11月，不是10月 var date2=new Date('2021-1-14 8:8:8'); console.log(date2);
日期格式化
我們可以採用如下方法：
getFullYear(); //獲取當前年
getMonth(); //獲取當月(0-11)
getDate(); //獲取當天日期
getDay(); //獲取星期幾(週日0~週六6)
getHours(); //獲取當前小時
getMinutes(); //獲取當前分鐘
getSeconds(); //獲取當前秒
Note:
1.輸出月份的時候要記得加1
console.log(date.getMonth()+1);
2.輸出今天周幾，週一週六返回的是16，而週日返回的是0
console.log(date.getDay());
案例1：寫一個 今天是2021年1月14日 週四
var date = new Date();//先建立物件例項
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var arr=['日','一','二','三','四','五','六'];
var day = date.getDay();
console.log('今天是'+year+'年'+month+'月'+dates+'日'+' '+'星期'+arr[day]);
案例2：要求封裝一個函式返回當前的時分秒，格式為 08:08:08
function getTimer() {
var time = new Date(); //這句話不能忘！一定要寫！
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTimer());
獲取日期的總的毫秒形式(時間戳)
Date物件是基於1970年1月1日(世界標準時間)起的毫秒數。
我們經常利用總的毫秒數來計算時間，因為它更精確。
Note：
獲取Date總的毫秒數，不是當前時間的毫秒數，
而是距離1970年1月1號過了多少毫秒。
- 1.通過valueOf()、getTime()
var date = new Date(); console.log(date.valueOf()); console.log(date.getTime());//我們現在的時間距離1970.1.1總的毫秒數。 - 2.簡單的寫法(最常用的寫法)
var date1 = +new Date();//如果引數不為空則返回的是括號裡時間總的毫秒數。 console.log(date1); - 3.H5新增的方法Date.now();
console.log(Date.now());
案例：倒計時
分析：
- 核心演算法：輸入的時間減去現在的時間就是剩餘的時間，即倒計時，但是不能拿著時分秒相減，比如05分減去25分，結果會是負數。
- 用時間戳來做。使用者輸入時間的總的毫秒數-現在時間的總的毫秒數，得到的就是剩餘時間的毫秒數。
- 把剩餘時間的毫秒數轉換為天、時、分、秒（時間戳轉換為時分秒）
轉換公式如下：
- d = parseInt(總秒數/60/60/24);//計算天數
- h = parseInt(總秒數/60/60%24);//計算小時
- m = parseInt(總秒數/60%60); //計算分數
- s = parseInt(總秒數%60); //計算當前秒數
<script>
function countDown(time){
var nowTime=+new Date();//如果括號為空，返回的是當前時間總的毫秒數
var inputTime=+new Date(time);//如果括號非空，返回的是使用者輸入時間總的毫秒數
var times=(inputTime-nowTime)/1000;//time是剩餘時間總的毫秒數，1s=1000ms
var d=parseInt(times/60/60/24);//天
d = d < 10 ? '0' + d : d;
var h=parseInt(times/60/60%24);//時
h = h < 10 ? '0' + h : h;
var m=parseInt(times/60%60);//分
m = m < 10 ? '0' + m : m;
var s=parseInt(times%60);//當前的秒
s = s < 10 ? '0' + s : s;
return d+'天'+h+'時'+m+'分'+s+'秒';
}
console.log(countDown('2021-1-16 00:00:00'));
var date=new Date();
console.log(date);
</script>
陣列物件
陣列物件的建立
建立陣列物件有兩種方式：
- 字面量方式
- new Array()
var arr1=new Array();//建立一個空的陣列 var arr2=new Array(2);//建立一個長度為2的陣列，裡面有兩個空的陣列元素 var arr3=new Array(2,3);//等價於[2，3]，裡面有兩個陣列元素是2和3
檢測是否為陣列
1.instanceof運算子，它可以用來檢測是否為陣列。
var arr = [];
console.log(arr instanceof Array);//arr是否屬於Array，如果屬於是陣列，返回true。
2.Array.isArray(引數); 用該方法檢測是否為陣列。//H5新增的方法
var arr = [];
console.log(Array.isArray(arr));
新增刪除陣列元素的方法
-
push()：在我們陣列的末尾，新增一個或者多個數組元素 push 推
var arr=[1,2,3]; arr.push(4,'Ludwig');- 作用：push()可以給陣列末尾追加新的元素
- 引數：push()引數直接寫陣列元素就可以了
- 返回值：push完畢後，返回的結果是新陣列的長度
console.log(arr.push(4,‘Ludwig’));//返回值是5
-
unshift：在我們的陣列開頭，新增一個或者多個數組元素
var arr=[1,2,3]; arr.unshift('red','blue');- 作用：usnhift()可以給陣列開頭追加新的元素
- 引數：unshift()引數直接寫陣列元素就可以了
- 返回值：unshift()完畢後，返回的結果是新陣列的長度
console.log(arr.unshift(4,‘Ludwig’));//返回值是5
-
pop()：它可以刪除陣列的最後一個元素
arr.pop(); console.log(arr);//返回剩下的陣列 console.log(arr.pop());//返回被刪掉的元素- 作用：pop()可以刪除陣列的最後一個元素，但一次只能刪一個
- 引數：pop()沒有引數
- 返回值：pop()完畢之後，返回的結果是刪除的那個元素
-
shift()：它可以刪除陣列的第一個元素
arr.shift(); console.log(arr);//返回剩下的陣列 console.log(arr.shift());//返回被刪掉的元素- 作用：shift()可以刪除陣列的第一個元素，但一次只能刪一個
- 引數：shift()沒有引數
- 返回值：shift()完畢之後，返回的結果是刪除的那個元素
陣列排序
-
reverse() 翻轉陣列
var arr=['8','1','Ludwig']; arr.reverse(); console.log(arr); console.log(arr.reverse()); -
sort() 陣列排序(氣泡排序)
var arr=[3,4,7,1]; arr.sort(); console.log(arr);Note:陣列元素只能是個位數
如果是13，4，77，1，7。返回結果是1，13，4，7，77。錯誤。var arr=[13,4,77,1，7]; arr.sort(function(){ return a-b;//升序的順序排列 //return b-a;//降序的順序排列 }); console.log(arr);
陣列索引方法
-
indexOf()：陣列中查詢給定元素的第一個索引。如果找不到，則返回-1。
var arr=['red','green','blue','pink']; console.log(arr.indexOf('blue'));//返回值2 -
lastIndexOf()：陣列中的最後一個索引，從後往前找。找不到則返回-1。
案例：陣列去重
1.目標：把舊數組裡面不重複的元素選取出來放到新陣列中，重複的元素只保留一個，放到新陣列中去。
2.核心演算法：遍歷舊陣列，然後拿著舊陣列元素去查詢新陣列，如果該元素在新數組裡面沒有出現過，就新增，否則不新增。
3.我們怎麼知道該元素沒有存在？利用新陣列.indexOf(陣列元素)，
如果返回 -1 則說明新數組裡面沒有該元素。
4.封裝一個去重的函式unique 獨一無二的。
function unique(arr){
var newArr = [];
for(var i = 0;i < arr.length;i++){
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c','a','z','a','x','a','x','c','b']);
console.log(demo);
陣列轉換為字串
-
toString()：把陣列轉換成字串，逗號分隔每一項。返回值是一個字串。
var arr = [1,2,3]; console.log(arr.toString()); -
join(‘分隔符’)：把陣列中的所有元素轉換為一個字串
var arr = ['green','red','blue']; console.log(arr.join());//green,red,blue.如果沒有引數預設逗號分隔 console.log(arr.join('-'));//green-red-blue.
陣列中的其他常用方法
-
concat():陣列連線
連線兩個或多個數組，不影響原陣列。
返回值:返回一個新的陣列。var arr1 = ['a','b','c']; var arr2 = ['d','e','f']; var arr3 = arr1.concat(arr2); console.log(arr3);//["a", "b", "c", "d", "e", "f"] -
slice()：陣列擷取
var color=['red','blue','green','black','yellow']; console.log(color.slice(2));//["green", "black", "yellow"]前兩個截掉 console.log(color.slice(2,4));//["green", "black"] //淺拷貝slice(begin,end),包括begin，不包括end。 console.log(color.slice(1,5));//["blue", "green", "black", "yellow"] -
splice()：刪除或替換陣列元素//此方法會改變原陣列
var months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // replaces 0 element at index 1，即inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); // replaces 1 element at index 4 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "May"]
字串物件
一個問題
var str = 'andy';
console.log(str.length);//4
物件，也就是複雜資料型別，才有屬性和方法，
簡單資料型別字串為什麼會有length屬性呢？
基本包裝型別
基本包裝型別：就是把簡單資料型別包裝成為了複雜資料型別。
- 第一步：把簡單資料型別包裝為複雜資料型別
var temp = new String('andy'); - 第二步：把臨時變數的值給str
str = temp; - 第三步：銷燬臨時變數
temp = null;
這樣基本資料型別就有了屬性和方法。
為了方便操作基本資料型別JavaScript提供了三個特殊的引用型別：
String，Number和Boolean。
字串的不可變
指的是裡面的值不可變，雖然看上去可以改變內容，但其實是地址變了，記憶體中開闢了一個新的記憶體空間。因此我們不要大量的拼接字串。
var str = '';
for (var i = 1;i <= 1000000000;i++){
str += i;
}
console.log(str);//由於字串的不變性，在不停開闢新的記憶體空間，所以可能會卡死。
也因此，字串的所有方法，都不會修改字串本身(字串是不可變的)，操作完成會返回一個新的字串。
根據字元返回位置
1. str.indexOf(‘要查詢的字元’,[起始的位置])//中括號表示可選項。
var str = '改革春風吹滿地，春天來了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春',3));//從索引號是3的位置開始往後查詢
2. lastIndexOf()//從後往前查詢，只找到第一個匹配的。
案例：查詢字串中某個字串中某個字元出現的位置及次數
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while(index !== -1){
console.log(index);
num++;
index = str.indexOf('0',index + 1);
}
console.log('o出現的次數是：'+num);
根據位置返回字元
-
charAt(index)：根據位置返回字元
var str = 'andy'; console.log(str.charAt(3));//y //遍歷所有字串所有的字元 for (var i = 0;i < str.length;i++){ console.log(str.charAt(i)); } -
charCodeAt(index)：返回指定位置處字元的ASCII碼值
目的：判斷使用者按下了哪個鍵。console.log(str.charCodeAt(0));//97 -
str[index]：獲取指定位置處字元//HTML5新增
console.log(str[0]);//a
案例：判斷一個字串中出現次數最多的字元，並統計其次數
一個鋪墊：
//有一個物件
var obj = {
age:18
}
if (obj['age']){//obj['age']相當於obj.age
//如果沒有該屬性返回的值就是undefined，在if中轉化為false
console.log('裡面有該屬性');
}else{
console.log('沒有該屬性');
}
案例分析：
1.核心演算法：利用charAt()遍歷這個字串
2.把每個字元都儲存給物件，如果物件沒有該屬性就為1，如果存在了就+1
3.遍歷物件，得到最大值和該字元
var str = 'abcoefoxyozzopp';
var obj = {};
for(var i = 0;i < str.length;i++){
var chars = str.charAt(i);//chars是字串的每一個字元
if(obj[chars]){//obj[chars]得到的是屬性值，相當於上文的obj.age
obj[chars]++;
}else{
obj[chars] = 1;
}
}
console.log(obj);
//遍歷物件，用for...in
var max = 0;
var ch = '';
for(var k in obj){
//k得到的是屬性名
//o[k]得到的是屬性值
if(o[k]>max){
max = o[k];
ch = k;
}
}
console.log(max);
console.log('出現最多的字元是'+ch);
字串操作方法
-
concat(str1,str2,str3…)
concat()方法用於連線兩個或多個字串。拼接字串，等效於+，+更常用。var str = 'andy'; console.log(str.concat('red'));//andyred -
substr(start,length)
var str = '改革春風吹滿地'; console.log(str.substr(2,2));//春風 //第一個2是索引號的2，第二個2是擷取長度 -
replace(‘被替換的字元’，‘替換為的字元’)：替換字元
var str = 'andyandy'; console.log(str.replace('a','b'));//bndyandyNote:它只會替換第一個字元。
案例：把一個字串裡所有字元o全部替換為
var str = 'abcoefoxyozzopp'; while(str.indexOf('o') !== -1){ str=str.replace('o','*'); } console.log(str);//過濾文章敏感詞 -
split(‘分隔符’) 字元轉換為陣列//join把陣列轉換為字串
split裡的分隔符取決於字串裡是用什麼隔開的var str1 = 'red,pink,blue'; console.log(str1.split(','));//["red", "pink", "blue"] var str2 = 'red&pink&blue'; console.log(str2.split('&'));//["red", "pink", "blue"] console.log(str2.split('l')); //["red&pink&b", "ue"] -
toUpperCase()：轉換大寫
-
toLowerCase()：轉換小寫
JS簡單型別與複雜型別（資料型別的總結）
簡單型別與複雜型別
簡單型別又叫做基本資料型別或者值型別，
複雜型別又叫做引用型別
-
值型別：簡單資料型別/基本資料型別，在儲存變數中儲存的是值本身，因此叫做值型別。string，number，boolean，undefined，null
Note:簡單資料型別null很特殊，它返回的是一個空的物件object。
因此，如果有個變數我們以後打算儲存為物件，暫時還沒想好放啥，這個時候就給null。var timer = null; console.log(typeof timer);//object -
引用型別：複雜資料型別，在儲存時變數中儲存的僅僅是地址(引用)，因此叫做引用資料型別。可以通過new關鍵字建立物件(系統物件、自定義物件)，如：Object、Array、Date等。
堆和棧
在計算機中，作業系統會將記憶體分為兩大類，堆和棧。
堆疊空間分配區別：
- 棧(作業系統)：簡單資料型別存放到棧裡面
由作業系統自動分配釋放存放函式的引數值、區域性變數的值等。
其操作方式類似於資料結構的棧; - 堆(作業系統)：複雜資料型別存放到堆裡面
一般由程式設計師分配釋放，儲存複雜資料型別(物件)，
若程式設計師不釋放，由垃圾回收機制回收。
Note:JavaScript中沒有堆疊的概念，通過堆疊的方式，可以更容易理解程式碼的一些執行方式，便於將來學習其他語言。
簡單型別與複雜型別的記憶體分配
- 簡單資料型別
- 值型別(簡單資料型別)：string，number，boolean，undefined，null
- 值型別變數的資料存放在變數(棧空間)中，在棧裡面，直接開闢一個空間，存放的是值。
- 複雜資料型別
- 引用型別(複雜資料型別)：通過new關鍵字建立物件(系統物件、自定義物件)，如：Object、Array、Date等。
- 首先是在棧裡面存放地址，用十六進位制表示，然後這個地址指向堆裡面的資料。真正的物件例項存放到堆空間中。
簡單型別傳參
函式的形參也可以看作是一個變數，當我們把一個值型別變數作為引數傳給函式的形參時，其實是把變數在棧空間裡的值複製了一份給形參，形參在棧裡也開闢一個新的空間，那麼在方法內部堆形參做任何修改，都不會影響到外部變數。
複雜型別傳參
函式的形參也可以看作是一個變數，當我們把引用型別變數傳給形參時，其實時把變數在棧空間裡儲存的堆地址複製給了形參，形參和實參其實儲存的是同一個堆地址，所以操作的是同一個物件。
function Person(name){
this.name=name;
}//這是一個建構函式
function f1(x){
console.log(x.name);//2.劉德華
x.name='張學友';
console.log(x.name);//張學友
}
var p = new Person('劉德華');
console.log(p.name);//1.劉德華
f1(p);//x=p.x和p都是變數，p將自己的地址複製給x
console.log(p.name);//張學友
個人小結
今天完成了畢業設計的任務書，花了許多時間，晚上和舍友去學校北門外吃了烤魚，耽擱了一點時間，現在是1月16日的凌晨2點16分。慶幸JavaScript第一階段語法階段基本告一段落，也即將迎來JavaScript的第二階段Web APIs階段的學習。五天時間對我個人而言，這個學習強度還是挺大的，身體有些疲倦，知識有些遺忘，但還是堅持下來了。堅持每天一篇部落格，也看到了陌生人的鼓勵，對一個初學者來說，是莫大的鼓舞，還會繼續堅持還會繼續努力。學校裡已經沒有什麼人了，挺冷清，明天（就是今天16號）會全力完成開題報告的書寫，並且和女朋友約了哥老官火鍋，可能會停更一天。23分了，準備睡覺。