JS小配菜---数组常用API以及自封Map,Filter,Reduce

104 阅读4分钟

数组常用API

在刚开始学习JavaScript的时候,有时候会混淆,今天给大家整理一下自己的笔记,相互学习 不过,这里列举的都是常用的API,可能在开发过程中,不仅限于此,毕竟有一句话说的好,"已知越大,未知越大",如果有遇到更多更好的API,欢迎在底下码字讨论,一起进步!!!

列举数组常用API

  • ==>:代表返回值 ===>:是否会改变数组
  • shift():删除数组头一项==>被删除的项===>会改变原数组
  • unshift():在数组前插入任意项==>新数组的长度===>会改变原数组 <巧记:在头上安(un)了任意顶颜色好看的帽子>
  • pop():删除数组尾一项==>被删除的项===>会改变原数组
  • push():向数组末尾插入任意项==>新数组的长度===>会改变新数组
  • slice(a,b):按照索引查找数组索引号a,b当中所有项[a,b)半开半闭,不包含b【支持负数,-1代表最后一项】==>返回一个新数组===>不会改变原数组
  • splice(a,b,c):对数组进行增删改,a,b,c:光标定位到某个索引号之前,删除元素个数,插入元素(在光标点位前插入) ==>返回空数组===>改变原数组
  • reverse():原地翻转数组==>返回翻转后的数组===>会改变原数组
  • join(a):用指定分隔符将数组每一项拼接成字符串,a:以什么连接符拼接==>返回拼接好的字符串===>不改变原数组
  • indexOf(a,b):检测当前值在数组当中第一次出现的位置,a,b:需要查找的元素,查找元素的起始位置;==>存在返回索引号,没有返回-1===>不改变原数组;如果想继续找出查找元素的下一项,需要越过当前找到位置的索引号,可以使用while()循环,通过遍历找出所有;
  • lastIndexOf(a,b)检测当前值在数组当中最后一次出现的位置a,b:需要查找的元素,查找元素的起始位置==>存在返回索引号,没有返回-1===>不改变原数组
  • concat(a,b):连接两个或多个数组a,b:需要进行拼接的数组==>返回的是拼接完成后的数组===>不改变原数组
  • includes(a):判断一个数组是否含有指定元素,a:查找的项/元素==>返回布尔值===>不改变原数组
  • forEach(item,index,_arr)遍历循环数组每一项,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)==>没有返回值
  • map(item,index,_arr)==>将数组当中每一项映射出对应结果的新数组===>不会改变原数组,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)
  • filter(item,index,_arr)==>过滤出满足条件的新数组==>不会改变原数组,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)
  • find(item,index,_arr)==>找到满足条件的第一个元素===>不会改变原数组,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)
  • some(item,index,_arr)==>判断数组中是否含有满足条件的元素===>不改变原数组,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)
  • every(item,index,_arr)==>判断数组中所有的元素是否满足条件===>不改变原数组,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)
  • reduce(callback( Accumulator,item,index,_arr),initialValue)==>返回一个值===>不改变原数组【Accumulator:累加器累加回调函数的返回值,如果不给初始值,则默认使用callback执行的结果】,item,index,_arr:数组的当前项,数组当前项的索引号,数组本身(很少使用)
  • sort(a,b)对数组的元素进行排序,a-b:代表升序;b-a:代表降序==>排序后的新数组===>会改变原数组;如果是一个对象,可以利用每一个对象里面的相同key的值进行排序

测试脚本

