跳到主要內容

[鐵人賽] JavaScript Array 介紹 - Node.js Day 8

JavaScript Array

前言

今天要討論 Array,在 Array 是個很重要的物件型態,在 JavaScript 裡面有許多 Array 好用的方式,這次將會為大家介紹 Array 優秀之處。

內文

陣列也是屬於 JavaScript 的原生物件之一,在實際開發會有許多時候需要使用 Array 的方法,先來介紹一下陣列要怎麼宣告。

陣列宣告

宣告方式,
var a=['a', 'b', 'c'];

var a=new Array('a', 'b', 'c');
以上這兩種方式都可以宣告成陣列,接著我們將 a 這個變數印出來看一下,
console.log(a);
//print: [0, 1, 2]
Array 的排列指標從 0 開始,像上面的例子來說, a 的指標就有三個,0, 1, 2,如果要印出特定的某個陣列數值,使用方法,
console.log(a[1]);
//print: b
如果要判斷一個變數是不是 Array 最簡單的方式就是直接使用 Array 的原生方法,
var a=['a', 'b', 'c'];

console.log(Array.isArray(a));
//print: true

var b='a';
console.log(Array.isArray(b));
//print: false
如果要取得陣列變數的長度可以直接使用,
console.log(a.length);
length 為一個常數,型態為 Number,會列出目前陣列的長度。

pop, shift

以前面所宣告的陣列為範例,
var a=['a', 'b', 'c'];
使用 pop 可以從最後面取出陣列的最後一個值。
console.log(a.pop());
//print: c

console.log(a.length);
//print: 2
同時也可以注意到,使用 pop 這個方法之後,陣列的長度內容也會被輸出。
另外一個跟 pop 很像的方式就是 shift,
console.log(a.shift());
//print: a

console.log(a.length);
//print: 1
shift 跟 pop 最大的差異,就是從最前面將數值取出,同時也會讓呼叫的陣列少一個數組。

slice

前面提到 pop, shift 就不得不說一下 slice,使用方式,
console.log(a.slice(1,3));
//print: 'b', 'c'
第一個參數為起始指標,第二個參數為結束指標,會將這個陣列進行切割,變成一個新的陣列型態。 如果需要給予新的變數,就可以這樣子做,完整的範例。
var a=['a', 'b', 'c'];

var b=a.slice(1,3);

console.log(b);
//print: 'b', 'c'

concat

concat 這個方法,可以將兩個 Array 組合起來,
var a=['a'];

var b=['b', 'c'];

console.log(a.concat(b));
//print: 'a', 'b', 'c'
concat 會將陣列組合,之後變成全新的數組,如果以例子來說,a 陣列希望變成 ['a', 'b', 'c'],可以重新將數值分配給 a,範例來說
a = a.concat(b);

Iterator

陣列資料,必須要有 Iterator,將資料巡迴一次,通常是使用迴圈的方式,
var a=['a', 'b', 'c'];

for(var i=0; i < a.length; i++) {
    console.log(a[i]);
}

//print: a
//       b
//       c
事實上可以用更簡單的方式進行,
var a=['a', 'b', 'c'];

a.forEach(function (val, idx) {
    console.log(val, idx);
});

/*
print:
a, 0
b, 1
c, 2
*/
在 Array 裡面可以使用 foreach 的方式進行 iterator, 裡面給予的 function (匿名函式),第一個變數為 Array 的 Value, 第二個變數為 Array 的指標。

結語

陣列大致上就先介紹到此為止,在實戰應用的時候,會有更多時間點使用 Array 的原生型態,或者進行 Array 的組合分割技巧,在這邊就先以基本的 Array 方法為主。
明天會進入 function, class 的方法,這些部份,有些東西漸漸的會變得比較隱晦,我也不想去解釋太多,畢竟這邊是以實戰為主,就一起來期待明天吧!

留言

這個網誌中的熱門文章

npm 還可以看影片,沒想到真的有人這麼做

 還真的有人做這件事情, 庆余年2剛上線,有一位小哥竟然利用 npm 包的機制,將整套高清視頻都搬上來了。 https://x.com/fengmk2/status/1791498406923215020 圖片來源, https://x.com/fengmk2/status/1791498406923215020/photo/1 此 Package 出處 https://www.npmjs.com/package/lyq2?activeTab=versions 截圖留念, 機制說明 NPM(Node Package Manager)是一個流行的 JavaScript 軟件包管理器,用於管理和分發 Node.js 應用的依賴。它允許開發者將自己的代碼打包成「包」,並上傳到 NPM 的公共註冊表,供其他開發者下載和使用。這個過程通常包括以下步驟: 創建 NPM 包 :開發者將自己的代碼和相關文件打包成一個 NPM 包。 上傳到註冊表 :將包上傳到 NPM 的公共註冊表。 下載和使用 :其他開發者可以通過 NPM 命令行工具下載並安裝這些包。 這位小哥利用這一機制,可能是通過將整套高清視頻文件打包成 NPM 包並上傳到公共註冊表。其他人只需通過簡單的 NPM 命令即可下載這些視頻文件。 影響 版權問題 :這種行為涉及明顯的版權侵犯。高清視頻通常受到版權保護,未經授權的分發和下載都是非法的。 NPM 註冊表的可靠性 :這類內容的出現可能會損害 NPM 註冊表的可靠性和聲譽。NPM 註冊表是開發者分享和使用代碼的重要平台,如果充斥著這些不合法的內容,會影響其公信力。 潛在的安全風險 :將視頻文件偽裝成 NPM 包可能會帶來潛在的安全風險。下載這些包的用戶可能會無意中下載到惡意軟件或其他有害內容。 技術濫用 :這一行為展示了技術的濫用,原本為了方便開發者分享和使用代碼的機制,被用來分發非法內容,會對整個開發者社區造成負面影響。 歡迎留言給我,讓我們得到更多討論,一起回饋更多可能。 如果對於技術架構或者技術開發有相關需要顧問教育訓練服務或專案開發,聯絡方式如下,或者是與皇漢科技 EXMA-Square 進行聯繫。 FB: https://www.facebook.com/clonncd/ Twitter: https://twitter.com/clonncd 熱血漢誌: htt

