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