javascript引用類型之Array 類型

時間  2019-12-05
標籤 javascript 引用 類型 array 欄目 JavaScript 简体版
原文   原文鏈接
數組在javascript中是很經常使用的數據類型

建立數組的幾種方式

  1. 使用new操做符來建立數組javascript

    var arr = new Array() // []建立了一個長度爲0的空數組
var arr1 = new Array(2) // [empty × 2]建立了一個長度爲2的空數組
var arr2 = new Array('a', 'b', 'c') // ["a", "b", "c"]建立了一個長度爲3的數組 
##new操做符是能夠省略的## 
var arr = Array()

  2. 使用數組字面【數組字面量由一對包含數組項的方括號表示，多個數組項之間以逗號隔開】表示法來建立數組前端

    var arr = ['a', 'b', 'c'] // ["a", "b", "c"]
var arr1 = [] // []

  3. 讀取和設置數組的值【要使用方括號並提供相應值的基於 0 的數字索引】java

    console.log(arr[0]) // 讀取arr數組的第1項的值，值爲a
arr[1] = 'b1' // 修改arr數組的第2項的值爲b1
arr[3] = 'd' // 給arr數組新增第4項，值爲d

  4. 數組的length屬性，返回數組的項數。經過設置這個屬性，能夠從數組的末尾移除項或向數組中添加新項數組

    console.log(arr.length) // 4
console.log(arr) // ["a", "b1", "c", "d"]
arr.length = 3
console.log(arr) // ["a", "b1", "c"]
arr.length = 4
console.log(arr) // ["a", "b1", "c", empty]
console.log(arr[3]) // undefined 由於這個數組不存在位置3
arr[arr.length] = 'd' // 利用 length 屬性也能夠方便地在數組末尾添加新項
console.log(arr) // ["a", "b1", "c", empty, "d"]
arr[99] = "unknown"
console.log(arr) // ["a", "b", "c", empty, "d", empty × 94, "unknown"]

檢測數組 肯定某個對象是否是數組

  1. 對於一個網頁，或者【一個全局做用域】而言，使用 instanceof 操做符就能獲得滿意的結果數據結構

    if (arr instanceof Array) {
  console.log('abc')
}

  2. 若是網頁中包含多個框架【若有多個iframe】，那實際上就存在兩個以上不一樣的全局執行環境，從而存在兩個以上不一樣版本的 Array
    構造函數。若是你從一個框架向另外一個框架傳入一個數組，那麼傳入的數組與在第二個框架中原生建立的數組分別具備各自不一樣的構造函數。這種狀況下就須要使用Array.isArray()方法。這個方法的目的是最終肯定某個值究竟是不是數組，而無論它是在哪一個全局執行環境中建立的app

    var iframe = document.createElement('iframe');
document.body.appendChild(iframe) // 產生第二個全局執行環境
xArray = window.frames[window.frames.length-1].Array; // 第二個全局執行環境的構造函數 ƒ Array() { [native code] }
Array; // 第一個全局環境中的構造函數ƒ Array() { [native code] }
window.frames[0].Array === Array; // false

var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false
Array.isArray(arr); // true

轉換方法

全部對象都具備 toLocaleString()、toString()和 valueOf()方法 toLocaleString()方法;
數組的 toString()方法會返回由數組中每一個值的字符串形式拼接而成的一個以逗號分隔的字符串;
valueOf()返回的仍是數組;
因爲 alert()要接收字符串參數，因此它會在後臺調用 toString()方法，由此會獲得與直接調用 toString()方法相同的結果;
toLocaleString()方法框架

```
var arr = ['a', 'b', 'c'];
console.log(arr.toString()); // a,b,c
alert(arr.toString()); // a,b,c
console.log(arr.valueOf()); // ["a", "b", "c"]
alert(arr.valueOf()); // a,b,c
console.log(arr); // ["a", "b", "c"]
alert(arr); // a,b,c 
```

  1. join()方法，則可使用不一樣的分隔符來構建這個字符串函數

    若是數組中的某一項的值是 null 或者 undefined，那麼該值在 join()、
    toLocaleString()、toString()和 valueOf()方法返回的結果中以空字符串表示 
    var arr = ['a', 'b', 'c']
arr.join(','); // "a,b,c"
arr.join(); // "a,b,c" 不傳參數會默認以,分割
arr.join('||'); // "a||b||c"

棧方法

ECMAScript 數組也提供了一種讓數組的行爲相似於其餘數據結構的方法。具體說來，數組能夠表現得就像棧同樣，後者是一種能夠限制插入和刪除項的數據結構。棧是一種 LIFO（Last-In-First-Out，後進先出）的數據結構，也就是最新添加的項最先被移除。而棧中項的插入（叫作推入）和移除（叫作彈出），只發生在一個位置——棧的頂部。ECMAScript 爲數組專門提供了 push()和 pop()方法，以便實現相似棧的行爲。spa

