当你项目开发遇到瓶颈,摸不着头绪的时候 请用数组 (づ￣ 3￣)づ ----------- 海牙
所谓数组，是无序的元素序列。 若将有限个类型相同的变量的集合命名，那么这个名称为数组名。组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中，为了处理方便， 把具有相同类型的若干元素按无序的形式组织起来的一种形式。 这些无序排列的同类数据元素的集合称为数组。 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 ));