JavaScript基础篇(31-40题)

此文章，来源于印客学院的资料【第一部分：基础篇(105题)】，也有一些从网上查找的补充。

这里只是分享，便于学习。

诸君可以根据自己实际情况，自行衡量，看看哪里需要加强。

概述如下：

javascript中eval是做什么的
[“1”, “2”, “3”].mapparseInt 答案是多少
javascript 代码中的"use strict";是什么意思
JSON 的了解
js延迟加载的方式有哪些
同步和异步的区别
渐进增强和优雅降级
javascript中defer和async
说几条写JavaScript的基本规范
谈谈你对ES6的理解

javascript中eval是做什么的

在JavaScript中，eval()函数用于执行字符串中的JavaScript代码。

以下是一些示例说明：

动态计算表达式的值：

const x = 10;
const y = 20;
const expression = 'x + y';
const result = eval(expression); // 将计算 x + y 的值，结果为 30
console.log(result);

执行动态生成的函数：

const functionName = 'sayHello';
const functionCode = 'function ' + functionName + '() { console.log("Hello!"); }';
eval(functionCode); // 动态生成了一个名为 sayHello 的函数
sayHello(); // 调用该函数，将输出 "Hello!"

解析 JSON 数据：

const jsonString = '{ "name": "John", "age": 30 }';
const person = eval('(' + jsonString + ')'); // 解析 JSON 字符串为 JavaScript 对象
console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 30

需要注意的是，应该避免使用 eval ，不安全，非常耗性能 ( 2 次，⼀次解析成 js 语句，⼀次执⾏) 。

在实际开发中，应尽量避免使用eval()函数来执行不受信任的或用户输入的代码，以防止安全漏洞和代码注入攻击。

[“1”, “2”, “3”].map(parseInt) 答案是多少

在执行[“1”, “2”, “3”].map(parseInt)时，结果并不是预期的[1, 2, 3]。实际上，结果是[1, NaN, NaN]。

这是由于parseInt函数在接收到 两个参数 时的行为不同于预期。parseInt函数的:

第一个参数是要解析的字符串，
第二个参数是基数（即进制）。

在map函数中调用parseInt时，map会将当前元素作为第一个参数传递给parseInt，而索引位置则被作为第二个参数传递。

对于数组[“1”, “2”, “3”]的第一个元素"1"，parseInt("1", 0)会将基数设置为0，因此它将尝试根据字符串"1"进行解析，并且将其视为一个十进制数。由于字符串"1"可以被解析为整数1，所以返回值为1。

对于数组[“1”, “2”, “3”]的第二个元素"2"，parseInt("2", 1)会将基数设置为1，但是在基数为1时无法解析出有效的数字，因此返回NaN。

对于数组[“1”, “2”, “3”]的第三个元素"3"，parseInt("3", 2)会将基数设置为2，但是在基数为2时无法解析出有效的数字，因此返回NaN。

因此，最终的结果为[1, NaN, NaN]。

javascript 代码中的"use strict";是什么意思

“use strict”; 是 JavaScript 中的一个指令，用于启用严格模式（strict mode）。

当代码使用了该指令并进入严格模式后，会开启一些额外的限制和更严格的错误检查，以帮助开发者编写更加规范、可靠的代码。

这种模式使得 Javascript 在更严格的条件下运⾏ ,使 JS 编码更加规范化的模式,消除 Javascript 语法的⼀些不合理、不严谨之处，减少⼀些怪异⾏为.

严格模式引入了一些改变，其中包括：

变量必须先声明再使用：在严格模式下，使用未声明的变量会抛出错误。
禁止删除变量、函数、函数参数：在严格模式下，对变量、函数、函数参数使用 delete 操作符会导致语法错误。
静态绑定：在严格模式下，this 的值不再是全局对象（如浏览器中的window），而是undefined。此外，禁止在全局作用域中使用函数调用时的默认绑定（如直接调用函数，this将指向undefined）。
禁止重复的属性名：在严格模式下，对象字面量中重复的属性名会导致语法错误。
禁止使用八进制字面量：在严格模式下，八进制字面量（如 0123）会导致语法错误。

