Javascript面试题

时间  2019-11-24
标签 javascript 面试 栏目 JavaScript 繁體版
原文   原文链接

一、简述同步和异步的区别 

  • 同步是阻塞模式，异步是非阻塞模式。 
  • 同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 
  • 异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

二、web前端开发，如何提升页面性能优化？ 

内容方面：javascript

1. 减小 HTTP 请求 (Make Fewer HTTP Requests)
php

2. 减小 DOM 元素数量 (Reduce the Number of DOM Elements) css

3. 使得 Ajax 可缓存 (Make Ajax Cacheable) html

针对CSS： 前端

1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) java

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) webpack

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 程序员

4. 避免 CSS 表达式 (Avoid CSS Expressions)  web

针对JavaScript ： ajax

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 

4. 移除重复脚本 (Remove Duplicate Scripts) 

面向图片(Image)： 

1. 优化图片 

2. 不要在 HTML 中使用缩放图片 

3. 使用恰当的图片格式 

4. 使用 CSS Sprites 技巧对图片优化

三、考虑如下两个函数。它们会返回相同的东西吗？ 为何相同或为何不相同？

function foo1(){  return {
      bar: "hello"
  };
}

function foo2(){  return
  {
      bar: "hello"
  };
}复制代码

出人意料的是，这两个函数返回的内容并不相同。更确切地说是：

console.log("foo1 returns:");console.log(foo1());console.log("foo2 returns:");console.log(foo2());复制代码

将产生：

foo1 returns:Object {bar: "hello"}foo2 returns:undefined复制代码

这不只是使人惊讶，并且特别让人困惑的是， foo2()返回undefined却没有任何错误抛出。

缘由与这样一个事实有关，即分号在JavaScript中是一个可选项（尽管省略它们一般是很是糟糕的形式）。其结果就是，当碰到 foo2()中包含 return语句的代码行（代码行上没有其余任何代码），分号会当即自动插入到返回语句以后。

也不会抛出错误，由于代码的其他部分是彻底有效的，即便它没有获得调用或作任何事情（至关于它就是是一个未使用的代码块，定义了等同于字符串 "hello"的属性 bar）。

这种行为也支持放置左括号于JavaScript代码行的末尾，而不是新代码行开头的约定。正如这里所示，这不只仅只是JavaScript中的一个风格偏好。

四、闭包

  • 闭包就是可以读取其余函数内部变量的函数

  • 闭包是指有权访问另外一个函数做用域中变量的函数，建立闭包的最多见的方式就是在一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量,利用闭包能够突破做用链域

  • 闭包的特性：

    • 函数内再嵌套函数
    • 内部函数能够引用外层的参数和变量
    • 参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

  • 使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。在js中，函数即闭包，只有函数才会产生做用域的概念

  • 闭包 的最大用处有两个，一个是能够读取函数内部的变量，另外一个就是让这些变量始终保持在内存中

  • 闭包的另外一个用处，是封装对象的私有属性和私有方法

  • 好处：可以实现封装和缓存等；

  • 坏处：就是消耗内存、不正当使用会形成内存溢出的问题

使用闭包的注意点

  • 因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露
  • 解决方法是，在退出函数以前，将不使用的局部变量所有删除

五、说说你对做用域链的理解

  • 做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到window对象即被终止，做用域链向下访问变量是不被容许的
  • 简单的说，做用域就是变量与函数的可访问范围，即做用域控制着变量与函数的可见性和生命周期

六、JavaScript原型，原型链 ? 有什么特色？

  • 每一个对象都会在其内部初始化一个属性，就是prototype(原型)，当咱们访问一个对象的属性时

  • 若是这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有本身的prototype，因而就这样一直找下去，也就是咱们平时所说的原型链的概念

  • 关系：instance.constructor.prototype = instance.__proto__

  • 特色：

    • JavaScript对象是经过引用来传递的，咱们建立的每一个新对象实体中并无一份属于本身的原型副本。当咱们修改原型时，与之相关的对象也会继承这一改变

  • 当咱们须要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 若是没有的

  • 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象

