1. 程式人生 > >JS數組攻略

JS數組攻略

-c number -a 封裝 數組去重 能力 隊列 創建對象 變化

本文參考了部分書籍和博客以及個人感悟,謝謝觀看!

定義:數組是值的有序集合。每個值叫做一個元素,而每個元素在數組中有一個位置,以數字表示,稱為索引。

數組屬性

length
length屬性表示數組的長度,即其中元素的個數。
JavaScript數組的length屬性是可變的,當length屬性被設置得更大時,整個數組的狀態事實上不會發生變化,僅僅是length屬性變大;當length屬性被設置得比原來小時,則原先數組中索引大於或等於length的元素的值全部被丟失。

prototype
返回對象類型原型的引用。prototype 屬性是 object 共有的。
一般用來給數組實例添加方法。

constructor


表示創建對象的函數。
說明:constructor 屬性是所有具有 prototype 的對象的成員。constructor 屬性保存了對構造特定對象實例的函數的引用。

基本操作

一、創建數組

1. Array()構造函數。 
  var arr = [];//創建空數組
  var arr = [1,"{1,2}","string"];//創建一個數組並賦值
2. 數組字面量表示法。
  var arr = new Array(); //創建一個空數組 []
  
var arr = new Array(5); //創建一個length為5的數組 [undefined, undefined, undefined, undefined, undefined]
  var arr = new Array(1,2,3,4,5); //創建數組並賦值 [1,2,3,4,5]

3. Array.of()方法。
  var arr = Array.of(7); // 創建數組並賦值 [7]   var arr = Array.of(1, 2, 3); // 創建數組並賦值 [1, 2, 3]

二、檢測數組

//判斷一個對象是不是數組
var arr = [1,8,9];

方法一  instanceof是Java、php的一個二元操作符(運算符),和==,>,<是同一類東西,它的作用是判斷其左邊對象是否為其右邊類的實例,返回boolean類型的數據
 
  if(arr instanceof Array){}

 方法二   prototype 屬性使您有能力向對象添加屬性和方法

  if(Object.prototype.toString.call(arr) == ‘[object Array]‘)}{}
方法三 這種是最常用的方法

  if(Array.isArray(arr)){} 方法四 constructor 屬性返回對創建此對象的數組函數的引用,Construction代表類中的一個構造方法,這個方法封裝了類的定義   if(arr.constructor == Array){}

數組方法

所有對象都有toString() toLocaleString() valueOf() 方法,數組也對其進行了重寫。

① isArray()

Array.isArray(obj) 檢測對象是否 Array(數組) ,是則返回true,否則為false。

② from()

Array.from(arrayLike, mapFn, thisArg)
該方法從一個類似數組或可叠代對象創建一個新的數組實例。參數 arrayLike 是想要轉換成真實數組的類數組對象或可遍歷對象。mapFn是可選參數,如果指定了該參數,則最後生成的數組會經過該函數的加工處理後再返回。thisArg是可選參數,為執行 mapFn 函數時 this的值。

所謂類似數組的對象,本質特征只有一點,即必須有length屬性。因此,任何有length屬性的對象,都可以通過Array.from方法轉為數組。見下面的小例子:

var  arrayLike = {
    0: ‘a‘,
    1: ‘b‘,
    2: ‘c‘,
    length: 3
 }
var  arrayLike2 = {length: 3}
var  str = ‘abcd‘

var  newArray = Array.from(arrayLike) //[‘a‘, ‘b‘, ‘c‘]
var  newArray2 = Array.from(arrayLike2) // [undefined, undefined, undefined]
var  newArray3 = Array.from(str) // [‘a‘, ‘b‘, ‘c‘, ‘d‘]
console.log(newArray);
console.log(newArray2);
console.log(newArray3);

③ of();

Array.of(item,.....) 該方法用於創建數組實例。該方法用於替代 Array() 或 new Array()。Array.of() 和 Array 構造函數之間的區別在於處理整數參數:Array.of(7) 創建一個具有單個元素 7 的數組,而 Array(7) 創建一個包含 7 個 undefined 元素的數組。
eg:
var a1 = Array(7);
var a2 = Array(1,2,12);
var a3 = Array.of(7);
var a4 =Array.of(1,2,12);
console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);

數組實例方法

數組的轉換

① 數組轉換成字符串 Array.join(separator);.

把數組轉換成字符串,先把數組中的每個元素轉換成字符串,然後再用 separator 分隔符把它們鏈接在一起,separator 分隔符默認是逗號 “,”,要想做到無間隔鏈接,可以使用空字符串作為 separator:見下面的例子:

var arr = [1,2,3,4,5]
//默認符號 ","
var a1 = arr.join();//1,2,3,4,5
//自定義符號“ | ”
var a2=arr.join(‘|‘) //"1|2|3|4|5"
// 沒有符號,用空字符串
var a3=arr.join("") //12345
console.log(a1);
console.log(a2);
console.log(a3);

② 字符串轉換成數組 a.split();

var arr = [1,2,3,4,5]
//arr 轉換成字符串並賦值給 a
var a = arr.join();
// 再把 a 轉換成 數組,並用“ , ”隔開
var b = a.split(",");
console.log(b);

