javaScript數組方法分享（上）

所謂數組，是無序的元素序列。 若將有限個類型相同的變量的集合命名，那麼這個名稱爲數組名。組成數組的各個變量稱爲數組的份量，也稱爲數組的元素，有時也稱爲下標變量。用於區分數組的各個元素的數字編號稱爲下標。數組是在程序設計中，爲了處理方便， 把具備相同類型的若干元素按無序的形式組織起來的一種形式。 這些無序排列的同類數據元素的集合稱爲數組。 JavaScript是弱類型的語言,因此數組元素數據類型可不一樣。

6.4 建立數組的方法與屬性

var arrA = new Array(); //實例化數組對象
	var arrB = new Array(10); //實例化數組對象 而且聲明長度;
	var arrC = new Array(1,2,3,4,5,6); //[1,2,3,4,5,6] 實例化對象穿參做爲
	var arrD = []; //語法糖 字面量建立數組
	var arrE = [1,2,3,4,5];
	var len = arrE.length; //5 數組內可窮舉元素總數 簡稱:數組長度

6.5 數組方法

6.5.1 讀寫方法

下標指引數組元素值 arr[index] 下標從0開始 第一位下標爲0

var arr = ['張三','李四','王五','趙六'];
	//根據數組下標 讀取對應位元素 值
	console.log(arr[0]); //'張三'
	console.log(arr[1]); //'李四'

案例 數組映射優化代碼性能

咱們學過了 switch語句進行 條件分支，下面咱們經過數組映射優化一下

var title = document.querySelector('h1'); //h1節點對象
    var txt = title.innerText; //h1節點文本內容
    var dayText = ''; //星期幾 對應的文本
    var date = new Date();  //日期對象
    var day = date.getDay(); //得到 星期幾 0 - 6

    switch (day) {
        case 0:
            dayText = '日';
            break;
        case 1:
            dayText = '一';
            break;
        case 2:
            dayText = '二';
            break;
        case 3:
            dayText = '三';
            break;
        case 4:
            dayText = '四';
            break;
        case 5:
            dayText = '五';
            break;
        case 6:
            dayText = '六';
            break;
        default:
            break;
    }
     title.innerText = txt.substr(0,5)+ dayText;

代碼過於冗餘 而且switch條件分支若是過多，代碼就很是不優雅而且性能低下；

var title = document.querySelector('h1'); //h1節點對象
    var txt = title.innerText; //h1節點文本內容
    var dayText = ''; //星期幾 對應的文本
    var date = new Date();  //日期對象
    var day = date.getDay(); //得到 星期幾 0 - 6

    //用空間換取時間
    var dayArr = ['天','一','二','三','四','五','六'];
    //用day作下標 指引元素
    dayText = dayArr[day];
    
    title.innerText = txt.substr(0,5)+ dayText;

---

6.5.2 數組方法

push() push()方法可向數組的末尾添加一個或多個元素，並返回新的長度。

arrayObject.push(newelement1,newelement2,....,newelementX)

例: push() 6.5.2a

var arr1 = [1,2,3];
	var arr2 = ['a','b','c'];
	var length = arr1.push(4); // 長度 4
    
    //把arr2 中的每一項 循環添加到arr1中
    for(var i = 0,item; item = arr2[i++];){
		arr1.push(item);
	}

例: push () 6.5.2b

//6.5.2a 循環push的高級寫法 實現concat
	var arr1 = [1,2,3,4];
	var arr2 = ['a','b','c'];
	function concat(a,b){
		var arr = a;
		arr.push.apply(arr,b);
		return arr;
	}
	var arr = concat(arr1,arr2);

---

unshift unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。

arrayObject.unshift(newelement1,newelement2,....,newelementX)

//6.5.2c
	var arr1 = [1,2,3,4,5];
	var arr2 = ['a','b','c','d'];
	arr1.unshift('kyogre');

//6.5.2d 把 arr2每一項 添加到arr1 前
	var arr1 = [1,2,3,4,5];
	var arr2 = ['a','b','c','d'];
	function unConcat(a,b){
		var arr = a;
		arr.unshift.apply(arr,b);
		return arr;
	}
	unConcat(arr1,arr2);

---

pop pop() 方法用於刪除並返回數組的最後一個元素。

arrayObject.pop()

//6.5.2e
	var arr1 = [1,2,3,4,5];
	var arr2 = ['a','b','c','d'];
	arr1.pop(); //5
	arr2.pop(); //'d'

---

shift shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。

arrayObject.shift()

//6.5.2f
	var arr1 = [1,2,3,4,5];
	var arr2 = ['a','b','c','d'];
	arr1.shift(); //1
	arr2.shift(); //'a'

---

reverse reverse() 方法用於顛倒數組中元素的順序。

arrayObject.reverse()

//6.5.2g
	var arr1 = [1,2,3,4,5];
	arr1.reverse();

---

concat concat() 方法用於鏈接兩個或多個數組。 該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。

arrayObject.concat(arrayX,arrayX,......,arrayX)

//6.5.2h
	var arr1 = [1,2,3,4,5];
	var arr2 = ['a','b','c'];
	
	arr1.concat(arr2);

---

slice slice() 方法可從已有的數組中返回選定的元素。 該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()。

arrayObject.slice(start,end)

//6.5.2h
	var arr1 = ['張三','李四','王五','趙六']
	var x = arr1.slice(0,1);
	var y = arr1.slice(-2,-1);

---

sort sort() 方法用於對數組的元素進行排序。

arrayObject.sort(sortby)

//6.5.2g
	var arr1 = [3,5,1,2,6,8,4,2,5,7,9];
	arr1.sort();

---

**數組(上)綜合案例 **

//數組去重
    var arr = [1, 2, 3, 2, 4, 5, 1, 2, 3, 2, 5, 6, 1, 2, 6, 7, 3];
    function deleteRepetition(arr) {
        var newArr=[arr[0]];
        for(var i=1;i<arr.length;i++){
            if(arr.indexOf(arr[i])==i){
               newArr.push(arr[i])
            }
        }
        return newArr;
    }
    console.log(deleteRepetition(arr));

//reduce操做 累積求值
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4];
    function reduce(arr, combine, start) { //數組 操做 起始值
        var len = arr.length;
        var current = start;
        for (var i = 0; i < len; i++) {
            current = combine(current, arr[i]);
        }
        return current;
    }
    var count = {
        add: function (a, b) {
            return a + b;
        },
        sub: function (a, b) {
            return a - b;
        },
        ride: function (a, b) {
            return a * b;
        },
        divde: function (a, b) {
            return a / b;
        }
    }
    console.log(reduce(arr, count['ride'], 1));

實戰環境模擬

用戶從本地相冊選擇任意張圖片, 添加到評論圖片展現區。評論圖片展現區展現圖片數量最多 3張 最少 0 張。 能夠二次選擇圖片,刪除圖片。 保證展現區圖片 數量 區間 [0,3] ;

var showArr = ['張三']; //展現區圖片數組  [0,3]
	var selectArr = ['王五','趙六','奉賢','虎賁','驃騎']; //用戶選擇圖片數組 [0,9]
	
	showArr = showArr.concat(selectArr.slice(0,3- showArr.length ));