$JavaScript（3）

4一、渐进加强和优雅降级

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

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

4二、defer和async

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

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

4三、说说严格模式的限制

• 变量必须声明后再使用

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

• 不能使用with语句

• 禁止this指向全局对象

4四、attribute和property的区别是什么？

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

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

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

• 可是对于自定义的属性来讲，他们是不一样步的

4五、谈谈你对ES6的理解

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

• 箭头函数

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

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

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

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

• 增长了块级做用域。

• let命令实际上就增长了块级做用域。

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

4六、ECMAScript6 怎么写class么，为何会出现class这种东西?

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

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

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

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

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

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

4八、面向对象编程思想

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

• 优势

  • 易维护易扩展

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

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

  • 缩短了开发周期

4九、对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

 

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

• let命令不存在变量提高，若是在let前使用，会致使报错

• 若是块区中存在let和const命令，就会造成封闭做用域

• 不容许重复声明，所以，不能在函数内部从新声明参数

5二、map与forEach的区别？

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

• map方法，基本用法与forEach一致，可是不一样的，它会返回一个新的数组，因此在callback须要有return值，若是没有，会返回undefined

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

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

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

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

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

• 不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误

• 不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用Rest参数代替

• 不可使用yield命令，所以箭头函数不能用做Generator函数

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

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

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

• 方法调用模式

• 函数调用模式

• 构造器调用模式

graph LR
A-->B

• apply/call调用模式

5六、异步编程的实现方式？

• 回调函数

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

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

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

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

  • 相似于事件监听，可是能够经过‘消息中心’，了解如今有多少发布者，多少订阅者

• Promise对象

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

• Generator函数

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

• async函数

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

5七、对原生Javascript了解程度

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

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

• CSS3的动画的优势

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

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

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

5九、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 绝不费力，构建工做尽在掌握：如同一系列流管道

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

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