$JavaScript（3）

41、渐进增强和优雅降级

• 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

• 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

42、defer和async

• defer并行加载js文件，会按照页面上script标签的顺序执行

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

43、说说严格模式的限制

• 变量必须声明后再使用

• 函数的参数不能有同名属性，否则报错

• 不能使用with语句

• 禁止this指向全局对象

44、attribute和property的区别是什么？

• attribute是dom元素在文档中作为html标签拥有的属性；

• property就是dom元素在js中作为对象拥有的属性。

• 对于html的标准属性来说，attribute和property是同步的，是会自动更新的

• 但是对于自定义的属性来说，他们是不同步的

45、谈谈你对ES6的理解

• 新增模板字符串（为JavaScript提供了简单的字符串插值功能）

• 箭头函数

• for-of（用来遍历数据—例如数组中的值。）

• arguments对象可被不定参数和默认参数完美代替。

• ES6将promise对象纳入规范，提供了原生的Promise对象。

• 增加了let和const命令，用来声明变量。

• 增加了块级作用域。

• let命令实际上就增加了块级作用域。

• 还有就是引入module模块的概念

46、ECMAScript6 怎么写class么，为什么会出现class这种东西?

• 这个语法糖可以让有OOP基础的人更快上手js，至少是一个官方的实现了

• 但对熟悉js的人来说，这个东西没啥大影响；一个Object.creat()搞定继承，比class简洁清晰的多

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

• 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了

• 面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为

• 面向对象是以功能来划分问题，而不是步骤

48、面向对象编程思想

• 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计

• 优点

  • 易维护易扩展

    • 采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的

  • 开发工作的重用性、继承性高，降低重复工作量。

  • 缩短了开发周期

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

• 可用性（Usability）：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力

• 可访问性（Accessibility）：Web内容对于残障用户的可阅读和可理解性

• 可维护性（Maintainability）：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

50、如何通过JS判断一个数组？

• instanceof方法

• instanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性

var arr = []; 
arr instanceof Array; // true

• constructor方法

  • constructor属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数

  • var arr = []; 
    arr.constructor == Array; //true

• 最简单的方法

  • 这种写法，是 jQuery 正在使用的

  • Object.prototype.toString.call(value) == '[object Array]'
    // 利用这个方法，可以写一个返回数据类型的方法
    var isType = function (obj) {
         return Object.prototype.toString.call(obj).slice(8,-1); 
    }

• ES5新增方法isArray()

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

51、谈一谈let与var的区别？

• let命令不存在变量提升，如果在let前使用，会导致报错

• 如果块区中存在let和const命令，就会形成封闭作用域

• 不允许重复声明，因此，不能在函数内部重新声明参数

52、map与forEach的区别？

• forEach方法，是最基本的方法，就是遍历与循环，默认有3个传参：分别是遍历的数组内容item、数组索引index、和当前遍历数组Array

• map方法，基本用法与forEach一致，但是不同的，它会返回一个新的数组，所以在callback需要有return值，如果没有，会返回undefined

53、谈一谈你理解的函数式编程？

• 简单说，"函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论

• 它具有以下特性：闭包和高阶函数、惰性计算、递归、函数是"第一等公民"、只用"表达式"

54、谈一谈箭头函数与普通函数的区别？

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替

• 不可以使用yield命令，因此箭头函数不能用作Generator函数

55、谈一谈函数中this的指向吧？

• this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

• 《javascript语言精髓》中大概概括了4种调用方式：

• 方法调用模式

• 函数调用模式

• 构造器调用模式

graph LR
A-->B

• apply/call调用模式

56、异步编程的实现方式？

• 回调函数

  • 优点：简单、容易理解
  • 缺点：不利于维护，代码耦合高

• 事件监听(采用时间驱动模式，取决于某个事件是否发生)：

  • 优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
  • 缺点：事件驱动型，流程不够清晰

• 发布/订阅(观察者模式)

  • 类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者

• Promise对象

  • 优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；
  • 缺点：编写和理解，相对比较难

• Generator函数

  • 优点：函数体内外的数据交换、错误处理机制
  • 缺点：流程管理不方便

• async函数

  • 优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。
  • 缺点：错误处理机制

57、对原生Javascript了解程度

• 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript

58、Js动画与CSS动画区别及相应实现

• CSS3的动画的优点

  • 在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化
  • 代码相对简单

• 缺点JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧

  • 在动画控制上不够灵活
  • 兼容性不好

59、JS 数组和对象的遍历方式，以及几种方式的比较

• for in循环

• for循环

• forEach

  • 这里的 forEach回调中两个参数分别为 value，index
  • forEach 无法遍历对象
  • IE不支持该方法；Firefox 和 chrome 支持
  • forEach 无法使用 break，continue 跳出循环，且使用 return 是跳过本次循环

• 这两种方法应该非常常见且使用很频繁。但实际上，这两种方法都存在性能问题

• 在方式一中，for-in需要分析出array的每个属性，这个操作性能开销很大。用在 key 已知的数组上是非常不划算的。所以尽量不要用for-in，除非你不清楚要处理哪些属性，例如 JSON对象这样的情况

• 在方式2中，循环每进行一次，就要检查一下数组长度。读取属性（数组长度）要比读局部变量慢，尤其是当 array 里存放的都是 DOM 元素，因为每次读取都会扫描一遍页面上的选择器相关元素，速度会大大降低

60、gulp是什么？

• gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

• Gulp的核心概念：流

• 流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向

• gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作

• Gulp的特点：

  • 易于使用：通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理

  • 构建快速 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作

  • 易于学习 通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道

61、说一下Vue的双向绑定数据的原理

• vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调