JS常用API手冊2-ES5新增數(shù)組方法

遍歷數(shù)組元素

arr.forEach((item, index, arr) => {
    //todo
})
[1, 2 ,3, 4].forEach(console.log)
image.png

IE6-IE8

if (typeof Array.prototype.forEach != "function") {
    Array.prototype.forEach = function (fn, context) {
        for (var k = 0, length = this.length; k < length; k++) {
            if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
                fn.call(context, this[k], k, this);
            }
        }
    };
}

判斷對象是不是數(shù)組

Array.isArray("NO U")
// false

Array.isArray(["NO", "U"])
// true

IE6-IE8

Object.prototype.toString.apply(value) === '[object Array]'

map

arr.map((value, index, array) =>{
    //todo
});

------代碼分割線------
let arr = [1,2,3,4];
let arr2 = arr.map((item, index, array) => {
    console.log(item, index, array);
    return item * item;
});
//arr = [1,2,3,4]
//arr2 = [1,4,9,16];

IE6-IE8

if (typeof Array.prototype.map != "function") {
    Array.prototype.map = function (fn, context) {
        var arr = [];
        if (typeof fn === "function") {
            for (var k = 0, length = this.length; k < length; k++) {
                arr.push(fn.call(context, this[k], k, this));
            }
        }
        return arr;
    };
}

filter

過濾一個數(shù)組，符合的留下，不符合的剔除掉

arr. filter((value, index, array) =>{
    //todo
});


------代碼分割線------
let users = [
    {name: "張含韻", "email": "zhang@email.com"},
    {name: "江一燕",   "email": "jiang@email.com"},
    {name: "李小璐",  "email": "li@email.com"}
];

let zhangEmail = users.map( user => user.email ).filter( email => /^zhang/.test(email) );
console.log(zhangEmail.join(", "));

//zhang@email.com

IE6-IE8

if (typeof Array.prototype.filter != "function") {
    Array.prototype.filter = function (fn, context) {
        var arr = [];
        if (typeof fn === "function") {
            for (var k = 0, length = this.length; k < length; k++) {
                fn.call(context, this[k], k, this) && arr.push(this[k]);
            }
        }
        return arr;
    };
}

some

只要有一個數(shù)返回為true，就返回true

arr. some((value, index, array) =>{
    //todo
});

------代碼分割線------
let scores = [5, 8, 3, 10];
let current = 7;

function higherThanCurrent(score) {
    return score > current;
}

if (scores.some(higherThanCurrent)) {
    console.log("數(shù)組中有比7大的數(shù)！");
}
//數(shù)組中有比7大的數(shù)！

IE6-IE8

if (typeof Array.prototype.some != "function") {
    Array.prototype.some = function (fn, context) {
        var passed = false;
        if (typeof fn === "function") {
            for (var k = 0, length = this.length; k < length; k++) {
                if (passed === true) break;
                passed = !!fn.call(context, this[k], k, this);
            }
        }
        return passed;
    };
}

every

全部為true， 才返回true

arr. every((value, index, array) =>{
    //todo
});
------代碼分割線------
let scores = [5, 8, 3, 10];
let current = 7;

function higherThanCurrent(score) {
    return score > current;
}

if (scores.every(higherThanCurrent)) {
    console.log('數(shù)組中的數(shù)全部大于7！')
} else {
    console.log("數(shù)組中的數(shù)有一個小于等于7！");
}

IE6-IE8

if (typeof Array.prototype.every != "function") {
    Array.prototype.every = function (fn, context) {
        var passed = true;
        if (typeof fn === "function") {
            for (var k = 0, length = this.length; k < length; k++) {
                if (passed === false) break;
                passed = !!fn.call(context, this[k], k, this);
            }
        }
        return passed;
    };
}

indexOf

返回整數(shù)索引值，如果沒有匹配（嚴(yán)格匹配），返回-1. fromIndex可選，表示從這個位置開始搜索，若缺省或格式不合要求，使用默認值0

array.indexOf(searchElement[, fromIndex])

------代碼分割線------
var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x"));       // 1 ("x"被忽略)
console.log(data.indexOf(5, "3"));      // 4 (從3號位開始搜索)
console.log(data.indexOf(4));            // -1 (未找到)
console.log(data.indexOf("5"));          // -1 (未找到，因為5 !== "5")

IE6-IE8