通过使用"use strict";指令，可以将整个脚本文件或特定函数范围内的代码置于严格模式下。

这有助于减少潜在的错误，并鼓励使用更现代化、标准化的 JavaScript 语法和行为。

JSON 的了解

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它具有易于理解和编写的特点。

JSON最初在JavaScript中使用，但现在已成为许多编程语言中广泛使用的标准数据格式。

以下是关于JSON的一些要点：

格式：JSON使用键值对的方式来表示数据，使用大括号（{}）包围对象，使用方括号（[]）包围数组。键是字符串，值可以是字符串、数字、布尔值、对象、数组或null等基本数据类型。
示例：下面是一个JSON对象的示例：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "coding", "swimming"],
  "address": {
    "city": "New York",
    "country": "USA"
  }
}

用途：JSON常用于数据传输和存储。它可以将复杂的数据结构转换为字符串，以便在网络上进行传输或保存到文件中。同时，它也可以将字符串解析为原始的数据结构，以便在程序中进行处理和操作。
解析与序列化：将JSON字符串转换为JavaScript对象的过程称为解析（parse），而将JavaScript对象转换为JSON字符串的过程称为序列化（stringify）。
支持：几乎所有的编程语言都提供了JSON的解析和序列化功能。例如，在JavaScript中可以使用JSON.parse()方法将JSON字符串解析为对象，使用JSON.stringify()方法将对象序列化为JSON字符串。
限制：JSON不支持包含函数、日期和正则表达式等特殊对象类型。它也不支持循环引用，即一个对象引用了自身或形成了循环链。
扩展：为了满足更复杂的需求，JSON还有一些扩展格式，如JSONP（JSON with Padding）和JSON-LD（JSON Linked Data）等。

JSON是一种简单且通用的数据交换格式，适用于在不同平台和编程语言之间进行数据传输和存储。它的易读性和易解析性使得开发者可以方便地处理和转换数据。

总结： JSON(JavaScript Object Notation) 是⼀种轻量级的数据交换格式它是基于 JavaScript 的⼀个⼦集。数据格式简单, 易于读写, 占用带宽⼩。

js延迟加载的方式有哪些

JavaScript的延迟加载是一种优化网站性能的技术，可以推迟脚本的下载和执行时间，以提高页面的加载速度和用户体验。以下是几种常用的JavaScript延迟加载的方式：

异步加载（Async Loading）：使用async属性来异步加载脚本文件。例如：

<script src="script.js" async></script>

异步加载的脚本将在下载时不会阻塞页面的渲染，而是在下载完成后立即执行。适用于那些不依赖于页面内容的独立脚本。

延迟加载（Deferred Loading）：使用defer属性来延迟加载脚本文件。例如：

<script src="script.js" defer></script>

延迟加载的脚本将在下载时不会阻塞页面的渲染，并在文档解析完成后按照顺序依次执行。适用于那些需要等待整个文档解析完成后再执行的脚本。

动态加载（Dynamic Loading）：使用JavaScript动态创建<script>标签，并插入到文档中实现延迟加载。例如：

var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);

通过动态加载脚本，可以在需要时再加载，避免阻塞页面的加载。

Intersection Observer（交叉观察器）：使用Intersection Observer API来监测元素是否进入视口，从而决定何时加载脚本。这种方式可以根据页面的滚动和用户的交互动态地加载脚本，提高资源利用效率。

需要注意的是，在使用延迟加载时，需要权衡脚本的执行顺序、依赖关系以及对页面渲染的影响。根据脚本的实际需求和页面的情况，选择合适的延迟加载方式可以有效地提升页面性能和用户体验。

同步和异步的区别

同步和异步是两种不同的执行模式，用来描述程序中任务的执行方式和顺序。它们的主要区别在于任务完成后是否立即返回。

同步（Synchronous）：同步任务会按照顺序依次执行，并且每个任务在完成之前会阻塞后续代码的执行。也就是说，程序会等待当前任务完成后再执行下一个任务。同步任务的执行是按照先后顺序逐个执行的，直到所有任务都完成。
异步（Asynchronous）：异步任务在执行时不会阻塞后续代码的执行，而是在任务完成后通过回调函数、Promise对象、async/await等方式来通知任务完成。也就是说，异步任务会在后台执行，让其他任务继续执行而不需要等待。

