Array数组操作方法

别救了这猴子废了
243 阅读1分钟

 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

定义一个测试数组

const players = [
    { name: '科比', num: 24 },
    { name: '詹姆斯', num: 23 },
    { name: '保罗', num: 3 },
    { name: '威少', num: 0 },
    { name: '杜兰特', num: 35 }
]
复制代码

1、forEach

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_forEach = function (callback) { for (let i = 0; i < this.length; i++) { callback(this[i], i, this) } }

    players.sx_forEach((item, index, arr) => { console.log(item, index) }) // { name: '科比', num: 24 } 0 // { name: '詹姆斯', num: 23 } 1 // { name: '保罗', num: 3 } 2 // { name: '威少', num: 0 } 3 // { name: '杜兰特', num: 35 } 4 复制代码

2、map

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_map = function (callback) { const res = [] for (let i = 0; i < this.length; i++) { res.push(callback(this[i], i, this)) } return res }

    console.log(players.sx_map((item, index) => ${item.name}--${item.num}--${index})) // [ '科比--24--0', '詹姆斯--23--1', '保罗--3--2', '威少--0--3', '杜兰特--35--4' ] 复制代码

3、filter

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_filter = function (callback) { const res = [] for (let i = 0; i < this.length; i++) { callback(this[i], i, this) && res.push(this[i]) } return res }

    console.log(players.sx_filter(item => item.num >= 23)) // [ // { name: '科比', num: 24 }, // { name: '詹姆斯', num: 23 }, // { name: '杜兰特', num: 35 } // ] 复制代码

4、every

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_every = function (callback) { let flag = true for (let i = 0; i < this.length; i++) { flag = callback(this[i], i, this) if (!flag) break }

    return flag

    }

    console.log(players.sx_every(item => item.num >= 23)) // false console.log(players.sx_every(item => item.num >= 0)) // true 复制代码

5、some

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_some = function (callback) { let flag = false for (let i = 0; i < this.length; i++) { flag = callback(this[i], i, this) if (flag) break }

    return flag

    }

    console.log(players.sx_some(item => item.num >= 23)) // true console.log(players.sx_some(item => item.num >= 50)) // false 复制代码

6、reduce

参数代表含义

  • pre：前一项

  • next：下一项

  • index：当前索引

  • arr：数组本身

    Array.prototype.sx_reduce = function (callback, initValue) { let start = 0, pre if (initValue) { pre = initValue } else { pre = this[0] start = 1 } for (let i = start; i < this.length; i++) { pre = callback(pre, this[i], i, this) } return pre }

    // 计算所有num相加 const sum = players.sx_reduce((pre, next) => { return pre + next.num }, 0) console.log(sum) // 85 复制代码

7、findIndex

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_findIndex = function (callback) { for (let i = 0; i < this.length; i++) { if (callback(this[i], i, this)) { return i } } return -1 }

    console.log(players.sx_findIndex(item => item.name === '科比')) // 0 console.log(players.sx_findIndex(item => item.name === '安东尼')) // -1 复制代码

8、find

参数代表含义

  • item：遍历项

  • index：遍历项的索引

  • arr：数组本身

    Array.prototype.sx_find = function (callback) { for (let i = 0; i < this.length; i++) { if (callback(this[i], i, this)) { return this[i] } } return undefined }

    console.log(players.sx_find(item => item.name === '科比')) // { name: '科比', num: 24 } console.log(players.sx_find(item => item.name === '安东尼')) // undefined 复制代码

9、fill

用处：填充数组

参数代表含义

  • initValue：填充的值

  • start：开始填充索引，默认0

  • end：结束填充索引，默认length - 1

    Array.prototype.sx_fill = function (value, start = 0, end) { end = end || this.length for (let i = start; i < end; i++) { this[i] = value } return this }

    console.log(players.sx_fill('林三心', 1, 3)) // [ // { name: '科比', num: 24 }, // '林三心', // '林三心', // '林三心', // { name: '杜兰特', num: 35 } // ] 复制代码

10、includes

用处：查找元素，查到返回true，反之返回false，可查找NaN

Array.prototype.sx_includes = function (value, start = 0) {
    if (start < 0) start = this.length + start
    const isNaN = Number.isNaN(value)
    for (let i = start; i < this.length; i++) {
        if (this[i] === value || Number.isNaN(this[i]) === isNaN) {
            return true
        }
    }
    return false
}

console.log([1, 2, 3].sx_includes(2)) // true
console.log([1, 2, 3, NaN].sx_includes(NaN)) // true
console.log([1, 2, 3].sx_includes(1, 1)) // false
复制代码

11、join

用处：将数组用分隔符拼成字符串，分隔符默认为,

Array.prototype.sx_join = function (s = ',') {
    let str = ''
    for(let i = 0; i < this.length; i++) {
        str = i === 0 ? `${str}${this[i]}` : `${str}${s}${this[i]}`
    }
    return str
}

console.log([1, 2, 3].sx_join()) // 1,2,3
console.log([1, 2, 3].sx_join('*')) // 1*2*3
复制代码

12、flat

Array.prototype.sx_flat = function () {
    let arr = this
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr
}

const testArr = [1, [2, 3, [4, 5]], [8, 9]]

console.log(testArr.sx_flat())
// [1, 2, 3, 4, 5, 8, 9]
复制代码

13、splice

难点

  • 截取长度和替换长度的比较，不同情况

    Array.prototype.sx_splice = function (start, length, ...values) { length = start + length > this.length - 1 ? this.length - start : length const res = [], tempArr = [...this] for (let i = start; i < start + values.length; i++) { this[i] = values[i - start] } if (values.length < length) { const cha = length - values.length for (let i = start + values.length; i < tempArr.length; i++) { this[i] = tempArr[i + cha] } this.length = this.length - cha } if (values.length > length) { for (let i = start + length; i < tempArr.length; i++) { this.push(tempArr[i]) } } for (let i = start; i < start + length; i++) { res.push(tempArr[i]) } return res }

avatar
文章
阅读
粉丝