前端面试实操题

使用react实现一个时间组件.(每秒都需要更新)

import { useState, useEffect, useRef } from "react";
const date = new Date();

export default function Clock() {
  let timer = useRef(null);
  const [time, setTime] = useState(date);
  useEffect(() => {
    timer.current = setTimeout(() => {
      setTime(new Date());
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [time]);
  console.log(time);

  return <div>{time.toLocaleTimeString()}</div>;
}

在不声明第三个变量的前提下,将两个变量的赋值互换.

• 题目:
  - i=3, j=5
  思路:
  • 两个变量的总和是不变的,想要 j 变为 i ,只需要用总和减去 j 就可以了
  • 参考文章@源辰_付
  • 参考文章@W蘭

let i=3,j=5;
i=i+j;//i=8
j=i-j;//j=3
i=i-j;//i=5

console.log(i,j)// 5,3

方法二：
a = [b,b=a][0];

方法三：解构赋值
[a,b]=[b,a]

vue 实现一个 模态框

参考文章@田江
要点：

• 父子组件传值。（子组件改变父组件的状态）
• 模态框铺满全屏（css 样式）

我的代码：

父组件中：
	 dialogBoolean: false
	 
    <Dialog v-if="dialogBoolean" :test.sync="dialogBoolean"></Dialog>
    
模态框组件：

	<template>
	  <div class="dialog">
	    <div class="dialog_content">
	      <button @click="handle">点击关闭</button>
	    </div>
	  </div>
	</template>
	
	<script>
	export default {
	  methods: {
	    handle() {
	      this.$emit('update:test')
	    },
	  },
	}
	</script>
	
	<style lang="less" scoped>
	.dialog {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: rgba(72, 67, 67, 0.8);
	  > .dialog_content {
	    margin: 0 auto;
	    width: 500px;
	    height: 500px;
	    background-color: white;
	  }
	}
	</style>

使用js实现一个数据链表

参考文章@code-Chou

function ListNode(val, next) {
  this.val = val;
  this.next = next;
}

//定义将数组转换为链表函数,采用函数表达式的形式定义函数
function array2List(arr) {
  if (!arr.length) return null; //如果数组长度为0，则返回null
  var head = new ListNode(arr[0], arr[1]); //利用new关键字创建一个 头结点 对象
  console.log(head);
  var list = head; //创建一个变量用来表示链表，先把第一个节点头结点加入到链表中
  for (var i = 1; i < arr.length; i++) {
    list.next = new ListNode(arr[i], arr[i + 1]); //将数组后面的数字加到链表中,也是利用创建节点对象的方式,但是这里只是一个个创建节点对象，并没有联系起来
    list = list.next; //让链表节点移动起来，将节点连起来
  }
  console.log(head);
  return head; //返回链表，头结点即可
}

let testarr = array2List([1, 2, 3, 4]);

console.log(testarr.val);

Clock 时钟效果实现（使用 vue 和 js 实现）

toLocaleTimeString() 方法介绍

toLocaleTimeString() 是 JavaScript 的内置方法，用于将日期对象转换为特定于语言环境的本地化时间字符串。

<template>
  <div id="clock">
    <h1>{{ currentTime }}</h1>
    <h1 id="domClock"></h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentTime: null,
      };
    },
    created() {
      this.updateTime();
      setInterval(() => {
        this.updateTime();
        //   js 操作 dom实现
        const domClock = document.getElementById("domClock");
        domClock.innerHTML = new Date().toLocaleTimeString();
        // 其他方法介绍
        let date = new Date();
        console.log(date.toLocaleTimeString("en-US")); // 输出类似 "10:20:30 AM" 的字符串
      }, 1000);
    },
    methods: {
      updateTime() {
        this.currentTime = new Date().toLocaleTimeString();
      },
    },
  };
</script>

<style scoped>
  #clock {
    text-align: center;
    color: #2c3e50;
  }
</style>