2013年11月19日 星期二

Javascript Global Variable 全域變數與 Local Variable 區域變數

Javascript Global Variable 全域變數與 Local Variable 區域變數

Javascript 的變數可以分為 Global Variable(全域變數)與 Local Variable(區域變數),這兩種變數的差異在於宣告的位置、方式以及調用區域的不同,使用全域變數的好處在於調用方便,但有的時候在特定函式中,也許有獨立運作的 script 會用到區域變數,以確保不影響到整個程式的運作,以下為這兩種變數的主要差異與範例應用。
  • Global Variable全域變數:能夠在函式內或函式外宣告,可於整個網頁範圍內調用,所以整個網頁中雖然可以有無數個不同名稱的 Global Variable,但僅會有一個獨立的 Global Variable 名稱,若重覆名稱則會覆蓋變數值,網頁關閉時,Global Variable 亦失效。
  • Local Variable 區域變數:僅能夠在函式中透過關鍵字 var 宣告,每個不同的函式可以有相同的 Local Variable 變數名稱,換句話說,每個函式間的 Local Variable 互不干涉,也無法在函式外其他地方調用,當函式結束工作後,Local Variable 亦失效。
從以上的兩個變數間差異不難看出來,僅有在函式(function)內,透過 var 所宣告的變數才能算是 Local Variable 區域變數,若沒有使用 var 關鍵字宣告,無論是在哪裡宣告的變數,都會屬於 Global Variable 全域變數的範疇,此細節請多多注意避免錯誤。

Javascript Global Variable 全域變數與 Local Variable 區域變數範例
<script type="text/javascript">
function Test(){
 var var1='A';
 var2='B';
 document.write('var1 in function='+var1+'<br>'); // 輸出 A
 document.write('var2 in function='+var2+'<hr>'); // 輸出 B
}
var var3='C';

Test(); // 呼叫 Test function

document.write('var2 not in function='+var2+'<br>'); // 輸出 B
document.write('var3 not in function='+var3+'<hr>'); // 輸出 C
</script>
以上範例輸出結果
var1 in function=A
var2 in function=B


var2 not in function=B
var3 not in function=C

首先準備一個 Test 函式,在裡面我們宣告了兩個變數,分別為 var1 與 var2,根據首段的講解,可以清楚的知道 var1 是 Local Variable 區域變數,而 var2 為 Global Variable,在函式外再宣告一個 var3 的全域變數,接著我們就來調用看看結果。首波於 Test function 中調用兩個變數,均可以順利輸出變數值,然後於函式外調用 var2 與 var3 也都可以順利輸出,但為什麼我們沒有在函式外調用 var1 呢?因為 var1 僅在函式內並透過 var 宣告,所以在函式外調用會失效,甚至 JavaScript 會不認識 var1 這個變數,而導致後方的 script 也失去效果。

佇列(Queue)簡介

佇列(Queue)結構是一個有序串列(Order List),所有的加入與刪除發生在串列的不同端,加入的稱為尾端(Rear),刪除的一端稱為前端(Front),並具有先進先出(First In First Out,FIFO)的特色,像各位在排隊買火車票時,先到的有先買票的權利,這就是一種佇列所採取的方式。



除了一般的佇列外,為了特殊狀況會有下列兩種常用佇列的變形:

1.雙向佇列(Double-Ended Queue,Deque)為一有序串列,加入與刪除可在任何一端進行,具體說,雙向佇列就是允許兩端中的任何一端都具備有刪除或加入的功能。

2.優先佇列(Priority Queue);不以優先順序進出,而是以每一個元素所賦予的優先權進出,例如:在大型電腦的CPU工作排程中,常會用到優先佇列,也就是像層級越高的管理者,就有較一般員工較先享有CPU的權利。


佇列的定義:

因為佇列具有先進先出(FIFO:FIRST IN,FIRST OUT)的特性,因此所有的刪除或加入的動作必須在不同的兩端進行。和堆疊相同的,我們也可以用陣列或指標來建立一個佇列。不過堆疊只需一個top,指標指向堆疊頂,而佇列就必須使用front和rear二個指標分別指向前端和尾端。一般說來有關佇列的5種基本運算的工作定義(operation definition),可以簡單敘述如下:
(1)建立空佇列Q。
(2)將新資料加入Q的尾端,傳回新佇列。
(3)刪除佇列前端的資料,傳回新佇列。
(4)傳回佇列前端的值。
(5)若佇列為空集合,傳回真,否則傳回偽。

