首頁  >  文章  >  web前端  >  深入JavaScript高階程式設計之物件、陣列(堆疊方法,佇列方法,重排序方法,迭代方法)_javascript技巧

深入JavaScript高階程式設計之物件、陣列(堆疊方法,佇列方法,重排序方法,迭代方法)_javascript技巧

WBOY
WBOY原創
2016-05-16 15:28:311163瀏覽

繼承是OO語言中的一個最為人津津樂道的概念。 許多OO語言支援兩種繼承方式:介面繼承和實作繼承。 介面繼承只繼承方法簽名,而實作繼承則繼承實際的方法。 如其所述,由於函數沒有簽名,在ECMAScript中無法實現介面繼承。 ECMAScript只支援實作繼承,實作繼承主要是依靠原型鏈來實現的。

1.使用物件字面量定義物件

var person={};

使用這種方式建立物件時,實際上不會呼叫Object建構函式。

開發人員更喜歡物件字面量的語法。

2.有時需要傳遞大量可選參數的情形時,一般來講使用物件字面量來封裝多個可選參數。

3.物件屬性的點表示法與方括號表示法的差異

(1)功能上:兩者沒差別

(2)但是方括號的有點是可以透過變數來存取屬性

例如:

  var person={
  name:"Nic"
}

點表示法:person.name

方括號表示法:var prop=“name”;
                        person[prop]

(3)還有一個優點是:

如果屬性名稱中包含會導致語法錯誤的字元或關鍵字,保留字時候,使用方括號不會錯

例如:person["first name"]="OK";

(4)通常,建議使用點表示法

4.建立陣列的問題

var colors=[1,2,]    //不要這樣。這樣會建立一個包含2個或3個項目的陣列
var opy=[,,,,,]    //不要這樣。這樣會建立一個包含5個或6個項目的陣列

這是因為IE8及之前的版本在實現數組字面量方面有bug

使用字面量建立陣列時,不會呼叫Array建構子

5.如果設定某個值的索引超過了陣列現有項數。

如:var color=[1,2,3]

color[3]時,陣列會自動增加到該索引值加1的長度

這時,color[3]的值就是undefined

6.陣列的length不只是唯讀的。透過設定length該屬性,可以不斷在陣列末端新增項目。

7.陣列轉換成字串 toString() join()

array.toString()  //返回以逗号分隔的字符串
array.valueOf()  //返回的还是数组
array.join(",")  //也可以

8.陣列的堆疊方法 push() pop()

堆疊是一種資料結構,也就是最新加入的項最早被移除(後進先出)。而棧中項的插入與移除,只發生在一個位置--棧的頂端。
ECMAScript提供了push()與pop()方法來實作這種堆疊。

push() 方法可在陣列的末端新增一個或多個元素,並傳回新的長度。

pop() 方法用於刪除並傳回陣列的最後一個元素。

範例:

var arr=[];
var count=arr.push('a','b');  //count=2
arr.push('c');
var item=arr.pop();  //移除最后一项 c item=c 并且改变数组长度

9.隊列方法 shift() unshift()

佇列資料的存取規則是先進先出
ECMAScript提供了shift()來實作。
shift() 方法用來把陣列的第一個元素從其中刪除,並傳回第一個元素的值。
unshift() 方法可在陣列的開頭新增一個或更多元素,並傳回新的長度。

10.重新排序方法 sort() reverse()

ECMAScript提供了sort()與reverse()來實作。

sort()會呼叫每個陣列項目的tostring()方法,比較得到的字串來排序。

11.陣列的拼接 concat()

concat() 方法用於連接兩個或多個陣列。

此方法不會改變現有的數組,而只會傳回被連接數組的一個副本。

12.slice() 方法可從現有的陣列中傳回選定的元素。 

13.位置方法:indexOf()與lastIndexOf()

14.迭代法

ECMAScript5定義了下列5種方法,5種方法都接收三個參數:數組項的值,該項在數組中的位置,數組對本身               

every(),filter(),forEach(),map(),some()

範例:

var num=[1,2,3,4];
var res=num.every(function(item,index,array){
  return (item>2)
})  //false  必须每一项都大于2,才返回true
var res=num.some(function(item,index,array){
  return (item>2)
})  //true 只要有一个大于2,就返回true
var res=num.filter(function(item,index,array){
  return (item>2)
})  //[3,4]   
var res=num.forEach(function(item,index,array){
  return (item>2)
})  //[1,4,9,16]  

javascript 陣列物件中的迭代方法

/* javascript 数组对象中的迭代方法 
 * ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象【可选】。 


 * 进行迭代的函数接受三个参数,第一个是数组中要进行迭代的元素的值,第二个是数组候总要进行迭代的元素的位置,第三个是迭代数组本身。 


* 1. every()  对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true 
 * 2. filter() 对数组中的每一项运行给定的函数,返回该函数返回true的项组成的数组。 
 * 3. forEach() 对数组中的每一项运行给定的函数,这个方法没有返回值 
 * 4. map()   对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组 
 * 5. some()  对数组中的每一项运行给定的函数,如果该函数对任意一项返回true,则返回true 
 * 
 * 这些迭代方法支持的浏览器有,IE9+,Firefox2+,Safari3+,Opera 9.5+,chrome 
 */ 
var num = [1,2,3,4,5,6,7,8,9]; 
var everyResult = num.every(function(item, index, array) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(everyResult); 
var someResult = num.some(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(someResult); 
var filterResult = num.filter(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(filterResult); 
var mapResult = num.map(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(mapResult); 
var forEachResult = num.forEach(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(forEachResult); 
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn