$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
,在数据变动时发布消息给订阅者,触发相应的监听回调