前端JavaScript高级面试笔记
一、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高级面试笔记的更多相关文章
- 面试 11-00.JavaScript高级面试
11-00.JavaScript高级面试 #前言 一.基础知识: ES 6常用语法:class .module.Promise等 原型高级应用:结合 jQuery 和 zepto 源码 异步全面讲解: ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- javascript高级编程笔记02(基本概念)
ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...
- JavaScript高级程序设计笔记之面向对象
说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...
- javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
- javascript高级编程笔记05(面向对象)
面向对象设计 es中有两种属性:数据属性和访问器属性 数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值,数据属性有4个描述其行为的特性 [[Configurable]]:表示能否通 ...
- javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- JavaScript高级程序设计笔记（一）
---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...
- JavaScript高级内容笔记：原型链、继承、执行上下文、作用域链、闭包
最近在系统的学习JS深层次内容,并稍微整理了一下,作为备忘和后期复习,这里分享给大家,希望对大家有所帮助.如有错误请留言指正,tks. 了解这些问题,我先一步步来看,先从稍微浅显内容说起,然后引出这些 ...
随机推荐
- Perfmon - Windows 自带系统监测工具（转）
本文转自:http://blog.csdn.net/oscar999/article/details/7918385 一. 简述 可以用于监视CPU使用率.内存使用率.硬盘读写速度.网络速度等. Pe ...
- OneZero第三次站立会议（2016.3.23）
会议时间:2016年3月23日 13:00~13:15 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,夏在统计界面中 ...
- final 发布 领跑衫获奖感想
时间 :2016年5月20日 13:30--14:00 final发布中,我们团队严一格演示了最终版本的四则运算项目, 修正了beta版本发布时弹幕部分无法消除的bug,总体效果达到预期. 遗憾的是没 ...
- EntityFramework 数据校验异常处理
public void Insert(PageHost entity) { try { db.pagehost.Add(entity); db.SaveChanges(); } catch (DbEn ...
- BZOJ2303 APIO2011方格染色（并查集）
比较难想到的是将题目中的要求看做异或.那么有ai,j^ai+1,j^ai,j+1^ai+1,j+1=1.瞎化一化可以大胆猜想得到a1,1^a1,j^ai,1^ai,j=(i-1)*(j-1)& ...
- P2704 [NOI2001]炮兵阵地
题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图.在每一格平原地形上最 ...
- 字符编码问题mysql
2019-02-27 07:32:17.108 ERROR 21745 --- [nio-8086-exec-2] c.h.h.rest.configurer.WebMvcConfigurer : 接 ...
- 洛谷P4774 BZOJ5418 LOJ2721 [NOI2018]屠龙勇士（扩展中国剩余定理）
题目链接: 洛谷 BZOJ LOJ 题目大意:这么长的题面,就饶了我吧emmm 这题第一眼看上去没法列出同余方程组.为什么?好像不知道用哪把剑杀哪条龙…… 仔细一看,要按顺序杀龙,所以获得的剑出现的顺 ...
- 【CF580C】Kefa and Park
题目大意:给定一棵 N 个节点的有根树(其中根节点始终为 1 号节点),点有点权,点权只有 1 和 0 两种,求从根节点到叶子节点的路径中,有多少条路径满足:路径上最大连续点权为 1 的节点个数不超过 ...
- 7：servlet request getHeader("x-forwarded-for") 获取真实IP
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了 Apache,Nagix等反向代理软件就不能获取到客户端的真实 ...