天天看點
傳回

JavaScript基礎知識⑥(對象，内置對象)

文章目錄

  • ​​JavaScript 對象​​
  • ​​對象​​
  • ​​什麼是對象？​​
  • ​​為什麼需要對象​​
  • ​​建立對象的三種方式​​
  • ​​利用字面量建立對象​​
  • ​​利用new Object建立對象​​
  • ​​利用構造函數建立對象​​
  • ​​構造函數和對象​​
  • ​​new關鍵字​​
  • ​​周遊對象屬性​​
  • ​​JavaScript 内置對象​​
  • ​​内置對象​​
  • ​​Math 對象​​
  • ​​Math 概述​​
  • ​​随機數方法 random()​​
  • ​​日期對象​​
  • ​​Date 概述​​
  • ​​Date()方法的使用​​
  • ​​日期格式化​​
  • ​​擷取日期的總的毫秒形式​​
  • ​​數組對象​​
  • ​​數組對象的建立​​
  • ​​檢測是否為數組​​
  • ​​添加删除數組元素的方法​​
  • ​​數組排序​​
  • ​​數組索引方法​​
  • ​​數組轉換為字元串​​
  • ​​其他常用​​
  • ​​字元串對象​​
  • ​​基本包裝類型​​
  • ​​字元串的不可變​​
  • ​​根據字元傳回位置​​
  • ​​根據位置傳回字元​​
  • ​​字元串操作方法​​
  • ​​replace()方法​​
  • ​​split()方法​​

JavaScript 對象

對象

什麼是對象？

現實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得着的實物。例如，一本書、一輛汽車、一個人可以是“對象”，一個資料庫、一張網頁、一個與遠端伺服器的連接配接也可以是“對象”。

在 JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字元串、數值、數組、函數等。

對象是由屬性和方法組成的。

  • 屬性：事物的特征，在對象中用屬性來表示（常用名詞）
  • 方法：事物的行為，在對象中用方法來表示（常用動詞）
JavaScript基礎知識⑥(對象，内置對象)

為什麼需要對象

儲存一個值時，可以使用變量，儲存多個值（一組值）時，可以使用數組。如果要儲存一個人的完整資訊呢？

例如，将“張三瘋”的個人的資訊儲存在數組中的方式為：

var arr = [‘張三瘋’, ‘男', 128,154];

JS 中的對象表達結構更清晰，更強大。張三瘋的個人資訊在對象中的表達結構如下：

JavaScript基礎知識⑥(對象，内置對象)

建立對象的三種方式

在 JavaScript 中，現階段我們可以采用三種方式建立對象（object）：

  • 利用字面量建立對象
  • 利用 new Object 建立對象
  • 利用構造函數建立對象

利用字面量建立對象

​

​對象字面量​

​​：就是花括号 { } 裡面包含了表達這個具體事物（對象）的屬性和方法。

{ } 裡面采取鍵值對的形式表示

  • 鍵：相當于屬性名
  • 值：相當于屬性值，可以是任意類型的值（數字類型、字元串類型、布爾類型，函數類型等）

例如：

var star = {
 name : 'pink',
 age : 18,
 sex : '男',
 sayHi : function(){
 alert('大家好啊~');
 }
};

對象的調用

  1. 對象裡面的屬性調用 : 對象.屬性名 ，這個小點 . 就了解為“ 的 ”
  2. 對象裡面屬性的另一種調用方式 : 對象[‘屬性名’]，注意方括号裡面的屬性必須加引号，我們後面會用
  3. 對象裡面的方法調用：對象.方法名() ，注意這個方法名字後面一定加括号

例如：

console.log(star.name) // 調用名字屬性
console.log(star['name']) // 調用名字屬性
star.sayHi(); // 調用 sayHi 方法,注意，一定不要忘記帶後面的括号

利用new Object建立對象

例如：

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
 alert('大家好啊~');
}

注意：

  • Object() ：第一個字母大寫
  • new Object() ：需要 new 關鍵字
  • 追加屬性的格式：對象.屬性 = 值；

利用構造函數建立對象

構造函數 ：是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與 new 運算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然後封裝到這個函數裡面。

