概論
對(duì)象定義.png
對(duì)象基礎(chǔ)
創(chuàng)建對(duì)象
利用字面量創(chuàng)建對(duì)象：
var obj = {}; // 創(chuàng)建了一個(gè)空的對(duì)象
var obj1 = {
name: 'Omew',
age: 18,
sex: 'female',
sayHi: function () { // 這里只能是匿名函數(shù)
console.log('Hello~');
}
}
使用對(duì)象
console.log(obj1.name); // Omew
console.log(obj1.age); // 18
console.log(obj1['sex']); // female
obj1.sayHi(); // Hello~
利用new Object創(chuàng)建對(duì)象
var obj2 = new Object(); // 創(chuàng)建了一個(gè)空對(duì)象
obj2.uname = 'Kana', // 追加屬性
obj2.uage = 16,
obj2.sex = 'female',
obj2.greeting = function () { // 追加方法
console.log('Domo~');
}
使用對(duì)象方式與上面完全一致
利用構(gòu)造函數(shù)創(chuàng)建對(duì)象
此方法可以一次創(chuàng)建多個(gè)對(duì)象
構(gòu)造函數(shù)就是把對(duì)象里面的一些相同的屬性和代碼抽象出來并封裝到函數(shù)里面
function Star(uname, age, sex) { // 構(gòu)造函數(shù)名首字母大寫
this.uname = uname;
this.age = age;
this.sex = sex; // 構(gòu)造函數(shù)無需return即可返回結(jié)果
this.sing = function (song) {
console.log(song);
}
}
var star1 = new Star('Liu',18,'male'); // 調(diào)用構(gòu)造函數(shù)（必須使用new關(guān)鍵字）創(chuàng)建對(duì)象
console.log(typeof star1); // Object
console.log(star1.uname); // Liu
console.log(star1['age']); // 18
star1.sing('Rain...')
var star2 = new Star('Zhang',19,'male');
console.log(star2.uname);
構(gòu)造函數(shù)與對(duì)象的關(guān)系：
構(gòu)造函數(shù)與對(duì)象的關(guān)系.png
new關(guān)鍵字的執(zhí)行過程：
- 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象；
- 讓this指向這個(gè)新的對(duì)象；
- 執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)新的對(duì)象添加屬性和方法；
- 返回這個(gè)新對(duì)象（所以構(gòu)造函數(shù)里面不需要return）
如何遍歷一個(gè)對(duì)象？
// 對(duì)象的遍歷
// 對(duì)象內(nèi)部屬性是無序的，故無法用傳統(tǒng)的for循環(huán)進(jìn)行遍歷
// for in
for (var k in obj1){
console.log(k); // 遍歷屬性名
console.log(obj1[k]); // 遍歷屬性值
}
內(nèi)置對(duì)象：
內(nèi)置對(duì)象.png
一般情況下建議查閱MDN/W3C文檔
內(nèi)置對(duì)象：數(shù)學(xué)
Math對(duì)象(非構(gòu)造函數(shù)，無需new關(guān)鍵字調(diào)用，可直接使用)
console.log(Math.PI); // 內(nèi)置對(duì)象屬性，圓周率
console.log(Math.max(1,5,6,8,4,3)); // 內(nèi)置對(duì)象方法，最大值
console.log(Math.abs(-56)); // 絕對(duì)值
Math內(nèi)置取整方法
console.log(Math.floor(1.1)); // 向下取整數(shù)
console.log(Math.floor(1.9));
console.log(Math.ceil(1.2)); // 向上取證
console.log(Math.round(1.5)); // 四舍五入
Math內(nèi)置隨機(jī)函數(shù)
// Math.random()返回一個(gè)區(qū)間[0,1)的隨機(jī)浮點(diǎn)數(shù)
console.log(Math.random());
返回一個(gè)區(qū)間內(nèi)的隨機(jī)整數(shù)，并包含邊界
function getRandomNumber(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
console.log(getRandomNumber(1,100));
內(nèi)置對(duì)象：日期
Date對(duì)象（只能通過調(diào)用Date構(gòu)造函數(shù)來創(chuàng)建日期對(duì)象）
var arr = new Array(); // 必須使用new關(guān)鍵字的幾種對(duì)象類型
var obj = new Object();
var day = new Date(); // 若沒有參數(shù)，即輸出當(dāng)前時(shí)間
console.log(day); // "2021-10-19T03:44:00.755Z"
向 Date() 中添加參數(shù)
var day1 = new Date(2021,5,1); // 實(shí)際輸出為6月，因?yàn)樵路萦?jì)數(shù)是從0開始的
console.log(day1); // "2021-05-31T16:00:00.000Z"
var day2 = new Date('2021-5-1 8:8:8')
console.log(day2); // "2021-05-01T00:08:08.000Z"
日期格式化
console.log(day.getFullYear()); // 返回當(dāng)前年份
console.log(day.getMonth() + 1); // 返回當(dāng)前月份（0-11月）
console.log(day.getDate()); // 返回幾號(hào)
console.log(day.getDay()); // 返回星期幾（星期天為0）
console.log(`Today is ${day.getFullYear()}.${day.getMonth() + 1}.${day.getDate()}`);
時(shí)間格式化
console.log(day.getHours());
console.log(day.getMinutes());
console.log(day.getSeconds());
function getTime() { // 時(shí)間格式封裝函數(shù)
var h = day.getHours();
h = h < 10 ? '0' + h : h;
var m = day.getMinutes();
m = m < 10 ? '0' + m : m;
var s = day.getSeconds();
s = s < 10 ? '0' + s : s;
var time = `${h}:${m}:${s}`
return time;
}
console.log(getTime());
獲取日期的總的毫秒數(shù)（時(shí)間戳）
計(jì)算機(jī)預(yù)制起始時(shí)間統(tǒng)一為 1970 年 1 月 1 日
console.log(day.valueOf()); // 返回現(xiàn)在距離1970年1月1日的毫秒數(shù)
console.log(day.getTime()); // 同上
簡單寫法：
var date1 = +new Date();
console.log(date1);
或直接寫成：
console.log(Date.now()); // H5新增方法
倒計(jì)時(shí)案例
倒計(jì)時(shí)并不能直接用顯示的時(shí)間相減
這里采用時(shí)間戳相減得到剩余時(shí)間毫秒數(shù)
再將毫秒數(shù)轉(zhuǎn)換為顯示的時(shí)間格式
function countDown(time) {
var nowTime = +new Date(); // 返回當(dāng)前時(shí)間的時(shí)間戳
var deadLine = +new Date(time); // 返回指定時(shí)間的時(shí)間戳
var times = (deadLine - nowTime) / 1000; // time是剩余時(shí)間的時(shí)間戳(單位是秒)
var min = parseInt(times / 60 % 60);
min = min < 10 ? '0' + min : min;
var hour = parseInt(times / 60 / 60 % 24);
hour = hour < 10 ? '0' + hour : hour;
var day = parseInt(times / 60 / 60 / 24);
var sec = parseInt(times % 60);
sec = sec < 10 ? '0' + sec : sec;
var countTime = `${day}day ${hour}:${min}:${sec}`;
return countTime;
}
console.log(countDown('2022-1-1 00:00:00'));
內(nèi)置對(duì)象：數(shù)組
數(shù)組對(duì)象
var arr = []; // 利用數(shù)組字面量創(chuàng)建空數(shù)組
var arr1 = new Array(3); // 創(chuàng)建的還是一個(gè)空數(shù)組，里面有3個(gè)空的數(shù)組元素
console.log(arr1);
var arr2 = new Array(1,2,3);
console.log(arr2); // [1,2,3]
檢測(cè)是否為數(shù)組
利用 instanceof 運(yùn)算符
console.log(arr1 instanceof Array); // true
console.log(arr instanceof Array); // true
var obj = new Object;
console.log(obj instanceof Array); // false
利用內(nèi)置方法 Array.isArray() IE9以上版本支持
console.log(Array.isArray(arr1)); // true
添加或刪除數(shù)組元素
push() 在數(shù)組末尾追加元素
console.log(arr2.push(4,'apple')); // push()操作完畢之后，會(huì)返回新數(shù)組長度
console.log(arr2);
unshift() 在數(shù)組開頭追加元素
console.log(arr2.unshift('head',0));
console.log(arr2);
pop() 刪除數(shù)組末尾的一個(gè)元素
var arr3 = arr2;
console.log(arr3.pop()); // pop()操作完畢之后也會(huì)返回值，返回值為被刪除的元素
console.log(arr3);
shift() 刪除數(shù)組開頭的一個(gè)元素
console.log(arr3.shift());
console.log(arr3);
翻轉(zhuǎn)數(shù)組
console.log(arr3.reverse());
排序
var arr4 = [3, 7, 5, 9, 6, 2, 1]
arr4.sort();
console.log(arr4); // 1,2,3,5,6,7,9
當(dāng)數(shù)組中包含兩位數(shù)以上的元素時(shí)，僅僅使用 sort() 不會(huì)帶給你想要的結(jié)果：
var arr5 = [1, 15, 6, 8, 22, 54, 5, 9, 96, 72]
console.log(arr5.sort()); // [1, 15, 22, 5, 54, 6, 72, 8, 9, 96]
造成這種情況的原因是 sort() 僅僅是按照首個(gè)字符大小進(jìn)行排序
如果需要按照數(shù)值大小排序，可以這樣操作：
arr5.sort(function (a, b) {
return a - b; // 升序排列
// return b - a; 降序排列
});
console.log(arr5);
返回?cái)?shù)組元素索引號(hào)
如果數(shù)組內(nèi)有相同元素，則返回第一個(gè)元素的索引號(hào)
如果數(shù)組內(nèi)沒有對(duì)應(yīng)元素，則返回-1
var colors = ['red', 'blue', 'yellow', 'green'];
console.log(colors.indexOf('yellow')); // 2
console.log(colors.indexOf('black')); // -1
同樣返回?cái)?shù)組元素的索引號(hào)，區(qū)別是從后往前查找
console.log(colors.lastIndexOf('green')); // 4
實(shí)例，數(shù)組去重
算法：遍歷舊數(shù)組，取得舊數(shù)組的元素到新數(shù)組里去查詢，如果該元素在新數(shù)組里沒有出現(xiàn)過，則添加進(jìn)去，反之則不添加
function uniqueArr(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 = ['a', 'z', 'h', 'z', 'b', 'a', 'k', 'z', 'h'];
console.log(uniqueArr(demo)); // ["a", "z", "h", "b", "k"]
實(shí)例，數(shù)組轉(zhuǎn)換為字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
var arr1 = ['apple', 'orange', 'banana'];
console.log(arr1.join()); // apple,orange,banana
console.log(arr1.join(' & ')); // apple & orange & banana
內(nèi)置對(duì)象：字符串
字符串對(duì)象
根據(jù)字符返回位置
var str = 'this is a para but contain nothing interesting...'
console.log(str.indexOf('s')); // 3
// 僅返回該字符首次出現(xiàn)的位置
indexOf() 可以添加第二個(gè)參數(shù)作為起始位置，即從給定的起始位置開始查找
console.log(str.indexOf('s', 4)); // 6
同樣地，也有 lastIndexOf() 方法，可以從后向前查找，這里不再贅述
實(shí)例，查找字符串內(nèi)某個(gè)字符重復(fù)出現(xiàn)的位置和次數(shù)
算法：先查找第一個(gè)字符串的位置
只要 indexOf() 的值不是 -1 ，就繼續(xù)查找下去
indexOf() 方法只能查找一個(gè)元素，所以每一次查找完畢后，都要從 當(dāng)前索引 + 1 的位置開始繼續(xù)查找
function getSameChara(str,le) {
var index = str.indexOf(le);
var num = 0;
var arr = [];
while(index != -1){
arr.push(index);
num++;
index = str.indexOf(le,index + 1);
}
return [arr,num]
}
console.log(getSameChara(str,'i'));
根據(jù)索引位置返回字符
charAt() 方法返回字符
var str = 'omewspg'
console.log(str.charAt(5)); // p
遍歷所有字符
var arr1 = [];
for(i = 0; i < str.length; i++){
arr1.push(str.charAt(i));
}
console.log(arr1); // ["o", "m", "e", "w", "s", "p", "g"]
charCodeAt() 方法返回字符ASCII碼
console.log(str.charCodeAt(5)); // 112
str[index] H5新增方法，同樣用來返回字符
console.log(str[5]); // p
實(shí)例，統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符
算法： 利用charAt()遍歷字符串
將字符串存的每個(gè)字符儲(chǔ)為對(duì)象的屬性，如果遍歷到重復(fù)的字符串，則該屬性+1
遍歷對(duì)象，得到屬性值最大的屬性與該字符
var str = 'this is a para but contain nothing interesting...'
var obj = {};
for (var i = 0; i < str.length; i++){
var chars = str.charAt(i);
if(obj[chars]){ // 通過中括號(hào)+變量的方式來追加屬性，點(diǎn)表示法做不到這一點(diǎn)
obj[chars] ++;
}else{
obj[chars] = 1;
}
}
console.log(obj);
// 遍歷對(duì)象
var max = 0;
var ch = '';
for(var k in obj){
if(obj[k] > max){
max = obj[k];
ch = k;
}
}
console.log(max);
console.log(ch);
字符串操作方法
拼接
var str1 = 'omew';
console.log(str1.concat('spg')); // 效果類似于 + 號(hào)
截取
var str2 = 'this is a para...'
console.log(str2.substr(5,2)); // 第一個(gè)參數(shù)表示起點(diǎn)索引號(hào)；第二個(gè)參數(shù)表示取幾個(gè)字符
console.log(str2.slice(5,7)); // 第一個(gè)參數(shù)表示起點(diǎn)索引號(hào)；第二個(gè)參數(shù)表示截止索引號(hào)（該索引對(duì)應(yīng)字符無法取得）
// 上面兩個(gè)例子的輸出都是 is
替換
console.log(str2.replace('para','apple')); // 將首個(gè)para字符替換為apple
如果需要替換所有相同字符，可以使用循環(huán)操作
while(str2.indexOf('a') !== -1){
str2 = str2.replace('a','*');
}
console.log(str2);
字符串轉(zhuǎn)換為數(shù)組 split() (數(shù)組轉(zhuǎn)換為字符串 join)
var str3 = 'car&plane&boat'
console.log(str3.split('&')); // ["car", "plane", "boat"]
字符串的不可變性
字符串的不可變性.png
