前端数组详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lost_path/article/details/78406476

有过开发经验的小伙伴们都知道，在前端开发中，数组是一个频频在舞台上大放光彩的存在，他的使用频率居高不下，他的衍生栈与队列，同样有着十分出色的表现，下面就让我们来看看，数组究竟怎么玩？

创建数组

//使用Array构造函数；
var arr = new Array();
//长度为3的数组
var arr1 = new Array(3);  

//直接向Array构造函数传递数组中应该包含的项
var arr2 = new Array("red", "blue", "green");

//可以省略new操作符
var arr3 = ["red", "blue", "green"];
var arr4 = [];

数组方法

数组（Array）的方法都有哪些？

isArray(): 最终确定某个值是不是数组。
join()：只接受一个参数（用作分隔符的字符串），返回包含分隔符的字符串。
push()和pop()：push()在数组末尾推进数据，返回length长度；pop()删除数组最末尾的数据，返回被删除的数据；
shift() 和unshift()：unshift()在数组开头推进数据，返回length长度；shift()删除数组最开头的数据，返回被删除的数据；
sort() ：对数组进行排序；
reverse() ：逆转数组的数据；
concat() ：连接两个数组（可用来复制数组）
slice()：接收1~2个参数，即返回项的起始位置和结束位置，此方法不会影响原始数组；
splice() ：删除、插入、替换，如代码所示

        var colors = ["red", "green", "blue"];
        var removed = colors.splice(0,1);//移除第一个
        alert(colors);     //green,blue
        alert(removed);    //剩下的数组

        removed = colors.splice(1, 0, "yellow", "orange");//在位置1的后面插入两个元素
        alert(colors);     //green,yellow,orange,blue
        alert(removed);    //空数组

        removed = colors.splice(1, 1, "red", "purple");//删除一个，插入两个（相当于替换的效果）
        alert(colors);//green,red,purple,orange,blue
        alert(removed);

indexOf()和 lastIndexOf()：查找元素（要查找的项，查找起点位置的索引），indexOf()从开头查起，lastIndexOf()从末尾查起。
forEach()：遍历数组中每一个元素。
toLocalSreing()、toString()、valueOf()：toLocalSreing()与toString()方法类似，只不过把数组转换成本地数组；toString()返回由数组每个字符串形式拼接而成的，一个以逗号分隔的字符串；valueOf()返回数组本身。

迭代方法：
map() ：函数运行数组中每一个项，返回每次调用结果组成的数组。
filter() ：函数运行数组中每一个项，返回每次调用结果为true组成的数组。
every() ：函数遍历数组中的每个元素，每个元素返回true，方法返回true。
some() ：函数遍历数组中的每个元素，只要有一个元素返回true，方法返回true。
reduce()和 reduceRight() ：归并方法，迭代数组中所有项，然后构建一个最终返回的值。

补充：

利用shift()、push()和unshift()、pop()可对队列完成操作，二者方向相反，操作原理相同。
sort()方法在针对数字进行操作的时候，会转换成字符串，结果会出错，例如下面：

 var values = [0, 1, 5, 10, 15];
 values.sort();
 alert(values);    //0,1,10,15,5

改进方法如下：

//升序排列，如需降序，将return的值对调即可
function compare(value1, value2) {
     if (value1 < value2) {
         return -1;
     } else if (value1 > value2) {
           return 1;
     } else {
         return 0;
     }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    //0,1,5,10,15

关于数组常见操作（附代码）：

数组的复制：

var ary = ["red", "blue", "green"];
var ary1 = ary.concat(); // 第一种方法
var ary2 = ary.slice(0);  // 第二种方法

求数组的最大值(或最小值)：

var arr = [7,12,6,3,8,34,54,98,51];
//按照forEach()方法遍历，用max不断比较，获取最大值；
var max = 0;
function foreach(vaule,index,arr){
 try{
      if(max<arr[index])  max=arr[index];
}catch(e){
  if(e===foreach.break)    return;
 else throw e;
  }
}
foreach.break=new Error("StopIteration");
}
// 2、 数组排序
arr.sort()[ary.length-1];
// 3、数组排序+截取
arr.sort().splice(-1)[0];
// 4、借用Math最大值方法
Math.max.apply(null,arr);

计算所有数组的值的总和

var arr = [7,12,6,3,8,34,54,98,51];
//1、依旧是遍历，在这里不多写，还有上面列举出的迭代方法
//2、for循环遍历，简单不写。
//3、eval()方法，不推荐使用，问题比较多。
eval(arr.join("+"));

数组中重复出现最高的值(此部分代码转载自这里)

//先定义一个空对象，将字符串中的字符作为对象的属性，就可以统计出次数了。然后找出对象中各个属性的最大值
var str = 'ajfewiqnnfsdajfdajfdkakfjkdsfjds';
var obj = {};
// 处理字符串字符，给对象做属性用
for(var i=0;i<str.length;i++){
    // 中括号调用，数组是下标，对象是属性，obj.name 和 obj['name']
    if(obj[str.charAt(i)]){
        // 如果对象有这个属性了，就给这个属性值自增1
        obj[str.charAt(i)]++;
    }else{
        // 如果对象没有这个属性，就给这个属性值设为1
        obj[str.charAt(i)] = 1;
    }
}
// 找出对象属性中最多次数
var times = 0;
var value = '';
// for in 是另一种for循环，可以用于遍历对象的属性和方法
for(var i in obj){
    if(obj[i]>times){
        times = obj[i];
        value = i;
    }
}
// 最多次数保存在times中了，字符保存在value中了


//使用正则表达式，匹配字符串，同时计数
var str = 'ajfewiqnnfsdajfdajfdkakfjkdsfjds';
var obj = {};
str.replace(/(.)\1*/g,function(_,__){
    if(obj[__]){
        obj[__] += _.length;
    }else{
        obj[__] = _.length;
    }
});
var times = 0;
var value = '';
for(var i in obj){
    if(obj[i]>times){
        times = obj[i];
        value = i;
    }
}