if (typeof Array.prototype.indexOf != "function") {
    Array.prototype.indexOf = function (searchElement, fromIndex) {
        var index = -1;
        fromIndex = fromIndex * 1 || 0;

        for (var k = 0, length = this.length; k < length; k++) {
            if (k >= fromIndex && this[k] === searchElement) {
                index = k;
                break;
            }
        }
        return index;
    };
}

lastIndexOf

lastIndexOf方法與indexOf方法類似, 只是lastIndexOf是從字符串的末尾開始查找，而不是從開頭。還有一個不同就是fromIndex的默認值是array.length - 1而不是0

array.lastIndexOf(searchElement[, fromIndex])

------代碼分割線------
var data = [2, 5, 7, 3, 5];
console.log(data.lastIndexOf(5));           // 4
console.log(data.lastIndexOf(5, 3));        // 1 (從后往前，索引值小于3的開始搜索)
console.log(data.lastIndexOf(4));           // -1 (未找到)

IE6-IE8

if (typeof Array.prototype.lastIndexOf != "function") {
    Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
        var index = -1, length = this.length;
        fromIndex = fromIndex * 1 || length - 1;

        for (var k = length - 1; k > -1; k-=1) {
            if (k <= fromIndex && this[k] === searchElement) {
                index = k;
                break;
            }
        }
        return index;
    };
}

reduce

  • 迭代，遞歸
  • callback函數(shù)接受4個參數(shù)：之前值、當(dāng)前值、索引值以及數(shù)組本身
  • initialValue參數(shù)可選，表示初始值。
  • 指定，則當(dāng)作最初使用的previous值；
  • 缺省，則使用數(shù)組的第一個元素作為previous初始值，同時current往后排一位，相比有initialValue值少一次迭代。
array.reduce(function (previous, current, index, array){}[, initialValue])

------代碼分割線------
var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
    return previous + current;
});

console.log(sum); // 10

注：因為initialValue不存在，因此一開始的previous值等于數(shù)組的第一個元素。從而current值在第一次調(diào)用的時候就是2。最后兩個參數(shù)為索引值index以及數(shù)組本身array.

# 以下為循環(huán)執(zhí)行過程：
# 初始設(shè)置
previous = initialValue = 1, current = 2

# 第一次迭代
previous = (1 + 2) =  3, current = 3

# 第二次迭代
previous = (3 + 3) =  6, current = 4

# 第三次迭代
previous = (6 + 4) =  10, current = undefined (退出)

輕松實現(xiàn)二維數(shù)組的扁平化

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

// 二維數(shù)組扁平化
var flatten = matrix.reduce(function (previous, current) {
    return previous.concat(current);
});

console.log(flatten); // [1, 2, 3, 4, 5, 6]

IE6-IE8

if (typeof Array.prototype.reduce != "function") {
    Array.prototype.reduce = function (callback, initialValue ) {
        var previous = initialValue, k = 0, length = this.length;
        if (typeof initialValue === "undefined") {
            previous = this[0];
            k = 1;
        }

        if (typeof callback === "function") {
            for (k; k < length; k++) {
                this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
            }
        }
        return previous;
    };
}

reduceRight

reduceRight跟reduce相比，用法類似。差異在于reduceRight是從數(shù)組的末尾開始實現(xiàn)

array.reduceRight(function (previous, current, index, array){}[, initialValue])

------代碼分割線------
var data = [1, 2, 3, 4];

var specialDiff = data.reduceRight(function (previous, current, index) {
    if (index == 0) {
        return previous + current;
    }
    return previous - current;
});

console.log(specialDiff); // 0

循環(huán)步驟

// 初始設(shè)置
index = 3, previous = initialValue = 4, current = 3

// 第一次迭代
index = 2, previous = (4- 3) = 1, current = 2

// 第二次迭代
index = 1, previous = (1 - 2) = -1, current = 1

// 第三次迭代
index = 0, previous = (-1 + 1) = 0, current = undefined (退出)

IE6-IE8

if (typeof Array.prototype.reduceRight != "function") {
    Array.prototype.reduceRight = function (callback, initialValue ) {
        var length = this.length, k = length - 1, previous = initialValue;
        if (typeof initialValue === "undefined") {
            previous = this[length - 1];
            k--;
        }
        if (typeof callback === "function") {
            for (k; k > -1; k-=1) {
                this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
            }
        }
        return previous;
    };
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容