JS之對象Object篇


對象和數組很相似,數組是通過索引來訪問和修改數據,對象是通過屬性來訪問和修改數據的。

var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};

 

var myObj = {
"Space Name": "Kirk",
"More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock

 

中括號操作符的另一個使用方式是用變量來訪問一個屬性。當你需要遍歷對象的屬性列表或查表時,這種方式極為有用。

這有一個使用變量來訪問屬性的例子:

var someProp = "propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value"

還有更多:

var myDog = "Hunter";
var dogs = {
Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
}
var breed = dogs[myDog]; // "Hunter"
console.log(breed)// "Doberman"

提示:當我們通過變量名訪問屬性的時候,不需要給變量名包裹引號。因為實際上我們使用的是變量的值,而不是變量的名稱

 

讓我們更改它的名稱為 "Happy Camper",這有兩種方式來更新對象的name屬性:

ourDog.name = "Happy Camper";

ourDog["name"] = "Happy Camper";

 

對象和字典一樣,可以用來存儲鍵/值對。如果你的數據跟對象一樣,你可以用對象來查找你想要的值,而不是使用switch或if/else語句。當你知道你的輸入數據在某個范圍時,這種查找方式極為有效。

這是簡單的反向字母表:

var alpha = {
1:"Z",
2:"Y",
3:"X",
4:"W",
...
24:"C",
25:"B",
26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"

var value = 2;
alpha[value]; // "Y"

有時檢查一個對象屬性是否存在是非常有用的,我們可以用.hasOwnProperty(propname)方法來檢查對象是否有該屬性。如果有返回true,反之返回 false

舉例

var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false

 用構造函數來創建對象。

構造函數 通常使用大寫字母開頭,以便把自己和其他普通函數區別開。

下面便是一個 構造函數 了:

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 1;
};

 

在 構造函數 中, this 指向被此 構造函數 創建出來的 對象 。所以,當我們在 構造函數 中寫:

  this.wheels = 4;

這時,它創建出來的新對象將帶有 wheels 屬性,並且賦值為 4.

你可以認為 構造函數 描述了它所創建出來的對象。

 

對象擁有自己的特征,稱為 屬性,對象還有自己的函數,稱為 方法

在前面的課程(構造函數)中,我們使用了 this 指向當前(將要被創建的)對象中的 公有屬性

我們也可以創建 私有屬性私有方法 ,它們兩個在對象外部是不可訪問的。

為了完成這個任務,我們在 構造函數 中,使用我們熟悉的 var 關鍵字去創建變量,來替代我們使用 this創建 屬性

 

map 方法可以方便的迭代數組,例子:

var timesFour = oldArray.map(function(val){
  return val * 4;
});

 

map 方法會迭代數組中的每一個元素,並根據回調函數來處理每一個元素,最后返回一個新數組。注意,這個方法不會改變原始數組。

在我們的例子中,回調函數只有一個參數,即數組中元素的值 (val 參數) ,但其實,你的回調函數也可以支持多個參數,譬如:元素的索引index、原始數組arr

 

數組方法 reduce 用來迭代一個數組,並且把它累積到一個值中。

使用 reduce 方法時,你要傳入一個回調函數,這個回調函數的參數是一個 累加器 (比如例子中的 previousVal) 和當前值 (currentVal)。

reduce 方法有一個可選的第二參數,它可以被用來設置累加器的初始值。如果沒有在這定義初始值,那么初始值將變成數組中的第一項,而 currentVal 將從數組的第二項開始。

下面的例子使用了 reduce 來讓數組中的所有值相減:

var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal - currentVal;
}, 0);

使用 reduce 方法來讓 array 中的所有值相加,並且把結果賦值給 singleVal

 

filter 方法用來迭代一個數組,並且按給出的條件過濾出符合的元素。

filter 方法傳入一個回調函數,這個回調函數會攜帶一個參數,參數為當前迭代的項(我們叫它 val )。

回調函數返回 true 的項會保留在數組中,返回 false的項會被過濾出數組。

下面的代碼示例展示了使用 filter 來移除數組中值等於5的項:

注意: 我們忽略了第二參數和第三參數,因為例子中我們只需要第一參數就夠了。

array = array.filter(function(val) {
  return val !== 5;
});
 

sort 方法,可以很容易的按字母順序或數字順序對數組中的元素進行排序。

與我們之前用的數組方法僅僅返回一個新數組不同, sort 方法將改變原數組,返回被排序后的數組。

sort 可以把比較函數作為參數傳入。比較函數有返回值,當 a 小於 b,返回一個負數;當 a 大於 b ,返回一個正數;相等時返回0。

如果沒有傳入比較函數,它將把值全部轉成字符串,並按照字母順序進行排序。

下面的例子將展示 sort 的使用,傳入的比較函數把元素按照從小到大的順序進行排列:

var array = [1, 12, 21, 2];
array.sort(function(a, b) {
  return a - b;
});

使用 sort 按照從大到小的順序排序 array

 

使用 reverse 方法來翻轉數組。

var myArray = [1, 2, 3];
myArray.reverse();

結果myArray 變成了 [3, 2, 1]

使用 reverse 來翻轉 array 數組。並賦值給 newArray.

 

concat 方法可以用來把兩個數組的內容合並到一個數組中。

concat 方法的參數應該是一個數組。參數中的數組會拼接在原數組的后面,並作為一個新數組返回。

下面是一個拼接數組的例子,用concatotherArray拼接在 oldArray 的后面:

newArray = oldArray.concat(otherArray);

使用 .concat()concatMe 拼接到 oldArray 后面,並且賦值給 newArray

 

split 方法按指定分隔符將字符串分割為數組。

你要給 split 方法傳遞一個參數,這個參數將會作為一個分隔符。

下面的例子展示了 split 方法的使用,按照 s 字母進行分割:

var array = string.split('s');

 

join 方法來把數組轉換成字符串,里面的每一個元素可以用你指定的連接符來連接起來,這個連接符就是你要傳入的參數。

下面展示了使用 join 來將數組中的每一項放入字符串,並用 and 進行連接:

var veggies = ["Celery", "Radish", "Carrot", "Potato"];
var salad = veggies.join(" and ");
console.log(salad); // "Celery and Radish and Carrot and Potato"

使用 join 方法,連接符為' '把數組 joinMe 轉化成字符串 joinedString.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM