一、ES6

1、模块化

ES6通过export和import实现模块化

ES6的模块化的基本规则或特点， 欢迎补充：

　　　　1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；

　　　　2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

　　　　3：模块内部的变量或者函数可以通过export导出；

　　　　4：一个模块可以导入别的模块

例子：

 //  util1.js

 export default{

   a:  // export default

 }

 // util2.js

 export function fn1(){

    console.log('fn1')

 }

 export function fn2(){

    console.log('fn2')

 }

 // index.js

 import util from './util.js'

 import {fn1,fn2} from './util2.js'

2、编译方法，把es6编译成es5

都是用的babel这个东西

第一种方法：babel（简单的直接用babel）

cmd安装babel-cli，用于在终端使用babel

npm install -g babel-cli

安装babel-core babel-preset-es2015 babel-preser-latest

npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

通过 babel --version来判断babel版本

想要编译某个js，可以执行下面的代码

babel index.js -o babel1.js

3、使用webpack进行编译

4、使用rollup编译

5、export和export default的区别

在一个文件中，export和import可以用多个

 //demo1.js

 export const str = 'hello world'

 export function f(a){

     return a+

 }

对应的导入方式

 //demo2.js

 import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号
 //demo1.js

 export default const str = 'hello world'

对应的导入方式

 //demo2.js

 import str from 'demo1' //导入的时候没有花括号

export default本质上是输出一个叫default的变量

export default str = str编译以后是exports.default
export function ss() {
  console.log('ss')
}

export function aa() {
  console.log('aa')
}
编译以后是
exports.ss = ss;
exports.aa = aa;
 

二、class

对比下面俩组代码

 function Ttest(x,y) {

   this.x = x;

   this.y = y;

 }

 Ttest.prototype.adds = function () {

    return this.x + this.y

 }

 var m =new Ttest(,)

 console.log(m.adds())

 console.log('类型是什么：'+typeof Ttest)

 console.log(Ttest === Ttest.prototype.constructor)

 console.log(m.__proto__===Ttest.prototype)
 class MathHandle{

   constructor(x,y){

     this.x=x;

     this.y=y;

   }

   add(){

     return this.x+this.y

   }

 }

 console.log('类型是什么：'+typeof MathHandle)

 console.log(MathHandle === MathHandle.prototype.constructor)

 const m = new MathHandle(,);

 console.log(m.add())

上面俩组的代码对比可以知道：class就是一个语法糖，本质还是function

ES6里面的class和js构造函数的区别？

三、promise

先来个例子，用callback实现

 function LoadImg(src, callback, fail) {

   var img = document.createElement('img')

   img.onload = function () {

     callback(img)

   }

   img.onerror = function () {

     fail()

   }

   img.src = src

 }

 var src = ''

 LoadImg(src,function (img) {

   console.log(img.width)

 },function () {

   console.log('failed')

 })

用promise实现

 function LoadImg(src) {

   const promise = new Promise(function (resolve, reject) {

     var img = document.createElement('img')

     img.onload = function () {

       resolve(img)

     }

     img.onerror = function () {

       reject()

     }

     img.src = src

   })

   return promise

 }

 var src = 'http://www.imooc.com/static/img/index/logo_new.png'

 var result = LoadImg(src)

 result.then(function (img) {

   console.log(img.width)

 },function () {

   console.log('failed')

 })

 result.then(function (img) {

   console.log(img.height)

 })

Promise语法

四、箭头函数

看上面的例子：箭头函数是普通function的补充，不是所有地方都适用箭头函数，上面的例子告诉我们，箭头函数最大的意义是，this指向了函数体外面最近一层，普通函数指向的是window

五、单线程

单线程的解决方案之一：异步，但是它有个问题

jquery的deferred

http://www.runoob.com/jquery/misc-jquery-deferred.html

上面这俩种方式，要比常用的ajax好很多

当新加方法的时候，不用修改已有的方法

执行成功的时候，进入then，出现了错误，统一进入catch

例子：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

   <meta charset="UTF-8">

   <meta http-equiv="x-ua-compatible" content="ie=edge">

   <title>Title</title>

   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">

 </head>

 <body>

    <script type="text/javascript" src="./jquery-3.1.1.js"></script>

    <script type="text/javascript">

      function LoadImg(src) {

        var promise = new Promise(function (resolve, reject) {

          var img = document.createElement('img')

          img.onload = function () {

            resolve(img)

          }

          img.onerror = function () {

            reject("图片加载失败")

          }

          img.src = src

        })

        return promise

      }

      var src = 'http://www.imooc.com/static/img/index/logo_new1.png'

      var result = LoadImg(src)

      result.then(function (img) {

        console.log(, img.width)

        return img

      }).then(function (img) {

        console.log(, img.height)

      }).catch(function (ex) {

        console.log(ex)

      })

    </script>

 </body>

 </html>

