Javascript陣列的知識點講解

發表於2015-12-17

陣列的基本方法如下

1. concat()

該方法用於連線2個或者多個陣列。該方法不會改變現有的陣列,而僅僅會返回被連線陣列的一個副本。

語法:arrayObject.concat(array1,array2,….arrayx);

連線多個陣列,使用逗號隔開;

比如如下程式碼演示:

2.join()

該方法是把陣列中的所有元素放入一個字串中,元素通過指定的分隔符進行分割的。

語法如下:arrayObject.join(separator);

separator: 指定分隔符對陣列中的元素進行分割,如果省略該引數,則會使用逗號作為分隔符。如下程式碼演示:

3.pop()

該方法刪除陣列的最後一個元素,把陣列的長度減1,並且返回它被刪除元素的值,如果陣列變為空,則該方法不改變陣列,返回undefine值。如下程式碼演示:

4.push()

該方法是向陣列末尾新增一個或者多個元素,並返回新的長度。

基本語法:arrayObject.push(newElem1,newElem2,…..newElemX); 演示程式碼如下:

5.reverse()

該方法用於顛倒陣列中元素的順序;

語法如下:arrayObject.reverse();

如下程式碼演示:

6.shift()

該方法用於把陣列的第一個元素從其中刪除,並返回被刪除的值。如果陣列是空的,shift方法將不進行任何操作,返回undefined的值。

如下程式碼演示:

7.sort()

1. 該方法是對陣列的元素進行排序;sortby引數規定排序順序,且必須是函式。

如果該方法沒有使用引數,則是按字母的字元編碼的順序進行排序。

2. 如果想按其他標準進行排序,就需要提供比較函式,該函式比較2個值,然後返回一個用於說明這2個值的相對順序的數字,比如比較a與b,返回值如下:

若a小於b,在排序後的陣列中a應該出現在b之前,則返回一個小於0的值。

若a等於b,在排序後的陣列中 a等於b 則返回0;

若a大於b,則返回一個大於0的值;

比如如下程式碼演示:

8.splice()

該方法用於插入,刪除和替換陣列的元素;

基本語法如下:

Array.splice(index,howmany,element1,…..elementX);

Index引數:【必填】是從何處新增/刪除元素,該引數是開始插入或刪除陣列元素的下標,必須是數字;

Howmany: 【必須】應該刪除多少個元素,必須是數字,也可以是0,如果未設定該引數,則刪除從index開始到原陣列結尾的所有元素;

Element1: 【可選】規定要新增到陣列的新元素,從index所指的下標處開始插入;

ElementX: 【可選】 可向陣列中新增若干個元素;

如下程式碼演示:

9.toString()

將陣列轉換為一個字串,並且返回這個字串;如下程式碼演示:

10.unshift()

該方法是向陣列的開頭新增一個或者更多元素,並返回新的長度。

如下程式碼演示:

11.slice()

該方法是從已有的陣列中返回指定的元素。

基本語法:arrs.slice(start,end);

start引數【必須】從何處開始選取(包括start),如果是負數,那麼會從尾部選取,比如-1代表最後一個元素,-2代表倒數第二個元素,以此類推。

End引數【可選】規定是從何處結束選取(不包括end),如果沒有指定該引數,那麼陣列會包含從start開始到陣列結束的所有元素,如果該引數是負數的話,那麼它規定的是從陣列尾部開始算起的元素。

如下演示:

判斷一個陣列中是否有相同的元素

計算一個陣列中每個元素在陣列中出現的次數;

程式碼如下:

Javascript刪除陣列重複元素的操作

1. 方案一遍歷陣列使用indexOf方法,程式碼如下:

2. 方案二:陣列下標判斷法;

3. 方案三:排序後相鄰去除法

4. 方案四:物件鍵值對法

程式碼如下:

Javascript刪除陣列裡面的某個元素。

方案一:使用indexOf和splice()方法刪除某個元素;

程式碼如下:

方案二:直接遍歷陣列 取其中某一項 如果某一項與該元素相同的話,直接擷取,和第一種方案類似,比第一種方案簡單

在javascript中求出2個陣列的相同的元素及不同的元素

思路:先定義一個物件,把A陣列轉換成物件,然後遍歷B陣列,判斷B陣列中某一項是否在A陣列那個物件裡面 如果在的話,說明B陣列與A陣列有相同的元素,否則B陣列和A陣列有不同的元素有哪些;

程式碼如下:

如上可以看到 arrs2中與arr1中陣列有相同的元素如上,不同的元素也如上;

如果需要判斷arr1中與arr2中陣列相同元素及不同的元素,傳遞引數調換位置即可!

Javascript檢測2個陣列是否相似

判斷2個陣列是否相似的條件:

  1. 先判斷這兩個物件是否為Array的例項。
  2. 接著判斷該陣列的長度是否一致。
  3. 判斷該2個物件的型別是否一樣,先對這2個陣列先轉換為字串後,再進行排序比較,如果該2個物件型別的個數一致,長度一致,且都是陣列,說明該2個陣列是相似的;比如如下:

