14万字 | 400多道JavaScript 面试题及详细答案11（建议收藏）

267.为什么需要混淆？

以下是混淆的几个原因，

1.代码大小将减少。所以服务器和客户端之间的数据传输会很快。

2.它对外界隐藏业务逻辑并保护代码不受他人影响

3.逆向工程难度很大

4.下载时间将减少

268.什么是Minification（缩小）？

缩小是删除所有不必要的字符（删除空格）的过程，变量将被重命名而不改变其功能。这也是一种混淆。

269.缩小有什么好处？

通常情况下，建议在流量大和资源密集需求的情况下使用最小化。它减少了文件大小，具有以下好处，

1.减少网页的加载时间

2.节省带宽使用量

270.混淆和加密有什么区别？

以下是混淆和加密之间的主要区别，

特色 混淆 加密

定义 以任何其他形式更改任何数据的形式 使用密钥将信息的形式更改为不可读的格式

解码的钥匙 无需任何密钥即可解码 它是必需的

目标数据格式 它将被转换为复杂的形式 转换成不可读的格式

271.常用的缩小工具有哪些？

有许多在线/离线工具可以缩小 javascript 文件，

谷歌的 Closure 编译器

jsmin

javascript-minifier.com

Prettydiff.com

272.你如何使用 javascript 执行表单验证？

JavaScript 可用于执行 HTML 表单验证。比如表单域为空，函数需要通知，返回false，防止表单被提交。

让我们以 html 形式执行用户登录，

<form name="myForm" onsubmit="return validateForm()" method="post">
 User name: <input type="text" name="uname">
 <input type="submit" value="Submit">
 </form>
用户登录验证如下，
 function validateForm() {
   var x = document.forms["myForm"]["uname"].value;
   if (x == "") {
     alert("The username shouldn't be empty");
     return false;
   }
 }

273.如何在没有 javascript 的情况下执行表单验证？

您可以在不使用 javascript 的情况下自动执行 HTML 表单验证。通过应用required属性启用验证以防止在输入为空时提交表单。

<form method="post">
   <input type="text" name="uname" required>
   <input type="submit" value="Submit">
 </form>

注意：自动表单验证在 Internet Explorer 9 或更早版本中不起作用。

274.可用于约束验证的 DOM 方法有哪些？

以下 DOM 方法可用于对无效输入进行约束验证，

1.checkValidity()：如果输入元素包含有效数据，则返回 true。

2.setCustomValidity()：用于设置输入元素的validationMessage 属性。让我们使用带有 DOM 验证的用户登录表单

function myFunction() {
   var userName = document.getElementById("uname");
   if (!userName.checkValidity()) {
     document.getElementById("message").innerHTML = userName.validationMessage;
   } else {
     document.getElementById("message").innerHTML = "Entered a valid username";
   }
 }

275.什么是可用的约束验证 DOM 属性？

下面是一些可用的约束验证 DOM 属性的列表，

1.validity：它提供与输入元素有效性相关的布尔属性列表。

2.validationMessage：当有效性为假时显示消息。

3.willValidate：指示输入元素是否将被验证。

276.什么是有效性属性列表？

输入元素的有效性属性提供一组与数据有效性相关的属性。

1.customError：如果设置了自定义有效性消息，则返回 true。

2.patternMismatch：如果元素的值与其模式属性不匹配，则返回 true。

3.rangeOverflow：如果元素的值大于其 max 属性，则返回 true。

4.rangeUnderflow：如果元素的值小于其 min 属性，则返回 true。

5.stepMismatch：如果元素的值根据 step 属性无效，则返回 true。

6.tooLong：如果元素的值超过其 maxLength 属性，则返回 true。

7.typeMismatch：如果元素的值根据 type 属性无效，则返回 true。

8.valueMissing：如果具有必需属性的元素没有值，则返回 true。

9.valid：如果元素的值有效，则返回 true。

277.举例使用 rangeOverflow 属性？

如果元素的值大于其 max 属性，则 rangeOverflow 属性返回 true。例如，如果值大于 100，下面的表单提交会引发错误，

<input id="age" type="number" max="100">
 <button onclick="myOverflowFunction()">OK</button>
 function myOverflowFunction() {
   if (document.getElementById("age").validity.rangeOverflow) {
     alert("The mentioned age is not allowed");
   }
 }

278.javascript 中是否提供枚举功能？

不，javascript 本身不支持枚举。但是有不同种类的解决方案可以模拟它们，即使它们可能无法提供精确的等效项。例如，您可以在对象上使用冻结或密封，

var DaysEnum = Object.freeze({"monday":1, "tuesday":2, "wednesday":3, ...})

279.什么是枚举？

枚举是一种将变量限制为一组预定义常量中的一个值的类型。JavaScript 没有枚举，但 typescript 提供了内置的枚举支持。

enum Color {

 RED, GREEN, BLUE

}

280.你如何列出一个对象的所有属性？

您可以使用该Object.getOwnPropertyNames()方法返回直接在给定对象中找到的所有属性的数组。让我们在一个例子中使用它，