Que 整數陣列,存資料用。
Front 前端指標。
Rear 後端指標。
Front 指標的值較佇列前端少1。
Rear 指標指向佇列最後一個元素
起始為Front=Rear=0,表示開始無元素。
  Sub InQuere (Dat,Que(),Rear,Full)
      If Rear = Max Then          
'判斷佇列是否已滿 
          Full=1               
'若滿則將Full設為1,表示佇列已滿 
      Else
          Rear = Rear + 1             
'若未滿,則將佇列後端指標加1。 
          Que(Rear) = Dat            
'將要加入之元素存入佇列中 
          Full = 0                 
'將Full設為0表佇列未滿。 
      End If
  End Sub
  Sub OutQuere (Dat,Que(),Front,Rear,Empty)
      If Front = Rear Then          
'判斷佇列是否為空的 
          Empty = 1                
'若空佇列將Empty設為1,表示佇列已滿 
      Else
          Dat = Que(Front)           
'若發空佇列,將前端要刪除元素存入Dat
          Front = Front + 1            
'將佇列前端指標加1
          Empty = 0             
'將Empty設為0表並非空佇列。
      End If
  End Sub


佇列的應用:



佇列結構在電腦上的應用也相當廣泛,例如:
(1)一般在CPU的工作排程,會採用佇列,也就是先到先做的方式。

(2)作為輸出入工作緩衝區;例如spooling,是先將輸入資料寫在磁碟上,再輸入電腦處理,處理後的資料先寫出磁碟上,再出印表機印出。

(3)用於電腦模擬(computer simulation)方面,在模擬中經常有時間導向(time-driven)或事件導向(event-driven)的輸入訊號,由於訊號到達的時間不一定,也是用佇列來安排。

2013年11月18日 星期一

用CSS 做出FLASH 填滿背景效果 (CSS3全螢幕背景填滿、自動縮放背景)

CSS3的全螢幕背景填滿,自動縮放背景
DEMO:http://goo.gl/V5paH9



