Javascript前端面试基础4【每日学习并更新10】

同步和异步的区别

  • 同步:浏览器访问服务器请求，用户看得到页面刷新，重新发请求等请求完，页面刷新,新内容出现，用户看到新内容,进行下一步操作
  • 异步:浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

渐进增强和优雅降级

  • 渐进增强︰针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

 defer和async

  • defer并行加载js文件，会按照页面上script标签的顺序执行
  • async并行加载js 文件，下载完成立即执行，不会按照页面上script标签的顺序执行

 说说严格模式的限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错不能使用with语句
  • 禁止this指向全局对象

attribute和property的区别是什么

  • attribute 是dom 元素在文档中作为html标签拥有的属性;
  • property 就是dom元素在js 中作为对象拥有的属性；
  • 对于html的标准属性来说，attribute和property是同步的，是会自动更新的
  • 但是于自义的属性来说，他们是不同步的

在JavaScript中，特别是在操作HTML文档时，经常会遇到attribute（属性）和property（特性）这两个概念。尽管它们在某些情况下看起来相似，但它们实际上代表着不同的概念，并用于不同的目的。理解它们之间的区别对于有效地使用JavaScript进行DOM操作非常重要。

Attribute（属性）

  • 定义：HTML标签中的属性。例如，在<input type="text" value="Hello">中，type和value都是属性。
  • 操作方式：通过getAttribute()、setAttribute()、hasAttribute()和removeAttribute()等DOM方法来操作。
  • 用途：定义HTML标签的行为或表现。HTML属性只能在HTML标签中指定，不能在JavaScript中直接创建。

Property（特性）

  • 定义：DOM对象中用于表示HTML标签属性的值。例如，对于上面的<input>标签，element.type和element.value都是特性。
  • 操作方式：直接通过JavaScript代码访问和修改，如element.propertyName。
  • 用途：表示HTML标签在DOM中的状态。特性可以在JavaScript中动态创建和修改。

Attribute与Property的区别

  1. 定义方式：属性是在HTML标签中定义的，而特性是在DOM对象中定义的。
  2. 同步性：一些HTML属性与DOM特性是同步的，即修改其中一个，另一个也会相应改变。但这并不总是这样，特别是在一些自定义属性或特定属性（如input的value）上。
  3. 用途：属性主要用于定义HTML标签的初始状态和行为，而特性用于表示这些标签在DOM中的当前状态，并允许JavaScript动态地读取和修改这些状态。

示例

//html
<input id="myInput" type="text" value="Hello">
//javascript
var input = document.getElementById('myInput');  // Property  
console.log(input.type); // "text"  
input.value = 'World'; // 修改特性，也会同步修改属性  // Attribute  
console.log(input.getAttribute('type')); // "text"  
input.setAttribute('type', 'password'); // 修改属性，不会同步修改特性（在某些浏览器中可能例外）

总的来说，理解attribute和property的区别对于进行有效的DOM操作非常重要，特别是在涉及HTML标签的初始化和动态修改时。