棧方法 (後進先出 push pop ) 數組最後一項的索引是length-1.因此下一個新項的位置是length

Array.push(item......) 接收任意數量的參數,逐個添加到數組末尾,並返回修改後的長度。

var arr = ["Orange","Apple"];
var a = arr.push("banana","Mango");
console.log(a);//返回數值長度為  4
Array.pop() 移除數組末尾最後一項,減少length值,並返回移除的項
var arr = ["Orange","Apple"];
var a = arr.pop();
console.log(a);// 移除最後一個元素 返回最後一個值Apple
可以像刪除對象屬性一樣使用 delete 運算符來刪除數組元素。
對一個數組元素使用 delete 不會修改數組的 length 屬性,也不會將元素從高索引處移下來填充已刪除屬性留下的空白。
a = [1,2,3]; 
delete a[1];   // a在索引1的位置不再有元素
1 in a         // => false: 數組索引1並未在數組中定義
a.length       // => 3: delete操作並不影響數組長度

隊列方法 (先進先出 unshift shift)

Array.unshift(item...);將一個或多個新元素添加到數組開始,數組中的元素自動後移,返回數組新長度。
var arr = ["Orange","Apple"];
var a = arr.unshift("banana");
console.log(a);//   返回新數組的長度為  3
Array.shifit();移除最前一個元素,減少length值,返回該元素值,數組中元素自動前移.如果這個數組是空的,它會返回undefined。shift 通常比 pop 慢的多。
var arr = ["Orange","Apple","banana"];
var arr1 = [];
var a1 = arr1.shift();
var a2 = arr.shift();
console.log(a1);//  空數組返回undefined
console.log(a2);//   移除第一個元素,並返回該元素  Orange

重排序方法(reverse, sort)

1、Array.reverse() 顛倒數組的順序

var arr = ["Orange","Apple","banana"];
var a = arr.reverse();
console.log(a); //(3) ["banana", "Apple", "Orange"]

2、Array.sort() 給數組排序, 默認升序。 sort 默認會將數組內容視為字符串來排序,所以對數字排序時默認的排序規則會錯的離譜,看下面的例子是怎麽錯的:

var arr = [2,4,10,6,8,20];
var a = arr.sort();
console.log(a); 
//(6) [10, 2, 20, 4, 6, 8]

解決這種按照字符串來排序的方法就是給sort傳入一個比較函數作為參數,進行自定義排序

 1、 比較函數接收兩個參數,如果第一個參數位於第二個參數之前返回一個負數,相等為0,第一個參數位於第二個之後返回一個正數。

從小到大排序(大到小順序相反)
function campare(value1,value2){
if(value1<value2){
  return -1;
}else if(value1>value2){
  return 1;
}else{
  return 0;
  }
}
arr.sort(campare)
//(6) [2, 4, 6, 8, 10, 20]

2、排序對象是數值類型或者value of()方法會返回數值類型的對象類型可以采取下面方法

function campare(val1,val2){
    return val1-val2;
}
arr.sort(campare)
//(6) [2, 4, 6, 8, 10, 20]

var arr = [2,4,10,6,8,20];
var a = arr.sort(function(a,b){
    return a-b;
});
console.log(a);

操作方法 ( concat, slice, splice, copyWithin, fill )

Array.concat(arr);該方法產生一份 arr的潛復制,並將多個數組(也可以是字符串,或者是數組和字符串的混合)附加在其後連接為一個數組,返回連接好的新的數組。
var a = [1,2,3];
var b = ["string"];
var arr = a.concat(b);
console.log(arr);
//(4) [1, 2, 3, "string"]
Array.slice(start,end) 截取數組 ,如果沒有 end ,則輸出 start
之後的所有元素,這裏遵循數學上的思想(左閉右開),意思就是不包括 end --------[ ) 截取end-start個元素
var a = [1,2,3];
var b = ["string"];
var arr = a.concat(b);
var arr1 = arr.slice(1, 3);
console.log(arr1);
// (2) [2, 3]
Array.splice(start,deleteCount,item...),該方法從 數組 中移除一個或多個元素,並將新的 item插入至移除元素的開始位置, 參數 start 是移除元素的開始位置,deleteCount 是要移除的元素的個數,item是要被插入的元素。它返回一個包含被移除元素的數組。

① 添加新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    //在第三個元素的位置插入新的元素
    fruits.splice(2,0,"Lemon","Kiwi");
    console.log(fruits);
//(6) ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

② 刪除某個元素並添加新的元素

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
   //先移除從第二個位置開始後面的兩個元素,並把新的元素添加到第二個位置
    fruits.splice(1,2,"Lemon")
    console.log(fruits);
// ["Banana", "Lemon", "Mango"]
Array.copyWithin(target,start,end)
target必須有的,復制到指定目標的索引位置(開始替換數據的位置),start可選,元素復制的起始位置,end 停止復制的索引位置,默認為 Array.length 返回值是數組
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
    //復制數組的前面兩個元素到第三和第四個位置上,這裏也遵循左閉右開的思想,也就是 strat=0,end=2 這樣理解  [0,2)
      fruits.copyWithin(2, 0, 2);
        console.log(fruits);
