前端考核总结

news2024/9/30 7:30:21

目录

  • JavaScript的基本数据类型有哪些？
  • JavaScript中数据类型的检测方法
  • JavaScript如何判断对象中的属性存在自身还是原型链上
  • flex布局
  • HTML5新标签
  • Vue的基本概念
  • Vue生命周期
  • JavaScript中闭包的基本概念
  • 防抖
  • 节流
  • 双等号与三等号的区别
  • 显式转换

JavaScript的基本数据类型有哪些？

  • String（字符型）
  • Number（数值型）
  • Boolean（布尔型）
  • Null（空）
  • Undefined（未定义）
  • Symbol（符号型）
  • bigint（数值型）

Symbol和bigint是ES6引入的一种新数据类型，用于声明非重复性变量；

JavaScript中数据类型的检测方法

  1. typeof关键字
    • 用于对基本数据类型进行"类型检测" ，检测结果以字符串形式返回；
    • typeof对null的检测结果为"object"、对NaN的检测结果为"number"；
    • typeof对引用类型的检测结果为object或function；
  2. instanceof运算符
    • 用于对引用数据类型进行类型判断；
    • 只能判定是否为预期类型，返回true或false；
    • instanceof是通过原型链来实现继承关系的判断；
  3. Object.prototype.toString().call() 方法
    • 该方法用于返回被检测对象的原型对象的字符串表示；
    • Object.prototype，表示Object的原型对象（是一个对象）；
    • obj.toString()，返回该对象的字符串表示，“[object type]”；
    • obj1.fn.call(obj2)，call方法可改变函数内部的this指向，用obj2去执行obj1的fn()方法；
  4. === 运算符
    • 利用 === 运算符判断数据类型，基于Object.prototype.toString.call()方法实现。
    console.log(toString.call("1234") === "[object String]"); // true
console.log(toString.call(1234) === "[object Number]"); // true

JavaScript如何判断对象中的属性存在自身还是原型链上

  1. in 操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于对象本身还是其原型链上。
  2. hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性。
  3. 两者结合判断某个属性是存在于自身还是在原型链上

flex布局

flex是flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 当我们将父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。

  • 体验中div就是flex的父容器
  • 体验中span就是子容器flex项目
  • 子容器可以横向排列也可以纵向排列

对父容器的设置：

  1. flex-direction 设置主轴的方向
  2. justify-content 设置主轴上的子元素排列方式
  3. flex-wrap 设置子元素是否换行
  4. align-items 设置侧轴上的子元素排列方式(单行) 设置侧轴上的子元素排列方式(单行)
  5. align-content 设置侧轴上的子元素的排列方式(多行)

对子容器的设置：

  1. flex属性定义子项目分配剩余空间，用flex来表示占多少份数
  2. align-self 控制子项自己在侧轴上的排列方式
  3. order 属性定义项目的排列顺序

HTML5新标签

<header> :头部标签
<nav> :导航标签
<article> :内容标签
<section> :定义文档某个区域
<aside> :侧边栏标签
<footer> :尾部标签

Vue的基本概念

概念：Vue是一个用于构建用户界面的渐进式框架。

核心特性：响应式。

Vue生命周期

Vue的生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：1. 创建 2. 挂载 3. 更新 4. 销毁

初始化渲染请求最早在创建阶段结束后发送。

dom操作最早在挂载阶段结束后开始。

在这里插入图片描述

JavaScript中闭包的基本概念

闭包：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域（闭包 = 内层函数 + 内层函数引用的外层函数的变量）。

作用：封闭数据，提供操作，使外部也可以访问函数内部的变量。

闭包的基本格式：

function outer(){
    let i = 1
    function fn(){
        console.log(i)
    }
    return fn
}
const fun = outer()
fun() // 返回1
// 外层函数使用内部函数的变量

闭包应用：实现数据的私有，比如统计函数调用的次数。

