史上最牛逼的5道题,学不会前端我带你!

前言

5道JS能力评测题个人觉得是非常好的5道js基础检测题,基本就是对自己的JavaScript基础做一个比较全面的评估,包括if语句、循环体、基础操作符、setInterval、setTimeout、流程控制、常用数组方法及es6相关(解构、Map、Set、...等)。之前我已经做过一遍了,我记得以前牛客网不支持es6的写法,这两天花了点时间把所有题目又做了一遍,发现支持es6了。这次每个题目我都尽力用了不同的方法实现,建议各位看官收藏,需要的时候方便查看。当然如果你有更好更新颖的实现方法,欢迎评论区留言交流。

史上最牛逼的5道题,学不会前端我带你!

我也把常用的数组方法和字符串方法贴在这里,可以自测掌握程度

史上最牛逼的5道题,学不会前端我带你!

史上最牛逼的5道题,学不会前端我带你!

 

如果还在IT编程的世界里迷茫,不知道自己的未来规划,学习没有动力,东也学一下,西也学习一下,那你可以加入web前端学习交流Q群:733581373, 里面有大神一起交流并走出迷茫。新手可进群免费领取学习资料,分享一些学习的方法和需要注意的小细节,每晚八点也会准时的讲一些前端的小案例项目。

 

1、查找数组元素位置

史上最牛逼的5道题,学不会前端我带你!

第一题比较简单,就直接上答案:

// 方法一
function indexOf(arr, item) {
    if(Array.prototype.indexOf){// 判断浏览器是否支持indexOf方法
        return arr.indexOf(item);
    }else{
        for(var i=0;i<arr.length;i++){
            if(arr[i]===item){
                return i;
            }
        }
    }
    return -1;
}
// 方法二
function indexOf(arr, item) {
 if(Array.prototype.indexOf){// 判断浏览器是否支持indexOf方法
        return arr.indexOf(item);
    } else if (arr.indexOf(item) > 0) {
        return arr.indexOf(item)
    }else{
        return -1
    }
}

这里顺便说一下Array.prototype.indexOf

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

语法:

 arr.indexOf(searchElement) //查找searchElement元素在数组中的第一个位置
 arr.indexOf(searchElement[, fromIndex = 0]) //从fromIndex开始查找searchElement元素在数组中的第一个位置


还有另外一个查找字符串的方法String.prototype.indexOf()

str.indexOf(searchValue[, fromIndex])

  • searchValue:一个字符串表示被查找的值。
  • fromIndex (可选):表示调用该方法的字符串中开始查找的位置。可以是任意整数。默认值为 0。如果 fromIndex < 0 则查找整个字符串(如同传进了 0)。如果 fromIndex >= str.length,则该方法返回 -1,除非被查找的字符串是一个空字符串,此时返回 str.length。

具体可以看看MDN

2、添加元素(末尾添加)

史上最牛逼的5道题,学不会前端我带你!

方法一:普通的for循环拷贝+push

function append(arr, item) {
    let resArr = []
    for(let i = 0;i<arr.length;i++){
        resArr.push(arr[i]) 
    }
    resArr.push(item)
    return resArr
}

方法二:使用concat将传入的数组或非数组值与原数组合并,组成一个新的数组并返回

function append(arr, item) {
    return arr.concat(item);
}

方法三:使用slice浅拷贝+push

function append(arr, item) {
     let newArr = arr.slice(0);  // slice(start, end)浅拷贝数组
    newArr.push(item);
    return newArr;
}

方法四:...扩展运算符 如果不知道的,可以看看es6的相关知识

function append(arr, item) {
let resArr = [...arr,item]
return resArr
}

3、移除数组中的元素(返回原数组)

史上最牛逼的5道题,学不会前端我带你!

这里需要注意理解题目,是直接操作原数组,所以不能出现newArr

方法一:普通for循环+splice

function removeWithoutCopy(arr, item) {
    for(let i=arr.length;i>=0;i--){
        if(arr[i]==item){
            arr.splice(i,1);
        }
    }
    return arr;
}

方法二:方法一的另外一种写法

在这里要注意在删除掉一个元素时,要 i–,即删除这个元素后,其他元素位置往前移。

function removeWithoutCopy(arr, item) {
    for(let i = 0; i< arr.length; i++) {
        if(arr[i]===item) {
            arr.splice(i,1);
            i--;
        }
    }
    return arr;
}


把第3题稍微变一下,看下一题

4、移除数组中的元素(返回新的数组)

史上最牛逼的5道题,学不会前端我带你!

方法一:filter过滤

function remove(arr, item) {
     return arr.filter(res =>{
         return res != item;
    })
}

方法二:for循环+push

function remove(arr, item) {
    let resArr = []
    for(let i = 0;i<arr.length;i++){
        if(arr[i]!== item){
            resArr.push(arr[i])
        }
    }
    return resArr
}

方法三:forEach+push(效率高于for循环)

function remove(arr, item) {
    let resArr=[];
    arr.forEach(v=>{
        if(v!==item){
            resArr.push(v);
        }
    })
    return resArr;
}

方法四:for循环+splice

function remove(arr,item){
    let resArr= arr.slice(0);
    for(let i=0;i<resArr.length;i++){
        if(resArr[i] == item){
            resArr.splice(i,1);
            i--;
        }
    }
    return resArr;
}

5、数组求和

史上最牛逼的5道题,学不会前端我带你!

方法一:普通for循环

function sum(arr) {
    let res = 0
    for(let i=0;i<=arr.length;i++){
        res +=arr[i]
    }
    return res
}

方法二:forEach循环

function sum(arr) {
    let res = 0
arr.forEach((value,index,array)=>{
    array[index] == value;    //结果为true
     res+=value;  
    });
    return res;
};

方法三:reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,具体可以看看es6相关知识。

function sum(arr) {
    return arr.reduce((pre,cur)=>{
        return pre+cur;
    })
}

方法四:eval

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

function sum(arr) {
     return eval(arr.join("+"));
}

结语

看完如果觉得对你有帮助,劳烦点个赞哈,你的鼓励就是我更新最大的动力!

学习使我快乐!

最后,想学习前端的小伙伴们!

如果还在IT编程的世界里迷茫,不知道自己的未来规划,学习没有动力,东也学一下,西也学习一下,那你可以加入web前端学习交流Q群:733581373, 里面有大神一起交流并走出迷茫。新手可进群免费领取学习资料,分享一些学习的方法和需要注意的小细节,每晚八点也会准时的讲一些前端的小案例项目。

史上最牛逼的5道题,学不会前端我带你!