如上2個陣列是相似的,但是如果2個陣列如下這樣的話

說明2個陣列不相似了~ 程式碼如下:

如何判斷該物件是否為陣列。

1. typeof

首先我們會想到的是使用typeof來檢測資料型別,但是對於Function, String, Number, Undefined等這幾種基本型別來說,使用typeof來檢測都可以檢測到,比如程式碼如下:

但是對於陣列或者正則來說,使用typeof來檢測的話,那就滿足不了,因為當我們檢測陣列或者正則的話,那麼返回的型別將會是一個物件object,如下程式碼所示:

2. Instanceof

由此我們很容易會想到使用instanceof來檢測某個物件是否是陣列的例項,該檢測會返回一個布林型(boolean),如果是陣列的話,返回true,否則的話返回false;我們再來看下上面的檢測是否為陣列的程式碼如下:

如上可以看到使用instanceof確實可以判斷是否為陣列的列子;

3. constructor屬性

在javascript中,每個物件都有一個constructor屬性,它引用了初始化該物件的建構函式,比如判斷未知物件的型別,因此我們可以如下寫一個方法:程式碼如下:

如上可以看到,通過呼叫isArray 方法也可以判斷是否為陣列的列子。

我們現在可以看到,對於第二點和第三點分別使用instanceof方法和constructor屬性貌似都可以來判斷是否為陣列了,但是也有列外情況,比如在跨框架iframe的時候使用頁面中的陣列時,會失敗,因為在不同的框架iframe中,建立的陣列是不會相互共享其prototype屬性的;如下程式碼測試即可得到驗證~

如上的方法我們都不能來判斷一個物件是否為陣列的方式; 但是我們在看ECMA262中可以看到,可以使用 Object.prototype.toString.call()方法來判斷一個物件是否為陣列;如下程式碼:

js將類陣列物件轉換成陣列物件

首先我們來看一下類陣列,什麼是類陣列,類陣列有什麼特徵呢?

具有:有指向物件的數字索引 及 length屬性值;

不具有:它不具有陣列的方法,比如push,slice,pop等方法;

Javascript中常見的類陣列有arguments, HTMLCollection的集合(比如document.getElementsByClassName,document.getElementsByTagName)等方法,常見的類陣列物件有如下:

document.getElementsByClassName, document.getElementsByTagName,document.getElementsByName,arguments等等;比如如下測試程式碼:類陣列可以有length屬性,可以遍歷,但是它並不是陣列的例項,如下程式碼:

我們再來測試下arguments是否和陣列一樣有push方法;測試程式碼如下:

在控制檯中列印出 arguments.push is not a function 報錯,說明類陣列並不是一個真正的陣列,因為它沒有陣列的方法;

但是我們可以將類陣列轉換為陣列,我們可以使用slice()方法call物件;slice()方法可以將一個類陣列物件/集合轉換成一個陣列,只需要使用陣列原型上的slice方法call這個物件,即Array.prototype.slice.call(arguments);即可將類陣列轉換為陣列,或者我們也可以使用[].slice.call(arguments);來轉換陣列;

如下程式碼:

使用上面的 [].slice.call()方法和 Array.prototype.slice.call()方法都可以將類陣列轉換為陣列的,比如上面的args就是轉換後的陣列,其後就擁有push()方法;

當然如果我們不嫌麻煩的話,我們可以先在函式內部定義一個新陣列,然後使用arguments.length的屬性遍歷每一項,把每一項存入到新陣列裡面去也是可以的,但是這樣做並沒有上面的好;如下程式碼:

查詢陣列中最大值與最小值

最小值演算法如下:

  1. 將陣列中第一個元素賦值給一個變數,把這個變數作為最小值;
  2. 開始遍歷陣列,從第二個元素開始依次和第一個元素進行比較。
  3. 如果當前的元素小於當前的最小值的話,就把當前的元素值賦值給最小值;
  4. 移動到下一個元素,繼續對第三步操作;
  5. 當陣列元素遍歷結束時,這個變數儲存的就是最小值;

程式碼如下:

上面是對陣列中的數值進行比較的,如果陣列中的數字是字串的話,先要把字串轉換成數字再進行比較即可,因為字串比較的不是值,而是ASCII編碼,比如2的ASCLL編碼會大於15的ASCII編碼,因為15的編碼第一個數字是1,2的ASCII編碼肯定大於1的;

求最大值的演算法和上面類似

1.將陣列中第一個元素賦值給一個變數,把這個變數作為最大值;

2.開始遍歷陣列,從第二個元素開始依次和第一個元素進行比較。

3.如果當前的元素大於當前的最大值的話,就把當前的元素值賦值給最大值;

4移動到下一個元素,繼續對第三步操作;

5.當陣列元素遍歷結束時,這個變數儲存的就是最小值;

相關文章