function fn(){
    let count = 0
    function fun(){
        count++
        console.log(`函数被调用${count}次`)
    }
    return fun
}
const ret = fn() 
ret() // 函数被调用1次
ret() // 函数被调用2次
//实现数据私有，无法直接修改count
//问题：内存泄漏，count无法被回收

防抖

防抖：单位时间内，频繁触发事件，只执行最后一次。

实现方式：

  • 用lodash提供的防抖来处理

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: cornflowerblue;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script> <!-- 利用lodash库实现防抖 -->
  <script>
    const box = document.querySelector('.box')
    let i = 1;
    function mouseMove() {
      box.innerHTML = i++
      // 如果里面存储大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
    }
    box.addEventListener('mousemove', _.debounce(mouseMove, 500))
  </script>
</body>

</html>

节流

单位时间内，频繁触发事件，只执行一次。

例子：王者荣耀技能冷却时间，期间无法继续释放技能。

使用场景：高频事件（鼠标移动mousemove、页面尺寸缩放resize、滚动条scroll等等）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: cornflowerblue;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script> <!-- 利用lodash库实现防抖 -->
  <script>
    const box = document.querySelector('.box')
    let i = 1;
    function mouseMove() {
      box.innerHTML = i++
      // 如果里面存储大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
    }
    // box.addEventListener('mousemove', _.throttle(mouseMove, 2000))
    function throttle(fn, t) {
      let timer
      return function () {
        if (!timer) {
          timer = setTimeout(function () {
            fn()
            // clearTimeout(timer)无效，因为在setTimeout中无法删除定时器，所以使用timer = null
            timer = null
          }, t)
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 2000))
  </script>
</body>

</html>

双等号与三等号的区别

双等号有一个隐式转换，而三等号没有。
所以：

console.log('123' == 123) // true
console.log('123' === 123) // false

显式转换

  1. Number()：将字符串、布尔值或其他可转换的数据类型转换为数字。
    let num = "1234";
let num = Number(num); // num 现在是数字 1234
  2. parseInt() 和 parseFloat()：专门用于将字符串转换为整数或浮点数，可以将字符串、布尔值或其他可转换的数据类型转换为数字。
    let strInt = "123";
let int = parseInt(strInt, 10); // int 现在是整数 123
let strFloat = "3.14";
let float = parseFloat(strFloat); // float 现在是浮点数 3.14
  3. String()：将数字、布尔值或其他可转换的数据类型转换为字符串。
    	let num = 123;
	let str = String(num); // str 现在是字符串 "123"
  4. Boolean()：将非布尔值转换为布尔值
    let zero = 0;
	let boolZero = Boolean(zero); // boolZero 现在是 false
	let nonEmptyStr = "Hello";
	let boolStr = Boolean(nonEmptyStr); // boolStr 现在是 true

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2179049.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Flume实战--Flume中的选择器、自动容灾（故障转移）、负载均衡的详解与操作

Flume实战--Flume中的选择器、自动容灾（故障转移）、负载均衡的详解与操作

本文详细介绍了Apache Flume的关键特性&#xff0c;包括选择器、拦截器、故障转移和负载均衡。选择器负责将数据分发到多个Channel&#xff0c;拦截器用于修改或丢弃Event。故障转移机制能够在Sink故障时自动切换&#xff0c;而负载均衡则在多个Sink间分配负载。文章还提供了自…
阅读更多...
【零基础入门产品经理】学习准备篇 | 需要学一些什么呢？

【零基础入门产品经理】学习准备篇 | 需要学一些什么呢？

前言&#xff1a; 零实习转行产品经理经验分享01-学习准备篇_哔哩哔哩_bilibili 该篇内容主要是对bilibili这个视频的观后笔记~谢谢美丽滴up主友情分享。 全文摘要&#xff1a;如何在0实习且没有任何产品相关经验下&#xff0c;如何上岸产品经理~ 目录 一、想清楚为什么…
阅读更多...
Redis 基础数据改造

Redis 基础数据改造

优质博文&#xff1a;IT-BLOG-CN 一、服务背景 基础数据查询服务&#xff1a;提供航司、机场、票台、城市等基础数据信息。 痛点一&#xff1a;因为基础数据不属于频繁更新的数据&#xff0c;所以每个应用都有自己和缓存&#xff0c;当基础数据更新后&#xff0c;各个应用缓存…
阅读更多...
webGL入门（五）绘制多边形

webGL入门（五）绘制多边形

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><scri…
阅读更多...
ARM 服务器上安装 OpenEuler (欧拉)

ARM 服务器上安装 OpenEuler (欧拉)

系统介绍 在 2019 年 7 月 19 日&#xff0c;华为宣布要在年底正式开源 openEuler 操作系统&#xff1b;在半年后的 12 月 31 日&#xff0c;华为正式开源了 openEuler 操作系统&#xff0c;邀请社区开发者共同来贡献。 一年后&#xff0c;截止到 2020 年12 月 25日&#xff…
阅读更多...
计算机毕业设计 Java教务管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 Java教务管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

场景 在开发Cocoa程序时&#xff0c;由于界面是用Objective-C写的。无法使用C的目标观察者[1]类。如果是使用第二种方案2[2],那么也需要增加一个代理类。那么有没有更省事的办法&#xff1f; 说明 开发界面的时候&#xff0c;经常是需要在子界面里传递数据给主界面&#xff0…
阅读更多...
PIKACHU | PIKACHU 靶场 XSS 后台配置

PIKACHU | PIKACHU 靶场 XSS 后台配置

关注这个靶场的其他相关笔记&#xff1a;PIKACHU —— 靶场笔记合集-CSDN博客 PIKACHU 自带了一个 XSS 平台&#xff0c;可以辅助我们完成 XSS 攻击&#xff0c;但是该后台需要配置数据库以后才能使用。本教程&#xff0c;就是教大家如何配置 PIKACHU XSS 平台的。 PIKACHU XS…
阅读更多...
vulhub weblogic 靶场攻略

vulhub weblogic 靶场攻略

一&#xff1a;WebLogic 后台弱⼝令GetShell&#xff08;weak_password &#xff09; 漏洞描述 通过弱⼝令进⼊后台界⾯ , 上传部署war包 , getshell 影响范围 全版本&#xff08;前提后台存在弱⼝令&#xff09; 环境搭建 cd vulhub-master/weblogic/weak_password doc…
阅读更多...
【STM32开发环境搭建】-4-在STM32CubeMX中新增Keil(MDK-ARM) 5的工程目录(包含指定路径的C和H文件)

【STM32开发环境搭建】-4-在STM32CubeMX中新增Keil(MDK-ARM) 5的工程目录(包含指定路径的C和H文件)

案例背景&#xff1a; 由于Keil(MDK-ARM)5工程&#xff1a;DEMO_STM32F030C8T6.uvprojx是由STM32CubeMX工具生成的&#xff0c;如果我们在Keil工程中手动添加了一些c文件和h文件的Include Path包含路径&#xff0c;会在STM32CubeMX下一次生成uvprojx文件时&#xff0c;被删除&…
阅读更多...
纯软件小白 学习DDR5

纯软件小白 学习DDR5

问题 1.你知道当你打开游戏加载存档时候计算机是在做什么吗&#xff1f; 由于你的CPU只有在数据被加载到DRAM的时候才可以工作&#xff0c;所以当你需要用数据的时候&#xff0c;数据会从SSD复制到DRAM这一过程需要时间&#xff0c;所以会有加载&#xff08;所有3D模型、纹理…
阅读更多...
【从零开始实现stm32无刷电机FOC】【实践】【7.1/7 硬件设计】

【从零开始实现stm32无刷电机FOC】【实践】【7.1/7 硬件设计】

目录 stm32电路磁编码器电路电机驱动电路电流采样电路电机选择本文示例硬件说明 为了承载和验证本文的FOC代码工程&#xff0c;本节设计了一个简易的三相无刷电机 硬件套件&#xff0c;主控采用非常常用的stm32f103c8t6单片机&#xff0c;电机编码器采用MT6701&#xff0c;电机…
阅读更多...
电源的带载能力怎么判断？Namisoft为您介绍测试方法

电源的带载能力怎么判断？Namisoft为您介绍测试方法

确保电源在各种负载条件下都能稳定工作&#xff0c;是电源设计者面临的重要挑战。本文将详细介绍如何通过带载测试来评估电源的负载能力。 电源带载测试介绍 带载能力指电源在其规定条件下&#xff0c;所能承受的最大负载能力。电源带载测试就是对电源模块的负载能力进行测试&a…
阅读更多...
调试分析：[跳数度量]更改为[距离度量]后的 routing_bellmanford 算法

调试分析：[跳数度量]更改为[距离度量]后的 routing_bellmanford 算法

回顾复习2023年8月的《★修改Exata6.2源码&#xff1a;〔修改Bellmanford最短路径路由的衡量标准从【路由跳数】改为【“路由器节点间的物理距离”】&#xff0c;并动画演示〕》&#xff0c;VS2015调试Exata&#xff0c;跟踪调试修改后的[ routing_bellmanford.cpp ]源码&#…
阅读更多...
AgentScope : 与CodeAct智能体对话

AgentScope : 与CodeAct智能体对话

参考&#xff1a; 非一般程序猿第六季Agent入门实战篇(三)–CodeActAgent篇 Conversation with CodeAct Agent 0&#xff0c;简介 CodeAct Agent是一个Agent,它不仅可以聊天,还可以为你编写和执行Python代码。在本示例中,将介绍另一种赋予Agent调用工具能力的方法,特别是通过…
阅读更多...
Mac 卸载 IDEA 流程

Mac 卸载 IDEA 流程

1、现在应用程序中删除Idea 2、进入Library目录 cd /Users/zhengzhaoxiang/Library 3、删除IntelliJIdea2023.3&#xff08;根据自己的版本而定&#xff09;记得进去看下是否删除干净了 rm -rf Logs/JetBrains/IntelliJIdea2023.3 rm -rf Preferences/com.jetbrains.intel…
阅读更多...
项目学习笔记

项目学习笔记

Downloads – Oracle VirtualBoxhttps://www.virtualbox.org/wiki/Downloads
阅读更多...
启动hadoop集群出现there is no HDFS_NAMENODE_USER defined.Aborting operation

启动hadoop集群出现there is no HDFS_NAMENODE_USER defined.Aborting operation

解决方案 在hadoop-env.sh中添加 export HDFS_DATANODE_USERroot export HDFS_NAMENODE_USERroot export HDFS_SECONDARYNAMENODE_USERroot export YARN_RESOURCEMANAGER_USERroot export YARN_NODEMANAGER_USERroot 再次运行即可。
阅读更多...
Candance仿真电流镜OTA

Candance仿真电流镜OTA

1.电路图搭建 图1 上面那层不能直接一横直接连过来&#xff0c;图2只能这样连。但是&#xff0c;图2的M1和M0的电压已经超过了VDD的1.8V。是不行的&#xff0c;需要调整&#xff0c;主要增大M1和M0的宽长比以减小电压。 图2 candance电流镜OTA电路实现 下面这篇文章讲了电流镜…
阅读更多...
ROS与无人驾驶学习笔记（一）——ROS基本操作

ROS与无人驾驶学习笔记（一）——ROS基本操作

文章目录 ※ 安装ubuntu 下载 创建虚拟机 安装系统 安装vmware tool 更新源 安装常用软件 ※ 安装ROS 设置软件更新 使用清华源安装 ros测试 认识ROS ROS特点 ROS系统实现 ROS安装 工作需要&#xff0c;转行做码农了。。。 大概是无人驾驶相关的&#xff0c;啥都不会。。。 看成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023