js常用api

212 阅读3分钟

数组

foreach

/*
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = ['a','b','c','d','e']

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

res.myForEach((item, index, arr) => {
    console.log(item, index,arr)
})

filter

/*
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = [1, 2, 3, 4, 5]

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

let a = res.myFilter((item, index, arr) => {
    console.log('filter参数:', item, index, arr);
    if (item > 1) {
        return item
    }
})
console.log(a);

map

/*
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = [1, 2, 3, 4, 5]

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

const a = res.myMap((item, index, arr) => {
    console.log('map参数:', item, index, arr);
    if (item < 4) {
        return item
    }
})
console.log(a);

every

/*
只要有一个元素不满足判断条件就返回false,否则返回true
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = [1, 2, 3, 4, 5]
Array.prototype.myEvery = function (callback) {
    let flag = true
    for (let i = 0; i < this.length; i++) {
        flag = callback(this[i], i, this)
        if (!flag)  break
    }
    return flag
}

let a = res.myEvery((item, index, arr) => {
    console.log('every参数:', item, index, arr);
    return item > 0

})

console.log(a);

some

/*
一旦找到一个true就不往下走了,就返回true
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = [1, 2, 3, 4, 5]
Array.prototype.mySome = function (callback) {
    let flag = false
    for (let i = 0; i < this.length; i++) {
        flag = callback(this[i], i, this)
        if (flag) break
    }

    return flag
}

let a = res.mySome((item, index, arr) => {
    console.log('some参数:', item, index, arr);
    return item > 0

})

console.log(a);

reduce

/*
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
pre:前一项,计算结束后的返回值。
next:下一项,当前元素
index:当前索引
arr:数组本身
initialValue:传递给函数的初始值
*/

const res = [1, 2, 3, 4, 5]

Array.prototype.myReduce = function(callback,...args){
    let start = 0 //如果有初始值那么下一个值就从0开始,否则就是1
    let pre
    if(args.length){
        pre = args[0]
    }else{
        pre = this[0]
        start = 1
    }

    for(let i = start;i<this.length;i++){
        pre = callback(pre,this[i],i,this)
    }
    return pre
}

let a = res.myReduce((pre,next) => {
    console.log('reduce:',pre,next);
    return next
},2)

console.log(a);

findIndex

/*
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = [{name:1},{name:2},{name:3},{name:4},{name:5}]

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

let index = res.myFindIndex((item,index,arr) => {
    console.log('findIndex:',item,index,arr);
    return item.name == -1
})
console.log(index);

find

/*
item:遍历项
index:遍历项的索引
arr:数组本身
*/

const res = [{name:1},{name:2},{name:3},{name:4},{name:5}]

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

let index = res.myFind((item,index,arr) => {
    console.log('find:',item,index,arr);
    return item.name == 2
})
console.log(index);

fill

/*
填充数组,长度由初始数组决定
initValue:填充的值
start:开始填充索引,默认0
end:结束填充索引,默认length(不包含)
*/

const res = [1,2]

Array.prototype.myFill = function(initValue, start = 0, end){
    end = end && end < this.length ? end : this.length
    for(let i = start;i<end;i++){
        this[i] = initValue
    }
}

res.myFill('innovation',1,4)
console.log(res);

includes

/*
searchvalue	必需,要查找的字符串。
start	可选,设置从那个位置开始查找,默认为 0。
*/
Array.prototype.myIncludes = function(value,start = 0){
    const isNaN = Number.isNaN(value)
    for (let i = start; i < this.length; i++) {
        if (this[i] === value || (isNaN && Number.isNaN(this[i]))) {
            return true
        }
    }
    return false
}

console.log([1,2,3,NaN].myIncludes(NaN));
console.log([1,2,3].myIncludes(1));
console.log([1,2,3,NaN].myIncludes(1,1));

join

//separator:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

const res = [1,2,3]

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

let a = res.myJoin(',')
console.log(a);

flat

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

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

console.log(res.myFlat())


Object

entries

const obj = {
    name: 'innovation',
    age: 22,
    gender: '男'
}

Object.prototype.myEntries = function(obj){
    const res = []
    for(let key in obj){
        obj.hasOwnProperty(key) && res.push([key,obj[key]])
    }
    return res
}

let a = Object.myEntries(obj)
console.log(a);
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);

fromEntries

const res = [['name', 'innovation'], ['age', 22]]
Object.prototype.myFromEntries = function (arr) {
    const obj = {}
    for (let i = 0; i < arr.length; i++) {
        const [key, value] = arr[i]
        obj[key] = value
    }
    return obj
}
console.log(Object.myFromEntries(res));

keys

const obj = {
    name: 'innovation',
    age: 22,
    gender: '男'
}

Object.prototype.myKeys = function(obj){
    const res = []
    for (let key in obj) {
        obj.hasOwnProperty(key) && res.push(key)
    }
    return res
}

console.log(Object.myKeys(obj));

values

const obj = {
    name: 'innovation',
    age: 22,
    gender: '男'
}

Object.prototype.myValues = function(obj){
    const res = []
    for (let key in obj) {
        obj.hasOwnProperty(key) && res.push(obj[key])
    }
    return res
}

console.log(Object.myValues(obj));

string

slice

let str = 'innovation'
String.prototype.mySlice = function(start = 0,end){
    end = !end && end !== 0 ? this.length : end
    if (start >= end) return ''
    let str = ''
    for (let i = start; i < end; i++) {
        str += this[i]
    }

    return str
}

console.log(str.mySlice());
console.log(str.mySlice(0));
console.log(str.mySlice(1,2));
console.log(str.mySlice(3,2));