const newObject = {
   a: 1,
   b: 2,
   c: 3
 };
 console.log(Object.getOwnPropertyNames(newObject));  ["a", "b", "c"]

281.如何获取对象的属性描述符？

您可以使用Object.getOwnPropertyDescriptors()返回给定对象的所有自己的属性描述符的方法。此方法的示例用法如下，

const newObject = {
    a: 1,
    b: 2,
    c: 3
  };
 const descriptorsObject = Object.getOwnPropertyDescriptors(newObject);
 console.log(descriptorsObject.a.writable); //true
 console.log(descriptorsObject.a.configurable); //true
 console.log(descriptorsObject.a.enumerable); //true
 console.log(descriptorsObject.a.value); // 1

282.属性描述符提供的属性是什么？

属性描述符是具有以下属性的记录

1.value：与属性关联的值

2.writable：确定与属性关联的值是否可以更改

3.configurable：如果可以更改此属性描述符的类型并且可以从相应的对象中删除该属性，则返回 true。

4.enumerable：确定在枚举对应对象上的属性时是否出现该属性。

5.set: 一个作为属性设置器的函数

6.get：作为属性的 getter 的函数

283.你如何扩展类？

该extends关键字在类声明/表达式中用于创建一个类，该类是另一个类的子类。它可用于子类化自定义类以及内置对象。语法如下，

class ChildClass extends ParentClass { ... }
让我们以 Polygon 父类的 Square 子类为例，
  class Square extends Rectangle {
    constructor(length) {
      super(length, length);
      this.name = 'Square';
    }
    get area() {
      return this.width * this.height;
    }
    set area(value) {
      this.area = value;
    }
  }

284.如何在不重新加载页面的情况下修改 url？

该window.location.url属性将有助于修改 url，但它会重新加载页面。HTML5 引入了 history.pushState() 和 history.replaceState() 方法，分别允许您添加和修改历史条目。例如，您可以使用 pushState 如下，

window.history.pushState('page2', 'Title', '/page2.html');

1

285.如何检查数组是否包含特定值？

该Array#includes()方法用于通过返回 true 或 false 来确定数组是否在其条目中包含特定值。让我们看一个在数组中查找元素（数字和字符串）的示例。

var numericArray = [1, 2, 3, 4];
 console.log(numericArray.includes(3)); // true
 var stringArray = ['green', 'yellow', 'blue'];
 console.log(stringArray.includes('blue')); //true

286.你如何比较标量数组？

您可以使用 length 和数组的 every 方法来比较两个标量（直接使用 === 进行比较）数组。这些表达式的组合可以给出预期的结果，

const arrayFirst = [1,2,3,4,5];
 const arraySecond = [1,2,3,4,5];
 console.log(arrayFirst.length === arraySecond.length && arrayFirst.every((value, index) => value === arraySecond[index])); // true
如果你想比较数组而不考虑顺序，那么你应该先对它们进行排序，
const arrayFirst = [2,3,1,4,5];
const arraySecond = [1,2,3,4,5];
console.log(arrayFirst.length === arraySecond.length && arrayFirst.sort().every((value, index) => value === arraySecond[index])); //true

287.如何从获取参数中获取值？

该new URL()对象接受 url 字符串searchParams，该对象的属性可用于访问获取参数。请记住，您可能需要使用 polyfill 或window.location在旧浏览器（包括 IE）中访问 URL。

let urlString = "http://www.some-domain.com/about.html?x=1&y=2&z=3"; //window.location.href
let url = new URL(urlString);
let parameterZ = url.searchParams.get("z");
console.log(parameterZ); // 3

288.你如何用逗号作为千位分隔符打印数字？

您可以使用Number.prototype.toLocaleString()返回带有语言敏感表示的字符串的方法，例如千位分隔符、货币等。

function convertToThousandFormat(x){
return x.toLocaleString(); // 12,345.679
}
console.log(convertToThousandFormat(12345.6789));

289.java和javascript有什么区别？

两者都是完全不相关的编程语言，它们之间没有任何关系。Java 是静态类型的、编译的、在自己的 VM 上运行。而 Javascript 是在浏览器和 nodejs 环境中动态输入、解释和运行的。让我们看看表格格式的主要区别

特色 java JavaScript

类型 它是一种强类型语言 它是一种动态类型语言

范式 面向对象编程 基于原型的编程

范围 块作用域 函数作用域

并发 基于线程 基于事件

内存 使用更多内存 使用更少的内存。因此它将用于网页

具体区别参考：https://haiyong.blog.csdn.net/article/details/117409345

290.javascript是否支持命名空间？

JavaScript 默认不支持命名空间。因此，如果您创建任何元素（函数、方法、对象、变量），那么它就会变成全局并污染全局命名空间。让我们举个例子，定义两个没有任何命名空间的函数

function func1() {
console.log("这是第一个定义");
}
function func1() {
console.log("这是第二个定义");
}
func1(); // 这是第二个定义