前端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. 了解这些问题,我先一步步来看,先从稍微浅显内容说起,然后引出这些 ...
随机推荐
- php环境搭建及入门
在php文件里,写入header('content-type:text/html;charset = uft-8'); <?php header('content-type:text/html; ...
- Linux kernel 发布 5.0-rc1 版本
Linux kernel 要发布 5.0 了.. 跟原因是 linus 认为 4.21的小版本号太多了... 邮件内容如下: https://lore.kernel.org/lkml/20190107 ...
- [转帖] Windows 与linux的栈大小问题
一般来说,我们所用的内存有栈和堆之分,其它的我们很少控制,栈的速度快,但是空间小.不灵活:而堆的空间几乎可以满足任何要求.灵活,但是相对的速度要慢了很多,并且在VC中堆是人为控制的,new了就要del ...
- 清华集训2015-Day 1
玛里苟斯 一个大小为 \(n\) 的可重集合 \(a\) ,求 \(\mathbb E[x^k]\) ,其中 \(x\) 为 \(a\) 的一个子集的异或和. \(n\le 10^5,1\le k\l ...
- 别在int与float上栽跟头
int与float是我们每天编程都用的两种类型,但是我们真的足够了解它们吗.昨天在博客园看到一个比较老的笑话: “昨天晚上下班回家,一民警迎面巡逻而来.突然对我大喊:站住!民警:int 类型占几个字节 ...
- 5月14日 绿城育华NOIP巨石杯试卷解析
[题外话] 感谢UBUNTU为保存程序做出贡献:https://paste.ubuntu.com : 感谢洛谷OJ的私人题库保存题面:https://www.luogu.org : 现在我的题解的所有 ...
- 洛谷乐多赛 yyy loves Maths VI (mode)
题目描述 他让redbag找众数 他还特意表示,这个众数出现次数超过了一半 一共n个数,而且保证有 n<=2000000 而且每个数<2^31-1 时间限制 1s 空间限制 3.5M(你没 ...
- SQL提高查询效率【in、not in、between、like】等条件讲述
在使用SQL语句查询数据库记录时,如果要查询相同的内容,有着不同的多种方法. 仍然,尽管使用多种方法可以得到相同的结果,但是,如果您使用不同的方法,在执行效益上是截然不同的.因此,我们得仔细考虑,如果 ...
- 使用pandas导入csv文件到MySQL
之前尝试过用命令行来解决csv文件导入到MySQL这个问题,没想到一直没有成功.之后会继续更新的吧,现在先用pandas来解决这个问题,虽然会复杂一点,但至少能用. 例子是导入movielens的ra ...
- webpack打包提取css到独立文件
将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...