在 js 中，使用構造函數要時要注意以下兩點：

  • 構造函數用于建立某一類對象，其首字母要大寫
  • 構造函數要和 new 一起使用才有意義
  • 函數内的屬性和方法前面需要添加 this ，表示目前對象的屬性和方法
  • 構造函數中不需要 return 傳回結果

例如：

function Person(name, age,) {
 this.name = name;
 this.age = age;
 this.sex = sex;
 this.sayHi = function() {
 alert('我的名字叫：' + this.name + '，年齡：' + this.age + '，性别：' + this.sex);
 }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

構造函數和對象

構造函數，如 Stars()，抽象了對象的公共部分，封裝到了函數裡面，它泛指某一大類（class）

建立對象，如 new Stars()，特指某一個，通過 new 關鍵字建立對象的過程我們也稱為對象執行個體化

JavaScript基礎知識⑥(對象，内置對象)

new關鍵字

new 在執行時會做四件事情：

  1. 在記憶體中建立一個新的空對象。
  2. 讓 this 指向這個新的對象。
  3. 執行構造函數裡面的代碼，給這個新對象添加屬性和方法。
  4. 傳回這個新對象（是以構造函數裡面不需要return）。

周遊對象屬性

​

​for...in​

​​ 語句用于對數組或者對象的屬性進行循環操作。

其文法如下：

for (變量 in 對象名字) {
 // 在此執行代碼
}

文法中的變量是自定義的，它需要符合命名規範，通常我們會将這個變量寫為 k 或者 key。

for (var k in obj) {
 console.log(k); // 這裡的 k 是屬性名
 console.log(obj[k]); // 這裡的 obj[k] 是屬性值
}

JavaScript 内置對象

内置對象

JavaScript 中的對象分為3種：​

​自定義對象​

​​ 、​

​内置對象​

​​、 ​

​浏覽器對象​

​​ 前面兩種對象是JS 基礎 内容，屬于 ECMAScript； 第三個浏覽器對象屬于我們JS 獨有的

内置對象就是指 JS 語言自帶的一些對象，這些對象供開發者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）。其最大的優點就是幫助我們快速開發

JavaScript 提供了多個内置對象：Math、 Date 、Array、String等

Math 對象

Math 概述

Math 對象不是構造函數，它具有數學常數和函數的屬性和方法。跟數學相關的運算（求絕對值，取整、最大值等）可以使用 Math 中的成員。

Math.PI // 圓周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 結果是 -3 
Math.abs() // 絕對值
Math.max()/Math.min() // 求最大和最小值

随機數方法 random()

random() 方法可以随機傳回一個小數，其取值範圍是 [0，1)，左閉右開 0 <= x < 1

得到一個兩數之間的随機整數，包括兩個數在内：

function getRandom(min,) {
 return Math.floor(Math.random() * (max - min + 1)) + min; 
}

日期對象

Date 概述

Date 對象和 Math 對象不一樣，他是一個構造函數，是以我們需要執行個體化後才能使用

Date 執行個體用來處理日期和時間

Date()方法的使用

①擷取目前時間必須執行個體化

var now = new Date();
console.log(now);

②Date() 構造函數的參數

如果括号裡面有時間，就傳回參數裡面的時間。例如日期格式字元串為‘2019-5-1’，可以寫成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)

注意：

  • 如果Date()不寫參數，就傳回目前時間
  • 如果Date()裡面寫參數，就傳回括号裡面輸入的時間

日期格式化

我們想要 2019-8-8 8:8:8 格式的日期，要怎麼辦？

需要擷取日期指定的部分，是以我們要手動的得到這種格式。

JavaScript基礎知識⑥(對象，内置對象)

如果想要達到機關用0填補到雙位的效果，可以使用Date類的内置方法，也可以使用三元表達式。例如

var minute = xx.getMinutes<10? ‘0’ + xx.getMinutes : xx.getMinutes

擷取日期的總的毫秒形式

Date 對象是基于1970年1月1日（世界标準時間）起的毫秒數

我們經常利用總的毫秒數來計算時間，因為它更精确

// 執行個體化Date對象
var now = new Date();
// 1. 用于擷取對象的原始值
console.log(now.valueOf())
console.log(now.getTime())
// 2. 簡單寫可以這麼做
var now = + new Date();
// 3. HTML5中提供的方法，有相容性問題
var now = Date.now();

