数组的重点与坑!!!

JavaScript数组的重点与坑!!!

重点 :

一. 如何创建一个二维数组.

​ (1). 字面量定义,并且初始化;(以知长度和数据)

var Array = [['0','1','2'],['3','4','5'],['6','7','8']] //定义一个3*3的二维数组

​ (2). 在未知数组的长度的时候

var arr = new Array (); //声明一个一维数组
for(var n = 0; n < m ;n++){ //一维数组的长度为n, m是变量,可以根据具体情况而定
  arr[n] = new Array();  //一维数组的每个元素都是一个数组
  for(var j = 0; j < m ;j++){
    arr[n][j] = <value>;  // 给二维数组的 第n行,第j列,赋值
  }
} 

​ 注意: 在JavaScript不支持多维数组,使用在大型数据的时候建议使用json格式.

二. 数组的遍历方法.

​ (1). filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,带有 return 值 并且返回一个过滤的数组,带三个参数 item (当前项) , index (当前项的下标) , array (遍历的数组)

 arr=[10,12,25,3,5,46,89];
 var newArr = arr.filter(function(item,index,array){
         return (item >= 20);  //返回一个数组 并且里面的值都大于20
      })

​ (2). map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

 ageArr=[10,12,25,3,5,46,89];
 var youngAge = ageArr.map(function (ele, idx, array) {
           return (ele -= 20);
       })

​ 注意 : filter() , map() 都是带有返回值的, 返回一个原数组的一个副本,但是这个副本是经过处理的了,所以使用这两个方法不会对原数组产生改变.

​ (3) . 在介绍第三个方法时,我们先假设一个场景: 怎样删除数组中指定的元素 ???

大体的思路是: 因为数组的删除方法只能通过下标来删除,那么我们就要遍历数组,找到该相同的项,并且获取到对应的下标, 最后删除;

以上两个方法并不是直接对原数组进行操作的,虽然可以实现,但是相对来说不够快,而且不适用,那是否存在一个方法可以直接遍历数组,并且是直接对原数组操作的呢?

​ 答案是: forEach() ,该方法和 for() 循环类似,但是个人觉得比 for()循环好用.

var arr = [10,12,25,3,5,46,89];
var test = 20;
arr.forEach(function (item, index, array){
  if ( item === test ){  //查找和 test 相同的项
    array.splice(index , 1)  // 利用数组的 splice(start,deletNumber,items)方法,删除当前的相同的项
  }
})

​ 值得一提 : 这是我之前在项目的时候,碰到的一个小坑, 一开始我是用for()循环方法通过遍历每个元素,然后找到相同的,删除该元素,但是我总觉得怪怪的,因为用for()循环写出来的代码量比较大,相比之下 forEach() , 就突出了它的优点.

三 : 数组的去重

注意 :数组去重是前端开发的一道面试题, 虽然不知道现在还会不会考这道题,但本人觉得值得深究,对数组的会有更深的认识. 在这里,我就不细说简单的方法了,既然文章是描述数组重点的,那当然是要使用数组的技巧完成啦

(1). filter() + indexof 配合

​ indexof : 从头到尾查找某元素,如果存在则返回某元素存在,则返回第一次出现的位置,否则返回 -1

function noRepect(arr) {
  var newArr = arr.filter( function(item, index, array){
    return array.indexof(item) === index ;  // 可以过滤出满足符合条件的项
  });
}

(2). 利用对象配合

function dropRepeat(array) {
        var result = [];  //该数组用于返回去重后的数组
        var hash = {};   // 该对象用于判断数组是否重复
        for(var i = 0;i<array.length;i++){
            var ele = array[i];  
            if(!hash[ele]){  //判断对象中的 key (数组的项) 是否存在于对象中,只有不存在才能进入循环体
                result.push(ele);
                hash[ele] = true; //重置 设置为true,避免重复,这一步是关键
            }
        }
        return result;
    }

面试中遇到的坑!!!

​ 如何判断是否为数组????

​ (1). instanceof : 一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

 var arr = [];
 arr.instanceof Array;

​ (2). 基于 constructor

var arr = [];
arr.constructor === Array;  //判断它的构造器是否是 Array

​ (3). Object.prototype.toString

Object.prototype.toString.apply(arr) === '[object Array]'  //该方法好强大,不仅能判断数组,也可以判断对象,通过prototype指向原型,然后利用apply()方法改变this

(4) . jQuery 的 isArray() 方法

Array.isArray(arr);  // true / false

注意 : 判断数组真的是一个坑,同时也是个重点,更是面试官喜欢问的问题,因为用原生JavaScript判断是否是数组,涉及到 构造器与原型的问题,在理解上可能会比较难理解,希望各位大伙能通过理解这方法,更进一步的理解构造器与原型,加油!!

行文匆忙,如有错误,不吝指出,感谢各位!!!