JavaScript:侃侃Array的应用场景

摘要：目的相信在网上都有很多的的介绍，这里就应用场景举例说明前提了解和一句话概括用别人的方法，完成自己的功能。总结介绍了和的用法正文部分根据需求列举的应用场景注意事项优化方案

  
相信在网上都有很多的Array的api介绍 ， 这里就应用场景举例说明

了解apply和call

  
一句话概括：用别人的方法，完成自己的功能。

function Student(name,gender,age){
    this.name = name;
    this.gender = gender;
    this.age = age;

    this.introduce = function () {
        console.log("name : " + this.name + ",
                   gender : " + this.gender + ", age : " +this.age);
    }
}

function Empolyee(name,gender,age,work){

    Student.apply(this,arguments);          //apply方法
    //Student.call(this,name,gender,age);   //call方法

    this.work = work;

}

var e = new Empolyee("lee","male","26","programmer");
console.log(e)
e.introduce();

用Student构造函数的属性和方法，来为自己所用！

你可能发现apply和call很相似，apply接受一个数组，call接受多个值。

应用：得到一组数的最大值

var array = [1,5,2,3];

console.log(Math.max.apply(this,array));
                               // 全局写法


function getMax(){
    return Math.max.apply(this,Array.prototype.slice.apply(arguments));
}                             // 不指定函数参数写法
console.log(getMax(1,2,3,45,3));


function getMax(array){
    return Math.max.apply(this,array);
}                             // 指定参数写法
console.log(getMax(array));

有这样的数组，需要将其扁平化

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

var result = array.reduce(function (p, c) {
    return p.concat(c);
});
console.log(result);
// [ 1, 2, 3, 4, 5, 6 ]

注解：reduce的callback中，p指代上一个元素，c指代当前元素。
第一次迭代：p -- > [1,2]      c -- > [3,4]
第二次迭代：p -- > [1,2,3,4]  c -- > [5,6]

既然有规则数组，那么就肯定有不规则数组，这就需要递归操作

var array = [1,[2,[3,4],[1,9,8],[" ",3]],1];
// 随机嵌套数组

function flatten(array){
    var result = [];

    array.map(function(ele){
        if(!Array.isArray(ele)){     //判断是否为数组
            result.push(ele);
        }else{
            result = result.concat(flatten(ele));
            // 由于result是函数内部定义的，及每次递归result都会重置；
            // 如果不将result保存，则到递归完成后，之前的数据将会被覆盖
        }
    });
    return result;
}
console.log(flatten(array));
// [ 1, 2, 3, 4, 1, 9, 8, " ", 3, 1 ]

注解：map会迭代数组里每一个元素，并应用callback函数对其操作，在这里就是判断是否继续递归。

有一个成绩数组，需要检查通过和未通过的情况

var score = [56,90,40,80,76,88,94,27,83,66];
// 成绩

function isPassExam(ele,index,array){
    return ele >= 60;
}
// 通过规则

var isAllPass = score.every(isPassExam);
console.log("is all pass the exam : " + isAllPass);
// is all pass the exam : false

var isSomeonePass = score.some(isPassExam);
console.log("is someone pass the exam : " + isSomeonePass);
// is someone pass the exam : true

var passedScore = score.filter(isPassExam);
console.log("score : " + passedScore);
// score : 90,80,76,88,94,83,66

注解：
 - every会遍历所有元素，直到有不能通过函数检查的元素为止，返回 false
 - some会遍历所有元素，直到有能通过函数检查的元素为止，返回true
 - filter会遍历所有元素，并将能通过函数检查的元素返回

有时我们可能需要过滤我们接受的函数参数，如：只需要number类型

function filter(){
    var array = [];

    Array.prototype.slice.apply(arguments).map(function (ele) {
        if(typeof ele == "number"){
            array.push(ele);
        }
    });

    return array;
    // do something
    // ....
}

var result = filter(1,"123",4,"qianjiahao",2,false,[]);
console.log(result);
// [ 1, 4, 2 ]

注解：由于函数参数arguments并不是真正意义上的"数组"，只是"类数组"
通过  console.log(arguments); 我们可以看到
{ "0": 1,
  "1": "123",
  "2": 4,
  "3": "qianjiahao",
  "4": 2,
  "5": false,
  "6": [] }

arguments是个"类数组"，在使用"map"方法之前我们需要将其"slice"后转化为"数组"，但是因为"类数组"没有"slice"方法，所以我们使用了"apply"，让Array帮我们完成这个工作。

var str = "6ab3c5de1f4g7";

var array = str.split("");

var result = str.split("").sort(function () {
    return Math.random() > 0.5;
}).join("");
console.log(result);
// d7gfc51a34be7

result = array.sort(function () {
    return Math.random() > 0.5;
});
console.log(result);
// [ "d", "6", "b", "4", "e", "a", "c", "1", "f", "5", "7", "3", "g" ]

注解：通过在sort中随机返回一个数并与0.5比较，会得到随机的true或false，然后会随机数组中的前后两个元素。

var a = [1,5,2,6,4,7,9,0];
var b = [1,0,6,4,10];

var result = a.filter(function(ele){
    return b.indexOf(ele) < 0;
});
console.log(result);

注解：通过下标，判断a中元素是否在b中，然后用filter过滤

持续收集ing

效率

for..in..迭代效率较低，建议使用for循环迭代或Array的原生迭代方法。

缺陷 ：for..in..会带上原型属性或方法 :

var array = [1,2,3,4];

Array.prototype.newVariable = 100;

Array.prototype.newFunction = function () {};

var result = [];

for(var i in array){
    result.push(array[i]);
}

console.log(result);
// [ 1, 2, 3, 4, 100, [Function] ]

这会很麻烦，如果需要使用for..in..，需要使用hasOwnProperty()过滤

for(var i in array){
    if(array.hasOwnProperty(i)){
        result.push(array[i]);
    }
}
// [ 1, 2, 3, 4 ]

但是，有个很蛋疼的事，就是hasOwnProperty()没有保护机制，可以被重写

var array = [1,2,3,4];

Array.prototype.newVariable = 100;

Array.prototype.newFunction = function () {};

Array.prototype.hasOwnProperty = function (i) {
    return i;
};
// 重写 hasOwnProperty() 方法

var result = [];

for(var i in array){
    if(array.hasOwnProperty(i)){
        result.push(array[i]);
    }
}

console.log(result);
// [ 1, 2, 3, 4, 100, [Function], [Function] ]
// 又悲剧了。。。

持续收集ing

数组迭代是可以优化的，比如

var array = [1,2,3,4,5,3,7,8];

for(var i = 0;i

这样的循环，每次都要去获取array.length，我们可以将array.length存起来

for(var i = 0,len = array.length;i

这样整个循环只需要求一次length。虽然数据量小的时候效果不明显，但是当数据量很大时，提升效果就很显著了。

总结

 - 介绍了apply和call的用法
 - 正文部分根据需求列举Array的应用场景 
 - 注意事项 
 - 优化方案