應用：制作倒計時

① 核心算法：輸入的時間減去現在的時間就是剩餘的時間，即倒計時 ，但是不能拿着時分秒相減，比如 05 分減去25分，結果會是負數的。

② 用時間戳來做。使用者輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩餘時間的毫秒數。

③ 把剩餘時間總的毫秒數轉換為天、時、分、秒 （時間戳轉換為時分秒）

轉換公式如下：

  • d = parseInt(總秒數/ 60/60 /24); // 計算天數
  • h = parseInt(總秒數/ 60/60 %24) // 計算小時
  • m = parseInt(總秒數 /60 %60 ); // 計算分數
  • s = parseInt(總秒數%60); // 計算目前秒數
注意：兩者相減得到毫秒數之後，要除以1000才是秒數

數組對象

數組對象的建立

建立數組對象的兩種方式

  1. 字面量方式
  2. new Array()

檢測是否為數組

​

​instanceof​

​​ 運算符，可以判斷一個對象是否屬于某種類型

​​

​Array.isArray()​

​​用于判斷一個對象是否為數組，​

​isArray()​

​ 是 HTML5 中提供的方法

例如：

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

添加删除數組元素的方法

JavaScript基礎知識⑥(對象，内置對象)

數組排序

JavaScript基礎知識⑥(對象，内置對象)

例如:

var arr = [1, 64, 9, 6];
arr.sort(function(a,) {
 return b - a; // 降a序
 // return a - b; // 升序
});
console.log(arr);

數組索引方法

JavaScript基礎知識⑥(對象，内置對象)

數組轉換為字元串

JavaScript基礎知識⑥(對象，内置對象)
join()就是用指定的分隔符對數組進行分割，再轉化為字元串。

其他常用

JavaScript基礎知識⑥(對象，内置對象)

字元串對象

基本包裝類型

為了友善操作基本資料類型，JavaScript 還提供了三個特殊的引用類型：String、Number和 Boolean。

基本包裝類型就是把簡單資料類型包裝成為複雜資料類型，這樣基本資料類型就有了屬性和方法。

// 下面代碼有什麼問題？
var str = 'andy';
console.log(str.length);

按道理基本資料類型是沒有屬性和方法的，而對象才有屬性和方法，但上面代碼卻可以執行，這是因為 js 會把基本資料類型包裝為複雜資料類型(自動裝箱)，其執行過程如下 ：

// 1. 生成臨時變量，把簡單類型包裝為複雜資料類型
var temp = new String('andy');
// 2. 指派給我們聲明的字元變量
str = temp;
// 3. 銷毀臨時變量
temp = null

字元串的不可變

指的是裡面的值不可變，雖然看上去可以改變内容，但其實是位址變了，記憶體中新開辟了一個記憶體空間。

var str = 'abc';
str = 'hello';
// 當重新給 str 指派的時候，常量'abc'不會被修改，依然在記憶體中
// 重新給字元串指派，會重新在記憶體中開辟空間，這個特點就是字元串的不可變
// 由于字元串的不可變，在大量拼接字元串的時候會有效率問題
var str = '';
for (var i = 0; i < 100000; i++) {
 str += i;
}
console.log(str); // 這個結果需要花費大量時間來顯示，因為需要不斷的開辟新的空間

根據字元傳回位置

字元串所有的方法，都不會修改字元串本身(字元串是不可變的)，操作完成會傳回一個新的字元串。

JavaScript基礎知識⑥(對象，内置對象)

根據位置傳回字元

JavaScript基礎知識⑥(對象，内置對象)

字元串操作方法

JavaScript基礎知識⑥(對象，内置對象)

toUpperCase() //轉換大寫

toLowerCase() //轉換小寫

replace()方法

replace() 方法用于在字元串中用一些字元替換另一些字元。

其使用格式如下：

replace(被替換的字元串， 要替換為的字元串)

split()方法 

var str = 'a,b,c,d';
console.log(str.split(',')); // 傳回的是一個數組 [a, b, c, d]
javascript 開發語言 ECMAScript 字元串 數組
上一篇: Javascript（四）Javascript基礎（對象）
下一篇: 【JavaScript】BOM（浏覽器對象模型）知識梳理

繼續閱讀