2022-02-07 牛客网前端基础题目30题和相关知识扩展汇总(二)-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/122809734

文章目录

一.去除字符串两端的空格

function _trim(string) {
   return string.trim();
}

二.以字符串的形式输出时间戳参数

1.要求和思路

示例：date(1631159776311) -> ‘2021-9-9’
1.使用日期对象并将时间戳作为形参,可以得到一个日期对象实例date,它的值是标准时间

var date=new Date(1631159776311);
// console.log(date);//Thu Sep 09 2021 11:56:16 GMT+0800 (中国标准时间)

2.对date实例使用toLocaleDateString()方法,获取到当前时间的字符串

//var localTime=date.toLocaleDateString();
// console.log(localTime);//2021/9/9 string
//踩坑一:date.toLocaleDateString("zh-CN"),里面要写中国地区,即:
var localTimedate.toLocaleDateString("zh-CN")

3.用"-“替换”/"

//var newLocalTime=localTime.replaceAll("/","-");
// console.log("转换后:",newLocalTime,);//2021-9-9
//踩坑二:replaceAll不兼容,要用两次replace
var newLocalTime=localTime.replace("/","-").replace("/","-");

2.代码

function _date(number) {
  var date=new Date(number);
  var temp=date.toLocaleDateString('zh-CN');
  return temp.replace("/","-").replace("/","-");
}

三.找到数字数组的最大值

1.难点

sort()方法需要带上参数,才能不出现"2>100"的情况

2.代码

        function _max(array) {
            return array.sort((a,b)=>a-b)[array.length-1];
        }

四.判断字符串中是否包含数字

function _search(string) {
  return /[0-9]/.test(string);
}

五.输出一串数字参数的反转数字

1.示例和思路

示例:

1. _reverse(0) -> 0
2. _reverse(233) -> 332
3. _reverse(-223) -> -322

思路:
转化成字符串,
字符串分割为字符数组,
反转数组,
再合并成一个新的数字

2.代码

function _reverse(number) {
    var str=String(number);
    var arr1=str.split("");
    var str2=arr1.reverse().join('');
    return Number(str2); 
}

六.动态创建li并让形参数组的长度和元素分别为li的个数和内容

function createLi(array){
    /*
    1. li元素的个数和数组的长度一样
    2. li元素的内容是数组中的每个元素
    3. 将创建的所有li元素插入到ul中
    */
    for(var i=0;i<array.length;i++){
            var li=document.createElement("li");
            li.innerHTML=array[i];
            document.querySelector("ul").append(li);
    }
}

七.阻止ul的事件冒泡

var ul=document.querySelector("ul");
var li=document.querySelector("li");
li.onclick=function func(eve){
    var e=eve||window.event;
    if(e.stopPropagation) e.stopPropagation();
    else e.cancelBubble=true;
    console.log("hello!")
}

八.阻止input复选框的默认事件让其不会取消勾选

1.要求

    请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。
    注意：需要自行获取input元素。
    请使用es5兼容的语法

2.代码

html:
<form>
	<label>hello world</label>
	<input id="checkbox" type="checkbox" checked />
</form>

JavaScript:
        var box=document.getElementById("checkbox");
        var label=document.querySelector("label");
        box.onclick=function(eve){
          var e=window.event||eve;
          if(e.preventDefault) e.preventDefault();
          else e.returnValue=true;
          //console.log(label.innerHTML);
        }

九.实现一个盒子的关闭按钮功能(太简单可跳过)

1.要求

    要求：
    1. 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
    2. 使类为"btn"的div元素中内容"X"垂直水平居中
    3. 点击"X"按钮可以使类为"box"的div元素隐藏

2.代码

 var btn = document.querySelector('.btn');
 var box = document.querySelector('.box');
 btn.onclick = function(){
     // 补全代码
     // 点击关闭后盒子隐藏
     box.style.display="none";
 }

十.数组去重且不改变原数组

1.代码

//使用Set进行数组去重
function remove(arr,item){
	var newArr=new Set(arr)
	//最后还要转化为真数组:
	//return [...newArr];
	return Array.from(newArr)
}