<style>
body {
    margin: 0;
    padding: 0;
    background: #000 url(16_0.jpg) center center fixed no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
</style>




Coder 不只是偉大的職業,他們還是藝術家!


(原文作者為美國軟體公司 MuleSoft 技術副總監兼作家 James Donelan 
幾周前我在 MuleSoft 的團隊做了一支影片介紹程式設計師在公司的工作內容影片裡我提到他們都像藝術家一般,看完影片的人對這個有趣的比喻提出許多問題和意見,希望我能針對這個概念再多所著墨


工作的時候我寫程式,閒暇的時候我畫畫就我在職場的觀察和個人經驗來說,程式設計師和藝術家有很多相似點
我不是唯一這麼想的人,Y-Combinator 的創辦人 Paul Graham 幾年前寫過一篇名為「電腦高手與畫家」的文章文中寫道,有人在得知對電腦有興趣的人竟然也對藝術有興趣後,覺得十分詫異
他們認為電腦高手做的是冷冰冰、死板板、講究精準和程序的工作;相較於此,畫家需要更多創意的揮灑。Graham 認為這是不正確的描述,他反倒認為在眾多工作中,電腦高手和畫家的工作性質最相近
  • Coder 和藝術家的相似點
編輯器就是空白畫布
藝術家用一塊空白畫布表現創意他們先在大腦進行抽象思考,再用心和手進行創造
程式設計師也一樣,他們先找到一個抽象難題,再透過程式碼解決。整合開發環境 (IDE) 或 vim 編輯器的新專案就是他們的空白畫布
透過調整臻於完美
作畫是一個透過持續調整以臻於完美的創造歷程,畫家由素描開始逐步增加細部描繪,但這不僅是填補的動作,因為畫家腦袋裡最初的想法會不斷改變
透過 X 光我們看到畫家在作品完成前不斷地更動、調整,有些畫到最後甚至和原來的草稿完全不同。
開發軟體也是先在白板上草擬構想,程式設計師再用程式碼不斷嘗試路徑錯了就回頭檢視、修改,有時甚至拋棄原有的想法,再從零開始。
畢卡索有句名言:「好的藝術家會抄,偉大的藝術家會偷」。不管是直接影響或是透過旁人和媒體的傳播,許多有名的藝術家深受前人作品啟發
梵谷敬佩林布蘭和多雷等藝術家,並且研究這些前輩的作品。據說他曾臨摹 21 件米勒的畫作,梵谷的「午睡」(Rest from Work) 即是受米勒的「午睡」(Noonday Rest) 影響
安迪沃荷「最後的晚餐」是受達芬奇「最後的晚餐」啟發,他有 100 多幅作品是參考達芬奇的名作
程式設計師也和藝術家一樣受到他人啟發。只要使用 Google 搜尋手邊的難題是否已經有人處理過、並且重複利用前人想出的解決程式,就可以為我們省下數天到數週的工作時間
許多程式設計師也在 GitHub 上改良程式。也就是說,我們使用開放原始碼的程式並加以改良我們在 Twitter 上與同業切磋、我們向成功解決程式升級的公司看齊,並從他們公開的進階設計上學習在軟體開發的社群裡,透過他人的創意和成就思索進步再尋常不過。
戴上耳機就像入定
程式設計師員戴耳機是有原因的,撰寫程式碼需要全神貫注達到入定,而他們進入這種境界時的產出力最高
此時的他們會有時光轉瞬而逝的錯覺,但絕妙的點子、繁瑣又複雜的程式碼會自然迸發藝術家也常有類似的入定經驗,他們會花上數小時、數日做同一件作品。
程式碼是程式開發員手中的陶土
影片中我提到,程式碼像程式設計師手中的陶土一般,透過不斷調整程式碼,「捏塑」出完美的軟體在東修西補後,程式設計師的成就感隨著軟體成形油然而生,這和雕塑家捏陶的過程並無二致。
讓人驚艷的作品往往曠日廢時
要創造讓人驚艷的藝術作品耗時費力有的藝術家幸運地只需短時間就可以做出好作品,但大部分的藝術家不是如此。達芬奇花了 14 年完成「蒙娜麗莎」,迪妃奧也用了 8 年完成重達 2300 磅的「玫瑰」,這幅畫最後必須動用起重機才能運出狄妃奧的家
寫出令人驚艷的軟體也需要數月、數年的時間,程式設計師像藝術家一樣,在突破瓶頸前也有腸思枯竭、瀕臨放棄的時候但是藝術作品最後在藝廊展示,軟體則隨著時間推移逐步發表,它先在使用者介面設計模組 (MVP) 產生,歷經數年的更新改良後,最終完成程式設計師心中的夢幻軟體
藝術畫作和軟體一樣經不起時間考驗
藝術畫作經年累月後會有腐爛的危機,所以我們需要藝術修復師;軟體則是隨著時間而出現技術債 (technical debt) 的問題,最後變成既有程式碼 (legacy code)
也就是說程式碼在缺乏維護、修護、更新下導致降級,終至無法運作、難以為原創者以外的人所理解這也是程式設計師必須重構、更新程式碼,以解決技術債的原因。所以重構之於數位圈就相當於藝術修復工程之於藝術圈。
  • 許多程式設計師都是藝術家
Ruby 社群的程式開發員裡有許多藝術家
例如被稱作「為什麼是這幸運傢伙 (Why the lucky stiff)」的 Jonathan Gillette 是個多產的作家漫畫家、藝術家和電腦程式人員,在 Ruby 社群裡也被視為重量級人物。
既是 Ruby 程式開發員又是 DJ 的 Giles Bowkett,在這支影片 裡介紹 MIDI 生成器編碼並且談論藝術和程式開發員的關係
許多程式開發員認為程式設計和藝術的界線越來越模糊,現在的網路程式開發員需要有設計技巧會使用 Photoshop、架構頁面和內容了解網路美學和適應性網頁設計。
去年我在舊金山現代美術館 (SFMOMA) 看了媒體藝術家 Rafael Lozano-Hemmer 的展覽這位藝術家崛起於 1990 年代,在這場名為「頻率與體積」的影音裝置展中,觀展者透過投射在牆上影子的大小位置與影音裝置互動。參與者可以利用身體調頻,收聽商業音樂、警察廣播空中交通控制等公、私營電台的內容。
這是唯有藝術家具備藝術、工程程式設計的綜合技能,才有可能創造出的作品。
Coder 也需要靈感、創意
程式設計人員需要具備分析能力、科學能力,以及追求精準但這些僅是這個工作需要的部分特質而已。
它還需要靈感、創意、深思和技巧,才能將程式碼編寫成經得起時間考驗的藝術作品所以電腦高手和畫家比我們想像得還要相像許多。
(資料來源:VentureBeat ; 圖片來源:iLikeSpoons , CC Licensed)

HTML5 Web Workers


HTML5 Web Workers


HTML5 introduces the concept of Web Workers for running scripts in a thread-like manner. Web Worker scripts can be started in the background and run in parallel to the main HTML page. This allows heavy lifting tasks like number crunching or graphics processing to be carried out without interrupting the main user interface.


Examples


The example below shows the use Web Workers in a HTML page. Two Web Workers running the worker.js Javascript are started. The line with "onmessage" defines a function that will be called by the worker script for event notifications. In simple words, it is a mechanism for the web worker to send a message to the main page.
 <!DOCTYPE html>
        <html>
        <head>
        <title>Web Workers</title>
        </head>
        <body>
        <p>Loop 1: <output id="result1"></output></p>

        <p>Loop 2: <output id="result2"></output></p>

        <script>

        var worker1 = new Worker('worker.js');
        worker1.onmessage = function (event) {
        document.getElementById('result1').textContent = event.data;
        };

        var worker2 = new Worker('worker.js');
        worker2.onmessage = function (event) {
        document.getElementById('result2').textContent = event.data;
        };

        </script>

        </body>
        </html>     
   
The following shows the code for worker.js. When the "postmessage" function is called, a message is posted back to the function (with the line "onmessage") defined in the main HTML page. The first "for" loop iterates a number from 1 to 1000 and posts back the number to the main HTML page. The second "for" loop does nothing except to cause the first loop to slow down so that it is possible to see the animated running numbers.
        for (var x = 1; x <= 1000; x =x+1)
        {
          for (var y = 1; y <= 1000000; y =y+1)
         ;//do nothing
          postMessage(x);
        }
   
The above example can be downloaded below :
Web Workers Example



HTML:
<!DOCTYPE HTML>
<html>
 <head>
  <title>Worker example: One-core computation</title>
  <style>
      div{
          display: inline-block;
      }
  </style>
 </head>
 <body>
  <p>The loop 1: <div id="result1"></div></p>

  <p>The loop 2: <div id="result2"></div></p>
  
  <p>The loop 3: <div id="result3"></div></p>

  <p>The loop 4: <div id="result4"></div></p>

  <script>
    
   var worker1 = new Worker('worker.js');
   worker1.onmessage = function (event) {
     document.getElementById('result1').textContent = event.data;
   };

   var worker2 = new Worker('worker.js');
   worker2.onmessage = function (event) {
     document.getElementById('result2').textContent = event.data;
   };
   
    var worker3 = new Worker('worker.js');
   worker3.onmessage = function (event) {
     document.getElementById('result3').textContent = event.data;
   };

   
    var worker4 = new Worker('worker.js');
   worker4.onmessage = function (event) {
     document.getElementById('result4').textContent = event.data;
   };

  </script>

 </body>
</html>


JS( worker.js ):
for (var x = 1; x <= 1000; x =x+1)
{
 for (var y = 1; y <= 1050000; y =y+1)
;//do nothing
  postMessage(x);

}

原文網址:http://www.html5marketplace.com/html5/webworkers.shtml

2013年11月6日 星期三

[引用]陣列的運用

原文: http://goo.gl/eLrNqk

陣列是值的有序序列。有別於其他的語言,JavaScript 並沒有明確的陣列資料類型。取而代之,提供了 Array 物件,可以直接實體化或使用陣列的字面表達記法。
Array 物件有以各種方式操作陣列的方法,如合併、反轉、排序。他有一個用來指定陣列長度的屬性。JavaScript 也提供有用的陣列的字面表達語法,用來建立這些物件。

陣列的建立

陣列可以使用字面表達語法(通常是首選)或使用 Array 的建構子(也可以稱作函數,兩者行為完全相同)來建立︰
var colors = ["Red", "Green", "Blue"];
var colors = new Array("Red", "Green", "Blue");
var colors = Array("Red", "Green", "Blue");
陣列具有 length 屬性,提供來存取陣列的長度。如果你使用上述其中一個例子來初始化陣列,陣列的長度將會是 3︰
print(colors.length); // 3
在建立陣列的時候,如果你知道你的陣列的預期長度,你可以給 Array 的建構子傳入長度︰
var fiveItems = new Array(5);
明確定義長度並不會影響陣列的實際容量;這樣只會影響新陣列的 length 屬性。(陣列本身並沒有小於指定值的索引的屬性。)構建子的變體極少使用到。
JavaScript 1.7 引入陣列的簡約式作為建立新陣列的捷徑;下面 會討論。

陣列元素的運用

你可以透過把值代入給陣列元素的方式儲存陣列。下面是我們的範例 colors 陣列更為完整的實例︰
var colors = []; // 空陣列
print(colors.length); // 0

colors[0] = 'Red';
colors[1] = 'Green';
colors[2] = 'Blue';
print(colors.length); // 3
附加元素至陣列的末端的常見習慣是使用 array.length 作為索引︰
colors[colors.length] = 'Orange';
可以使用 array.push() 方法達到同樣效果︰
colors.push('Purple');
陣列的元素使用元素的索引來存取。陣列是以 0 開始索引,因此陣列中的第一個元素是 0︰
var red = colors[0];
可以使用各式各樣的陣列方法來存取陣列的元素。例如,pop() 方法移除並返回陣列的最後一個元素︰
var lastElement = colors.pop(); /* colors 的最後一個元素也被移除 */

理解 length

以實作的層級來說,JavaScript 的陣列實際上把元素存放成標準的物件屬性,並使用陣列的索引作為屬性的名稱。length 屬性很特別;他永遠會返回比保存在陣列中的最高索引值再高一的值︰
var cats = [];
cats[30] = ['Dusty'];
print(cats.length); // 31
你也可以把值代入給 length 屬性。寫下小於陣列中已存放的項目的數目,就會截掉其餘的項目;寫下 0 就完全清空陣列︰
var cats = ['Dusty', 'Misty', 'Twiggy'];
print(cats.length); // 3

cats.length = 2;
print(cats); // 輸出 "Dusty,Misty" - Twiggy 被移除了

cats.length = 0;
print(cats); // 什麼也沒輸出;cats 陣列是空的

迭代整個陣列

常見的操作就是迭代所有陣列的值,並以同樣方式處理每一個值。做到這一點的最簡單的方式如下︰
var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  alert(colors[i]);
}
如果你知道陣列中沒有一個元素會在布林的求值結果中為 false - 如果你的陣列只以 DOM 的結點組成,例如,你可以使用更有效率的習慣︰
var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
  /* 以同樣方式處理 div */
}
這樣可以避免檢查陣列長度的開支,並且確保 div 變數被重新指定到每一次循環的使用中項目,以方便加入。
在 JavaScript 1.6引入
forEach 方法是在 JavaScript 1.6 引入的,提供了另一種迭代陣列的方式︰
var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
  alert(color);
});
傳給 forEach 的函數會在陣列中的每一個項目中執行一次,並把陣列的項目傳給函數作為參數。