谈谈你对ES6的理解

  • 新增模板字符串（为JavaScript提供了简单的字符串插值功能).
  • 箭头函数
  • for-of(用来遍历数据—例如数组中的值。
  • arguments 对象可被不定参数和默认参数完美代替。
  • ES6将promise对象纳入规范，提供了原生的Promise 对象。
  • 增加了let和const命令，用来声明变量。
  • 增加了块级作用域。
  • let命令实际上就增加了块级作用域。
  • 引入module模块

ES6（ECMAScript 2015）是JavaScript的一个重要版本，它引入了许多新的语言特性和API，使得JavaScript更加强大和灵活。以下是对ES6的详细解析：

一、新特性概览

  1. 变量声明
    • let：用于声明块级作用域的局部变量，解决了var声明变量时作用域和预解析带来的问题。
    • const：用于声明一个只读的常量，一旦声明，其值就不能被改变。
  2. 函数
    • 箭头函数：提供了一种更简洁的函数书写方式，并且不绑定自己的this，arguments，super，或new.target。这些函数更适合用于非方法函数，并且它们不能用作构造函数。
    • 默认参数值：允许在函数定义时为参数指定默认值，这样调用函数时即使没有传入这些参数，它们也会被赋予默认值。
    • 展开运算符：允许一个数组表达式或字符串在需要多个参数（用于函数调用）或多个元素（用于数组字面量）的地方展开。
  3. 模板字符串
    • 允许嵌入表达式，并且可以通过多行字符串和字符串插值等功能来简化字符串的拼接和处理。
  4. 解构赋值
    • 允许从数组或对象中提取数据，并将其赋值给声明的变量，这大大简化了数据访问的语法。
  5. 新数据结构
    • Set：允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
    • Map：提供了一种存储键值对的有序集合，其中的每个元素都是一个键值对。
  6. Promises
    • 是异步编程的一种解决方案，比传统的回调函数方式更加优雅和强大。它代表了一个尚未完成但预期将来会完成的异步操作的结果。
  7. 模块化
    • ES6引入了模块化的语法，使得JavaScript可以更方便地编写和组织大型应用程序。通过import和export语句，可以实现模块的导入和导出。
  8. 类
    • ES6引入了类的语法，使得JavaScript支持基于类的面向对象编程。类是一种特殊的函数，用于创建对象。
  9. 其他新特性
    • 包括Symbol类型、迭代器（Iterator）、生成器（Generator）等，这些新特性为JavaScript提供了更多的表达能力和灵活性。

二、实际应用

ES6的这些新特性在实际开发中得到了广泛的应用。例如，箭头函数使得函数式编程在JavaScript中变得更加方便；模板字符串简化了字符串的拼接和处理；解构赋值提高了代码的可读性和简洁性；Promises和async/await使得异步编程变得更加简单和直观。

 什么是面向对象编程及面向过程编程，它们的异同和优缺点

  • 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了
  • 面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为
  • 面向对象是以功能来划分问题，而不是步骤

面向对象编程思想

  • 基本思想是使用对象，类，继承,封装等基本概念来进行程序设计优点
  1. 易维护
  2. ·采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的
  3. 易扩展
  4. 开发工作的重用性、继承性高，降低重复工作量。缩短了开发周期

对web标准、可用性、可访问性的理解

  • ·可用性（Usability):产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力
  • .可访问性(Accessibility): Web内容对于残障用户的可阅读和可理解性
  • 可维护性(Maintainability):一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

如何通过JS判断一个数组

在JavaScript中，判断一个变量是否为数组，可以通过多种方式来实现。以下是一些常用的方法：

1. 使用Array.isArray()方法

Array.isArray()是ES5新增的方法，用于确定传递的值是否是一个Array。

const arr = [1, 2, 3];  
console.log(Array.isArray(arr)); // 输出：true  const notArr = 'not an array';  
console.log(Array.isArray(notArr)); // 输出：false

2. 使用instanceof操作符

instanceof操作符可以用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。

  1. instanceof 操作符只能用于对象，不能用于原始值（如数字、字符串、布尔值）。
  2. 如果 constructor.prototype 在 object 的原型链上不存在，那么即使 object 是通过 constructor 创建的，instanceof 也会返回 false。这可能是因为原型链被修改过。
const arr = [1, 2, 3];  
console.log(arr instanceof Array); // 输出：true  const notArr = 'not an array';  
console.log(notArr instanceof Array); // 输出：false-------------------------------------------------------
function Car(make, model) {  this.make = make;  this.model = model;  
}  const auto = new Car('Honda', 'Accord');  console.log(auto instanceof Car);    // 输出：true  
console.log(auto instanceof Object); // 输出：true  
console.log(auto instanceof Array);  // 输出：false

3. 使用Object.prototype.toString.call()方法【Jquery中使用】

这是一个更通用的方法，可以用来判断一个对象的类型。

const arr = [1, 2, 3];  
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 输出：true  const notArr = 'not an array';  
console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // 输出：false

4. 使用constructor属性

constructor属性返回对创建此对象的数组函数的引用。

const arr = [1, 2, 3];  
console.log(arr.constructor === Array); // 输出：true  const notArr = 'not an array';  
console.log(notArr.constructor === Array); // 输出：false

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

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

相关文章

玩游戏总缺少dll文件怎么办，免费修复DirectX方法

玩游戏总缺少dll文件怎么办，免费修复DirectX方法

玩游戏或者运行程序时&#xff0c;突然蹦出个提示说“缺少xxxx.dll”&#xff0c;简直让人火大&#xff01;你是不是也遇到过这种情况&#xff0c;重新安装游戏也没用&#xff0c;各种错误提示让人崩溃&#xff1f;别急&#xff0c;阿星今天就来给你支个招&#xff0c;让这烦人…
阅读更多...
电子签章-开放签应用

电子签章-开放签应用