七、请解释什么是事件代理

  • 事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中经常使用绑定事件的经常使用技巧。顾名思义，“事件代理”便是把本来须要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是能够提升性能
  • 能够大量节省内存占用，减小事件注册，好比在table上代理全部td的click事件就很是棒
  • 能够实现当新增子对象时无需再次对其绑定

八、Javascript如何实现继承？

  • 构造继承

  • 原型继承

  • 实例继承

  • 拷贝继承

  • 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式

function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，经过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//获得被继承的属性
  }
复制代码

九、谈谈This对象的理解

  • this老是指向函数的直接调用者（而非间接调用者）
  • 若是有new关键字，this指向new出来的那个对象
  • 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this老是指向全局对象Window

十、事件模型

W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）

  • 冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
  • 捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发
  • DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件
  • 阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下设置cancelBubble = true
  • 阻止捕获：阻止事件的默认行为，例如click - <a>后的跳转。在W3c中，使用preventDefault（）方法，在IE下设置window.event.returnValue = false

十一、new操做符具体干了什么呢?

  • 建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型
  • 属性和方法被加入到 this 引用的对象中
  • 新建立的对象由 this 所引用，而且最后隐式的返回 this

十二、Ajax原理

  • Ajax的原理简单来讲是在用户和服务器之间加了—个中间层(AJAX引擎)，经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。使用户操做与服务器响应异步化。这其中最关键的一步就是从服务器得到请求数据
  • Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制
// 1. 建立链接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 链接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
复制代码

ajax 有那些优缺点?

  • 优势：
    • 经过异步模式，提高了用户体验.
    • 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用.
    • Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。
    • Ajax能够实现动态不刷新（局部刷新）
  • 缺点：
    • 安全问题 AJAX暴露了与服务器交互的细节。
    • 对搜索引擎的支持比较弱。
    • 不容易调试。

1三、如何解决跨域问题?

  • jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

1四、模块化开发怎么作？

  • 当即执行函数,不暴露私有成员
var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();
复制代码

1五、异步加载JS的方式有哪些？

  • defer，只支持IE
  • async：
  • 建立script，插入到DOM中，加载完毕后callBack

1六、那些操做会形成内存泄漏？

  • 内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在
  • setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏
  • 闭包使用不当

1七、XML和JSON的区别？

  • 数据体积方面

    • JSON相对于XML来说，数据的体积小，传递的速度更快些。

  • 数据交互方面

    • JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

  • 数据描述方面

    • JSON对数据的描述性比XML较差

  • 传输速度方面

    • JSON的速度要远远快于XML

1八、谈谈你对webpack的见解

  • WebPack 是一个模块打包工具，你可使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它可以很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各类静态文件（图片、字体等），让开发过程更加高效。对于不一样类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源

1九、说说你对AMD和Commonjs的理解

  • CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操做。AMD规范则是非同步加载模块，容许指定回调函数
  • AMD推荐的风格经过返回一个对象作为模块对象，CommonJS的风格经过对module.exports或exports的属性赋值来达到暴露模块对象的目的

20、常见web安全及防御原理

  • sql注入原理

    • 就是经过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

  • 总的来讲有如下几点

    • 永远不要信任用户的输入，要对用户的输入进行校验，能够经过正则表达式，或限制长度，对单引号和双"-"进行转换等
    • 永远不要使用动态拼装SQL，可使用参数化的SQL或者直接使用存储过程进行数据查询存取
    • 永远不要使用管理员权限的数据库链接，为每一个应用使用单独的权限有限的数据库链接
    • 不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息

XSS原理及防范

  • Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。好比：攻击者在论坛中放一个看似安全的连接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户本来觉得的信任站点

XSS防范方法

  • 首先代码里对用户输入的地方和变量都须要仔细检查长度和对”<”,”>”,”;”,”’”等字符作过滤；其次任何内容写到页面以前都必须加以encode，避免不当心把html tag 弄出来。这一个层面作好，至少能够堵住超过一半的XSS 攻击

