Web前端學習筆記——JavaScript之物件
阿新 • • 發佈：2018-12-11
物件
為什麼要有物件
function printPerson(name, age, sex....) {
}
// 函式的引數如果特別多的話，可以使用物件簡化
function printPerson(person) {
console.log(person.name);
……
}
什麼是物件
現實生活中：萬物皆物件，物件是一個具體的事物，一個具體的事物就會有行為和特徵。
舉例： 一部車，一個手機
車是一類事物，門口停的那輛車才是物件
特徵：紅色、四個輪子
行為：駕駛、剎車
JavaScript中的物件
JavaScript中的物件其實就是生活中物件的一個抽象 JavaScript的物件是無序屬性的集合。 其屬性可以包含基本值、物件或函式。物件就是一組沒有順序的值。我們可以把JavaScript中的物件想象成鍵值對，其中值可以是資料和函式。 物件的行為和特徵 特徵---屬性 行為---方法
- 事物的特徵在物件中用屬性來表示。
- 事物的行為在物件中用方法來表示。
物件字面量
字面量：11 ‘abc’ true [] {}等
var o = {
name: 'zs,
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
思考：
如何把學生物件、老師物件、英雄物件改寫成字面量的方式
物件建立方式
- 物件字面量
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console. - new Object()建立物件
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
console.log('Hello,everyBody');
}
- 工廠函式建立物件
function createPerson(name, age, job) {
var person = new Object();
person.name = - 自定義建構函式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('張三', 22, 'actor');
屬性和方法
如果一個變數屬於一個物件所有，那麼該變數就可以稱之為該物件的一個屬性，屬性一般是名詞，用來描述事物的特徵
如果一個函式屬於一個物件所有，那麼該函式就可以稱之為該物件的一個方法，方法是動詞，描述事物的行為和功能
new關鍵字
建構函式 ，是一種特殊的函式。主要用來在建立物件時初始化物件， 即為物件成員變數賦初始值，總與new運算子一起使用在建立物件的語句中。
- 建構函式用於建立一類物件，首字母要大寫。
- 建構函式要和new一起使用才有意義。
new在執行時會做四件事情
new會在記憶體中建立一個新的空物件
new 會讓this指向這個新的物件
執行建構函式 目的：給這個新物件加屬性和方法
new會返回這個新物件
this詳解
JavaScript中的this指向問題，有時候會讓人難以捉摸，隨著學習的深入，我們可以逐漸瞭解
現在我們需要掌握函式內部的this幾個特點
1. 函式在定義的時候this是不確定的，只有在呼叫的時候才可以確定
2. 一般函式直接執行，內部this指向全域性window
3. 函式作為一個物件的方法，被該物件所呼叫，那麼this指向的是該物件
4. 建構函式中的this其實是一個隱式物件，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式物件身上，後續通過new關鍵字來呼叫，從而實現例項化
物件的使用
遍歷物件的屬性
通過for…in語法可以遍歷一個物件
var obj = {};
for (var i = 0; i < 10; i++) {
obj[i] = i * 2;
}
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
刪除物件的屬性
function fun() {
this.name = 'mm';
}
var obj = new fun();
console.log(obj.name); // mm
delete obj.name;
console.log(obj.name); // undefined
簡單型別和複雜型別的區別
基本型別又叫做值型別，複雜型別又叫做引用型別
值型別：簡單資料型別，基本資料型別，在儲存時，變數中儲存的是值本身，因此叫做值型別。
引用型別：複雜資料型別，在儲存是，變數中儲存的僅僅是地址（引用），因此叫做引用資料型別。
-
堆和棧
堆疊空間分配區別： 1、棧（作業系統）：由作業系統自動分配釋放 ，存放函式的引數值，區域性變數的值等。其操作方式類似於資料結構中的棧； 2、堆（作業系統）： 儲存複雜型別(物件)，一般由程式設計師分配釋放， 若程式設計師不釋放，由垃圾回收機制回收，分配方式倒是類似於連結串列。 -
注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以後的學習。
基本型別在記憶體中的儲存
複雜型別在記憶體中的儲存
基本型別作為函式的引數
複雜型別作為函式的引數
// 下面程式碼輸出的結果
function Person(name,age,salary) {
this.name = name;
this.age = age;
this.salary = salary;
}
function f1(person) {
person.name = "ls";
person = new Person("aa",18,10);
}
var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);
思考：
//1.
var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);
console.log(num2);
//2.
var num = 50;
function f1(num) {
num = 60;
console.log(num);
}
f1(num);
console.log(num);
//3.
var num1 = 55;
var num2 = 66;
function f1(num, num1) {
num = 100;
num1 = 100;
num2 = 100;
console.log(num);
console.log(num1);
console.log(num2);
}
f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);
內建物件
JavaScript中的物件分為3種：內建物件、瀏覽器物件、自定義物件
JavaScript 提供多個內建物件：Math/Array/Number/String/Boolean…
物件只是帶有屬性和方法的特殊資料型別。
學習一個內建物件的使用，只要學會其常用的成員的使用（通過查文件學習）
可以通過MDN/W3C來查詢
內建物件的方法很多，我們只需要知道內建物件提供的常用方法，使用的時候查詢文件。
MDN
Mozilla 開發者網路（MDN）提供有關開放網路技術（Open Web）的資訊，包括 HTML、CSS 和全球資訊網及 HTML5 應用的 API。
- MDN
- 通過查詢MDN學習Math物件的random()方法的使用
如何學習一個方法？
- 方法的功能
- 引數的意義和型別
- 返回值意義和型別
- demo進行測試
Math物件
Math物件不是建構函式，它具有數學常數和函式的屬性和方法，都是以靜態成員的方式提供
跟數學相關的運算來找Math中的成員（求絕對值，取整）
演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()
Math.PI // 圓周率
Math.random() // 生成隨機數
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round() // 取整，四捨五入
Math.abs() // 絕對值
Math.max()/Math.min() // 求最大和最小值
Math.sin()/Math.cos() // 正弦/餘弦
Math.power()/Math.sqrt() // 求指數次冪/求平方根
Date物件
建立 Date 例項用來處理日期和時間。Date 物件基於1970年1月1日（世界標準時間）起的毫秒數。
// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf()); // 獲取距1970年1月1日（世界標準時間）起的毫秒數
Date建構函式的引數
1. 毫秒數 1498099000356 new Date(1498099000356)
2. 日期格式字串 '2015-5-1' new Date('2015-5-1')
3. 年、月、日…… new Date(2015, 4, 1) // 月份從0開始
- 獲取日期的毫秒形式
var now = new Date();
// valueOf用於獲取物件的原始值
console.log(date.valueOf())
// HTML5中提供的方法，有相容性問題
var now = Date.now();
// 不支援HTML5的瀏覽器，可以用下面這種方式
var now = + new Date(); // 呼叫 Date物件的valueOf()
- 日期格式化方法
toString() // 轉換成字串
valueOf() // 獲取毫秒值
// 下面格式化日期的方法，在不同瀏覽器可能表現不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
- 獲取日期指定部分
getTime() // 返回毫秒數和valueOf()結果一樣，valueOf()內部呼叫的getTime()
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期幾 0週日 6周6
getDate() // 返回當前月的第幾天
getMonth() // 返回月份，***從0開始***
getFullYear() //返回4位的年份 如 2016
案例
- 寫一個函式，格式化日期物件，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {
//如果date不是日期物件，返回
if (!date instanceof Date) {
return;
}
var year = d.getFullYear(),
month = d.getMonth() + 1,
date = d.getDate(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds();
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute:minute;
second = second < 10 ? '0' + second:second;
return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
- 計算時間差，返回相差的天/時/分/秒
function getInterval(start, end) {
var day, hour, minute, second, interval;
interval = end - start;
interval /= 1000;
day = Math.round(interval / 60 /60 / 24);
hour = Math.round(interval / 60 /60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
Array物件
- 建立陣列物件的兩種方式
- 字面量方式
- new Array()
// 1. 使用建構函式建立陣列物件
// 建立了一個空陣列
var arr = new Array();
// 建立了一個數組，裡面存放了3個字串
var arr = new Array('zs', 'ls', 'ww');
// 建立了一個數組，裡面存放了4個數字
var arr = new Array(1, 2, 3, 4);
// 2. 使用字面量建立陣列物件
var arr = [1, 2, 3];
// 獲取陣列中元素的個數
console.log(arr.length);
-
檢測一個物件是否是陣列
- instanceof
- Array.isArray() HTML5中提供的方法，有相容性問題
函式的引數，如果要求是一個數組的話，可以用這種方式來進行判斷
-
toString()/valueOf()
- toString() 把陣列轉換成字串，逗號分隔每一項
- valueOf() 返回陣列物件本身
-
陣列常用方法
演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()
// 1 棧操作(先進後出)
push()
pop() //取出陣列中的最後一項，修改length屬性
// 2 佇列操作(先進先出)
push()
shift() //取出陣列中的第一個元素，修改length屬性
unshift() //在陣列最前面插入項，返回陣列的長度
// 3 排序方法
reverse() //翻轉陣列
sort(); //即使是陣列sort也是根據字元，從小到大排序
// 帶引數的sort是如何實現的？
// 4 操作方法
concat() //把引數拼接到當前陣列
slice() //從當前陣列中擷取一個新的陣列，不影響原來的陣列，引數start從0開始,end從1開始
splice() //刪除或替換當前陣列的某些專案，引數start, deleteCount, options(要替換的專案)
// 5 位置方法
indexOf()、lastIndexOf() //如果沒找到返回-1
// 6 迭代方法 不會修改原陣列(可選)
every()、filter()、forEach()、map()、some()
// 7 方法將陣列的所有元素連線到一個字串中。
join()
- 清空陣列
// 方式1 推薦
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);
案例
- 將一個字串陣列輸出為|分割的形式，比如“劉備|張飛|關羽”。使用兩種方式實現
function myJoin(array, seperator) {
seperator = seperator || ',';
array = array || [];
if (array.length == 0){
return '';
}
var str = array[0];
for (var i = 1; i < array.length; i++) {
str += seperator + array[i];
}
return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));
console.log(array.join('-'))
- 將一個字串陣列的元素的順序進行反轉。[“a”, “b”, “c”, “d”] -> [ “d”,“c”,“b”,“a”]。使用兩種種方式實現。提示：第i個和第length-i-1個進行交換
function myReverse(arr) {
if (!arr || arr.length == 0) {
return [];
}
for (var i = 0; i < arr.length / 2; i++) {
var tmp = arr[i];
arr[i] = arr[this.length - i - 1];
arr[arr.length - i - 1] = tmp;
}
return arr;
}
var array = ['a', 'b', 'c'];
console.log(myReverse(array));
console.log(array.reverse());
- 工資的陣列[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除
// 方式1
var array = [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
if(array[i] < 2000) {
tmpArray.push(array[i]);
}
}
console.log(tmpArray);
// 方式2
var array = [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
if (item < 2000) {
return true;
}
return false;
});
console.log(array)