开放签电子签章系统开源工具版旨在将电子签章、电子合同系统开发中的前后端核心技术开源开放&#xff0c;适合有技术能力的个人 / 团队学习或自建电子签章 \ 电子合同功能或应用&#xff0c;避免研发同仁在工作过程中重复造轮子&#xff0c;降低电子签章技术研发要求&#xff0…
阅读更多...
Spring源码学习笔记之@Async源码

Spring源码学习笔记之@Async源码

文章目录 一、简介二、异步任务Async的使用方法2.1、第一步、配置类上加EnableAsync注解2.2、第二步、自定义线程池2.2.1、方法一、不配置自定义线程池使用默认线程池2.2.2、方法二、使用AsyncConfigurer指定线程池2.2.3、方法三、使用自定义的线程池Excutor2.2.4、方法四、使用…
阅读更多...
7.25 阿里云OSS上传 + 后台返回token + 导出excel

7.25 阿里云OSS上传 + 后台返回token + 导出excel

1.阿里云Oss上传 只需要一点就是上传到云端后&#xff0c;前端调用上传文件接口&#xff0c;返回一个资源路径。 接着在提交表单时&#xff0c;前端把这个路径设置为img的参数即可。 1.1上传限制 只上传图片 Api("阿里云文件管理") CrossOrigin //跨域 RestContr…
阅读更多...
算法 定长按组翻转链表

算法 定长按组翻转链表

一、题目 已知一个链表的头部head&#xff0c;每k个结点为一组&#xff0c;按组翻转。要求返回翻转后的头部 k是一个正整数&#xff0c;它的值小于等于链表长度。如果节点总数不是k的整数倍&#xff0c;则剩余的结点保留原来的顺序。示例如下&#xff1a; &#xff08;要求不…
阅读更多...
谷粒商城实战笔记-60-商品服务-API-品牌管理-效果优化与快速显示开关

谷粒商城实战笔记-60-商品服务-API-品牌管理-效果优化与快速显示开关

文章目录 一&#xff0c;显示状态列改为switch开关二&#xff0c;监听状态改变 首先&#xff0c;把ESLint语法检查关掉&#xff0c;因为这个语法检查过于严格&#xff0c;在控制台输出很多错误信息&#xff0c;干扰开发。 在build目录下下webpack.base.conf.js中&#xff0c;把…
阅读更多...
昇思MindSpore学习总结十七 —— 基于MindSpore通过GPT实现情感分类

昇思MindSpore学习总结十七 —— 基于MindSpore通过GPT实现情感分类

1、要求 2、导入了一些必要的库和模块 以便在使用MindSpore和MindNLP进行深度学习任务时能使用各种功能&#xff0c;比如数据集处理、模型训练、评估和回调功能。 import os # 导入操作系统相关功能的模块&#xff0c;如文件和目录操作import mindspore # 导入MindSpore库&a…
阅读更多...
数据开发/数仓工程师上手指南(二)数仓构建分层概念

数据开发/数仓工程师上手指南(二)数仓构建分层概念

前言 回顾上篇文章我们可以用思维导图一遍概览&#xff1a; 在了解了数仓的基本架构之后&#xff0c;我们还需要掌握数仓构建方法&#xff0c;也就是了解数仓是如何建模的&#xff0c;有什么规则和通用方法。我们应该如何去构建一个性能良好、稳定高效、契合业务的数据仓库。…
阅读更多...
Windows图形界面(GUI)-MFC-C/C++ - Dialog

Windows图形界面(GUI)-MFC-C/C++ - Dialog

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 Dialog 创建对话框模板 设置对话框属性 创建对话框对象 对话框生命周期 示例代码 Dialog 创建对话框模板 流程 打开资源视图&#xff1a;在Visual Studio中&#xff0c;右键点击资…
阅读更多...
图形/视图架构的坐标系

图形/视图架构的坐标系

图形/视图架构有 3 个有效的坐标系&#xff1a;场景坐标系、视图坐标系、图形项坐标系。 视图坐标系 视图坐标系就是视图组件的物理坐标系&#xff0c;单位是像素。QGraphicsView 视口的左上角坐标总是(0,0)。 场景坐标系 场景坐标系定义了所有图形项的基础坐标&#xff0c;场…
阅读更多...
如何排查GD32 MCU复位是由哪个复位源导致的？

如何排查GD32 MCU复位是由哪个复位源导致的？