XSS与CSRF有什么区别吗？

  • XSS是获取信息，不须要提早知道其余用户页面的代码和数据包。CSRF是代替用户完成指定的动做，须要知道其余用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤

  • 登陆受信任网站A，并在本地生成Cookie

  • 在不登出A的状况下，访问危险网站B

CSRF的防护

  • 服务端的CSRF方式方法不少样，但总的思想都是一致的，就是在客户端页面增长伪随机数
  • 经过验证码的方法

2一、用过哪些设计模式？

  • 工厂模式：

    • 工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，由于根本没法
    • 主要好处就是能够消除对象间的耦合，经过使用工程方法而不是new关键字

  • 构造函数模式

    • 使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不一样之处在于
    • 直接将属性和方法赋值给 this对象;

2二、为何要有同源限制？

  • 同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
  • 举例说明：好比一个黑客程序，他利用Iframe把真正的银行登陆页面嵌到他的页面上，当你使用真实的用户名，密码登陆时，他的页面就能够经过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

2三、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

  • offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
  • clientWidth/clientHeight返回值只包含content + padding，若是有滚动条，也不包含滚动条
  • scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

2四、javascript有哪些方法定义对象

  • 对象字面量： var obj = {};
  • 构造函数： var obj = new Object();
  • Object.create(): var obj = Object.create(Object.prototype);

2五、常见兼容性问题？

  • png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8
  • 浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一,，可是全局效率很低，通常是以下这样解决：
body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
复制代码
  • IE下,event对象有x,y属性,可是没有pageX,pageY属性
  • Firefox下,event对象有pageX,pageY属性,可是没有x,y属性.

2六、介绍js的基本数据类型

  • Undefined、Null、Boolean、Number、String

2七、介绍js有哪些内置对象？

  • Object 是 JavaScript 中全部对象的父对象
  • 数据封装类对象：Object、Array、Boolean、Number 和 String
  • 其余对象：Function、Arguments、Math、Date、RegExp、Error

2八、说几条写JavaScript的基本规范？

  • 不要在同一行声明多个变量
  • 请使用===/!==来比较true/false或者数值
  • 使用对象字面量替代new Array这种形式
  • 不要使用全局函数
  • Switch语句必须带有default分支
  • If语句必须使用大括号
  • for-in循环中的变量 应该使用var关键字明确限定做用域，从而避免做用域污

2九、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

  • 栈：原始数据类型（Undefined，Null，Boolean，Number、String）
  • 堆：引用数据类型（对象、数组和函数）
  • 两种类型的区别是：存储位置不一样；
  • 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，因此放入栈中存储；
  • 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,若是存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其
  • 在栈中的地址，取得地址后从堆中得到实体
image

30、javascript建立对象的几种方式？

javascript建立对象简单的说,无非就是使用内置对象或各类自定义对象，固然还能够用JSON；但写法有不少种，也能混合使用

  • 对象字面量的方式
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
复制代码
  • 用function来模拟无参的构造函数
function Person(){}
    var person=new Person();//定义一个function，若是使用new"实例化",该function能够看做是一个Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();
复制代码
  • 用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）
