2022-01-29 牛客网前端基础题目30题和相关知识扩展汇总(一)

前端OnTheRun

已于 2025-03-26 15:10:55 修改

阅读量9

点赞数

分类专栏：面试知识点文章标签：前端面试前端面试

于 2022-01-29 20:29:10 首次发布

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

版权

知识点同时被 2 个专栏收录

90 篇文章

订阅专栏

面试

43 篇文章

订阅专栏

 <style type="text/css">
            /*补全代码*/
            *{
              font-size:20px;
            }
            div{
              color:rgb(255, 0, 0)
            }
          .green{
            color:rgb(0, 128, 0)
          }
          #black{
            color:rgb(0, 0, 0)
          }
</style>
 
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>

十.伪类选择器设置li标签的背景色

1.要求

请将html模块中ul列表的第2个li标签和
第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

2.代码

       /* 此题注意两点:是li不是ul,是24不是13 */
       li:nth-child(2),li:nth-child(4){
        background:rgb(255, 0, 0);

十一.在div后创建伪元素并添加宽高(重点)

1.考点

两个考点:
伪元素必须有这句content,以添加文字内容
伪元素是行内元素,不能添加宽高

2.代码

       /* 填写样式 */
       div::after{
        content:"";
        display:block;
        width: 20px;
        height: 20px;
        background:rgb(255, 0, 0);
       }

十二.按要求画圆并设置边框和半径

1. 要求

  请将html模块的div元素设置为一个半径是50px的圆，
  且边框为1px的黑色实线。

要求：

圆角属性仅设置一个值
圆角属性单位请使用px

2.代码

       div{
        /* 两个难点:只设置一个宽度,不设置高度,
        border-radius不要用百分比,用px */
        width: 100px;
        border-radius: 50px;
        border:1px black solid;
       }

十三.设置盒子的内外边距(略)

十四.设置子盒子的内外浮动并消除父盒子的浮动影响(重点)

1.考点:子元素设置浮动后造成父元素高度塌陷,怎么解决?

一.父元素设置固定高度
二.在设置浮动的子元素后面创建一个空盒子撑住高度
三.用伪元素::after的方法设置空盒子
四.父元素设置overflow:hidden;

2.代码

.wrap {
    /*补全代码*/
    background: pink;
        overflow:hidden;
    
}
 .left {
    width: 100px;
    height: 100px;
    /*补全代码*/
    float: left;
    background: blue;
}
 .right {
    width: 100px;
    height: 100px;
    /*补全代码*/
    float: right;
    background: green;
    
}

十五.使用固定定位吧box固定在左上角

    /*补全代码*/
    position:fixed;
    top:0;
    left:0;
}

十六.把box的宽高设置为字体大小的四倍

1.考的是相对单位em

2.代码

.box {
    /*补全代码*/
    width: 4em;
    height: 4em;
}

十七.以字符串的形式返回参数的数据类型

        // 知识点:typeof(str)可以返回数据类型
        function _typeof(value) {
        return typeof(value);
        }

十八.返回复杂数据类型

//考点:instanceof的格式
function _instanceof(left,right) {
   return left instanceof right;
}

十九.把两个数字拼接成一个字符串

1.要求

  请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。
  示例：
    1. _splice(223,233) -> "223233"
    2. _splice(-223,-233) -> "-223-233"

2.代码

    // 考点:显示转换和隐式转换,字符串拼接的几种方法
        function _splice(left,right) {
          var str=String(left).concat("",String(right));
          return str;
}

3.相关内容:显式转换和隐式转换,字符串拼接的几种方法

数字转换为字符串的方法:(显式转换)

//String()和toString()的用法
String(num);
num.toString();
console.log(num+'');

使用算术运算符进行隐式转换:

 +string
 var str = '500';
 console.log(+str);        // 取正
 string-0

字符串拼接:

var str1="hello",str2="world"
方法一:str1.concat(str2)
方法二:str1+str2;
方法三:str="hello ${str2}"
方法四:[str1,str2].join(" ")

二十.计算数字参数的阶乘

	 //递归
      function _factorial(number) {
        if (number > 1) {
          return number * _factorial(number - 1);
        } else {
          return 1;
        }

二十一.两个函数的参数分别是幂的底数和指数

      // 考点:使用循环来表示number乘以它本身的次数
      function _pow(number, power) {
        for (var i = 1; i < power; i++) {
          number *= number;
        }
        return number;
      }
      console.log(_pow(5, 2)); //25

二十三.完成平方根函数

      // 难点:二分法
      function _sqrt(number) {
        // 补全代码
        for (var i = 1; i <= number; i++) {
          if (i * i == number) return i;
        }
      }
      console.log(_sqrt(36));//6

二十四.将数组从大到小排列

1.冒泡排序

/**************冒泡排序的思路******************/
/*
  第一步:
  for(var i=0;i<arr.length;i++) 比较a[i]<a[i+1] 把最小值冒泡到数组的最后位置
  第二步:
  for(var i=0;i<arr.length-1;i++) 比较a[i]<a[i+1] 把最小值冒泡到数组的倒数第二位置
  ...
  最后一步:比较a[0]<a[1]
综上:把第一步到最后一步用一个新的循环(形参为j)来表示,就是冒泡排序
*/
for(var j=1;j<arr.length;j++){
  //i的最大循环范围每一轮都不一样,从arr.length-1到1(1的时候还可以比较前两个元素)
  for(var i=0;i<arr.length-j+1;i++){
  if(arr[i]<arr[i+1]) [arr[i],arr[i+1]]=[arr[i+1],arr[i]]//解构赋值交换值
   }
}
console.log(arr);

2.选择排序

/*************选择排序的思路********************/
/*
  第一步:
  选择假定第一个元素是数组最大值,如果不是,就通过一轮循环,交换比它大的元素,循环结束后第一个元素就是数组最大值
  var max=arr[0],maxIndex=0;
  for(var i=0;i<arr.length;i++){
    if(max<arr[i]) [arr[i],max]=[max,arr[i]];maxIndex=i;
  }
  第二步:
  选择假定第二个元素是剩下数组元素的最大值,步骤同上
  var max=arr[1],maxIndex=1;
  for(var i=1;i<arr.length;i++){
    if(max<arr[i]) [arr[i],max]=[max,arr[i]];maxIndex=i;
  }
  最后一步:比较最后两个元素中的最大值
  综上,需要再在外面套一层循环来表示i的初始值的变化,其范围是0~arr.length-2
  (最后一轮是最后两个元素arr[arr.length-2]和arr[arr.length-1]的比较)
*/
for(var j=0;j<arr.length-1;j++){
  for(var i=j+1;i<arr.length;i++){//如果arr[j]是max,那么arr[i]要从第二个元素开始,即i=1
    //  var max=arr[0],maxIndex=0;//max此时被替代成arr[j]
     if(arr[j]<arr[i]){
        [arr[i],arr[j]]=[arr[j],arr[i]];
      }
  }
}
console.log(arr);

二十五.以数组的形式输出对象各个属性的键名

// 示例:_keys({name:'nowcoder',age:7}) -> ['name','age']
var obj={name:'nowcoder',age:7};
// 方法一:Object.keys()
function _keys(object) {
  return Object.keys(object);
}
// 方法二:arr.push()
var arr=[];
for(var i in obj){
  arr.push(i);
}
console.log("我是对象名数组:",arr,"我也是对象名数组:",_keys(obj));