Array对象
导语：页面中的数据，都是从数据库读取出来的，如果返回的数据多，一般情况下会以数组或者对象的形式来进行返回，如果想要删除或者添加数据，就可以使用数组中的方法
如图所示，我们可以通过表单添加数据，还可以在点击按钮的时候删除数据，后面会围绕实现当前功能，介绍对应的知识点
创建数组对象
var arrOb=new Array(值,…)
var arrOb=Array(值,…)
var arrOb=[值,…]
var arrOb=new Array(n);
arrOb[0]=值1;
arrOb[1]=值2;
…
属性
length //数组中元素的数目
方法
1
转为字符串
toString() //将数组转换为字符串，以逗号连接
num.toString(进制) // 将某个数字专为对应的进制
// toString的特殊用法 - 将某个值转为对应的进制
var num = 10;
console.log(num.toString(16)); // a
parseInt(string, 十进制); // 从任意进制转换为10进制
2
join(‘连接符’) //将数组元素连接成字符串
var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr.toString());
console.log(arr.join('')); // 链接数组中的内容，没有连接符号
console.log(arr.join('*'));
var str = arr.join('-');
console.log(str.split('-'));
3
连接多个数组，返回新数组
concat(字符串/数组/数字) //连接多个数组，返回新数组
○拼接的内容可以是数字，字符串，或者数组
○如果是数组，会把数组中的每个值拆分开再进行拼接
// 基础用法
var arr = ['云南','九寨沟','拉萨'];
var newArr = arr.concat('郑州') // 将数组和字符串拼接在一起
console.log(newArr);
var newArr2 = newArr.concat('西安','深圳');
console.log(newArr2);
var newArr3 = arr.concat(['橘子洲','迪士尼'],['雷峰塔','泸州']);
console.log(newArr3);
4
… 扩展运算符【ES6】
也可以实现数组的拼接
var arr = [1,2,3];
var arr2 = [4,5,6];
var arr3 = […arr,…arr2]
console.log(arr3);
面试题：在js中怎么实现数组的拼接；
5
追加元素,并返回新数组长度
unshift(value,…) //将新项添加到数组的开头，并返回新的长度
push(value,…) //向数组的末尾添加一个或多个元素
添加成功：返回值是添加成功之后数组的长度
6
删除元素并返回该元素
shift() //删除第一个元素
pop() //删除最后一个元素
delete arr[2] // 删除指定下标的值，返回值为boolean
删除成功之后，返回的是被删除的内容
var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
arr.unshift(123);
arr.push(456);
arr.push(789);
arr.shift();
var a = arr.pop();
var b = arr.pop();
console.log(arr);
console.log(a);
console.log(b);
delete arr[2]
console.log(delete arr[2]); // true
console.log(arr); // 删除之后的数组
7
删除元素或删除并插入新元素
arr.splice(startindex，length,item,item) 直接对原数组进行删除，添加或者修改
startindex：从什么地方开始删除
length：删除的长度
item:添加的新内容
返回值：被删除的内容
splice函数有非常强大的功能，可以实现删除，替换，添加等功能
删除：splice(开始删除的位置，删除的长度)
替换：splice(开始删除的位置，删除的长度，删除之后添加的新内容)
添加：splice(开始删除的位置，0，添加的新内容)
8
将数组元素升序排序
sort(回调函数)
arr.sort(function(a,b){
return a-b // 正序
return b-a // 倒序
})
9
颠倒数组中的元素
reverse()
var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr.reverse());
案例：数组方法相关案例
1
随机返回1-100的随机数，值不能重复
var arr=[];
for(var i=0;i<10;i++){
var num=Math.floor(Math.random()*100);
arr.push(num);
}
// 案例：要求将数组中的0项去掉
var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];
2
点击按钮将下面图片进行排序
var aInp = document.getElementsByTagName('input');
var aSpan = document.getElementsByTagName('span');
var aImg = document.getElementsByTagName('img');
var arr = [1,2,3,4,5,6,7,8];
// 正序
aInp[0].onclick = function () {
arr.sort( function (a,b){return a - b})
fn();
}
// 倒叙
aInp[1].onclick = function () {
arr.sort( function (a,b){return b - a})
fn();
}
function fn(){
for(var i=0; i<aImg.length; i++){
aImg[i].src = 'img/'+ arr[i] +'.jpg';
aSpan[i].innerHTML = arr[i];
}
}
3
封装一个方法，用于查找数组中的某一项出现的次数
function getNum(arr,str) {
var index = arr.indexOf(str);
var num = 0;
while (index !== -1){
//每次找到 num加一
num++;
//下次从上次找到的地方后面开始找
index = arr.indexOf(str, index + 1);
}
return num
}
var arr = [2, 3, 3, 4, 4, 3, 3, 1];
console.log(getNum(arr,4));
4
实现tab切换【排他思想】
<div class="content">
<div class="top">
<span class="sactive">话费</span>
<span >机票</span>
<span >酒店</span>
</div>
<div class="bottom">
<div class="phone active">话费</div>
<div class="ticket">机票</div>
<div class="hotel">酒店</div>
</div>
</div>
<script>
var btn = document.getElementsByClassName('top')[0].getElementsByTagName('span');
var show = document.getElementsByClassName('bottom')[0].getElementsByTagName('div');
console.log(show);
// 给按钮添加点击事件
for(var i=0;i<btn.length;i++){
// 存下标
btn[i].index = i;
btn[i].onclick = function(){
// 排他思想
// 1. 先让所有的div隐藏
for(var j=0;j<show.length;j++){
show[j].style.display = 'none';
btn[j].className = ''; // 元素添加class类名，使用className
}
// 2. 只让点击的按钮对应的div显示
show[this.index].style.display = 'block';
btn[this.index].className = 'sactive';
}
}
</script>