Array 的方法

Array 物件有以下的方法︰
  • concat 合併兩個陣列,並把新的陣列返回。
var a1 = [1, 2, 3];
var a2 = a1.concat(['a', 'b', 'c']);
print(a2); // 1,2,3,a,b,c
  • join(deliminator = ",") 把所有的陣列元素合併成字串。
var a = ['Wind', 'Rain', 'Fire'];
print(a.join(' - ')); // "Wind - Rain - Fire"
  • pop 移除掉陣列的最後一個元素,並把這個元素返回。
var a = [1, 2, 3];
var last = a.pop();
print(a); // 1,2
print(last); // 3
  • push 在陣列的末端加入一個以上的元素,並返回新的陣列長度。
var a = [1, 2];
a.push(3);
print(a); // 1,2,3
  • reverse 反轉陣列元素的順序至適當的位置。
var a = [1, 2, 3, 4];
a.reverse();
print(a); // 4,3,2,1
  • shift 移除並返回陣列的第一個元素。
var a = [1, 2, 3];
var first = a.shift();
print(a); // 2,3
print(first); // 警報 1
  • unshift 在陣列的開頭處加入一個以上的元素,並返回新的陣列長度。
var a1 = [1, 2, 3];
a2.unshift(4);
print(a); // 4,1,2,3
  • slice (start_index, upto_index) 返回陣列的片斷。
