JavaScript:侃侃Array的應(yīng)用場(chǎng)景

tommego 發(fā)布于2019-08-21 10:30 / 916人閱讀

摘要：目的相信在網(wǎng)上都有很多的的介紹，這里就應(yīng)用場(chǎng)景舉例說明前提了解和一句話概括用別人的方法，完成自己的功能。總結(jié)介紹了和的用法正文部分根據(jù)需求列舉的應(yīng)用場(chǎng)景注意事項(xiàng)優(yōu)化方案

目的

  相信在網(wǎng)上都有很多的Array的api介紹 ， 這里就應(yīng)用場(chǎng)景舉例說明

前提

了解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構(gòu)造函數(shù)的屬性和方法，來為自己所用！

你可能發(fā)現(xiàn)apply和call很相似，apply接受一個(gè)數(shù)組，call接受多個(gè)值。

應(yīng)用：得到一組數(shù)的最大值

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));
}                             // 不指定函數(shù)參數(shù)寫法
console.log(getMax(1,2,3,45,3));


function getMax(array){
    return Math.max.apply(this,array);
}                             // 指定參數(shù)寫法
console.log(getMax(array));

正文 扁平化規(guī)則數(shù)組

有這樣的數(shù)組，需要將其扁平化

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指代上一個(gè)元素，c指代當(dāng)前元素。
第一次迭代：p -- > [1,2]      c -- > [3,4]
第二次迭代：p -- > [1,2,3,4]  c -- > [5,6]

扁平化隨機(jī)數(shù)組

既然有規(guī)則數(shù)組，那么就肯定有不規(guī)則數(shù)組，這就需要遞歸操作

var array = [1,[2,[3,4],[1,9,8],[" ",3]],1];
// 隨機(jī)嵌套數(shù)組

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

    array.map(function(ele){
        if(!Array.isArray(ele)){     //判斷是否為數(shù)組
            result.push(ele);
        }else{
            result = result.concat(flatten(ele));
            // 由于result是函數(shù)內(nèi)部定義的，及每次遞歸result都會(huì)重置；
            // 如果不將result保存，則到遞歸完成后，之前的數(shù)據(jù)將會(huì)被覆蓋
        }
    });
    return result;
}
console.log(flatten(array));
// [ 1, 2, 3, 4, 1, 9, 8, " ", 3, 1 ]

注解：map會(huì)迭代數(shù)組里每一個(gè)元素，并應(yīng)用callback函數(shù)對(duì)其操作，在這里就是判斷是否繼續(xù)遞歸。

檢查數(shù)組是否通過給定函數(shù)檢查

有一個(gè)成績(jī)數(shù)組，需要檢查通過和未通過的情況

var score = [56,90,40,80,76,88,94,27,83,66];
// 成績(jī)

function isPassExam(ele,index,array){
    return ele >= 60;
}
// 通過規(guī)則

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會(huì)遍歷所有元素，直到有不能通過函數(shù)檢查的元素為止，返回 false
 - some會(huì)遍歷所有元素，直到有能通過函數(shù)檢查的元素為止，返回true
 - filter會(huì)遍歷所有元素，并將能通過函數(shù)檢查的元素返回

過濾函數(shù)參數(shù)

有時(shí)我們可能需要過濾我們接受的函數(shù)參數(shù)，如：只需要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 ]

注解：由于函數(shù)參數(shù)arguments并不是真正意義上的"數(shù)組"，只是"類數(shù)組"
通過  console.log(arguments); 我們可以看到
{ "0": 1,
  "1": "123",
  "2": 4,
  "3": "qianjiahao",
  "4": 2,
  "5": false,
  "6": [] }

arguments是個(gè)"類數(shù)組"，在使用"map"方法之前我們需要將其"slice"后轉(zhuǎn)化為"數(shù)組"，但是因?yàn)?類數(shù)組"沒有"slice"方法，所以我們使用了"apply"，讓Array幫我們完成這個(gè)工作。

亂序字符串/數(shù)組

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中隨機(jī)返回一個(gè)數(shù)并與0.5比較，會(huì)得到隨機(jī)的true或false，然后會(huì)隨機(jī)數(shù)組中的前后兩個(gè)元素。

從數(shù)組a中去除數(shù)組b的元素

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);

注解：通過下標(biāo)，判斷a中元素是否在b中，然后用filter過濾

持續(xù)收集ing

注意 for..in..

效率

for..in..迭代效率較低，建議使用for循環(huán)迭代或Array的原生迭代方法。

缺陷：for..in..會(huì)帶上原型屬性或方法 :

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] ]

這會(huì)很麻煩，如果需要使用for..in..，需要使用hasOwnProperty()過濾

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

但是，有個(gè)很蛋疼的事，就是hasOwnProperty()沒有保護(hù)機(jī)制，可以被重寫

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] ]
// 又悲劇了。。。

持續(xù)收集ing

優(yōu)化

數(shù)組迭代是可以優(yōu)化的，比如

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

for(var i = 0;i

這樣的循環(huán)，每次都要去獲取array.length，我們可以將array.length存起來

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

這樣整個(gè)循環(huán)只需要求一次length。雖然數(shù)據(jù)量小的時(shí)候效果不明顯，但是當(dāng)數(shù)據(jù)量很大時(shí)，提升效果就很顯著了。

總結(jié)

 - 介紹了apply和call的用法
 - 正文部分根據(jù)需求列舉Array的應(yīng)用場(chǎng)景 
 - 注意事項(xiàng) 
 - 優(yōu)化方案