Redis 已經不再免費了嗎?Redis is no longer free software ?

  根據Redis Source Available License 2.0 (RSALv2)的條款,這份授權協議提供了一定程度的使用、複製、分發、使其可用、以及創建衍生作品的自由,但這些自由受到特定限制,特別是關於將軟體功能作為服務提供給第三方或分發軟體的方式,這可能限制了軟體的自由共享和再分發。 根據自由軟體基金會(Free Software Foundation, FSF)和開源倡議組織(Open Source Initiative, OSI)定義的自由軟體和開源軟體的標準,一個軟體要被認為是“自由軟體”或“開源軟體”,它需要允許用戶在任何目的下運行軟體、研究和修改軟體、以及自由地重新分發複製品,有時還包括創建和分發衍生作品的自由。 RSALv2設置了一些重要的使用和分發限制,特別是關於禁止將軟體或其修改版本作為服務提供給第三方的限制,這可能不符合FSF和OSI對自由軟體或開源軟體的定義。這些限制主要是為了保護Redis Ltd.的商業利益,同時允許使用者在某些條件下使用和修改軟體。 因此,雖然RSALv2提供了一些使用和修改軟體的自由,但它由於上述限制,可能不會被廣泛認定為符合“自由軟體”或“開源軟體”的嚴格定義。它更像是一種介於傳統封閉源代碼軟體和開放源碼軟體之間的“源可用”授權模式。 主觀想法 怎麼開源的狀態下還是需要商業利益的支持,只有在商業模式下才能走得長久,這段協議會影響到的基本上三大公有雲 Azure / AWS / Google Cloud Platform 絕對首當其衝,但如果以服務提供商的角色,能夠跟這樣的開源坐下來好好談談,也許這樣的 Agreement 可能對於 Redis 後續的生態發展才會是好的方式? 就讓我們持續看下去! Ref: https://lwn.net/Articles/966133/ https://redis.com/blog/redis-adopts-dual-source-available-licensing/ https://redis.com/legal/rsalv2-agreement/

CSS Animation 救星?Apple 推出 Keyframer,讓 LLM 大型語言模型產生動畫

CSS Animation 救星?Apple 推出 Keyframer,讓 LLM 大型語言模型產生動畫 Apple 釋出 Keyframer 工具利用大型語言模型(LLMs)來為靜態圖像(SVG格式)創造動畫。 透過與專業動畫設計師和工程師的訪談,Keyframer 支援通過提示和直接編輯生成的輸出來探索和精煉動畫。此系統還允許用戶請求設計變體,支持比較和創意發想。包括用於描述運動的語義提示類型的分類和一種“分解式”提示風格,其中用戶不斷根據生成的輸出調整他們的目標。分享了如何通過直接編輯以及提示來實現超越當今生成工具中常見的一次性提示界面的迭代。通過這項工作,提出了LLMs 可能如何賦能廣泛的觀眾群體參與動畫創作。 對於網頁開發者或設計師,Keyframer提供了以下潛在的幫助和用途: 創意表達的擴展:開發者和設計師可以使用自然語言描述來創造或修改動畫,這樣可以快速實驗和實現創意想法,而無需深入複雜的動畫程式碼或工具。 高效的設計流程:通過結合語言提示和直接編輯,使用者可以迅速探索動畫設計的不同變體,加速從概念到原型的過程。 動畫設計的無障礙化:即使是沒有動畫背景的開發者和設計師也能輕鬆入門,透過自然語言的引導創造動感豐富的界面和視覺效果。 促進創意發想和迭代:Keyframer支持設計思維的迭代過程,讓使用者能夠不斷優化和細化他們的動畫設計,促進創意的深入發展。 個性化和定制動畫:用戶可以請求特定的設計變體,以滿足特定項目的需求或遵循品牌指南,從而創建更加個性化和定制化的動畫效果。 Keyframer為網頁開發者和設計師提供了一種全新的與動畫互動和創造的方式,使他們能夠更加自由地探索和實現創意視覺效果,從而提升用戶體驗和網站的吸引力。