var a1 = ['a', 'b', 'c', 'd', 'e'];
var a2 = a1.slice(1, 4);
print(a2); // 警報 b,c,d
  • splice(index, count_to_remove, addelement1, addelement2, ...) 加入 和/或 移除陣列的元素,在適當的位置修改。
var a = ['a', 'b', 'c', 'd', 'e'];
var removed = a.splice(1, 3, 'f', 'g', 'h', 'i');
print(removed); // b,c,d
print(a); // a,f,g,h,i,e
  • sort 在適當的位置排序陣列的元素。
var a = ['Wind', 'Rain', 'Fire'];
a.sort();
print(a); // Fire,Rain,Wind
sort 也可以接受 Callback 函數來決定如何排序陣列的內容。這個函數會對兩個值做比較,並返回下列三個值其中之一︰
  • 如果 a 在排序系統中小於 b,返回 -1(或任意的負數)
  • 如果 a 在排序系統中大於 b,返回 1(或任意的正數)
  • 如果 a 和 b 被認為是相等的,返回 0。
例如,下面的例子會以字串的最後一個字母來排序︰
var a = ['Wind', 'Rain', 'Fire'];
function sortFn(a, b) {
  var lastA = a[a.length - 1];
  var lastB = b[b.length - 1];
  if (lastA < lastB) return -1;
  if (lastA > lastB) return 1;
  if (lastA == lastB) return 0;
}
a.sort(sortFn);
print(a); // Wind,Fire,Rain

