手写20个常用的简易js方法

Array篇

定义一个测试数组

// 自定义测试数组
    const players=[
      {name:'kobe',age:40},
      {name:'james',age:30},
      {name:'curry',age:28},
      {name:'coder',age:20},
      {name:'liu',age:21},
    ]

1、forEach

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

// forEach方法是数组自带的方法，只有数组可以使用forEach遍历
// 参数：1.value  2.index   3.arr原数组本身
console.log(Array.prototype)

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

// 测试
players.LyForEach((value,index)=>{
  console.log(value,index)
})

2、map

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

// map这个方法并不会改变原数组，而是返回一个新的数组
// 参数：1.value 2.index 3.arr

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

// 测试
console.log(players.map((item,index)=>{
  return `${item.name}--${item.age}--${index}`
}))

3、filter

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

// filter这是个高阶函数，它也不会改变原数组。而是返回一个新的数组
// 参数：1.value 2.index 3.arr
// 这个方法的返回值必须是一个布尔值

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

// 测试
const newArr=players.LyFilter((item)=>{
  return item.age>21
})
console.log(newArr)

4、every

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

Array.prototype.LyEvery = 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.LyEevery(item => item.num >= 23)) // false
console.log(players.LyEevery(item => item.num >= 0)) // true

5、some

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

// some这个方法主要用来判断数组中是否有某个值
// 如果数组中有一项符合条件就返回true

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

// 测试
const flag=players.LyEvery((value)=>{
  return value.age>21
})
const flag2=players.LyEvery((value)=>{
  return value.age>50
})
console.log(flag)
console.log(flag2)
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：数组本身

// reduce这个方法是用来对数组中的内容进行和运算
// callback中的参数：pre前一项   currentValue:当前项   index：索引

Array.prototype.LyReduce=function(callback,...args){
  let pre
  let start=0
  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
}

// 测试
console.log(players.LyReduce((pre,curValue)=>{
  return pre+curValue.age
},0))

7、findIndex

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

// findIndex这个方法主要是用来返回查找到的索引值
// 找到返回索引值，找不到返回-1

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

// 测试
console.log(players.LyFindIndex((item,index)=>{
  return item.age===21
}))

console.log(players.LyFindIndex((item)=>{
  return item.age===10
}))

8、find

参数代表含义

• item：遍历项
• index：遍历项的索引
• arr：数组本身

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

//测试
console.log(players.LyFind((item,index)=>{
  return item.age===21
}))

9、fill

用处：填充数组

参数代表含义

• initValue：填充的值
• start：开始填充索引，默认0
• end：结束填充索引，默认length

// fill这个方法主要是用来填充数组
console.log(Array.prototype)

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

// 测试
console.log(players.LyFill({name:'jwt',age:20},1,3))

10、includes

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

// includes这个方法主要是用来查找数组中的某一项
// 找到返回true，找不到返回false,可查找NaN

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

// 测试
console.log([1,2,3].LyIncludes(2))//true
console.log([1,2,3,NaN].LyIncludes(NaN))//true
console.log([1,2,3,NaN].LyIncludes(1,1))//false

Array.prototype.includes()

11、join

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

// join这个方法主要适用于将数组转为字符串
// 分隔符默认为,

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

// Array.prototype.LyJoin=function(s=','){
//  return this.toString()
// }

// 测试
console.log(players.LyJoin(''))
console.log([1,2,3].LyJoin())g([1, 2, 3].sx_join('*')) // 1*2*3

12、flat

// flat主要是用来对数组进行将维处理
// 也就是数组扁平化

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

  return newArr
}

// 测试
console.log([1,2,3,[1,2,3],[1,2,[1,2,3]]].LyFlat(2)) 
// console.log([1,2,3,[1,2,3],[1,2,[1,2,3]]].flat(2)) 

Object篇

定义一个测试对象

 // 测试对象
    const obj={
      name:'liu',
      age:21,
      gender:'男'
    }

13、entries

用处：将对象转成键值对数组

// entries这个方法用于将对象中的每个键值对转化为数组形式的键值对
Object.LyEntries=function(obj){
  const res=[]
  for(let key in obj){
    res.push([key,obj[key]])
  }

  return res
}

console.log(Object.LyEntries(obj))

14、fromEntries

用处：跟entries相反，将键值对数组转成对象

Object.LyFromEntries = 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.LyFromEntries([['name', 'liu'], ['age', 21], ['gender', '男']]))

15、keys

用处：将对象的key转成一个数组合集

// keys这个方法主要是用来返回一个新的数组
// 新的数组中包含的是对象中的所有key

// values这个方法是用来返回对象中的所有value

Object.LyKeys=function(obj){
  const res=[]
  for(let key in obj){
    res.push(key)
  }
  return res
}


// 测试
console.log(Object.LyKeys(obj))

16、values

用处：将对象的所有值转成数组合集

Object.LyValues=function(obj){
  const res=[]
  for(let key in obj){
    res.push(obj[key])
  }
  return res
}

console.log(Object.LyValues(obj))

17、instanceOf

用处：A instanceOf B，判断A是否经过B的原型链

function instanceOf(father,child){
  const fp=father.prototype
  let cp=child.__proto__

  while(cp){
    if(cp===fp){
      return true
    }

    cp=cp.__proto__
  }

  return false
}

function Person(name){
  this.name=name
}

const p=new Person('liu')

console.log(instanceOf(Person,p))//true

18、is

用处：Object.is(a, b)，判断a是否等于b

// Object.is()方法是新增的方法
// 主要是弥补了NaN===NaN和=0===-0的缺陷

Object.LyIs=function(x,y){
  if(x===y){
    return x!==0||1/x===1/y
  }

  return x!==x&&y!==y
}

// 测试
console.log(Object.LyIs(NaN,NaN))//true
console.log(Object.LyIs(+0,-0))//false
console.log(Object.LyIs('1',1))//false

Function篇

19、call

Function.prototype.LyCall = function (obj, ...args) {
    obj = obj || window

    // Symbol是唯一的，防止重名key
    const fn = Symbol()
    obj[fn] = this

    // 执行，返回执行值
    return obj[fn](...args)
}

const testobj = {
    name: 'liu',
    testFn(age) {
        console.log(`${this.name}${age}岁了`)
    }
}
const testobj2 = {
    name: 'liucoder'
}

testobj.testFn.LyCall(testobj2, 22) 

20、apply

Function.prototype.LyApply = function (obj, args) {
    obj = obj || window

    // Symbol是唯一的，防止重名key
    const fn = Symbol()
    obj[fn] = this

    // 执行，返回执行值
    return obj[fn](...args)
}

const testobj = {
    name: 'liu',
    testFn(age) {
        console.log(`${this.name}${age}岁了`)
    }
}
const testobj2 = {
    name: 'liucoder'
}

testobj.testFn.LyApply(testobj2, [21])