前端基础js篇之数组

1.概念

数组是一组数据的集合，储存在单个变量的下。数组里可以放任意数据类型，中间用逗号隔开。

2.创建

方式一：

利用关键字new Array()

var 数组名 = new Array();   // 创建一个空数组

方式二:

利用数组字面量'[ ]'创建数组

var 数组名 = [];  // 创建空数组
var 数组名 = ['小白'，'小黑']; // 带初始值的数组

3.索引

索引是用来访问数组元素的序号，从零开始。

获取某个元素的索引Array.indexOf(元素)，输出元素首次出现的索引，如果不存在输出-1

var num = [1,2,3];
console.log(num.indexOf(1)); //输出0

4.访问

（1）通过索引访问

元组名 [索引]

（2）遍历数组

var arr = ['red', 'green','bule']
for (var i=0; i<3;i++) {
    console.log(arr[i])
}

//根据数组长度自动遍历
var arr = ['red', 'green','bule']
// arr.length 动态监控数组长度
for (var i=0; i<arr.length;i++) {
    console.log(arr[i])
}

求最大值和最小值

<script>
    var arr = [1,2,3,4,5,6,7,8,9];
    var max = arr[0];
    for(var i = 1;i<arr.length;i++) {
        if (arr[i] > max) {          //依次比较
        max=arr[i];
        }
      }
    console.log('该数组里面最大的值是:' + i);
</script>

5.添加元素

（1）方法一

根据索引号来添加

var arr = ['red', 'green','blue']
arr[3] = 'pink';

注

1.如果索引号是原来就有的，那么会替换原来的值

2.如果直接以数组名来赋值，会直接替换原来的数组

（2）方法二

用Array.push()在原数组后面添加一个或者多个元素

var arr = [1, 2];
console.log(arr.push(4, 5));   //输出4(数组的总长度)
console.log(arr)  //输出数组arr[1,2,3]

（3）方法三

Array.unshirt()在数组前面添加一个或者多个元素

arr.unshift('一', '二')

注

push和unshirt都有返回值，返回新数组的长度。

6.删除元素

删除最后一个或者第一个元素，并且返回删除的元素

var arr = [1, 2，3，4];
arr.pop();      //删除最后一个元素
arr.shift();       //删除第一个元素

删除某个具体的元素

var num= [1,2,3,4,5,6,7]
console.log(num)
for(var i=0;i<num.length;i++){
   if (num[i]==7){            //如果等于7就删除
        num.splice(i,1)
          }
  }
console.log(num)

7.小练习

（1)筛选数组重组

方法1 —— 通过索引给新元组添加元素

 var ostr = [1,2,3,4,5,6,7,8,9];
 var nstr = [ ];
 var j = 0;
 for (var i=0;i<ostr.length;i++){
  if (ostr[i]>5){  //筛选出大于5的数字
      nstr[j]=ostr[i];
      j++;
  }
  }
 console.log(nstr);

方法2 —— length 返回的是元组的个数，总是比数组中定义的最后一个元素的下标大 1，可以用改属性添加在最后一个元素。

var ostr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var nstr = [];
for (var i = 0; i < ostr.length; i++) {
    if (ostr[i] > 5) {
        nstr[nstr.length] = ostr[i];
    }
}
console.log(nstr);

方法3 —— 利用push函数，添加新元素

var ostr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var nstr = [];
for (var i = 0; i < ostr.length; {
    if(ostr[i] > 5) {
    nstr.push([ostr[i]])
}
}
console.log(nstr);

（2）冒泡算法

var arr = [1, 2, 3, 4, 5];
for (var i = 0; i <= arr.length - 1; i++) {   //外层循环控制循环的趟数
    for (var j = 0; j <= arr.length - i - 1; j++) {  //  内层循环控制每趟比较的次数 
        //内部交换2个变量的值，前一个和后面一个数组元素比较进行交换
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + i];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);

（3）翻转和排序

翻转

利用reverse()函数进行翻转，reverse返回的是新的数组，旧的数组会被替换。

var arr = [1,2,3,4];
console.log(arr.reverse()); 
console.log(arr);    //上下两个都是输出4.3.2.1 也就是说reverse返回的是新的数组，元素的数组会被替换

排序

var arr = [1, 7, 3, 5, 9];
arr.sort(function (a, b) {
    //升序排序
    //return a-b; 
    //降序排序
    return b - a;
})
console.log(arr);

(4)检测是否为数组

var arr = [];
var obj = {};
//方法一 instanceof 运算符
console.log(arr instanceof Array);     //输出turn
console.log(obj instanceof Array);   //输出false
//方法二 Array.isArray H5新增
console.log(Array.isArray(arr)); //输出true
console.log(Array.isArray(obj)); //输出false

(5)数组去重

var old_arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 3];
function unique(arr) {
    var new_arr = [];
    for (var i = 0; i < arr.length; i++) {
        if (new_arr.indexOf(arr[i]) === -1) {
            new_arr.push(arr[i]);
        }
    }
    return new_arr;
}
console.log(unique(old_arr));

（6）将数组转为字符串

 //方法一arr.toString()
 var arr1 = [1,2,3,4,5,6];
 console.log(arr1.toString());
 //方法二arr.join(‘分隔符’);默认为逗号
 var arr2 = ['一','二','三'];
 console.log(arr2.join('@'));           //输出：一@二@三