【前端从0开始】JavaSript——Array对象

Array对象

导语：页面中的数据，都是从数据库读取出来的，如果返回的数据多，一般情况下会以数组或者对象的形式来进行返回，如果想要删除或者添加数据，就可以使用数组中的方法

如图所示，我们可以通过表单添加数据，还可以在点击按钮的时候删除数据，后面会围绕实现当前功能，介绍对应的知识点

创建数组对象

var arrOb=new Array(值,...)

var arrOb=Array(值,...)

var arrOb=[值,...]

var arrOb=new Array(n);

arrOb[0]=值1;

arrOb[1]=值2;

...

属性

length //数组中元素的数目

方法

转为字符串

toString() //将数组转换为字符串，以逗号连接

num.toString(进制) // 将某个数字专为对应的进制

js 复制代码

// toString的特殊用法 - 将某个值转为对应的进制
var num = 10;
console.log(num.toString(16)); // a

parseInt(string, 十进制); // 从任意进制转换为10进制

join('连接符') //将数组元素连接成字符串

js 复制代码

var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr.toString());
console.log(arr.join('')); // 链接数组中的内容，没有连接符号
console.log(arr.join('*'));
var str = arr.join('-');
console.log(str.split('-'));

连接多个数组，返回新数组

concat(字符串/数组/数字) //连接多个数组，返回新数组

○拼接的内容可以是数字，字符串，或者数组

○如果是数组，会把数组中的每个值拆分开再进行拼接

js 复制代码

// 基础用法
var arr = ['云南','九寨沟','拉萨'];
var newArr = arr.concat('郑州') // 将数组和字符串拼接在一起
console.log(newArr);
var newArr2 = newArr.concat('西安','深圳');
console.log(newArr2);
var newArr3 = arr.concat(['橘子洲','迪士尼'],['雷峰塔','泸州']);
console.log(newArr3);

... 扩展运算符【ES6】

也可以实现数组的拼接

var arr = [1,2,3];

var arr2 = [4,5,6];

var arr3 = [...arr,...arr2]

console.log(arr3);

面试题：在js中怎么实现数组的拼接；

追加元素,并返回新数组长度

unshift(value,...) //将新项添加到数组的开头，并返回新的长度

push(value,...) //向数组的末尾添加一个或多个元素

添加成功：返回值是添加成功之后数组的长度

删除元素并返回该元素

shift() //删除第一个元素

pop() //删除最后一个元素

delete arr[2] // 删除指定下标的值，返回值为boolean

删除成功之后，返回的是被删除的内容

js 复制代码

	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); // 删除之后的数组

删除元素或删除并插入新元素

arr.splice(startindex，length,item,item) 直接对原数组进行删除，添加或者修改

startindex：从什么地方开始删除

length：删除的长度

item:添加的新内容

返回值：被删除的内容

splice函数有非常强大的功能，可以实现删除，替换，添加等功能

删除：splice(开始删除的位置，删除的长度)

替换：splice(开始删除的位置，删除的长度，删除之后添加的新内容)

添加：splice(开始删除的位置，0，添加的新内容)

将数组元素升序排序

sort(回调函数)

arr.sort(function(a,b){

return a-b // 正序

return b-a // 倒序

})

颠倒数组中的元素

reverse()

js 复制代码

var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr.reverse());

案例：数组方法相关案例

随机返回1-100的随机数，值不能重复

js 复制代码

var arr=[];
for(var i=0;i<10;i++){
	var num=Math.floor(Math.random()*100);
	arr.push(num);
}

js 复制代码

// 案例：要求将数组中的0项去掉
var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];

点击按钮将下面图片进行排序

js 复制代码

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];
  }
}

封装一个方法，用于查找数组中的某一项出现的次数

js 复制代码

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

实现tab切换【排他思想】

html 复制代码

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