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 ));