```
var arr = []
arr.push('a', 'b'); // 返回修改後數組的長度  2
arr.push('c'); // 返回修改後數組的長度  3
arr.pop(); // 返回移除的數組的最後一項 'c'
arr.length; // 2
```

隊列方法

棧數據結構的訪問規則是 LIFO（後進先出），而隊列數據結構的訪問規則是 FIFO（First-In-First-Out，先進先出）。隊列在列表的末端添加項，從列表的前端移除項。因爲 push()是向數組末端添加項的方法，所以要模擬隊列只需一個從數組前端取得項的方法。實現這一操做的數組方法就是 shift()，它可以移除數組中的第一個項並返回該項，同時將數組長度減 1。結合使用 shift()和 push()方法，能夠像使用隊列同樣使用數組。code

var arr = ['a', 'b', 'c']
arr.push('d', 'e'); // 返回數組的長度5
arr.shift(); // 返回數組的第一項，並將數組長度減1 'a'
arr.length; // 4

ECMAScript 還爲數組提供了一個 unshift()方法。顧名思義，unshift()與 shift()的用途相反：它能在數組前端添加任意個項並返回新數組的長度。所以，同時使用 unshift()和 pop()方法，能夠從相反的方向來模擬隊列，即在數組的前端添加項，從數組末端移除項

var arr = []
arr.unshift('a', 'b', 'c'); // 3
arr.unshift('d'); // 4
console.log(arr); // ["d", "a", "b", "c"]
arr.pop(); // 'c'

重排序方法

  1. 數組中已經存在兩個能夠直接用來重排序的方法：reverse()和 sort()

    var arr = [1, 2, 3]
arr.reverse(); // [3, 2, 1]
console.log(arr) // reverse()方法會改變原數組 [3, 2, 1]

  2. sort()方法

    sort()方法按升序排列數組項——即最小的值位於最前面，最大的值排在最後面。爲了實現排序，sort()方法會調用每一個數組項的 toString()轉型方法，而後比較獲得的字符串，以肯定如何排序。即便數組中的每一項都是數值，sort()方法比較的也是字符串。 
    var arr = [0, 1, 5, 10, 15]
arr.sort(); // [0, 1, 10, 15, 5]

    這裏有一個疑問？不是說sort()方法是按升序排列數組項麼，怎麼獲得的結果不是咱們想要的結果呢？？？？ 由於數值 5 雖然小於 10，但在進行字符串比較時，"10"則位於"5"的前面，因而數組的順序就被修改了。
    爲了解決這個問題。所以 sort()方法能夠接收一個比較函數做爲參數，以便咱們指定哪一個值位於哪一個值的前面。比較函數接收兩個參數

    // 數組項升序排列
function compare(value1, value2) { 
 if (value1 < value2) { 
 return -1; 
 } else if (value1 > value2) { 
 return 1; 
 } else { 
 return 0; 
 } 
}
var values = [0, 1, 5, 10, 15]
values.sort(compare); // [0, 1, 5, 10, 15]
// 數組項降序排列，只要交換比較函數返回的值便可
function compare(value1, value2) { 
 if (value1 < value2) { 
 return 1; 
 } else if (value1 > value2) { 
 return -1; 
 } else { 
 return 0; 
 } 
}
var values = [0, 1, 5, 10, 15]; 
values.sort(compare); // 15,10,5,1,0

    對於數值類型或者其 valueOf()方法會返回數值類型的對象類型，可使用一個更簡單的比較函數。這個函數只要用第二個值減第一個值便可。

    function compare(value1, value2){ 
 return value2 - value1; 
}
var arr = [0, 5,10 ,2,3]
arr.sort(compare); // [10, 5, 3, 2, 0]
var arr = ['0', '5','10' ,'2','3']
arr.sort(compare); //  ["10", "5", "3", "2", "0"]

    對象數組進行排序

    function fuc(perpertyName)  {
  return function (object1, object2) {
    var value1 = object1[perpertyName]
    var value2 = object2[perpertyName]
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  };
}
let arr = [{id: 1, name: 2}, {id: 4, name: 1}, {id: 2, name: 3}]
let newArr = arr.sort(fuc('name'))
console.log(newArr)

clipboard.png

操做方法

  1. concat()方法
    concat()會返回一個新數組，concat()不會改變原數組,

    var arr = ['a', 'b', 'c']
var arr0 = arr.concat(); // 這裏concat不傳參數，它只是複製當前數組並返回副本
console.log(arr === arr0); // false
arr.concat('d'); // ["a", "b", "c", "d"]
console.log(arr); // ["a", "b", "c"]
var arr1 = arr.concat('d');
console.log(arr1); // ["a", "b", "c", "d"]
arr1.concat('f', 'g', arr); // ["a", "b", "c", "d", "f", "g", "a", "b", "c"]

  2. slice()方法
    slice()，它可以基於當前數組中的一或多個項建立一個新數組。slice()方法能夠接受一或兩個參數，即要返回項的起始和結束位置。在只有一個參數的狀況下，slice()方法返回從該參數指定位置開始到當前數組末尾的全部項。若是有兩個參數，該方法返回起始和結束位置之間的項——但不包括結束位置的項。注意，slice()方法不會影響原始數組。

    var arr = ['a', 'b', 'c']