//(6) ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]


Array.fill(value,start,end)
fill()方法用於將一個固定值替換數組的元素,value是必選的,start可選,開始填充的位置,end可選,表示停止填充位置(默認為Array.length),返回的是數組
var  a = [1,2,3,4,6];
   console.log(a.fill(5,2,4) );
//[1, 2, 5, 5, 6]

位置方法 (indexOf, lastIndexOf, includes)

Array.indexOf(item,start)
item是必須要查找的元素,start 可選,規定在字符串中開始檢索的位置,合法取值為 0 到 array.length-1 ,如果沒有這個值,則從首字符開始查找,返回值為Number
var arr = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
var a =  arr.indexOf("Orange");
 console.log(a);//返回值為  1
//1

Array.lastIndexOf(item,start)
和indexOf 類似 唯一區別就是他是倒著數,strat的默認值為 array.length-1 ,註意該方
法在比較查找項與數組中每一項時,會使用全等操作符(===),也就是要求查找的項必須嚴格相等
   var arr = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
        var a =  arr.lastIndexOf("Kiwi");
         console.log(a);//返回值為  4
// 4

Array.includes(searchElement, fromIndex)
includes() 方法用來判斷一個數組是否包含一個指定的值,如果是返回 true,否則false.
fromIndex可選。從該索引處開始查找 searchElement。如果為負值,則按升序從 array.length +fromIndex 的索引開始搜索。默認為 0。
 var  arr =  ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
 var  a = arr.includes("Apple",-2);//如果為fromIndex為負值,則數組的總長度  arr.length + fromIndex   就為當前我們要從這個位置開始檢索的位置
console.log(a);//   返回  false

叠代方法 (every, some, filter, forEach, map, find, findIndex, entries, keys, values)

Array.every(function(currentValue,index,arr), thisValue)
這個方法用於檢索數組中所有的元素是否滿足某個條件,若滿足,則返回true ,剩余元素不用繼續檢測,否則為false
           var  arr = [18,16,17,20];
            var a = arr.every(function(item){
                return  item > 18;
            });
            console.log(a);//返回false
Array.some(function(currentValue,index,arr), thisValue)
這個方法用於檢索數組中的元素是否滿足某個條件,若有一個滿足,則返回true ,剩余元素不用繼續檢測,都不滿足返回false
           var  arr = [18,16,17,20];
            var a = arr.some(function(item){
                return  item > 18;
            });
            console.log(a);//返回 true
Array.filter(function(currentValue,index,arr), thisValue)
對數組中的每一項運行給定函數,返回該函數會返回 true 的項組成的數組
           var  arr = [18,16,17,20];
            var a = arr.filter(function(item){
                return  item > 17;
            });
            console.log(a);//返回 一個檢索過後的新數組

Array.forEach(function(currentValue, index, arr), thisValue)

對數組中的每一項運行給定函數,這個方法的返回值為undefined;

array.map(function(currentValue,index,arr), thisValue)
對數組中的每一項運行給定函數,返回每次函數調用組成的數組
           var  arr = [4,16,25,36];
            var a = arr.map(function(item){
                return  Math.sqrt(item);
            });
            console.log(a);//返回數組元素的平方根
Array.find(function(currentValue, index, arr),thisValue)
該方法對數組所有成員依次執行函數,直到找出第一個返回值為 true 的成員,然後返回該成員。如果沒有符合條件的成員,則返回 undefined
           var  arr = [4,16,25,36];
            var a = arr.find(function(item){
                return  item == 25;
            });
            console.log(a);//返回查找到的該成員  25 
Array.findIndex(function(currentValue, index, arr), thisValue)
該方法與 Arr.find() 類似,對數組中的成員依次執行 函數,直至找到第一個返回值為 true 的成員,然後返回該成員的索引。如果沒有符合條件的成員,則返回 -1
           var  arr = [4,16,25,36];
            var a = arr.findIndex(function(item){
                return  item == 25;
            });
            console.log(a);//返回查找到的該成員的索引值  2
            
Array.entries()

Array.keys()

Array.values()

這三個方法都返回一個新的Array Iterator對象,可以用for...of循環進行遍歷,區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷

for...in循環是為了遍歷對象而設計的,並不適合遍歷數組,切記!切記!切記!重要的事情說三遍!!!

歸並方法(reduce, reduceRight)

Array.reduce(function(total, currentValue, currentIndex, arr),
initialValue)
reduce() 方法接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值
            var  arr = [12,20,10];
            var a = arr.reduce(function(total,item){
                return  total+item;
            });
            console.log(a);//返回和的結果為  42
reduceRight() 方法的功能和 reduce() 功能是一樣的,不同的是 reduceRight()
從數組的末尾向前將數組中的數組項做累加
            var  arr = [12,20,10];
            var a = arr.reduceRight(function(total,item){
                return  total+item;
            });
            console.log(a);//返回和的結果為  42

數組去重方法:

1.

2.

3.

4.


JS數組攻略