阅读 28

JavaScript数组

一、初识数组 

数组也是对象,我们看到的是他的属性,索引从0开始 数组中有一个length的属性,是浏览器天生就给数组增加的,不是手动增加的,属于当前数组不可枚举的属性

var arry=[1,2,3,4,5];
console.log(arry);
console.log(arry.length);

for(var i=0li<arry.length;i++){
  console.log(arry[i]);
}

for(var key in arry){
  console.log(key+":"+arry[key]);
  //for in循环是用来遍历一个对象的属性名和属性值的,对于当前对象不可枚举的属性,通过它是不能遍历到的,比如:length
}复制代码


二、数组中的方法

需要按照4个维度去考虑:

  • 方法的作用
  • 需要传哪些参数
  • 是否有返回值
  • 是否对原有数组产生了改变

第一大类方法:关于数组的增加,修改和删除

var arry=[1,2,3,4,5,6,7];

arry.push(8) -> 向数组末尾添加内容,想传递谁就传递谁,返回新增后数组的长度,原有数组发生了改变

pop() -> 删除数组的最后一项内容,无参数,返回被删除的那一项,原有数组发生改变[arry.length--]

shift() -> 删除数组的第一项,无参数,返回被删除的那一项,原有数组发生改变

arry.unshift(0) -> 向数组开头增加一项,想传递谁就传递谁,返回新增后数组的长度,原有数组发生了改变

arry.splice(n,m) ->  从索引n开始删除m个元素,返回删除的内容并以一个新数组返回,原来的数组发生改变

arry.splice(n) -> 从索引n开始删到数组末尾,返回删除的内容,原来的数组发生改变

arry.splice(0) -> 把数组中的每一项都删除掉,把之前的每一项的值以一个新的数组返回

arry.splice() -> 数组中的每一项都不删除,返回[]

arry.splice(n,0,x) -> 从索引n开始一个也不删除,返回的结果是一个空数组,把x增加到索引n的前面
其实这个可以模仿push方法添加到元素的后面
arry.splice(arry.length,0,1000);//1 2 3 4 5 6 7 1000复制代码

第二大类方法:关于数组的截取和拼接

var arry=[1,4,3,2,7,9,6];

arry.slice(n,m) -> 从索引n开始,找到索引m处,但是不包含m,将找到的部分以一个新的数组返回,原来的数组不变

arry.slice(n) -> 从索引n开始,一直找到数组的末尾,将找到的部分以一个新的数组返回,原来的数组不变

arry.slice(0)/slice() -> 把原来的数组克隆一份一模一样的作为新数组返回,原有数组不变

arry.concat() -> 把两个数组拼接到一起,后添加的数组在后,返回一个新的数组,原有数组不变 复制代码

第三大类方法:把数组转换为字符串

var arry=[1,2,3,4,5,6];

arry.toString() -> 把数组转换为字符串,以字符串的形式输出,原有数组不变

arry.join() -> 按照分隔符,把数组中的每一项拼接成一个字符串,原来的数组不变复制代码

第四大类方法:数组的排序和排列

var arry = [1,2,3,4,5,9,10,11,7];

arry.reverse() -> 把数组倒过来排序

arry.sort() -> 对10以内的数组进行排序

arry.sort(function(a,b){
  return a-b;//由小到大排序,反之,由大到小
});复制代码

第五大类方法:只有在标准浏览器中兼容的方法,不兼容IE6-8

(1)indexOf()/lastIndexOf -> 字符串中也有,但是字符串的兼容,而数组的这两个不兼容
  
    indexOf/lastIndexOf  -> 在数组中第一次/最后一次出现的索引,如果没有这一项,返回值是-1,如果有,索引是几就是几,原来的数组不变;可以用这个方法判断这个内容在数组中是否存在
    if(arry.indexOf('')>-1){}else{}

(2)forEach/map - 都是用来遍历数组中的每一项的,原有数组不变

    数组中有几项,函数就执行几次,函数中的形参有两个:
    item -> 当前遍历的数组中这一项的值
    index -> 当前这一项的索引

    arry.forEach(funcion(item,index){
        console.log(item,index);
    });

    map和forEach语法基本上是一样的,但是多加了一个把原来内容进行替换的功能,原来的数组不变
    var newArry = arry.map(function(item,index){
      return item*10;
    });复制代码

第五大类方法详细补充

(1)indexOf
【格式】:数组.indexOf(元素,下标);
【注意】:使用的方式跟字符串是一样的
【实例】:
         var arr = [1,4,7,9,3,4];
         console.log(arr.indexOf(4));

(2)forEach 遍历
【格式】:数组.forEach(function(item,index,array){});
【参数】:
        item - 当前遍历到的元素
        index - 当前遍历到元素的下标
        array - 当前数组
【实例】:
        var arr1 = [1,4,6,7,8];
        arr1.forEach(function(item,index,array){
            console.log(item+","+index+","+array);
        });

(3)map 映射
【注意】:遍历 -> 操作 -> 返回
【实例】:
        var arr2 = [10,14,15,11,10];
        var newArr = arr2.map(function(item,index,array){
            return item + 2;
        });
        console.log(newArr);

(4)reduce 归并
【实例】:
        var arr3 = [1,3,5,7,9];
        var res = arr3.reduce(function(pre,next){
            return pre + next
        });
        console.log(res);
【参数】:
        pre - 上一次遍历return后面的值
        next - 当前遍历到的元素

(5)filter 过滤
【实例】:
        var arr4 = [10,1,44,78,9,20];
        var res1 = arr4.filter(function(item,index,array){
            return item > 20;
        });
        console.log(res1);
【注意】:
        参数为当前迭代的项,回调函数返回true的项会保留在数组中,返回false的项会过滤出数组

(6)some 
【解释】:某些 - 判断return后面的条件是否成立,如果成立返回true,否则返回false
【注意】:如果匹配成功就返回true,后面的不再执行
【实例】:
        var arr5 = [1,3,5,7,9,11];
        var res2 = arr5.some(function(item,index,array){
            return item == 5;//判断数组中是否存在5
            // 判断return后面的表达式,在当前数组中是否成立,成立true,否则false
        });
        console.log(res2);

(7)every
【解释】:跟some一样,但是要求每一项都要符合,才返回true,有一项不符合就返回false
【注意】:如果有元素不符合条件,返回false,直接终止循环
【实例】:
        var arr6 = [1,3,5,7,9,11,13,15];
        var res3 = arr6.every(function(item,index,array){
            return item > 5;
        });
        console.log(res3);

(8)findIndex
【解释】:返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1
【实例】:
       var arry = [3, 5, 7, 9, 11];
       var res = arry.findIndex(function(currentValue) {
           return currentValue > 7;
       });
       console.log(res); 复制代码