1、物件簡介
在javaScipt中，一切皆為物件或者皆可以被用作物件
- 宿主物件：window，document
- 內建物件：Number String Boolean Array陣列 Object Function Error錯誤物件 Date時間物件 RegExp正則
- 自定義物件：new XX();
包裝物件：
// 真正的物件 var obj = { name: 'zs', // 屬性 age: 3, fn: function () { // 方法 console.log(this.name); } } console.log(obj.name); // 列印屬性 obj.fn(); // 呼叫方法
- 按照規則，基本型別沒有屬性和方法，只有物件有屬性和方法
- 包裝物件存在的意義：它是對基本型別說的，因為基本物件不是物件，但是它又要表現的像一個物件，就用包裝物件來模擬
// 包裝物件，當str呼叫length屬性的時候，包裝物件就過來了，它提供了length屬性，接著，包裝物件就消失了 console.log(str.length); console.log(str.charAt(2));
面試題：
// 面試題 var str = '平頭哥'; str.ab = 'abcd'; // 當str呼叫ab屬性的時候，它的包裝物件就過來了，在這個包裝物件下面，新增了ab屬性，接著，包裝物件就消失了 console.log(str.ab); // undefined 讀取ab屬性的時候，包裝物件就又過來了（此時過來的包裝物件，不是上次的包裝物件），它下面沒有ab屬性，所以undefined var obj = { name: 'ls' } obj.ab = 'abcd'; console.log(obj.ab); // abcd
2、Math物件
// 常用數學方法 console.log(Math.floor(3.999)); // 3 向下取整 去掉小數部分 console.log(Math.ceil(3.001)); // 4 向上取整 只要有小數就進位 console.log(Math.round(3.14159)); // 3 四捨五入 console.log(Math.abs(-100)); // 100 絕對值 console.log(Math.max(1, 2, 36, 9)); // 36 console.log(Math.min(1, 2, 36, 9)); // 1 console.log(Math.pow(2, 10)); // 2的10次方 1024 console.log(Math.pow(3, 2)); // 3的平方 9 console.log(Math.sqrt(60)); // 開根號 7.745966692414834
隨機數
- 隨機數：大於等於0，小於1的一個數
- 適用場景：點名器、抽獎、驗證碼
// 公式推理 // 從3--8 或 2--6隨機找一個數 // 3--8：3 4 5 6 7 8： // 6個：8-3+1 ---> 6 * 隨機數 = 0--5.9999999 + 最小數 --> 3--8.99999 向下取整 3--8 // 2--6：2 3 4 5 6： // 5個：6-2+1 ---> 5*隨機數 = 0 --4.9999999 + 最小數 --> 2--6.99999 向下取整 2--6 // --------------------------------- // 隨機數公式 // 1、大減小加1 // 2、乘以隨機數 // 3、加上最小數 // 4、向下取整 // 封裝 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } for (var i = 0; i < 20; i++) { console.log(getRandom(10, 50)); }
抽獎案例：
<body>
<div id="box">請抽獎</div>
<button>抽獎</button>
<script>
var arr = ['謝謝惠顧', '一等獎：一百萬', '謝謝惠顧', '二等獎：二百萬', '謝謝惠顧', '二等獎：1 毛錢', '三等獎：負一百萬', '謝謝惠顧', '三等獎：送你去泰國'];
var box = document.getElementById('box');
var btn = document.querySelector('button');
var timer = null;
btn.onclick = function () {
if (this.innerText === '抽獎') {
timer = setInterval(function () {
var index = getRandom(0, arr.length - 1); // 從陣列中隨機取出一個下標
box.innerText = arr[index]; // 取出陣列中的某一項
}, 50);
this.innerText = '停止';
} else {
clearInterval(timer);
this.innerText = '抽獎';
}
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</body>
3、時間物件
3.1、建立時間
// new Date()建立的時間，返回的都是一個物件 // 沒有引數 var d = new Date(); // 建立的是當前電腦此時此刻的時間 console.log(typeof d); // 'object' console.log(d.toLocaleString()); // 有引數 var d = new Date(2030, 10, 12, 13, 12, 10); // 傳入數字：年 月 日 時 分 秒 （月：0-11代表1--12） var d = new Date('2022-12-12 10:12:12'); // 傳入字元 月為正常的月 var d = new Date('2022/11/12 10:12:12'); // 傳入字元 var d = new Date('2022,11,13 10:12:12'); // 傳入字元 console.log(d.toLocaleString());
3.2、時間字串表示
var d = new Date(); console.log(d); // 本地時間 console.log(d.toLocaleString()); // 2021/4/26下午7:21:48 console.log(d.toLocaleDateString()); // 2021/4/26 console.log(d.toLocaleTimeString()); //下午7:21:48 // 返回英文狀態的時間 console.log(d.toString()); // Mon Apr 26 2021 19:21:48 GMT+0800 (中國標準時間) console.log(d.toDateString()); // Mon Apr 26 2021 console.log(d.toTimeString()); // 19:21:48 GMT+0800 (中國標準時間)
3.3、獲取時間某一部分
var d = new Date(); // d是一個物件，它裡面有很多的屬性和方法 var year = d.getFullYear(); // 年 var month = d.getMonth(); // 月 0--11 代表 1--12 var date = d.getDate(); // 日 var week = d.getDay(); // 星期 0--6 代表 週日--週六 var h = d.getHours(); // 時 var m = d.getMinutes(); // 分 var s = d.getSeconds(); // 秒 var ms = d.getMilliseconds(); // 毫秒 console.log(year, month, date, week, h, m, s, ms);
3.4、設定時間某一部分
var d = new Date(); // 有獲取的方法，就有對應設定的方法 d.setFullYear(2025); // 設定年 d.setMonth(15); // 設定月 月要加1 具有容錯的能力 d.setDate(36); // 設定日 console.log(d.toLocaleString());
3.5、時間戳
時間戳：返回的是1970年1月1日零時到現在經過的毫秒數
// 方式一 var d = new Date(); console.log(d.getTime()); // 1619418442234 // 方式二(IE8及以下不支援) console.log(Date.now()); // 1619418442234
倒數計時案例：
<body> <h1>距五一放假還有：xx天xx小時xx分xx秒</h1> <script> var h1 = document.querySelector('h1'); var future = new Date(2021, 4, 1, 0, 0, 0); // 未來時間 auto(); var timer = setInterval(auto, 1000); function auto() { // 兩個物件相減，都轉成數字（時間戳） var now = new Date(); // 當前時間 var d = Math.floor((future - now) / 1000); // 毫秒轉成秒 if (d <= 0) { clearInterval(timer); h1.innerText = '放假了'; return; } var date = Math.floor(d / 86400); // 天 var h = Math.floor(d % 86400 / 3600); // 小時 var m = Math.floor(d % 3600 / 60); // 分鐘 var s = d % 60; h1.innerText = '距五一放假還有：' + date + '天' + h + '小時' + m + '分' + s + '秒'; } </script> </body>
3.6、moment.js
// 建立時間 var d = moment(); // 建立當前時間 var d = moment('2023-12-12 10:12:03'); // 建立當前時間 // ------------------------------- // 格式化時間 console.log(d.format('YYYY年MM月DD日 HH:mm:ss')); console.log(d.format('YYYY')); // 年 console.log(d.format('MM')); // 月 // ----------------------------------- // 之前和之後 // 格式：時間.subtract(減少的數量, 時間的鍵); // 格式：時間.add(增加的數量, 時間的鍵); var d = moment().subtract(1, 'months'); console.log(d.format('YYYY年MM月DD日 HH:mm:ss')); var d = moment().add(1, 'months'); console.log(d.format('YYYY年MM月DD日 HH:mm:ss'));
4、字串物件
4.1、建立
var str1 = '平頭哥'; // 推薦 字面量 console.log(str1, typeof str1); var str2 = String('平頭妹'); console.log(str2, typeof str2); var str3 = new String('平頭弟'); // 不建議用，認識 console.log(str3, typeof str3); // "object"
4.2、長度，下標，charAt
var str = '我來優就業學習 web 前端'; // 字串.length 長度 console.log(str.length); // 14 // 字串.charAt(下標) 返回下標對應的字元 // 字串[下標] IE7及以下不支援 console.log(str[1]); // 來 console.log(str.charAt(2)); // 優 // 字串.charCodeAt(下標); 返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535之間的整數。 // 將文字轉成編碼 console.log(str.charCodeAt(1)); // 26469 console.log(str.charCodeAt(2)); // 20248 // 將編碼轉成文字 console.log(String.fromCharCode(26469, 20248)); // 來優
4.3、indexOf和lastIndexOf
- 字串.indexOf(要查詢的字元[,查詢的起始位置]; 從前向後查詢
- 字串.lastIndexOf(要查詢的字元[,查詢的起始位置]); 從後向前查詢
返回要查詢的字元在字串中首次出現的位置，如果沒有，返回-1
如果沒有第二個引數（查詢的起始位置），從下標0開始查詢
var str = 'abcdeabfabg'; console.log(str.indexOf('a')); // 0 console.log(str.indexOf('a', 1)); // 5 console.log(str.indexOf('A')); // -1 console.log(str.indexOf('ab', 1)); // 5 console.log(str.lastIndexOf('a')); // 8 console.log(str.lastIndexOf('ab')); // 8
案例：封裝一個函式，用於字元去重
console.log(fn('abaabbccdc'));
console.log(fn('aaaaa'));
function fn(str) {
var newStr = '';
for (var i = 0; i < str.length; i++) {
var v = str[i]; // 原字串中的每一個字元
if (newStr.indexOf(v) === -1) { // 等於-1，則證明newStr裡面沒有這個字元
newStr += v;
}
}
return newStr; // 去重以後的字串返回
}
4.4、擷取
- 字串.slice(起始下標,結束下標)
// 字串.slice(起始下標, 結束下標); 推薦使用 // 獲取字串中起始下標到結束下標之間的字元 // 第一個引數不能為負，第二個引數如果為負，則同長度相加 var str = 'abcdefg'; console.log(str.slice()); // abcdefg console.log(str.slice(2)); // cdefg console.log(str.slice(2, 5)); // cde 不包含第二個引數 console.log(str.slice(2, -2)); // cde 第二個引數為負，則和長度相加
- 字串.substring(起始下標,結束下標)
// 字串.substring(起始下標, 結束下標); var str = 'abcdefg'; console.log(str.substring()); // abcdefg console.log(str.substring(2)); // cdefg console.log(str.substring(2, 5)); // cde 不包含第二個引數 console.log(str.substring(5, 2)); // cde 如果第二個引數比第一個小，則交換位置 console.log(str.substring(2, -2)); // ab 負數同0
- 字串.substr
// 字串.substr(起始下標, 擷取的個數); var str = 'abcdefg'; console.log(str.substr()); // abcdefg console.log(str.substr(2)); // cdefg console.log(str.substr(2, 3)); // cde
4.5、轉大小寫
- 字串.toUpperCase(); 轉大寫
- 字串.toLowerCase(); 轉小寫
var str = 'abc'; console.log(str.toUpperCase()); // ABC var str2 = 'ABC'; console.log(str2.toLowerCase()); //abc
4.6、split
// 字串.split(引數); // 將字串以引數拆分成陣列 var str = '2020-11-12'; // ['2020', '11', '12'] console.log(str.split('-')); // ["2020", "11", "12"] console.log(str.split()); // ["2020-11-12"] console.log(str.split('')); // ["2", "0", "2", "0", "-", "1", "1", "-", "1", "2"] // ------------------------------ // 陣列.join(引數); // 將陣列以引數拼接成字串 var arr = ['2020', '11', '12']; console.log(arr.join('-')); // '2020-11-12' console.log(arr.join()); // '2020,11,12' console.log(arr.join('')); // '20201112'
4.7、replace
// 字串.replace(被替換的字元, 新的字元) // 返回替換以後的結果，不影響原字串 var str = '老王吃飯了'; var v = str.replace('老王', '張新昊'); console.log(v); // 張新昊吃飯了 console.log(str); // 老王吃飯了
4.8、trim
// 字串.trim(); 去除字串左右空格 // IE9及以上支援，IE8及以下，我們用正則來解決 var str = ' 平頭哥 '; console.log(str); console.log(str.trim());