上面的解释：onerror里的错误，会进入到catch，这可以表明，使用catch的时候，就不需要在then写第二个参数了，只要出现错误，都会进入到catch里面

第一个result1执行完后，返回result2的promise实例，执行后面的then（如果有第三个，就在后面加一个）

实际效用：第一个请求获取的数据，作为第二个请求的参数

总结：

前端JavaScript高级面试笔记的更多相关文章

  1. 面试 11-00.JavaScript高级面试

    11-00.JavaScript高级面试 #前言 一.基础知识: ES 6常用语法:class .module.Promise等 原型高级应用:结合 jQuery 和 zepto 源码 异步全面讲解: ...

  2. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  3. javascript高级编程笔记02(基本概念)

    ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...

  4. JavaScript高级程序设计笔记之面向对象

    说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...

  5. javascript高级程序设计--笔记01

    概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型( ...

  6. javascript高级编程笔记05(面向对象)

    面向对象设计 es中有两种属性:数据属性和访问器属性 数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值,数据属性有4个描述其行为的特性 [[Configurable]]:表示能否通 ...

  7. javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记

    1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...

  8. JavaScript高级程序设计笔记（一）

    ---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...

  9. JavaScript高级内容笔记：原型链、继承、执行上下文、作用域链、闭包

    最近在系统的学习JS深层次内容,并稍微整理了一下,作为备忘和后期复习,这里分享给大家,希望对大家有所帮助.如有错误请留言指正,tks. 了解这些问题,我先一步步来看,先从稍微浅显内容说起,然后引出这些 ...

随机推荐

  1. PAT 甲级 1105 Spiral Matrix

    https://pintia.cn/problem-sets/994805342720868352/problems/994805363117768704 This time your job is ...

  2. Python的文件读写

    目录 读文件 操作文件 读取内容 面试题的例子 写文件 操作模式 指针操作 字符编码 读文件 操作文件 打开一个文件用open()方法(open()返回一个文件对象,它是可迭代的): 文件使用完毕后必 ...

  3. python学习：python的星号（*）和双星号（**）用法

    原帖地址见:[Python]-12-星号变量的特殊用法 在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前添加单个星号或两个星号",实现多参数的传入 ...

  4. Git 使用中显示“Another git process seems to be running in this repository...”问题解决

    一.引言:问题回忆 这几天,我同时在使用vs2017自带的git管理工具和git bash命令行工具对于同一个工作区进行了git操作管理. 其中,当我在vs2017中对文件进行了更改,突然脑洞大开,想 ...

  5. Hard to prepare 2018 徐州赛区网络预赛

    题意: 就是由2k 个数 每次选一个 可以选同样的 围成一个圈 使得相邻的数同或为真  求方案数 解析: 第一个数有2k 种选择 之后的n-2个数 都有2k-1 种选择 第n个数 我们要考虑 它的左右 ...

  6. MySQL中使用Like模糊查询太慢

    问题:明明建立了索引,为何Like模糊查询速度还是特别慢? Like是否使用索引? 1.like %keyword    索引失效,使用全表扫描.但可以通过翻转函数+like前模糊查询+建立翻转函数索 ...

  7. Path Sum II - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Path Sum II - LeetCode 注意点 不要访问空结点 解法 解法一:递归,DFS.每当DFS搜索到新节点时,都要保存该节点.而且每当找出一 ...

  8. suoi16 随机合并试卷 (dp)

    算出来每个数被计算答案的期望次数就可以 考虑这个次数,我们可以把一次合并反过来看,变成把一个数+1然后再复制一个 记f[i][j]为一共n个数时第j个数的期望次数,就可以得到期望的递推公式,最后拿f[ ...

  9. 监控IIS的运行状态

    IIS经常出现假死的情况,具体什么时候会出现假死,我就不说了,今天我要写的是如何监控IIS的状态. 程序的功能是:如果IIS是为运行的状态,就重启IIS,如果IIS的连接数达到了设置的连接数,也重启I ...

  10. 界面编程之QT的文件操作20180729

    /*******************************************************************************************/ 一.QT文件 ...