於 JavaScript 1.6 引入

在 JavaScript 1.6引入
  • indexOf(searchElement[, fromIndex) 在陣列中搜尋 searchElement 並返回第一個符合項的索引。
   var a = ['a', 'b', 'a', 'b', 'a'];
   alert(a.indexOf('b')); // 警報 1
   // 現在再試一次,從最後的符合項之後的索引開始
   alert(a.indexOf('b', 2)); // 警報 3
   alert(a.indexOf('z')); // 警報 -1,因為找不到 'z'

  • lastIndexOf(searchElement[, fromIndex) 類似 indexOf,但是最後面開始往回搜尋。
   var a = ['a', 'b', 'c', 'd', 'a', 'b'];
   alert(a.lastIndexOf('b')); // 警報 5
   // 現在再試一次,從最後的符合項之前的索引開始
   alert(a.lastIndexOf('b', 4)); // 警報 1
   alert(a.lastIndexOf('z')); // 警報 -1

  • forEach(callback[, thisObject]) 在每一個項目上執行 callback
   var a = ['a', 'b', 'c'];
   a.forEach(alert); // 依序警報每一個項目

  • map(callback[, thisObject]) 返回在每一個陣列的項目上執行 callback 所返回的值的新陣列。
   var a1 = ['a', 'b', 'c'];
   var a2 = a1.map(function(item) { return item.toUpperCase(); });
   alert(a2); // 警報 A,B,C

  • filter(callback[, thisObject]) 返回內含在 Callback 中返回為 true 的項目的新陣列。
   var a1 = ['a', 10, 'b', 20, 'c', 30];
   var a2 = a1.filter(function(item) { return typeof item == 'number'; });
   alert(a2); // 警報 10,20,30

  • every(callback[, thisObject]) 返回 true,如果 callback 在陣列中的每一項上都返回 true。
   function isNumber(value) { return typeof value == 'number'; }
   var a1 = [1, 2, 3];
   alert(a1.every(isNumber)); // 警報 true
   var a2 = [1, '2', 3];
   alert(a2.every(isNumber)); // 警報 false

  • some(callback[, thisObject]) 返回 true,如果 callback 在陣列中至少有一個項目返回為 true。
   function isNumber(value) { return typeof value == 'number'; }
   var a1 = [1, 2, 3];
   alert(a1.some(isNumber)); // 警報 true
   var a2 = [1, '2', 3];
   alert(a2.some(isNumber)); // 警報 true
   var a3 = ['1', '2', '3'];
   alert(a3.some(isNumber)); // 警報 false

上面接受 Callback 的方法又稱為迭代方法,因為他們會以同樣的方式迭代整個陣列。其中第二個選用性的參數稱為 thisObject。如果有提供的話,thisObject 會變成 Callback 函數的本體內部的 this 關鍵字的值。
實際上 Callback 函數會以三個參數來呼叫。第一個是使用中項目的值,第二個是他的陣列索引,第三個是陣列本身的參考。JavaScript 函數會忽略任何沒有在參數列表中命名的參數,因此提供只接受單一參數的 Callback 函數也很安全,如 alert

於 JavaScript 1.8 引入

在 JavaScript 1.8引入
  • reduce(callback[, initialValue) 使用 callback(firstValue, secondValue) 把項目的列表合併成單一的值。
   var a = [10, 20, 30];
   var total = a.reduce(function(first, second) { return first + second; }, 0);
   alert(total) // 警報 60

  • reduceRight(callback[, initialValue) 類似 reduce,但是從最後一個元素開始。
reduce 和 reduceRight 明顯是迭代陣列的方法中最少的。為了把序列降至單一的值,應該把他們用於遞歸合併兩個值的演算法。

近似陣列的物件的運用

在 JavaScript 1.6引入
某些 JavaScript 物件,如 document.getElementsByTagName 返回的 NodeList,或者在函數本體內部可以利用的 arguments 物件,表面上看來外觀和行為和陣列很類似,但並未共用所有的方法。例如,arguments 物件提供 length 屬性,但並未實作 forEach 方法。
在 JavaScript 1.6 中引入的通用陣列,為其他類似陣列的物件提供執行 Array 方法的途徑。每一個標準的陣列方法在 Array 物件本身都有相對應的方法;例如︰
 function alertArguments() {
   Array.forEach(arguments, function(item) {
     alert(item);
   });
 }
這些通用方法可以在舊版本的 JavaScript 中,使用由 JavaScript 函數物件所提供的 call 方法,以更冗長的形式模擬。
 Array.prototype.forEach.call(arguments, function(item) {
   alert(item);
 });
陣列的通用方法也可以使用在字串上,因為字串提供的對字元循序存取的方式,和陣列的很類似︰
 Array.forEach("a string", function(char) {
   alert(char);
 });

二維陣列

下面的代碼建立二維陣列。
var a = [];
for (i = 0; i < 4; i++) {
   a[i] = [];
   for (j = 0; j < 4; j++) {
      a[i][j] = "[" + i + ", " + j + "]";
   }
}
本例以如下的行來建立陣列︰
行 0: [0,0][0,1][0,2][0,3]
行 1: [1,0][1,1][1,2][1,3]
行 2: [2,0][2,1][2,2][2,3]
行 3: [3,0][3,1][3,2][3,3]

陣列的簡約式

在 JavaScript 1.7引入
在 JavaScript 1.7 中引入的陣列簡約式(array comprehension),對於以其他內容為基礎來建構新陣列提供了很有用的捷徑。簡約式通常可以用在 map() 和 filter() 呼叫的地方,或是結合這兩者的方式。
下面的簡約式接收數字的陣列,並建立每一個數字的雙倍的新陣列。
var numbers = [1, 2, 3, 4];
var doubled = [i * 2 for each (i in numbers)];
alert(doubled); // 警報 2,4,6,8
這等同於下面的 map() 操作︰
var doubled = numbers.map(function(i) { return i * 2; });
簡約式也可以用於選取符合特定表達式的項目。這是只選取偶數的簡約式︰
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each (i in numbers) if (i % 2 == 0)];
alert(evens); // 警報 2,22,30
filter() 也可以用於同樣的用途︰
var evens = numbers.filter(function(i) { return i % 2 == 0; });
map() 和 filter() 這類型的操作可以合併至單一的陣列簡約式。這是只篩出偶數的簡約式,然後建立內含雙倍數值的新陣列。
var numbers = [1, 2, 3, 21, 22, 30];
var doubledEvens = [i * 2 for each (i in numbers) if (i % 2 == 0)];
alert(doubledEvens); // 警報 4,44,60
陣列簡約式的方括號導入了默許的作用域區塊。新的變數(如範例中的 i)會被視為已經使用 let 宣告過了。其意義是不能在簡約式的外部使用這些變數。

2013年11月4日 星期一

CSS命名: 中線、下畫線、駱駝峰?

Hyphens, Underscores, or camelCase?


很愛用下畫線、看來要改掉個壞習慣!

Hyphens: people-like-hyphens


Underscores: people_like_underscores


camelCase: peopleLikeCamelCase