JavaScript學習筆記【DAY4(2020.8.20)週四】
陣列(重要)
變數是裝載一個資料的容器
陣列是裝載一組資料的容器
陣列的定義
定義分兩種方式：字面量 和 建構函式
1.字面量 var arr = [];
2.建構函式 var arr = new Array();
var arr = Array();
傳參規則:
當沒有引數時， 定義的是一個空陣列
當引數只有一個並且是數字時，該數字表示陣列的長度
當引數有多個時，引數就是每一個成員
陣列的使用
儲存資料:資料是以一定的順序儲存在內部 每一個數據都有一個序號 這個序號叫做下標 或者 索引
var arr = [];
arr[0] = 10; // 將數字10 儲存在陣列的下標0位置
訪問資料
arr[0]; // 10
arr[1]; // undefined
當該程式碼單獨出現，就表示要使用資料。就會去讀取對應的資料。如果資料存在，就得到. 如果不存在就讀取不到，返回undefined。
陣列屬性
length 陣列是一組資料，length屬性表示這個陣列中的內容的個數。也就是陣列的長度
length可讀可寫
當設定它的時候，表示要修改該陣列的長度。陣列的長度會發生變化。
當讀取時，會實時返回陣列的當時的長度。
var arr = [1, 2, 3, 4];
console.log(arr.length); // 4
arr.length = 1; // 修改陣列的長度
console.log(arr); // 輸出 [1]
console.log(arr.length); // 1
迴圈陣列(遍歷陣列)
當我們需要對陣列中的每一個成員都執行同樣的程式碼時，一個一個的獲取並操作，略顯繁瑣。所以，應當使用迴圈。
for 迴圈
// 定義陣列
var arr = [1, 2, , , , 6, , , , 10];
// 迴圈陣列
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]); // 輸出 1 2 u u u u 6 u u u 10
}
for in迴圈
// 定義陣列
var arr = [1, 2, , , , 6, , , , 10];
// 迴圈陣列
for (var i in arr) {
console.log(arr[i]);
}
// 輸出 1 2 6 10 不會輸出undefined
陣列的方法
push(item) 該方法用於向陣列的末尾增加一項
item 引數是陣列的新成員
返回值是陣列的長度
var arr = [1, 2, 3];
arr.push(123);
// arr => [1, 2, 3, 123]
pop() 該方法用於從陣列的末尾移除一項
返回值是被移除的成員
var arr = [1, 2, 3, 4];
var item = arr.pop();
// item => 4
// arr => [1, 2, 3]
unshift(item) 該方法用於往陣列的頭部增加一項
item 引數是陣列的新成員
返回值是陣列的長度
var arr = [1, 2, 3, 4];
arr.unshift(0);
// arr => [0, 1, 2, 3, 4]
shift() 該方法用於從陣列的頭部移除一項
返回值是被移除的成員
var arr = [1, 2, 3, 4];
var item = arr.shift();
// item => 1
// arr => [2, 3, 4]
concat(arg1, arg2, arg3, ...) 拼接
引數個數不定 如果引數中有陣列 會把陣列拆開
返回值是新陣列
不會改變原陣列
var arr = [1, 2];
var arr1 = arr.concat(3, 4, 5, [6, 7, 8]);
// arr1 => [1, 2, 3, 4, 5, 6, 7, 8]
reverse() 將陣列中的每一個成員逆序
返回值是原陣列
會把原陣列改變
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.reverse();
// arr1 => [6, 5, 4, 3, 2, 1]
// arr => [6, 5, 4, 3, 2, 1]
sort 排序方法 通常用於數字 引數是函式 函式中有a b
如果返回a -b 升序排列
如果返回 b - a 降序排列
如果不傳遞函式 則按照首位數字進行排序
var arr = [10, 23, 44, 6, 88, 22];
// 升序
var arr1 = arr.sort(function(a, b) {
return a - b;
});
// arr => [6, 10, 22, 23, 44, 88]
// arr1 = > [6, 10, 22, 23, 44, 88]
// 降序
var arr2 = arr.sort(function(a, b) {
return b - a;
});
// arr => [88, 44, 23, 22, 10, 6]
slice 用於擷取陣列中的一段
第一個引數是開始擷取的位置
第二個引數是結束擷取的位置(不包含該位置的成員)
如果引數是負數 則從後往前數
如果不傳遞第二個引數 則從第一個引數擷取到最後
如果沒有引數 就擷取全部
var arr = [11, 22, 33, 44];
// 兩個引數
var arr1 = arr.slice(0, 3);
// arr1 => [11, 22, 33]
// 一個引數
var arr2 = arr.slice(2);
// arr2 => [33, 44]
// 引數是負數
var arr3 = arr.slice(-1);
// arr3 => [44]
// 沒有引數
var arr4 = arr.slice();
// arr4 => [11, 22, 33, 44]
splice 用於陣列的增、刪、改
第一個引數表示開始操作的位置
第二個引數表示刪除的個數
之後的每一個引數都表示陣列的新成員(如果是陣列 不拆)
如果沒有第二個引數 則預設從第一個引數擷取到末尾
返回值是被刪除的元素組成的陣列
// 增
var arr = [1, 5];
var arr1 = arr.splice(1, 0, 2, 3, 4);
// arr => [1, 2, 3, 4, 5]
// arr1 => []
// 刪
var arr = [1, 2, 3, 4, 5];
var arr1 = arr.splice(1, 3);
// arr => [1, 5]
// arr1 => [2, 3, 4]
join 用於將陣列轉為字串
引數是拼接符號 預設為逗號 ,
返回值是拼接完畢的字串
var arr = ["a", "b", "c", "d"];
var str = arr.join();
// str => "a,b,c,d"
var str1 = arr.join("&");
// str1 => a&b&c&d
indexOf 用於搜尋陣列中的成員所在位置
引數是成員
返回值是下標位置
如果找得到就是下標位置
如果找不到就是 -1
var arr = ["a", "b", "c"];
var idx = arr.indexOf("a");
// idx => 0
ES5的陣列方法
(1)forEach :ES5中的迭代陣列的方式 叫做迭代器方法 迴圈方法
forEach 接受一個函式作為引數 函式有三個引數
第一個表示陣列的成員
第二個表示陣列的索引
第三個表示陣列本身
// 定義一個數組
var arr = ["張三", , , , null, "李四", "王五", "趙六"];
// for 迴圈
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log(i);
// for in 迴圈
// for in 迴圈 只會迴圈陣列中的非empty內容
for (var i in arr) {
console.log(arr[i]);
}
// forEach
arr.forEach(function(value, index, selfArr) {
console.log(value, index, selfArr, this);
})
(2)map:對映方法 會根據原陣列生成一個新陣列 新陣列的每一個成員是map接受的函式的返回值 該函式會多次呼叫 用於迴圈陣列，主要目的是根據老陣列 生成新陣列
var arr = [100, 200, 300, 400];
var arr1 = arr.map(function(value, index, selfArr) {
return value * 1.3;
});
console.log(arr1); // [130, 260, 390, 520]
(3)filter:過濾方法 會根據引數將符合一定條件的成員過濾出來
返回的是新陣列 原陣列不變
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr1 = arr.filter(function(value, index, selfArr) {
return value < 8;
});
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]
(4)some:判定方法 判定陣列中是否有符合某種條件的成員 如果有就是true 如果沒有就是false
var arr = [1, 2, 3, 4, 5];
var result = arr.some(function(value, index, selfArr) {
// 判定是否有字串
return typeof value === "string";
});
console.log(result); // false
(5)every:判定方法 判定陣列中是否都符合某一個條件 如果都符合 就是true 如果有任何一個不符合 就是false
var arr = [1, 2, "3", 4, 5];
var result = arr.every(function(value, index, selfArr) {
// 判定是否都是number型別
return typeof value === "number";
});
console.log(result); // false
(6)fill:填充方法 用於將陣列的指定成員統一填充為新值
var arr = [];
(7)indexOf:查詢方法 用於查詢陣列中是否存在某一個值 如果存在 就返回該值所在的下標 如果不存在 就返回-1
var arr = ["a", "b", "c"];
arr.indexOf("a");
(8)reduce:
(9)trim方法去除字串兩端的空格
var str = ' hello '
console.log(str.trim()） //hello 去除兩端空格
var str1 = ' he l l o '
console.log(str.trim()） //he l l o 去除兩端空格
(10)獲取物件的屬性名
Object.keys(物件) 獲取到當前物件中的屬性名 ，返回值是一個數組
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]
(11)Object.defineProperty
Object.defineProperty設定或修改物件中的屬性
Object.defineProperty(物件，修改或新增的屬性名，{
value:修改或新增的屬性的值,
writable:true/false,//如果值為false 不允許修改這個屬性值
enumerable: false,//enumerable 如果值為false 則不允許遍歷
configurable: false //configurable 如果為false 則不允許刪除這個屬性 屬性是否可以被刪除或是否可以再次修改特性
})
檢測是否為陣列
1、nstanceof 運算子 可以判斷一個物件是否是某個建構函式的例項
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
2、Array.isArray() 用於判斷一個物件是否為陣列，isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
二維陣列(瞭解)
一維陣列中的每一位都是陣列 這樣的陣列叫做二維陣列
// 二維陣列
var arr = [
[],
[],
[],
...
];
! 選擇排序
物件: 在 JavaScript 中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件
物件與陣列類似，都是用來裝載大量的資料。
物件允許使用 key: value作為一組 鍵值對, 簡稱 kv對
k表示物件的屬性名, 最好符合變數的命名規範
v表示物件的屬性值, 是具體的資料,可以是任何型別的資料
物件可以由多個kv對組成, 每一個kv對之間使用逗號,隔開
最後一個kv對後的逗號可選(推薦不加)
物件是由屬性和方法組成的:
屬性：事物的特徵，在物件中用屬性來表示（常用名詞）
方法：事物的行為，在物件中用方法來表示（常用動詞）
定義物件:
與陣列類似，物件的定義也有兩種方式: 字面量 和 建構函式
1.字面量 (推薦方式)
var obj = {}; // 字面量定義物件
// 定義物件並設定屬性
var obj1 = {
name: "張三"
};
2.建構函式
呼叫格式↓
// 帶new的建構函式
var obj = new Object();
// 不帶new的建構函式
var obj = Object();
封裝格式↓
function 建構函式名(形參1,形參2,形參3) {
this.屬性名1 = 引數1;
this.屬性名2 = 引數2;
this.屬性名3 = 引數3;
this.方法名 = 函式體;
}
物件的屬性操作:
讀取屬性
點語法
var obj = {
name: "張三"
}
console.log(obj.name); // 張三
方括號語法
var obj = {
name: "張三"
}
console.log(obj["name"]); // 張三
設定屬性
點語法
var obj = {
name: "張三"
}
obj.age = 12;
console.log(obj); // {name: "張三", age: 12}
方括號語法
var obj = {
name: "張三"
}
obj["age"] = 13;
console.log(obj); // {name: "張三", age: 13}
刪除屬性:delete該關鍵字只能用來刪除物件的屬性 而不可以用來刪除變數
var obj = {
name: "張三"
}
delete obj["name"];
console.log(obj); // {}
物件的迴圈遍歷
for (var i in obj) {}
var obj = {
name: "小明",
age: 13,
sex: "男",
married: false
}
// 使用for in 迴圈遍歷物件
for (var i in obj) {
// i 是物件的屬性名
// obj[i] 是物件的屬性值
}
注: obj.i 這種方式，是在讀取 obj的 i 這個屬性 而不是讀取i變數所儲存的值屬性
方括號語法與點語法的區別
方括號語法:
[] 之間是一個JS的執行環境，可以使用變數，表示式
[] 最終需要的是一個字串，如果不是字串，會轉為字串（呼叫toString方法）
[] 只要內容是字串，不論是否符合變數命名規範，都可以成功
點語法:
點什麼，就是什麼
必須符合變數的命名規範
var a = "name";
var obj = {
name: "張三",
a: 123
}
// 點語法:
console.log(obj.name); // "張三"
console.log(obj.a); // 123
// 方括號語法:
console.log(obj[a]); // "張三"
console.log(obj["a"]); // 123
JavaScript 中的物件分為3種：自定義物件 、內建物件、 瀏覽器物件
前面兩種物件是JS 基礎 內容，屬於 ECMAScript； 第三個瀏覽器物件屬於 JS 獨有的， JS API 講解內建物件就是指 JS 語言自帶的一些物件，這些物件供開發者使用，並提供了一些常用的或是**最基本而必要的功能**（屬性和方法），內建物件最大的優點就是幫助我們快速開發
氣泡排序
vararr=[4,1,2,3,5];
for(vari=0;i<=arr.length-1;i++){//外層迴圈管趟數
for(varj=0;j<=arr.length-i-1;j++){//裡面的迴圈管每一趟的交換次數
//內部交換2個變數的值前一個和後面一個數組元素相比較
if(arr[j]<arr[j+1]){
vartemp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);
Math物件:JS中有許多的內建物件。其中，Math物件封裝了許多常用的數學函式。
Math 物件不是建構函式，它具有數學常數和函式的屬性和方法。跟數學相關的運算（求絕對值，取整、最大值等）可以使用 Math 中的成員。
Math.random該方法用於生成一個隨機數0~1 包含0 不包含1
// 獲取一個從0到9的隨機整數數字
var r = Math.random();
var num = parseInt(Math.random() * 10);
console.log(num);
Math.abs 該方法用於獲取一個數的絕對值
// 定義一個負數
var num = -10;
// 獲取它的絕對值
var abs = Math.abs(num);
// 輸出
console.log(abs); // 10
Math.ceil 向上取整
var num = 1.1;
var result = Math.ceil(num);
console.log(result); // 2
Math.floor 向下取整
var num = 1.1;
var result = Math.floor(num);
console.log(result); // 1
Math.round 四捨五入
var num = 1.4;
var num1 = 1.5;
console.log(Math.round(num)); // 1
console.log(Math.round(num1)); // 2
Math.pow 用於求一個數的幾次方 第一個引數是底數 第二個引數是指數
var num = Math.pow(2, 8);
console.log(num); // 256
Math.max 求所有引數中的最大值
var max = Math.max(1, 2, 56, 78, 99, 0, 46, 23);
console.log(max); // 99
Math.min 求min引數中的最小值
var min = Math.min(1, 2, 56, 78, 99, 0, 46, 23);
console.log(min); // 1
額外說明: ...語法是ES6中的語法 可以將陣列的每一個成員拆解成引數傳遞給函式
額外說明: apply方法是所有函式都有的方法 作用是改變函式中的this指向並以陣列的形式傳遞引數
Date物件:負責日期方面的內容。(其實是建構函式)
注意: 以後 只要出現new關鍵字 它就是引用型別
初始化日期
不傳遞引數
var date = new Date(); // 當直接通過new呼叫Date時 並且不傳遞引數時 得到的時當前的系統時間
console.log(date); // 當前時間 Tue Aug 27 2019 16: 43: 49 GMT+0800 (中國標準時間)
傳遞一個引數:Date可以接受一個字串作為引數 要求是符合系統時間的字串
var date = new Date("2019-10-10 19: 00: 00")
傳遞兩個引數:Date可以接受引數 接受兩個引數 第一個表示年份 第二個表示月份（0表示1月） 0 ~ 11
var date = new Date(2019, 2);
傳遞三個引數:前兩個同上 第三個表示天數 這個不是從0開始 寫幾就是幾號 1 ~ 31
var date = new Date(2019, 1, 20);
傳遞四個引數:前三個同上 第四個表示小時 值0 ~ 23
var date = new Date(2019, 1, 20, 1);
傳遞五個引數:前四個同上 第五個表示分鐘 0 ~ 59
var date = new Date(2019, 1, 20, 1, 5);
傳遞六個引數:前五個同上 第六個表示秒 0 ~ 59
var date = new Date(2019, 1, 20, 1, 5, 45);
獲取日期部分內容
獲取年 getFullYear()
獲取月 getMonth()
獲取天數 getDate()
獲取小時 getHours()
獲取分鐘 getMinutes()
獲取秒數 getSeconds()
獲取毫秒值getMillionseconds()
獲取星期幾getDay()
注: 0 是星期天 週一到週六 1 ~ 6
獲取從1970年1月1日0點0分0秒至日期的毫秒值 getMillions()
設定日期
設定年 setFullYear()
設定月 setMonth()
設定天 setDate()
設定小時 setHours()
設定分鐘 setMinutes()
設定秒數 setSeconds()