概念介紹

array我認為是寫js一定會使用到的型態之一,array像是stack的觀念,stack就好像是推積木一樣,最先疊上去的在最底層,越後面堆疊上去的物件在最上層,以此類推。

接下來是存在於array中的item型態介紹,一個item可以是一個物件object, 數字number, 字串string, 甚至可以是另一個array。

而array第一個物件的編號,也就是index,是從0開始而不是1,當你了解了這些觀念後,接下來會介紹與array相關的幾個功能和用法。

 

push

目的 : 將任一項目接到array最後面。

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* 將數字6加入array後 */
array.push(6)

/* 輸出array */
console.log(array)
/* [ 0, 1, 2, 3, 4, 5, 6 ] */

 

pop

目的 : 將array最後面元素刪除。

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* 將array最後面元素刪除 */
array.pop()

/* 輸出array */
console.log(array)
/* [ 0, 1, 2, 3, 4 ] */

 

unshift

目的 : 將任一項目接到array最前面。

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* 將數字6加入array最前面 */
array.unshift(6)

/* 輸出array */
console.log(array)
/* [ 6, 0, 1, 2, 3, 4, 5 ] */

 

shift

目的 : 將array第一個元素刪除。

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* 將array第一個元素刪除 */
array.shift()

/* 輸出array */
console.log(array)
/* [ 1, 2, 3, 4, 5 ] */

 

reverse

目的 : 將array元素顛倒排列。

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* 顛倒排列 */
array.reverse()

/* 輸出array */
console.log(array)
/* [ 5, 4, 3, 2, 1, 0 ] */

 

splice

目的 : 指定array中任一起始點index與欲刪除的數量後由一值進行取代,下面範例顯示,我們想要將數字1, 2, 3 這三個元素由6進行取代的作法

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* 指定數字1的index(1)後三個元素進行刪除(包含數字1,2,3),並由數字6取代 */
/* splice("起始index", "欲刪除數量", "取代的元素") */
array.splice(1, 3, 6)

/* 輸出array */
console.log(array)
/* [ 0, 6, 4, 5 ] */

 

slice

目的 : 指定array中起始點index與結束點index後,回傳一array包含起始點index與結束點index之前的所有元素。 下面範例有兩種

一 :只輸入起始點index

二 :輸入起始點index與結束點index

 

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]

/* slice("起始點index", "結束點index") */
/* 目的 : 得到除了數字0之外的元素array */
var result1 = array.slice(1)

/* 輸出result1 */
console.log(result1)
/* [ 1, 2, 3, 4, 5 ] */

/* 目的 : 得到除了數字1到數字4之間的元素array */
var result2 = array.slice(1, 5)

/* 輸出result2 */
console.log(result2)
/* [ 1, 2, 3, 4 ] */

 

concat

目的 : 合併兩個array

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array1 = [0, 1, 2, 3, 4, 5]
/* 定義一個array,其值包含數字 6 ~ 10 依序排列 */
var array2 = [6, 7, 8, 9, 10]


/* 目的 : 將array2 合併到 array1後面 */
var newArray = array1.concat(array2)

/* 輸出newArray */
console.log(newArray)
/* [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] */

 

indexOf

目的 : 從array中找到目標元素並回傳其index

使用方法 : 

/* 定義一個array,其值包含數字 0 ~ 5 依序排列 */
var array = [0, 1, 2, 3, 4, 5]


/* 目的 : 從array中找到數字2的index */
var targetIndex = array.indexOf(2)

/* 輸出targetIndex */
console.log(targetIndex)
/* 2 */

/* 目的 : 從array中找到數字7的index */ 
var targetIndex2 = array.indexOf(7)

/* 輸出targetIndex */ 
console.log(targetIndex2) 
/* -1, 當數字7不存在於array中時,會回傳index -1 表示不存在 */

 

以上都是我在寫javascript最常使用到的內建function,之後還會介紹搭配自定義的function進行排序和過濾的方法喔~





arrow
arrow
    文章標籤
    javascript js array 陣列
    全站熱搜

    橘子亂說話 發表在 痞客邦 留言(0) 人氣()