《使命召喚》系列在Steam商城開啟優惠活動 國區解鎖後首次特賣
阿新 • • 發佈：2022-04-08
#1.內建物件
1.JavaScript 中的物件分為3中：自定義物件、內建物件、瀏覽器物件
2.前面兩種物件是js 基礎內容，屬於 ECMAScript；第三個瀏覽器物件屬於我們的js獨有的，我們js API講解
3.內建物件就是指js語言自帶的一些物件，這些物件供開發者使用，並提供了一些常用的或是最基本而必要的功能（屬性和方法）
4.內建物件最大的優點就是幫助我們快速開發
5.JavaScript提供了多個內建物件：Math、Date、Array、Strting等
#2.Math物件
1.Math是一個內建物件，它具有數學常數和函式的屬性和方法。不是一個函式物件
2.與其他全域性物件不同的是，Math不是一個建構函式，Math的所有屬性和方法都是靜態的，不需要是用 new 。
案例：封裝自己的數學物件
<script type="text/javascript"> let myMath = { PI: 3.1415926535, max: function() { let max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max= arguments[i] } } return max; }, min: function() { let 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, 5, 9)); console.log(myMath.min(1, 5, 9)); </script>
2.1Math 概述
Math 物件不是建構函式，它具有數學常數和函式的屬性和方法。
<script type="text/javascript">
//1.絕對值方法
console.log(Math.ads(1)); // 1
console.log(Math.ads(-1)); // 1
console.log(Math.ads('-1')); // 隱式轉換 會把字串型 -1 轉換為數字型
console.log(Math.ads('pink')); // NaN
//2.三個取整方法
//(1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
//(2) Math.ceil() ceil 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
//(3) Math.round() 四捨五入
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.9)); // 2
</script>
2.2隨機數方法 random()
1.Math.random()函式返回一個隨機的小數
<script type="text/javascript">
console.log(Math.random());
</script>
2.我們想要得到兩個數之間的隨機整數 並且包含這兩個整數
<script type="text/javascript">
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
</script>
案例：猜數字遊戲
<script type="text/javascript">
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let random = getRandom(1, 10);
while(true) { // 這是一個死迴圈
let num = prompt('請輸入1~10之間的一個數');
if (num > random) {
alert('猜大了')
} else if(num < random) {
alert('猜小了')
}else{
alert('對了')
break;
}
}
</script>
#3.日期物件
1.Date物件
建立Date例項用來處理日期和時間，Date 物件基於1970年1月1日起的毫秒數
Date 是一個建構函式，必須使用new 來呼叫建立我們的日期物件
<script type="text/javascript">
//1.使用date 如果沒有引數 返回當前系統的當前時間
let date = new Date();
console.log(date);
//2.引數常用的寫法 數字型 2022, 10 , 01 或者是 字串型 '2022-10-1 8:8:8'
let date1 = new Date(2022, 10, 1);
console.log(date1);
let date2 = new Date('2022-10-1 8:8:8')
console.log(date2);
</script>
3.1Date 概述
1.Date 物件和 Math 物件不一樣，他是一個建構函式，所以我們需要例項化後在能用
2.Data 例項主要用來處理日期和時間的
3.2Date()方法的使用
1.獲取當前時間必須例項化
let date = new Date(); console.log(date);
2.Date（）建構函式的引數
如果括號裡有時間，就返回引數裡面的時間，引數有兩種寫法，一種數字型一種字串型
3.3 日期格式化
<script type="text/javascript">
// 格式化日期 年月日
let date = new Date();
console.log(date.getFullYear()); //返回當前日期的年份
console.log(date.getMonth() + 1); //返回當前日期的月份 返回的月份要小一個月 記著月份加1
console.log(date.getDate()); //返回的是 幾號
console.log(date.getDay()); // 返回今天是周幾 注意 週日返回的是0
</script>
1.時分秒
獲取時分秒
<script type="text/javascript"> let date = new Date(); console.log(date.getHours()); // 獲取當前小時 console.log(date.getMinutes()); // 獲取當前時間的分鐘 console.log(date.getSeconds()); // 獲取當前時間的秒數 // 要求封裝一個函式返回當前的時分秒 格式：08:08:08 function getTime() { let time = new Date(); let h = time.getHours(); h = h < 10 ? '0' + h : h let m = time.getMinutes(); m = m < 10 ? '0' + m : m let s = time.getSeconds(); s = s < 10 ? '0' + s : s return h + ':' + m + ':' + s; } console.log(getTime()); </script>
3.4.獲取日期的總的毫秒形式
所以我們可以通過我們的Date物件來獲取總的毫秒數
三種方法 1. valueof（）2.getTime（）3.直接建立變數 new Date（）
<script type="text/javascript">
//獲取date總毫秒數 不是當前毫秒數 而是距離1970年1月1號過了多少毫秒
let date = new Date();
console.log(date.valueOf()); // 方法一 就是我們現在的時間距離1970.1.1的總毫秒數
console.log(date.getTime()); // 方法二
// 2. 簡單的寫法 (是我們最常用的寫法)
let date1 = +new Date(); // +new Date() 返回的就是總的毫秒數
console.log(date1);
</script>
#4.陣列物件
4.1陣列物件的建立
建立陣列物件的兩種方式
1.字面量建立
<script> let arr = [1, 2, 3]; console.log(arr[0]); </script>2.new Array()
<script>
//2.利用new Array()
// let arr1 = new Array() // 建立了一個空陣列
// let arr1 = new Array(2) // 這個2表示陣列的長度為2裡面有2個空的陣列元素
let arr1 = new Array(2, 3); // 等價於[2,3] 這樣寫表示 裡面有2個數組元素 是 2和3
console.log(arr1);
</script>
4.2檢測是否為陣列
1.instanceof 運算子 它可以用來檢測是否為陣列
<script>
function reverse(arr) {
if (arr instanceof Array) {
let newArr = [];
for (let i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
return newArr;
} else {
return '這個引數必須是陣列格式[1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
var arr = [];
let obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
</script>
2. Array.isArray(引數)
<script> let arr = []; let obj = {}; console.log(Array.isArray(arr)); console.log(Array.isArray(obj)); </script>
4.3.新增刪除陣列元素的方法
<script>
// 新增或刪除陣列的方法
// 1.push() 在我們陣列末尾 新增一個或多個數組元素 push 推
let arr = [1, 2, 3];
arr.push(4, 'pink');
console.log(arr);
// (1) push() 是可以給陣列追加新的元素
// (2) push() 引數直接寫陣列元素就可以了
// (3) push() 完畢之後，返回的結果是 新陣列的長度
// (4) 原陣列也會發生變化
// 2.unshift 在我們陣列開頭 新增一個或多個數組元素
arr.unshift('red', 'purple');
console.log(arr);
// (1) unshift() 是可以給陣列前面追加新的元素
// (2) unshift() 引數直接寫陣列元素就可以了
// (3) unshift() 完畢之後，返回的結果是 新陣列的長度
// (4) 原陣列也會發生變化
// 刪除陣列元素
// 3.pop() 它可以刪除陣列最後的一個元素
arr.pop();
console.log(arr);
// (1) pop() 是可以刪除陣列最後的一個元素 記住一次只能刪除一個元素
// (2) pop() 沒有引數
// (3) pop() 完畢之後，返回的結果是 刪除的那個元素，刪除誰就返回誰
// (4) 原陣列也會發生變化
// 4.shift() 它可以刪除陣列的第一個元素
arr.shift();
console.log(arr);
// (1) shift() 是可以刪除陣列的第一個元素 記住一次只能刪除一個元素
// (2) shift() 沒有引數
// (3) shift() 完畢之後，返回的結果是 刪除的那個元素，刪除誰就返回誰
// (4) 原陣列也會發生變化
</script>
案例：篩選陣列
<script> let arr = [1500, , 1200, 2000, 2100, 1800]; let arr1 = [] for (let i = 0; i < arr.length; i++) { if (arr[i] < 2000) { arr1.push(arr[i]) } } console.log(arr1); </script>
4.4.陣列排序
<script>
//陣列排序
// 1. 翻轉陣列
let arr = ['pink', 'red', 'bule'];
arr.reverse();
console.log(arr);
// 2.陣列排序 (氣泡排序)
let arr1 = [3, 2, 4, 5, 6];
arr1.sort((a, b) => {
// return a - b; // 升序的順序排列
return b - a; // 降序的順序排列
});
console.log(arr1);
</script>
4.5.陣列索引方法
indexOf() 方法
從前向後查詢
<script>
// 返回陣列元素的索引方法
// indexOf(陣列元素) 作用就是返回該陣列元素的索引號
// let arr = ['red', 'green', 'blue', 'pink'];
// 他只返回第一個滿足條件的索引號
// let arr = ['red', 'green', 'blue', 'pink', 'blue'];
// 他如果在該陣列當中找不到元素,則返回 -1
// let arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'))
</script>
lastIndexOf() 方法
從後向前查詢
<script>
// lastIndexOf(陣列元素) 作用就是返回該陣列元素的索引號
let arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.lastIndexOf('blue'))
// 他如果在該陣列當中找不到元素,則返回 -1
let arr = ['red', 'green', 'pink'];
console.log(arr.lastIndexOf('blue'))
</script>
案例：陣列去重
<script>
function unique(arr) {
let arr1 = [];
for (let i = 0; i < arr.length; i++) {
if (arr1.indexOf(arr[i]) === -1) {
arr1.push(arr)
}
}
return arr1;
}
let demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo)
</script>
4.6 陣列轉換為字串
<script>
// split()
// 把一個字串分割成字串陣列
var a = "How are you doing today?";
var b = a.split(" ");
console.log(b);
// join()
// 把陣列中的所有元素轉換為一個字串：
var c = ["Banana", "Orange", "Apple", "Mango"];
var d = c.join();
console.log(d);
</script>
#5.字串物件
5.1基本包裝型別
為了方便操作基本資料型別，JavaScript還提供了三個特殊的引用型別:String、Number和Boolean。
基本包裝型別就是把簡單資料型別包裝成為複雜資料型別，這樣基本資料型別就有了屬性和方法。
5.2 字串的不可變
因為我們字串的不可變所以不要大量的拼接字串
5.3 根據字元返回位置
字串所有的方法都不會修改字串本身
兩個方法用法一樣，只不過一個是從前向後查詢，一個是從後向前查詢
<script>
// 字串物件,根據 字串返回位置 str.indexOf('要查詢的字元,[起始位置]')
let str = '改革春風吹滿地,春風來了';
console.log(str.indexOf('春'))
console.log(str.indexOf('春', 3)) // 從索引3的位置開始往後查詢
</script>
案例：返回字串位置
<script> let str = "abcoefoxyozzopp"; let index = str.indexOf('o'); let num = 0; console.log(index); while (index != -1) { console.log(index); num++; index = str.indexOf('o', index + 1) } console.log("o出現的次數是:" + num); </script>5.4 根據位置返回字元
方法一 charAt(index) 根據位置返回字串
<script>
// 1. charAt(index) 根據位置返回字串
let str = 'andy'
console.log(str.charAt(3));
// 遍歷所有的字元
for (let i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
</script>
方法二 charCodeAt(index) 返回相應索引號的字元ASCII值 目的：判斷使用者按下了那個鍵
<script> let str = 'andy' console.log(str.charCodeAt(0)); </script>
方法三 str[index] H5新增的
<script> let str = 'andy' console.log(str[0]); </script>
案例：返回字串位置
<script> let str = "abcoefoxyozzopp"; let a = {}; for (let i = 0; i < str.length; i++) { let chars = str.charAt(i) if (a[chars]) { a[chars]++; } else { a[chars] = 1; } } console.log(a); let max = 0; let ch = ''; for (let k in a) { if (a[k] > max) { max = a[k] ch = k } } console.log(max); console.log('最多字元的是' + ch); </script>
5.5字串操作方法
方法1：concat
<script>
// 1.concat('字串1','字串2'······)
let str = 'andy'
console.log(str.concat('red'));
</script>
方法2：substr
<script>
// 2. substr('擷取的起始位置','擷取幾個字元')
let str1 = '改革春風吹滿地'
console.log(str1.substr(2, 2)); // 第一個2是索引號2，第二個2是擷取長度的2
</script>
方法3 replace
1 <script> 2 // 3.替換字元 replace('被替換的字元','替換為的字元') 他只會替換第一個字元 3 let str = 'andy' 4 console.log(str.replace('a', 'b')); 5 </script>
方法4 split
<script>
// 2. 字串轉換為陣列 split('分割字元')
let str = 'red, pink, blue';
console.log(str.split(','));
</script>
擴充套件方法
toUpperCase() 轉換大寫
toLowerCase() 轉換小寫