前端面试

最新推荐文章于 2024-08-02 13:35:44 发布

热心市民大大福

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量132

点赞数 1

文章标签：前端 js css

本文链接：https://blog.csdn.net/weixin_42511431/article/details/112427090

版权

前端面试题

JS冒泡排序
JS二分查找
JS实现Fibonacci数列
二栏布局，左栏定宽200px，右边自适应剩余宽度，要求至少两种方式实现
vue实现ToDoList

1、JS冒泡排序

/**
 * 冒泡排序
 * 比较相邻两个元素的大小，如果反序，则交换，每一轮将最大/最小元素交换到最后位置
 */
function bubbleSort(arr) {
  var temp = 0;
  var len = arr.length;
  // 有交换时进行下一轮，最多n-1轮
  for (var i = 0; i < len-1; i++) {
    for (var j = 0; j < len - i; j++) {
      if (arr[j] > arr[j + 1]) {
        temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

var elements = [4, 5, 2, 3, 7, 1, 8, 9, 6, 4.4, 5.5];
console.log(bubbleSort(elements)); //[1, 2, 3, 4, 4.4, 5, 5.5, 6, 7, 8, 9]

在这里插入图片描述

2、JS二分查找

非递归算法

// 非递归算法
function binary_search(arr, key) {
  var low = 0,
    high = arr.length - 1;
  while (low <= high) {                     //边界有效
    var mid = parseInt((high + low) / 2);   //取中间位置
    if (key == arr[mid]) {                  //两元素相等
      return mid;                           //查找成功
    } else if (key > arr[mid]) {            //key较大
      low = mid + 1;                        //查找范围缩小到后半段
    } else {            
      high = mid - 1;                       //查找范围缩小到前半段
    } 
  }
  return -1;                                //查找不成功
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23, 44, 86];
var result = binary_search(arr, 10);
console.log(result); // 9 返回目标元素的索引值

在这里插入图片描述
2. 递归算法

// 递归算法
function binary_search(arr,low, high, key) {
  if (low > high){
      return -1;
  }
  var mid = parseInt((high + low) / 2);
  if(arr[mid] == key){
      return mid;
  }else if (arr[mid] > key){
      high = mid - 1;
      return binary_search(arr, low, high, key);
  }else if (arr[mid] < key){
      low = mid + 1;
      return binary_search(arr, low, high, key);
  }
};
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result = binary_search(arr, 0, 13, 10);
console.log(result); // 9 返回目标元素的索引值

3、JS实现Fibonacci数列

递归实现

var fibonacci = function(n){
	return n<2 ? n : fibonacci(n-1) +  fibonacci(n-2);
};

for循环实现

var fibonacci = function (n) {
  var last = 0;
  var laster = 1;
  var current = last;
  for (var i = 1; i <= n; i++) {
    last = laster;
    laster = current;
    current = last + laster;
  }
  return current;
}

4、二栏布局，左栏定宽200px，右边自适应剩余宽度，要求至少两种方式实现

将左侧div浮动，设置宽200px，右侧的div设置一个左外边距margin-left等于左侧宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    div {
      height: 200px;
    }

    #left {
      float: left;
      width: 200px;
      border-right: 2px solid black;
    }

    #right {
      margin-left: 200px;
      border-left: 2px solid black;
    }
  </style>

  <section id="left">
    <ui>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ui>
  </section>
  <section id="right">
    111
  </section>
</body>

</html>

将body的display为flex，让body遵从flex布局，且设置flex-flow为row，横向的，左侧div宽度200px，右侧div的flex:1，1会将剩余宽度全部占满，即如果左侧宽度发生改变的话，右侧能够自适应，而不用像第一种方法那样margin-left也要修改。

    body {
      display: flex;
      flex-flow: row;
    }

    #left {
      width: 200px;
      border-right: 2px solid black;
    }

    #right {
      flex: 1;
      border-left: 2px solid black;
    }

overflow:hidden

   #left {
      float: left;
      width: 200px;
      border-right: 2px solid black;
    }

    #right {
      overflow: hidden;
    }

在这里插入图片描述

热心市民大大福

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端面试

前端面试题JS冒泡排序JS二分查找二栏布局，左栏定宽200px，右边自适应剩余宽度，要求至少两种方式实现1、JS冒泡排序/** * 冒泡排序 * 比较相邻两个元素的大小，如果反序，则交换，每一轮将最大/最小元素交换到最后位置 */function bubbleSort(arr) { var temp = 0; var len = arr.length; // 有交换时进行下一轮，最多n-1轮 for (var i = 0; i < len-1; i++) {
复制链接

扫一扫