主要区别如下：

同步任务按顺序依次执行，异步任务不会阻塞后续代码。
同步任务需要等待上一个任务完成才能执行下一个任务，异步任务可以同时执行多个。
同步任务的执行结果可以立即得到，而异步任务的执行结果需要通过回调或其他方式获取。
同步任务容易导致程序阻塞，特别是当某个任务耗时较长时，会影响用户体验。异步任务可以提高程序的响应性和效率。

通常情况下，异步方式适用于需要耗时操作或等待外部资源的场景，如网络请求、文件读写等。而同步方式适用于简单且快速完成的任务，或者需要确保特定顺序的任务。

需要注意的是，异步任务执行的顺序可能不确定，取决于任务的完成时间和回调函数的触发顺序。因此，在处理异步任务时，要特别注意并发和竞态条件可能带来的问题。

渐进增强和优雅降级

渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）是两种Web开发中的策略，用于处理不同浏览器或设备上的兼容性问题。

渐进增强：渐进增强的思想是从基本的功能和结构开始构建网站，然后通过逐渐添加更高级的特性和功能来提升用户体验。它首先关注的是核心内容和核心功能，确保在所有浏览器和设备上都能良好地工作。然后，根据浏览器的能力，逐步引入更多互动、动画、样式等增强功能。渐进增强的目标是尽可能地覆盖广泛的用户，并确保在低版本浏览器上也能提供基本的功能和可用性。
优雅降级：优雅降级的思想是首先构建一个完整的、高级的网站，然后通过在旧版本浏览器或设备上适应性地降低功能以实现兼容性。它先关注的是最先进的浏览器和设备，利用它们的功能来构建丰富的用户体验。然后，针对老旧的浏览器或设备，通过检测功能支持情况，适当地去除一些高级特性或采用替代方案，以保证在低版本浏览器上的兼容性。

主要区别如下：

渐进增强是从基础功能开始，逐步添加增强特性；优雅降级是从高级功能开始，逐步降低到基础功能。
渐进增强的目标是确保所有用户都能够访问到核心内容和功能；优雅降级更关注于提供尽可能完整的用户体验，但对于旧版本浏览器可能有一些功能损失。
渐进增强强调的是逐步向前兼容，确保在新版本浏览器中能够使用到最新的技术；优雅降级则是向后兼容，确保在旧版本浏览器中也能够正常工作。

总体而言，渐进增强是一种保守和稳健的策略，注重可用性和跨平台兼容性；而优雅降级更加依赖于先进的浏览器特性，注重提供丰富的用户体验。具体选择哪种策略取决于项目需求、目标用户群体以及可用技术等因素。

javascript中defer和async

在 JavaScript 中，defer 和 async 是两种用于控制脚本加载和执行的属性，它们通常用于 <script> 标签中。

defer 属性：当浏览器解析到带有 defer 属性的 <script> 标签时，会立即下载脚本文件，但会将脚本的执行推迟到整个文档解析完毕后再执行。多个带有 defer 属性的脚本会按照它们在文档中出现的顺序依次执行。defer 属性适合用于需要等待整个文档解析完成后执行的脚本，而不会阻塞页面的解析和渲染。defer 属性只在外部脚本（通过 src 属性引入的脚本）中有效。

示例：

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

async 属性：当浏览器解析到带有 async 属性的 <script> 标签时，会立即下载脚本文件，并在下载完成后立即执行，不会等待其他脚本文件的下载和文档解析。多个带有 async 属性的脚本的执行顺序是不确定的，哪个脚本先下载完成就先执行哪个。async 属性适用于独立的脚本文件，互相之间不依赖、不影响的情况。

示例：

<script src="script1.js" async></script>
<script src="script2.js" async></script>

需要注意的是，带有 defer 和 async 属性的脚本在执行时会并行下载（如果允许的话），因此它们不会阻塞页面的解析和渲染。

但是，使用 async 属性加载的脚本执行顺序是不确定的，如果某个脚本依赖于另一个脚本，则需要谨慎使用。

