JavaScript物件導向程式設計——Array型別

weixin_33763244發表於2018-08-20
JavaScript物件程式設計型別

概述

一維陣列

陣列是一個有序的資料集合，可以通過陣列名稱和索引進行訪問。JavaScript中並沒有明確的陣列資料型別。

二維陣列

陣列是可以巢狀的，這就意味著一個陣列可以作為一個袁旭被包含在另一個陣列裡面。利用JavaScript這個特點，建立二維陣列，即陣列的陣列。

陣列的常見方法

檢測陣列

如何確定當前是一個陣列，JavaScrpt提供了幾種方式；
1.typeof無法檢測陣列物件：typeof[]返回object
2.instanceof：[]instanceof Array返回true/false
3.Object.prototype.toString.call（[]）：返回[objcet Array]
4.Array.prototype.isPrototypeOf（[]）：返回true/false
5.ES5中新方法：Array.isArray（[]）：返回true/false

var arr = [1,2,3,4,5];

console.log(arr instanceof Array);// true
/*
    Object.prototype.toString.call()方法
    * 作用 - 用於判斷當前物件的(資料)型別
    * 結果 - [object Array]
    * 特點 - 可以準確判斷出當前變數的型別
 */
console.log(Object.prototype.toString.call(arr));

console.log(typeof null);// object
// console.log(null instanceof Null);// 報錯
console.log(null instanceof Object);// false
console.log(Object.prototype.toString.call(null));
// Object.prototype.isPrototypeOf()方法 - 判斷指定型別是否出現在當前物件的原型鏈中
console.log(Array.prototype.isPrototypeOf(arr));// true

console.log(Array.isArray(arr));// true

轉換方法

JavaScript中提供了兩種方法；
1.toString（）：把陣列轉換為字串，並且返回結果。
2.valueOf（）：返回陣列物件的原始值。

var arr = [1,2,3,4,5];
/*
    利用toString()方法將陣列轉換為字串
    * 結果 - 多個陣列元素被逗號進行分隔組成的字串
 */
console.log(arr.toString());// 1,2,3,4,5

console.log(arr.valueOf());// [ 1, 2, 3, 4, 5 ]

var obj = {
    name : '張無忌'
}
console.log(obj.valueOf());// true

排序方法

JavaScript提供了兩種方法，用於陣列的排序。
1.reverse（）：反轉陣列的元素順序。
2.sort（）：對陣列的元素進行排序。
要注意reverse（）和sort（）方法的返回值是經過排序之後的陣列。

var arr = [3,1,2,3,4,5,10];

// console.log(arr.reverse());// [ 5, 4, 3, 2, 1 ]
/*
    Array.sort()方法
    * 作用 - 對陣列中的元素進行排序
    * 注意
      * 並不是從小到達的排序
      * 影響原有陣列元素的順序
 */
// var result = arr.sort();
// console.log(result);
// console.log(arr);

var result = arr.sort(function(a,b){
    /*if (a < b) {
        return 1;
    }*/
    if (a > b) {
        return 1;
    }
})
console.log(arr);
console.log(result);

連線方法

連線方法一般用於多個陣列之間的連線操作，在JavaScript中提供了：
concat（）方法，連線兩個或更多的陣列，並返回結果。

var arr = [1,2,3,4,5];

console.log(arr.concat(6));
console.log(arr.concat([7,8,9]));

操作方法

操作方法就是用於陣列的刪除、插入和替換。在JavaScript中提供了兩種方法。
1.slice（）：選取陣列的一部分，並返回一個新陣列。
2.splice（）：從陣列中你那個新增或刪除元素。

var arr = [1,2,3,4,5];
/*
    splice(start, deleteCount)方法
    * 作用 - 用於刪除當前陣列中指定位置指定個數的元素
    * 引數
      * start - 表示刪除的開始位置
      * deleteCount - 表示刪除的個數
    * 返回值 - 將刪除的元素組成的新陣列進行返回
 */
// var result = arr.splice(0, 5);
// console.log(result);
// console.log(arr);

/*
    splice(start, deleteCount, item1, item2, ...)方法
    * 作用 - 向指定陣列的指定位置新增元素
    * 引數
      * start - 表示刪除的開始位置
      * deleteCount - 表示刪除的個數
      * item1, item2, ... - 表示向陣列新增的元素
    * 返回值 - 將刪除的元素組成的新陣列進行返回
 */
// var result = arr.splice(0, 0, 6,7,8);
// console.log(result);
// console.log(arr);

// var result = arr.splice(0, 3, 6,7,8);
// console.log(result);
// console.log(arr);

/*
    slice()方法
    * 作用 - 擷取指定陣列中的元素
    * 引數
      * begin - 表示開始擷取的位置(從 0 開始)
      * end - 表示結束擷取的位置(擷取最後一個位置的下一個位置)
    * 返回值 - 返回擷取的元素組成的新陣列
 */
var result = arr.slice(2,3);
console.log(result);

位置方法

位置方法用於獲取陣列中指定元素的索引值,在JavaScript中提供了兩種方法。
1.indexOf（）搜尋陣列中的元素，並返回他所在的位置。
2.lastlndexOf（）返回一個指定的字串值最後出現的位置，在一個字串中的指定位置從後向前搜尋。

var arr = ['張無忌','周芷若','張無忌','趙敏','小昭'];
/*
    indexOf()和lastIndexOf()方法
    * 用於檢索陣列中是否包含指定元素內容 -> 返回元素所在的位置
      * indexOf() - 從左至右的順序進行檢索
      * lastIndexOf() - 從右至左的順序進行檢索
    * 返回第一個匹配元素的位置資訊
    * 如果檢索的元素並不在指定的陣列中時 -> 結果為 -1
 */
console.log(arr.indexOf('張無忌'));// 0
console.log(arr.lastIndexOf('張無忌'));// 2
console.log(arr.indexOf('滅絕師太'));//

迭代與歸併方法

迭代方法

JavaScript提供瞭如下方法，用於陣列的迭代遍歷：
1.every（）：判斷陣列中每個元素是否都滿足fun函式定義的條件。只有滿足才返回true，否則返回false。
2.filter（）：專門用於篩選出陣列中符合fun函式判斷條件的元素組成的心陣列。
3.forEach（）：專門用於對原陣列中每個元素執行相同的fun函式物件規定的操作。
4.map（）：專門用於基於袁術組建立新陣列物件。
5.some（）：判斷陣列中是否包含滿足fun含糊是定義的條件的元素，只要包含就返回true，否則返回false。

var arr = ['張無忌','周芷若','趙敏','小昭'];
/*
    Array.prototype.forEach()方法
    * 作用 - 用於遍歷指定陣列
    * 引數
      * callback - 表示回撥函式
        * currentValue - 表示遍歷陣列得到每個元素
        * index - 表示遍歷陣列得到每個元素對應的索引值
        * array - 表示遍歷的陣列
    *
 */
arr.forEach(function(currentValue, index, array){
    console.log(array);
});

/* 為Array型別新增forEach()方法
Object.defineProperty(Array.prototype, 'forEach', {
    value : function(callback){
        // 假設得到當前的陣列
        for (var i=0; i<arr.length; i++) {
            callback(i, arr[i], arr);
        }
    }
});
*/

歸併方法

歸併方法用於陣列的迭代歸併，JavaScript中提供了兩種方式
1.reduce（）將陣列從左向右迭代。
2.reduceRight（）將陣列從右向左迭代.

var arr = [1,2,3,4,5];

arr.reduce(function(accumulator, currentValue, currentIndex, array){
    console.log(accumulator)
    return accumulator + currentValue;
});

相關文章