2.数组去重方法汇总

  // 1.使用Set去重
  function fn1(arr){
    // return [...new Set(arr)];
    return Array.from(new Set(arr));
  }
  // 2.使用indexOf判断,使用push添加
  function fn2(arr){
    var newArr=[];
    for(let i in arr){
      if(newArr.indexOf(arr[i])==-1) newArr.push(arr[i]);
    }
    return newArr;
  }
  // 3.先排序,再冒泡对比,过程中用splice删除重复元素
  function fn3(arr){
    arr.sort((a,b)=>a-b);//排序
    for(var i=0;i<arr.length-1;i++){
      if(arr[i]===arr[i+1]){
        arr.splice(i,1);//删除
        i--;//删除后记得循环次数返回去一轮
      }
    }
    return arr;
  }
  // 4.不排序,用双层循环,过程中用splice删除重复元素
  function fn4(arr){
    for(var i=0;i<arr.length;i++){
    for(var j=i+1;j<arr.length;j++){//注意j的起始位置是i+1
        if(arr[i]===arr[j]){
          arr.splice(j,1);
          i--;
        }
      }
    }
    return arr;
  }
  // 5.引入一个布尔变量来决定新数组是否push进arr的元素
  function fn5(arr){
    var newArr=[];
    for(let i in arr){
      var repeat=false;
      for(let j in newArr){
        if(newArr[j]===arr[i]) repeat=true;
      }
      if(!repeat) newArr.push(arr[i]);
    }
    return newArr;
  }
  // 6.使用includes方法来决定新数组是否push进arr元素
  function fn6(arr){
    var newArr=[];
    for(let i in arr){
      if(!newArr.includes(arr[i])) newArr.push(arr[i]);
    }
    return newArr;
  }
  // 7.利用对象属性的唯一性对数组去重
  function fn7(arr){
    var newArr=[];
    var obj={};
    for(let i in arr){
      if(!obj[arr[i]]){//若当前数组元素不是对象属性时
        newArr.push(arr[i]);//push进这个不是对象属性的数组元素
        obj[arr[i]]=1;//然后让当前数组元素成为对象属性,属性值为1(任意值),目的是利用唯一性让后续重复的数组元素不能再被push进来
      }
    }
    return newArr;
  }
  var array=[3,15,21,2,1,4,3,1,2,1,2];
  console.log("去重数组:",fn7(array));

十一.不改变原数组,返回移出数组值为item的元素后的新数组

1.思路

新数组push进所有值不为item的原数组元素

2.代码

//方法一:
function remove(arr, item) {
  var newArr=[];
  for(let i of arr){//在for..of循环中,i是数组元素,不是下标
    if(i!=item) newArr.push(i)
  }
return newArr;
}
//方法二:filter
// newArr=arr.filter(function(i,idx,arr){
//  return i!=item;
// })

十二.在删除值为item的元素后返回这个数组

  for(var i=0;i<arr.length;i++){
    if(item===arr[i]){
      arr.splice(i,1);
      i--;//删除后循环往回一次
    }
  }

十三.不改变原数组,在数组末尾添加item元素后返回新数组

function append(arr, item) {
     // 1.使用拓展运算符:...
    return [...arr,item];
    // 2.使用concat
    // return arr.concat(item);
}

十四.不改变原数组,返回删除最后一个元素后的新数组

  var newArr=arr.filter(function(item,index){
    return index<arr.length-1;
  });

十五.不改变原数组,返回删除第一个元素的新数组

newarr=arr.filter((i,idx)=>{
    return idx>0;//idx=0即第一个元素被过滤掉了
})

十六.不改变原数组,返回在index位置插入item元素后的新数组

function insert(arr,item,index){
    // 不改变原数组,先复制一个newarr再对其进行插入操作
    var newarr=arr.slice(0);//或者=[...arr]
    //  在index位置插入item
    newarr.splice(index,0,item);
    return newarr;
}

十七.返回元素为原数组元素的二次方的新数组

function square(arr) {
    var newarr=[];
    // for(let i of arr){
    //     newarr.push(i*i)
    // }
    // 方法二:使用map方法
    newarr=arr.map(function(item,index){
        return item*item;
    })
    return newarr;
}

十八.查找数组中值为item的全部元素出现的位置

var arr=['a','b','c','d','e','f','a','b','c'];
// console.log(arr.indexOf("a"));
function findAllOccurrences(arr, target) {
  var indexArr=[];
  for(var i in arr){//for..in循环中,i是数组索引
      if(arr[i]===target){
          indexArr.push(i)
      }
  }
  return indexArr;
}
console.log(findAllOccurrences(arr,"a"));

十九.重写parseInt方法

function parse2Int(num) {
    // 方法一:十进制,且忽略非数字类型
    // return parseInt(num,10);
    // 方法二:先把num用splice分割成一个数组,
// 遍历数组,过滤所有非数字元素,把数字元素push进新数组,最后拼接成数字
    var arr1=num.split("");//1.把num分割成一个数组
    var arr2=[];
    for(var i of arr){
      if(!isNaN(i)) arr2.push(i);//2.把数字push进空数组arr2
    }
    num=arr2.join('');//3.纯数字数组拼接成一个数字
    return num;
    
}
console.log(parseInt('0x12'));//18

二十.判断两个参数是否全等

function identity(val1, val2) {
    if(typeof val1!==typeof val2){//类型不同
      return false;
    }else if(val1!==val2){//值不同
      return false;
    }else{//类型相同且值相同的时候返回true
      return true;
    } 
}

二十一.统计字符串里每个字符和其出现频率作为对象的键值对

function count(str) {
    var arr=Array.from(str.replace(" ",""));//去除空格的字符数组
    var obj={};
    //遍历字符数组,item是数组元素(一个字符),i是元素索引
    arr.forEach(function(item,i){
      //对象obj中存在名为item的属性吗?
      if(!obj.hasOwnProperty(item)){//不存在:把当前item新增为对象属性名,属性值为1
        obj[item]=1;
      }else{//存在:让item的属性值自增1
        obj[item]+=1;
      }
    });
    return obj;
}
console.log(count("just for test!!!"))