总结：

defer 属性用于推迟脚本的执行，直到整个文档解析完毕，多个脚本按顺序依次执行。
async 属性用于异步加载脚本，不会阻塞页面的解析和渲染，脚本下载完成后立即执行，执行顺序不确定。
defer 只适用于外部脚本，async 可用于内部脚本和外部脚本。
defer 和 async 属性不适用于行内脚本（直接在 HTML 中写的脚本）。

说几条写JavaScript的基本规范

在 JavaScript 中，attribute 和 property 是用于访问和操作 HTML 元素的两个不同概念。

Attribute（属性）：Attribute 是 HTML 元素在文档中的初始值，它是作为 HTML 标签属性定义的。我们可以通过元素的 getAttribute() 方法来获取元素的属性值，或者使用 setAttribute() 方法来设置元素的属性值。例如，对于以下的 HTML 元素:

<input id="myInput" type="text" value="Hello">

我们可以使用以下代码来获取和设置元素的属性值：

var input = document.getElementById("myInput");
var value = input.getAttribute("value"); // 获取属性值
input.setAttribute("value", "World"); // 设置属性值

请注意，所有的 attribute 值都是字符串类型。

Property（属性）：Property 是 HTML 元素在 DOM 对象中的表示，它是该元素的一个 JavaScript 对象属性。Property 可以代表元素的当前状态或值，也可以用于修改元素的状态或值。例如，对于上面的 <input> 元素，可以使用以下代码来访问和修改其 value 属性：

var input = document.getElementById("myInput");
var value = input.value; // 获取属性值
input.value = "World"; // 设置属性值

与 attribute 不同的是，property 可以是各种 JavaScript 数据类型，而不仅仅限于字符串。

attribute 和 property 在某些情况下可能会有不同步的问题。

例如，当我们通过 JavaScript 代码修改了元素的 property 值时，不一定会自动更新对应的 attribute。类似地，当我们通过 HTML 属性设置了元素的初始值后，在 JavaScript 中修改 property 值的时候，也不会自动更新对应的 attribute。这是因为 attribute 和 property 是两个独立的值，它们的关联取决于具体的 HTML 元素和浏览器实现。

因此，在处理 HTML 元素时，我们需要根据具体的需求和情况选择是使用 attribute 还是 property。一般来说，如果我们需要获取或设置一个特定的属性值，通常使用 property；而如果我们需要访问或修改元素的初始值，或者需要与 HTML 属性交互，那么使用 attribute 更合适。

总结：

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

谈谈你对ES6的理解

ES6，也被称为ECMAScript 6或ES2015，是JavaScript的第六个版本，于2015年发布。ES6引入了许多新的语言特性和改进，以提高JavaScript的表达能力和开发效率。

以下是我对ES6的理解：

let和const关键字：ES6引入了let和const关键字来声明变量。let具有块级作用域，可以代替var关键字，并且解决了var存在的变量提升问题。const用于声明常量，一旦赋值后就不能再修改。
箭头函数：箭头函数是ES6中最受欢迎的特性之一。它可以更简洁地定义函数，并且自动绑定上下文，避免了传统函数中this指向的问题。
模板字符串：ES6允许使用模板字符串来创建多行字符串和插入变量。通过使用反引号（`）包裹字符串，并在需要插入的变量前加上美元符号和大括号，可以方便地进行字符串拼接和格式化。
解构赋值：解构赋值允许从数组或对象中提取值，并将其赋给变量。这种方式简化了变量的声明和赋值过程，使代码更加简洁易读。
类和模块：ES6引入了class关键字，使得面向对象编程更加方便。可以使用class来定义类和构造函数，并通过extends关键字实现类的继承。此外，ES6还增加了对模块的支持，通过export和import语句可以方便地导出和导入模块。
Promise：Promise是一种异步编程的解决方案，用于处理回调地狱（callback hell）问题。通过Promise可以更加优雅地处理异步操作，并使用链式调用的方式组织代码。
迭代器和生成器：ES6引入了迭代器和生成器的概念，使得处理数据序列变得更加容易。迭代器允许开发者按需迭代集合中的元素，而生成器则简化了迭代器的创建过程。