上期为大家讲解了GD32 MCU复位包括电源复位和系统复位&#xff0c;其中系统复位还包括独立看门狗复位、内核软复位、窗口看门狗复位等&#xff0c;在一个GD32系统中&#xff0c;如果莫名其妙产生了MCU复位&#xff0c;如何排查具体是由哪个复位源导致的呢&#xff1f; GD32 MC…
阅读更多...
Idea如何查看Maven依赖树

Idea如何查看Maven依赖树

1、使用idea自带的功能查看依赖树 2、使用Maven Helper插件 https://zhuanlan.zhihu.com/p/699663369
阅读更多...
docker -v 到底和那个一样？type=volume还是type=bind的解释

docker -v 到底和那个一样？type=volume还是type=bind的解释

逐行通俗详细的解释下这个代码“#!/usr/bin/env bash # # This script will automatically pull docker image from DockerHub, and start a daemon container to run the Qwen-Chat web-demo.IMAGE_NAMEqwenllm/qwen:2-cu121 QWEN_CHECKPOINT_PATH/path/to/Qwen-Instruct PORT…
阅读更多...
《Milvus Cloud向量数据库指南》——监管机构和社区：开源许可证标准的守护者与推动者

《Milvus Cloud向量数据库指南》——监管机构和社区：开源许可证标准的守护者与推动者

在开源软件的浩瀚宇宙中，监管机构和社区构成了其稳定运行与持续发展的双轮驱动。这些组织不仅定义了开源的本质，还通过制定、维护和执行许可证标准，确保了开源生态的开放性、透明性和协作精神得以传承。其中，开源倡议组织（OSI）、自由软件基金会（FSF）以及Apache软件基金…
阅读更多...
【STM32】IIC学习笔记

【STM32】IIC学习笔记

学习IIC 前言一、基础知识GPIO_WriteBit 写入高低电平 二、放代码三、逐行细读总结 前言 最近沉迷手写笔记~ 尝试解读江科大的IIC程序&#xff0c;结合笔记更理解IIC 一、基础知识 GPIO_WriteBit 写入高低电平 二、放代码 这个是江科大的软件IIC的设置部分 #include "s…
阅读更多...
【C++】C++中查找并替换字符串中的特定单个字符、多个字符、中文字符

【C++】C++中查找并替换字符串中的特定单个字符、多个字符、中文字符

目录 一.替换单个字符 方法1&#xff1a;使用循环遍历字符串 方法2&#xff1a;使用 std::replace 算法 二.替换字符串中的中文字符 1.检查字符串中是否包含中文逗号 2.替换字符串中的中文逗号 3.遍历字符串并打印中文逗号 三.替换字符串中的多个字符 一.替换单个字符 …
阅读更多...
正点原子 通用外设配置模型 GPIO配置步骤 NVIC配置

正点原子 通用外设配置模型 GPIO配置步骤 NVIC配置

1. 这个是通用外设驱动模式配置 除了初始化是必须的 其他不是必须的 2. gpio配置步骤 1.使能时钟是相当于开电 2.设置工作模式是配置是输出还是输入 是上拉输入还是下拉输入还是浮空 是高速度还是低速度这些 3 和 4小点就是读写io口的状态了 3. 这个图是正点原子 将GPIO 的时…
阅读更多...
mysql中提供的函数

mysql中提供的函数

文章目录 1.聚合函数2.字符串函数3.数值函数4.日期函数5.流程函数 MySQL 是一个功能强大的关系型数据库管理系统&#xff0c;其中包含了丰富的内置函数&#xff0c;用于处理各种数据操作和查询。这些函数可以分为多种类型&#xff0c;包括字符串函数、数值函数、日期和时间函数…
阅读更多...
Axure设计之轮播图（动态面板+中继器）

Axure设计之轮播图（动态面板+中继器）

轮播图&#xff08;Carousel&#xff09;是一种网页或应用界面中常见的组件&#xff0c;用于展示一系列的图片或内容&#xff0c;通常通过自动播放或用户交互&#xff08;如点击箭头按钮&#xff09;来切换展示不同的内容。轮播图能够吸引用户的注意力&#xff0c;有效展示重要…
阅读更多...
SQL Server流量分析

SQL Server流量分析

SQL Server流量分析涉及监控和分析SQL Server数据库服务器的网络通信量、操作性能、资源使用和安全性&#xff0c;以确保数据库的高效运行和安全。SQL Server流量分析可以帮助你识别潜在的性能瓶颈、异常行为和安全威胁&#xff0c;从而采取适当的措施进行优化和防护。以下是进…
阅读更多...
最新文章

Copyright @ 2022~2023