ES5 Array新增的API

forEach 遍歷

調用數組中每一次參數並且傳遞給回調函數

let arr = [{
    name: 'Tom',
    age: 20
}, {
    name: 'Tony',
    age: 22
}, {
    name: 'Mary',
    age: 18
}]

arr.forEach(function(ele, index, arr) {
    console.log(ele, index, arr)
},)

// {name: "Tom", age: 20}  0 (3) [{…}, {…}, {…}]
// {name: "Tony", age: 22} 1 (3) [{…}, {…}, {…}]
// {name: "Mary", age: 18} 2 (3) [{…}, {…}, {…}]

參數	描述
ele	遍歷當前的元素
index	遍歷元素的索引
arr	遍歷的數組

Array.forEach(callback,this)

Array 的第二個參數代表着 callback 函數中的 this ，如果沒有第二個參數，則執行 window 。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

arr.forEach(function(ele, index, self) {
    this[index].innerHTML = ele.name;
}, document.getElementsByTagName("li"))

// <li>Tom</li>
// <li>Tony</li>
// <li>Mary</li>

filter 過濾

filter 過濾並且返回符合條件的新數組。

let arr = [{
    name: 'Tom',
    age: 20
}, {
    name: 'Tony',
    age: 22
}, {
    name: 'Mary',
    age: 18
}]

let nowarr = arr.filter(function(ele, index, arr) {
    if (ele.age == 18) {
        return true
    }
})
console.log(nowarr)
// [{name: 'Mary', age: 18}]

Array.forEach(callback,this)

和 forEach 一樣，如果填寫了第二的參數代表着 callback 函數中的 this 。

map 修改

修改 Array 中的值。

let arr = [{
    name: 'Tom',
    age: 20
}, {
    name: 'Tony',
    age: 22
}, {
    name: 'Mary',
    age: 18
}]

let nowarr = arr.map(function(ele, index, arr) {
    ele.age = 20;
    return ele
})

console.log(nowarr)

// {name: "Tom", age: 20}
// {name: "Tony", age: 20}
// {name: "Mary", age: 20}

第二個參數也代表着 callback 函數中的 this 。

every 判斷所有元素是否符合條件

let arr = [{
    name: 'Tom',
    age: 20
}, {
    name: 'Tony',
    age: 22
}, {
    name: 'Mary',
    age: 18
}]

var flag = arr.every(function(ele, index, arr) {
    return ele.age > 16;
})
console.log(flag)

// true

some 判斷是否有元素符合條件

let arr = [{
    name: 'Tom',
    age: 20
}, {
    name: 'Tony',
    age: 22
}, {
    name: 'Mary',
    age: 18
}]

var flag = arr.some(function(ele, index, arr) {
    return ele.age > 20;
})
console.log(flag)

// true

reduce 累加器

callback(prevValue, ele, index, arr) 第一個參數代表着上一次記錄的值，也可以通過 arr.reduce(callback, arr) 設置 prevValue 的默認值。

const arr = [1, 2, 3]
const sum = arr.reduce(function(prevValue, ele, index, arr) {
    return ele + prevValue;
})

// sum => 6