function Pet(name,age,hobby){
       this.name=name;//this做用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、建立对象
    maidou.eat();//调用eat方法
复制代码
  • 用工厂方式来建立（内置对象）
var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();
复制代码
  • 用原型方式来建立
function Dog(){

     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();

复制代码
  • 用混合方式来建立
function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我如今卖"+this.price+"万元");
      }
    var camry =new Car("凯美瑞",27);
    camry.sell(); 
复制代码

3一、eval是作什么的？

  • 它的功能是把对应的字符串解析成JS代码并运行
  • 应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）
  • 由JSON字符串转换为JSON对象的时候能够用eval，var obj =eval('('+ str +')')

3二、null，undefined 的区别？

  • undefined 表示不存在这个值。

  • undefined :是一个表示"无"的原始值或者说表示"缺乏值"，就是此处应该有一个值，可是尚未定义。当尝试读取时会返回 undefined

  • 例如变量被声明了，但没有赋值时，就等于undefined

  • null 表示一个对象被定义了，值为“空值”

  • null : 是一个对象(空对象, 没有任何属性和方法)

  • 例如做为函数的参数，表示该函数的参数不是对象；

  • 在验证null时，必定要使用　=== ，由于 ==没法分别null 和　undefined

3三、["1", "2", "3"].map(parseInt) 答案是多少？

  • [1, NaN, NaN]由于 parseInt 须要两个参数 (val, radix)，其中radix 表示解析时用的基数。
  • map传了 3个(element, index, array)，对应的 radix 不合法致使解析失败。

3四、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

  • use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为

3五、JSON 的了解？

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

  • 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

  • JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
复制代码
  • JSON对象转换为JSON字符串：
var last=obj.toJSONString();
var last=JSON.stringify(obj);
复制代码

3六、js延迟加载的方式有哪些？

  • defer和async、动态建立DOM方式（用得最多）、按需异步载入js

3七、同步和异步的区别?

  • 同步：浏览器访问服务器请求，用户看获得页面刷新，从新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操做
  • 异步：浏览器访问服务器请求，用户正常操做，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

3八、渐进加强和优雅降级

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

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

3九、defer和async

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

40、说说严格模式的限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，不然报错
  • 不能使用with语句
  • 禁止this指向全局对象

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

  • attribute是dom元素在文档中做为html标签拥有的属性；
  • property就是dom元素在js中做为对象拥有的属性。
  • 对于html的标准属性来讲，attribute和property是同步的，是会自动更新的
  • 可是对于自定义的属性来讲，他们是不一样步的

4二、谈谈你对ES6的理解

  • 新增模板字符串（为JavaScript提供了简单的字符串插值功能）
  • 箭头函数
  • for-of（用来遍历数据—例如数组中的值。）
  • arguments对象可被不定参数和默认参数完美代替。
  • ES6将3Promise对象归入规范，提供了原生的Promise对象。
  • 增长了let和const命令，用来声明变量。
  • 增长了块级做用域。
  • let命令实际上就增长了块级做用域。
  • 还有就是引入module模块的概念

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

  • 这个语法糖可让有OOP基础的人更快上手js，至少是一个官方的实现了
  • 但对熟悉js的人来讲，这个东西没啥大影响；一个Object.creat()搞定继承，比class简洁清晰的多

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

  • 面向过程就是分析出解决问题所须要的步骤，而后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就能够了
  • 面向对象是把构成问题事务分解成各个对象，创建对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为
  • 面向对象是以功能来划分问题，而不是步骤

4五、面向对象编程思想

  • 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计
  • 优势
    • 易维护
      • 采用面向对象思想设计的结构，可读性高，因为继承的存在，即便改变需求，那么维护也只是在局部模块，因此维护起来是很是方便和较低成本的
    • 易扩展
    • 开发工做的重用性、继承性高，下降重复工做量。
    • 缩短了开发周期

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

  • 可用性（Usability）：产品是否容易上手，用户可否完成任务，效率如何，以及这过程当中用户的主观感觉可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力
  • 可访问性（Accessibility）：Web内容对于残障用户的可阅读和可理解性
  • 可维护性（Maintainability）：通常包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和加强功能。

4七、如何经过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
复制代码

4八、谈一谈let与var的区别？

  • let命令不存在变量提高，若是在let前使用，会致使报错
  • 若是块区中存在let和const命令，就会造成封闭做用域
  • 不容许重复声明，所以，不能在函数内部从新声明参数

4九、map与forEach的区别？

  • forEach方法，是最基本的方法，就是遍历与循环，默认有3个传参：分别是遍历的数组内容item、数组索引index、和当前遍历数组Array
  • map方法，基本用法与forEach一致，可是不一样的，它会返回一个新的数组，因此在callback须要有return值，若是没有，会返回undefined

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

  • 简单说，"函数式编程"是一种"编程范式"（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 数组和对象的遍历方式，以及几种方式的比较

一般咱们会用循环的方式来遍历数组。可是循环是 致使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 元素，由于每次读取都会扫描一遍页面上的选择器相关元素，速度会大大下降

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程