var arr1 = arr.slice(1)
console.log(arr); // ["a", "b", "c"]
console.log(arr1); // ["b", "c"]
var arr2 = arr.slice(1, 2)
console.log(arr2) // ["b"]
var arr3 = arr.slice(1, 5)
console.log(arr3) // ["b", "c"]
//若是 slice()方法的參數中有一個負數，則用數組長度加上該數來肯定相應的位置,若是結束位置小於起始位置，則返回空數組。

  3. splice()方法
    splice()方法始終都會返回一個數組，該數組中包含從原始數組中刪除的項（若是沒有刪除任何項，則返回一個空數組） splice()方法會改變原數組

    // 刪除 能夠刪除任意數量的項，只需指定 2 個參數：要刪除的第一項的位置和要刪除的項數
var arr = ['a', 'b', 'c']
arr.splice(0, 2); // 返回刪除的項組成的數組["a", "b"]
console.log(arr) // ["c"] 此處看到原數組已經 被改變了
// 插入 能夠向指定位置插入任意數量的項，只需提供 3 個參數：起始位置、0（要刪除的項數）和要插入的項。若是要插入多個項，能夠再傳入第4、第五，以致任意多個項
var arr = ['a', 'b', 'c']
arr.splice(1, 0 , 'a1', 'a2', 'a3') // []
console.log(arr) // ["a", "a1", "a2", "a3", "b", "c"]
// 替換 能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數沒必要與刪除的項數相等。
var arr = ['a', 'b', 'c']
arr.splice(1, 2, 'b1', 'c1') // ["b", "c"]
console.log(arr); // ["a", "b1", "c1"]

位置方法

indexOf()和 lastIndexOf()。這兩個方法都接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的狀況下返回-1

  1. indexOf()方法從數組的開頭（位置 0）開始向後查找,indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

    var numbers = [1,2,3,4,5,4,3,2,1];
numbers.indexOf(4) // 4在Numbers數組的3位置
numbers.indexOf(4, 4) // 返回5 ，查找4在numbers數組中首次出現的位置，查找的起點位置是4
var person = { name: "Nicholas" }; 
var people = [{ name: "Nicholas" }]; 
var morePeople = [person];
console.log(people.indexOf(person)); // -1
console.log(morePeople.indexOf(person)); // 0

  2. lastIndexOf()方法則從數組的末尾開始向前查找,lastIndexOf() 方法可返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。

    var numbers = [1,2,3,4,5,4,3,2,1];
numbers.lastIndexOf(4); // 5
numbers.lastIndexOf(4, 4) // 返回3 ，查找4在numbers數組中最後一次出現的位置，查找的起點位置是4，從後向前找

迭代方法

every()方法、some()方法、filter()方法、forEach()方法、map()方法。以上方法都不會修改數組中的包含的值

  1. every()方法 對數組中的每一項運行給定函數，若是該函數對每一項都返回 true，則返回 true

    var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){ 
 return (item > 2); 
});
console.log(everyResult) // false

  2. some()方法 對數組中的每一項運行給定函數，若是該函數對任一項返回 true，則返回 true

    var numbers = [1,2,3,4,5,4,3,2,1]; 
var someResult = numbers.some(function(item, index, array){ 
 return (item > 2); 
});
console.log(someResult) // true

  3. filter()方法 對數組中的每一項運行給定函數，返回該函數會返回 true 的項組成的數組

    var numbers = [1,2,3,4,5,4,3,2,1]; 
var filterResult = numbers.filter(function(item, index, array){ 
 return (item > 2); 
});
console.log(filterResult) // [3, 4, 5, 4, 3]

  4. map()方法 對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組

    var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){ 
 return item * 2; 
});
console.log(mapResult) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

  5. forEach()方法 對數組中的每一項運行給定函數。這個方法沒有返回值，本質上與使用 for 循環迭代數組同樣

    var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){ 
 //執行某些操做 
});

歸併方法

這兩個方法都會迭代數組的全部項，而後構建一個最終返回的值。其中，reduce()方法從數組的第一項開始，逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始，向前遍歷到第一項。這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）做爲歸併基礎的初始值,傳給reduce()和reduceRight()的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會做爲第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，所以第一個參數是數組的第一項，第二個參數就是數組的第二項

var values = [1,2,3,4,5]; 
var sum = values.reduce(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
console.log(sum) // 15 
var sum1 = values.reduceRight(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
console.log(sum1) // 15
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程