JavaScript 的櫃子,陣列( Array )


陣列是什麼?

陣列(Array)是一種資料的集合,其中的值被稱之為元素,我的理解是,陣列就像是一個櫃子,裡面裝了性質類似的連續變數,他們使用同一個變數名字(櫃子名稱),用 索引值 來指定使用第幾個變數,且陣列基本上都是有序的,索引基本上都是由 0 開始!


陣列的宣告方式

var cabinet =Array();                           
var cabinet =[];
var cabinet =Array(10);                         //宣告 0 ~ 9 共 10 個的陣列,但現在裡面的東西是undefined
var cabinet =['red','yellow','black'];

讀取陣列中的元素

var fruits = ['apple', 'banana'];

var first = fruits[0];            
> apple

var last = fruits[fruits.length - 1];          //此陣列長度為 2 , 但是索引是從 0 開始 [0]、[1],所以須 - 1
> banana

更改陣列中某個元素的值

var fruits = ['apple','banana'];

fruits[0] = 'orange';
fruits[1] = 666;

console.log(fruits);
>['orange',666]

稀疏陣列 vs 密集陣列

密集陣列

陣列是一片連續的儲存空間,有固定的長度,密集陣列元素之間是緊密相連的,不存在空隙!

var megi = [9,4,5,6];          //緊密相連,裡面沒有空隙的陣列

稀疏陣列 (Sparse Array)

稀疏聽起來跟掉髮有關(並不是),稀疏陣列是指陣列中有插槽(slot)可能未定義其值或被略過而導致存放 undefined 元素的狀況!

const list = [];
list[0] = 'apple';
list[2] = 'banana';
console.log(list.length);
>3                            //list[1]會變成 undefined,list.length 是 3

鍵值的強制轉型
若使用很像數字的字串當成鍵值來存資料,鍵值會被強制轉型為數字!

const list = [];
list[0] = 'Hello';
list['20'] = 'World';

console.log(list.length);
>21

length 長度永遠大於陣列最高索引數
為了保持這個不變式,會自動變為length + 1

var a = [1,2,3];
a[10] = 1;
console.log(a.length) ;
>11                      //想不到吧,居然不是 10

陣列常用內建函式

Push()

  • push()可以將值加入陣列的最後一個位置,沒有限制添加數量,添加內容用 , 隔開即可,加入後陣列長度會增加!

    使用 push() 後會改變原本的陣列內容。

var a =[1,2,3,4,5,6];
a.push(7,8);               //在這陣的最後位置添加 7,8
console.log(a);
>[1,2,3,4,5,6,7,8]

pop()

  • pop()移除(取出)陣列的最後一個元素

    使用 pop() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6,7,8];
var b = a.pop();

console.log(a);
>[1,2,3,4,5,6,7]       //被拿走最後一個元素的陣列

console.log(b);        //被拿出的最後一個元素
>8

shift()

  • shift()移除(取出)陣列的第一個元素

    使用 shift() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6,7,8];
var b =a.shift();

console.log(a);
>[2,3,4,5,6,7,8]      //被拿走第一個元素的陣列

console.log(b)
> 1                   //被拿出的第一個元素

unshift()

  • unshift() 會將指定的元素添加第一個位置

    使用 unshift() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6];
a.unshift(666,777,888);

reverse()

reverse()會將陣列反轉。

使用 reverse() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6,7,8];
a.reverse();
console.log(a);
[8,7,6,5,4,3,2,1]

splice()

splice()可以移除或新增陣列的元素,他包含了三個參數,第一個是要移除或添加的序列號碼(必填),第二個是移除的長度設定為0的話,就不會有元素被移除,第三個則是要添加的內容。

var a =[1,2,3,4,5,6];
a.splice(2,0,100);
console.log(a);
>[1,2,100,3,4,5,6]                     //沒有元素被清除,100被加到了位置 2
var a =[1,2,3,4,5,6,7,8];
a.splice(5,3,100,200,300);
console.log(a);
>[1,2,3,4,5,100,200,300]             //100、200、300取代原本位置在 5、6、7的元素

---

join()

join()可以將陣列中的元素,藉由指定的字符合併,變成字串呈現,沒有指定則會用,合併喔!

var a = [1,2,3,4,5,6,7,8];

console.log(a.join());
>1,2,3,4,5,6,7,8

console.log(a.join(''));
>12345678

console.log(a.join('!!'))
>1!!2!!3!!4!!5!!6!!7!!8

map()

map()會建立一個新的陣列,內容為原陣列的每一個元素,經由回乎韓式運算後索回傳的結果之集合。

var a = [1,2,3,4,5];
var newa = a.map(x => x * 2);
console.log(newa);

>[2,4,6,8,10]

filter()

filter() 接收一函式,但函map不同的是,filter把傳入的函示依次作用於每個元素,然後根據返回值 true 還是 false 決定保留還是丟棄該元素。

 var a = [1,2,3,4,5,6,7];
 var r = a.filter(function(x){
     return x % 2 !== 0;
 });
 console.log(r);

 >[1,3,5,7]
var a = ['A','','B',null,'c','   '];
var r = a.filter(function(s){
    return s && s.trim();       //.trim將字串去空白
});
console.log(r);

>["A","B","C"]

參考資料來源:
Lidemy 鋰學院-Huli老師的課程
你懂 JavaScript 嗎?#5 值(Values)Part 1 - 陣列、字串、數字
JS 陣列 Array 是什麼 ?
JavaScript Array (陣列)
javascript稀疏陣列(sparse array)和密集陣列用法分析
Javascript大全 - 05(一) 陣列
JavaScript Array 陣列操作方法大全
Array.prototype.map()
Javascript中關於Array.filter()的妙用詳解

#Array #陣列
不小心,參加了 Lidemy 第四期 程式導師計畫! 入門到放棄,又從放棄回到入門,一顆小種子生長記事,一邊寫筆記、一邊看看這顆種子究竟會長出甚麼鬼,可能會開花、可能會變成樹、也可能長成仙人掌, 也可能還沒長大就枯萎了,JavaScript學習筆記。 我最喜歡工程師了!






Related Posts

[評價] Philips 飛利浦 HX3216 電動牙刷

[評價] Philips 飛利浦 HX3216 電動牙刷

DAY 04 : 資料結構緒論

DAY 04 : 資料結構緒論

JS踩坑筆記 - closure

JS踩坑筆記 - closure



Comments











Sponsored