`

    const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    const arr1 = [3, 1, 4, 5, 9, 2, 6, 7, 8]
    const arr2 = [9, 8, 7, 6, 5, 4, 3, 2, 1]
    const arr3 = ["a", "c", "d", "i"]
    const arr4 = ["a", "s", "d", "f", "a", "a", "d", "s", "d"]
    const arr5 = ["a"]
    const arr6 = ["b"]
    const arr7 = ["c"]
    const arr8 = ["d"]
    const arr9 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    const arr10 = [{ name: "赵四", score: 85 }, { name: "钟山", score: 87 }, { name: "王五", score: 95 }]
    //==>:代表返回值  ===>:是否会改变数组
    
    // 删除数组第一项shift()==>返回被删除的项===>会改变原数组
    console.log(arr.shift());
    console.log(arr);
    // 向数组头部添加内容unshift()=>可一次性添加多项==>返回新数组长度===>会改变新数组
    console.log(arr.unshift("a", "b", "c"));
    console.log(arr);
    // 删除数组最后一项pop()==>返回被删除的项===>会改变原数组
    console.log(arr.pop());
    console.log(arr);
    // 向数组末尾添加内容push()=>可一次性添加多项==>返回新数组长度===>会改变新数组
    console.log(arr1.push("a", "b", "c", "d", "e"));
    console.log(arr1);
    // 按照索引查找数组当中内容:
    //slice():[区间)【支持负数,-1代表最后一项】==>返回一个新数组===>不会改变原数组
    console.log(arr2.slice(3, 5));
    console.log(arr2.slice(3, -1));//不包含最后一项
    console.log(arr2.slice(3,));//直接截取到末尾
    // 对数组进行增删改,splice(arg1,arg2,arg3):光标定位到某个索引号之前,删除元素个数,插入元素(在光标点位前插入)
    // ==>返回空数组===>改变原数组
    console.log(arr3.splice(1, 0, "b"));
    console.log(arr3);
    console.log(arr3.splice(4, 0, "e", "f", "g", "h"));
    console.log(arr3);
    // 原地翻转数组reverse()==>返回翻转后的数组===>会改变原数组
    console.log(arr3.reverse());
    // 用指定分隔符将数组每一项拼接成字符串join("连接符")==>返回拼接好的字符串===>不改变原数组
    console.log(arr3.reverse().join("-"));
    // 检测当前值在数组当中第一次出现的位置indexOf(arg1,arg2):需要查找的元素,查找元素的起始位置
    //==>存在返回索引号,没有返回-1===>不改变原数组
    console.log(arr4.indexOf("d"));
    console.log(arr4.indexOf("d", 3));
    console.log(arr4.indexOf("y"));
    // 检测当前值在数组当中最后一次出现的位置lastIndexOf(arg1,arg2):需要查找的元素,查找元素的起始位置
    //==>存在返回索引号,没有返回-1===>不改变原数组
    console.log(arr4.lastIndexOf("s"));
    console.log(arr4.lastIndexOf("s", 6));
    console.log(arr4.lastIndexOf("s", -3));
    console.log(arr4.lastIndexOf("z"));
    // 连接两个或多个数组concat(arr1,arr2...)==>返回的是拼接完成后的数组===>不改变原数组
    console.log(arr5.concat(arr6));
    console.log(arr5);
    console.log(arr5.concat(arr6, arr7, arr8));
    console.log(arr5);
    // 判断一个数组是否含有指定元素==>返回布尔值===>不改变原数组
    console.log(arr5.includes("a"));
    console.log(arr5.includes("ab"));
    // forEach(item,index,_arr)遍历循环数组每一项==>没有返回值
    arr.forEach((item, index, _arr) => console.log(item, index, _arr))
    // map(item,index,_arr)==>将数组当中每一项映射出对应结果的新数组===>不会改变原数组
    console.log(arr9.map(item => item * 5));
    console.log(arr9);
    // filter(item,index,_arr)==>过滤出满足条件的新数组==>不会改变原数组
    console.log(arr9.filter(item => item % 2 === 0));
    console.log(arr9);
    // find(item,index,_arr)==>找到满足条件的第一个元素===>不会改变原数组
    console.log(arr9.find(item => item % 3 === 0 && item !== 0));
    console.log(arr9);
    // some(item,index,_arr)==>判断数组中是否含有满足条件的元素===>不改变原数组
    console.log(arr9.some(item => item % 3 === 0 && item !== 0));
    console.log(arr9);
    // every(item,index,_arr)==>判断数组中所有的元素是否满足条件===>不改变原数组
    console.log(arr9.every(item => item % 3 === 0 && item !== 0));
    console.log(arr9);
    // reduce(callback( Accumulator,item,index,_arr),initialValue)==>返回一个值
    //===>不改变原数组【Accumulator:累加器累加回调函数的返回值,如果不给初始值,则默认使用callback的结果赋值给tempPv】
    console.log(arr9.reduce((pv, cv) => pv + cv));
    console.log(arr9.reduce((pv, cv) => pv + cv, 100));
    console.log(arr9);
    // sort()对数组的元素进行排序==>排序后的新数组===>会改变原数组
    console.log(arr9.sort((a, b) => a - b));//升序
    console.log(arr9.sort((a, b) => b - a));//降序
    console.log(arr10.sort((a, b) => a.score - b.score));//利用对象里面的Key按升序排列 

`

如果没有XXX,我们该怎么办???

作为一名合格的程序员,必须要具备的本领就是,想要XXX,但是又没有XXX,那我就哔哩啪啦的给他造出来,这不仅是体现程序员的逻辑,更是体现了你对这个东西的理解到位不到位,透彻不透彻!!!

开始展示,我们的轮子

没有Map(),怎么办?

`

  Array.prototype.mymap = function (handle) {
    const newArr = []
    for (let i = 0; i < this.length; i++) {
      newArr.push(handle(this[i], i, this))
    }
    return newArr
  }
  const arr = [1, 2, 3, 4]
  const narr = arr.mymap(
    (item, index) => Math.pow(item, index)
  )

  // 输出结果应为[1,2,9,64]
  console.log(narr);

`

没有Filter(),怎么办? `

    Array.prototype.myFilter=function(handle){
        const newArr = []
        for(let i = 0;i<this.length;i++){
            /* 判断是否满足条件通过过滤 */
            let ok = handle(this[i],i,this)
            /* 满足条件,登上珠穆朗玛峰 */
            ok && newArr.push(this[i])
        }
        return newArr
    }
    const arr = [1,2,3,4,5,6]
    /* 输出结果应为[3,6] */
    console.log(arr.myFilter(item=>item%3===0));

`

没有reduce,我们怎么办??? `

    Array.prototype.myReduce = function(callback,initialValue){
        /* 是否有初始值 */
        let tempPv = initialValue
        for(let i = 0;i<this.length;i++){
            /* 执行callback的结果赋值给tempPv */
            tempPv = callback(tempPv,this[i],i,this)
        }
        return tempPv
    }
    const arr1 = [1,2,3,4,5,6]
    /* 输出结果应为121 */
    console.log(arr.myReduce((pv,cv)=>pv+cv,100));
` ====================

轮子是封不完的,剩下大家自己分析推敲,下课下课!!!