1. ES5和ES6继承方式区别

  • ES5定义类以函数形式, 以prototype来实现继承
  • ES6以class形式定义类, 以extend形式继承

2. Generator了解

ES6 提供的一种异步编程解决方案, Generator 函数是一个状态机,封装了多个内部状态。

function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
} var hw = helloWorldGenerator();

调用后返回指向内部状态的指针, 调用next()才会移向下一个状态, 参数:

hw.next()
// { value: 'hello', done: false } hw.next()
// { value: 'world', done: false } hw.next()
// { value: 'ending', done: true } hw.next()
// { value: undefined, done: true }

3. 手写Promise实现

var myPromise = new Promise((resolve, reject) => {
// 需要执行的代码
...
if (/* 异步执行成功 */) {
resolve(value)
} else if (/* 异步执行失败 */) {
reject(error)
}
}) myPromise.then((value) => {
// 成功后调用, 使用value值
}, (error) => {
// 失败后调用, 获取错误信息error
})

4. Promise优缺点

优点: 解决回调地狱, 对异步任务写法更标准化与简洁化

缺点: 首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消; 其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部; 第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成).
极简版promise封装:

function promise () {
this.msg = '' // 存放value和error
this.status = 'pending'
var that = this
var process = arguments[0] process (function () {
that.status = 'fulfilled'
that.msg = arguments[0]
}, function () {
that.status = 'rejected'
that.msg = arguments[0]
})
return this
} promise.prototype.then = function () {
if (this.status === 'fulfilled') {
arguments[0](this.msg)
} else if (this.status === 'rejected' && arguments[1]) {
arguments[1](this.msg)
}
}

5. 观察者模式

又称发布-订阅模式, 举例子说明.
实现: 发布者管理订阅者队列, 并有新消息推送功能. 订阅者仅关注更新就行

6. 手写实现bind

Function.prototype.bind = function () {
// 保存原函数
var self = this
// 取出第一个参数作为上下文, 相当于[].shift.call(arguments)
var context = Array.prototype.shift.call(arguments)
// 取剩余的参数作为arg; 因为arguments是伪数组, 所以要转化为数组才能使用数组方法
var arg = Array.prototype.slice.call(arguments)
// 返回一个新函数
return function () {
// 绑定上下文并传参
self.apply(context, Array.prototype.concat.call(arg, Array.prototype.slice.call(arguments)))
}
}

7. 手写实现4种继承

function Father () {}
function Child () {}
// 1\. 原型继承
Child.prototype = new Father()
// 2\. 构造继承
function Child (name) {
Father.call(this, name)
}
// 3\. 组合继承
function Child (name) {
Father.call(this, name)
}
Child.prototype = new Father()
// 4\. 寄生继承
function cloneObj (o) {
var clone = object.create(o)
clone.sayName = ...
return clone
}
// 5\. 寄生组合继承
// 6\. ES6 class extend继承

8. css菊花图

四个小圆点一直旋转

// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s

9. http状态码

  • 1**: 服务器收到请求, 需请求者进一步操作
  • 2**: 请求成功
  • 3**: 重定向, 资源被转移到其他URL了
  • 4**: 客户端错误, 请求语法错误或没有找到相应资源
  • 5**: 服务端错误, server error
  • 304: Not Modified. 指定日期后未修改, 不返回资源

10. Object.create实现(原型式继承,特点:实例的proto指向构造函数本身)

11. async和await:

  • Generator函数的语法糖,将*改成async,将yield换成await。
  • 是对Generator函数的改进, 返回promise。
  • 异步写法同步化,遇到await先返回,执行完异步再执行接下来的.
  • 内置执行器, 无需next()

12. 算法和数据结构:

算法:
解决具体问题所需要的解决方法。执行效率最快的最优算法。时间复杂度。输入,输出,有穷性,确定性,可行性。冒泡排序,二叉树遍历,最长回文,二分查找,指针,链表等,堆栈,队列等。力扣,codewar,算法导论。

数据结构:
逻辑结构:集合、线性、树形、图形结构
物理结构:顺序、链式存储结构

13. 封装JSONP

function jsonp({ url, params, callback }) { // 接收参数配置
return new Promise((resolve, reject) => { // es6 promise
let script = document.createElement('script'); // 创建script标签
window[callback] = function(data) {
resolve(data);
document.body.removeChild(script); // 移除script标签
}
params = { ...params, callback};
let arr = [];
for (let key in params) {
arr.push(`${key} = !${params[key]}`);
}
script.src = `${url}?${arr.jion('&')}` // 拼接url地址
document.body.appendChild(script); // 将创建号的script标签添加导body下面
})
}

14. 手动实现map(forEach以及filter也类似)

// for循环实现
Array.prototype.myMap = function () {
var arr = this
var [fn, thisValue] = Array.prototype.slice.call(arguments)
var result = []
for (var i = 0; i < arr.length; i++) {
result.push(fn.call(thisValue, arr[i], i, arr))
}
return result
}
var arr0 = [1, 2, 3]
console.log(arr0.myMap(v => v + 1)) // forEach实现(reduce类似)
Array.prototype.myMap = function (fn, thisValue) {
var result = []
this.forEach((v, i, arr) => {
result.push(fn.call(thisValue, v, i, arr))
})
return result
}
var arr0 = [1, 2, 3]
console.log(arr0.myMap(v => v + 1))

15. js实现checkbox全选以及反选

<body>
<button id="other">反选</button>
<input type="checkbox" id="all" />全选
<input type="checkbox" class="check" />1
<input type="checkbox" class="check" />2
<input type="checkbox" class="check" />3
<script>
var checkbox = document.getElementsByClassName('check')
var checkAll = document.getElementById('all')
var checkOther = document.getElementById('other')
checkAll.onclick = function() {
var flag = true
for (var i = 0; i < checkbox.length; i++) {
if (!checkbox[i].checked) flag = false
}
if (flag) {
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false
}
} else {
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = true
}
}
}
checkOther.onclick = function() {
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = !checkbox[i].checked
}
}
</script>
</body>

16. 对原型链的理解?prototype上都有哪些属性

  • 在js里,继承机制是原型继承。继承的起点是 对象的原型(Object prototype)。
  • 一切皆为对象,只要是对象,就会有 proto 属性,该属性存储了指向其构造的指针。
  • Object prototype也是对象,其 proto 指向null。
  • 对象分为两种:函数对象和普通对象,只有函数对象拥有『原型』对象(prototype)。
  • prototype的本质是普通对象。
  • Function prototype比较特殊,是没有prototype的函数对象。
  • new操作得到的对象是普通对象。
  • 当调取一个对象的属性时,会先在本身查找,若无,就根据 proto 找到构造原型,若无,继续往上找。最后会到达顶层Object prototype,它的 proto 指向null,均无结果则返回undefined,结束。
  • 由 proto 串起的路径就是『原型链』。
  • 通过prototype可以给所有子类共享属性

17. 为什么使用继承

通常在一般的项目里不需要,因为应用简单,但你要用纯js做一些复杂的工具或框架系统就要用到了,比如webgis、或者js框架如jquery、ext什么的,不然一个几千行代码的框架不用继承得写几万行,甚至还无法维护

18. setTimeout时间延迟为何不准

单线程, 先执行同步主线程, 再执行异步任务队列

19. 事件循环述,宏任务和微任务有什么区别?

  • 先主线程后异步任务队列
  • 先微任务再宏任务

20. let const var作用域

块级作用域, 暂时性死区

21. 节流和防抖

a.函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。

// 函数节流   滚动条滚动
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
} canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};

b.函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};

22. 实现一个sleep函数

// 这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。
function sleep(delay) {
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < delay) {
continue;
}
} function test() {
console.log('111');
sleep(2000);
console.log('222');
} test()

23. 闭包

  • 概念: 内层函数能够访问外层函数作用域的变量
  • 缺点: 引起内存泄漏(释放内存)
  • 作用:

    • 使用闭包修正打印值
    • 实现柯里化
    • 实现node commonJs 模块化, 实现私有变量
    • 保持变量与函数活性, 可延迟回收和执行

24. Immutable.js

Facebook出品, 倡导数据的不可变性, 用的最多就是List和Map.

25. js实现instanceof

// 检测l的原型链(__proto__)上是否有r.prototype,若有返回true,否则false
function myInstanceof (l, r) {
var R = r.prototype
while (l.__proto__) {
if (l.__proto__ === R) return true
}
return false
}

27. ES6的模块引入和CommonJs区别

28. 严格模式

// 严格模式下, 隐式绑定丢失后this不会指向window, 而是指向undefined
'use strict'
var a = 2
var obj = {
a: 1,
b: function() {
// console.log(this.a)
console.log(this)
}
}
var c = obj.b
c() // undefined

29.ajax和axios、fetch的区别

30. typescript缺点

  • 并不是严格意义的js的超集, 与js不完全兼容, 会报错
  • 更多的限制, 是一种桎梏
  • 有些js第三方库没有dts, 有问题

31. 构造函数实现原理

  • 构造函数中没有显示的创建Object对象, 实际上后台自动创建了
  • 直接给this对象赋值属性和方法, this即指向创建的对象

没有return返回值, 后台自动返回了该对象

// 模拟构造函数实现
var Book = function(name) {
this.name = name;
}; //正常用法
var java = new Book(‘Master Java’); //使用代码模拟,在非IE浏览器中测试,IE浏览器不支持
var python = {};
python.__proto__ = Book.prototype;
Book.call(python, 'Master Python');

32. for in 和 for of区别

  • for in遍历数组会遍历到数组原型上的属性和方法, 更适合遍历对象
  • forEach不支持break, continue, return
  • 使用for of可以成功遍历数组的值, 而不是索引, 不会遍历原型
  • for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

33. JS实现并发控制:

使用消息队列以及setIntervalpromise进行入队和出队

34. promise.finally实现

Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};

JS相关基础的更多相关文章

  1. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  2. 有关HTML的相关基础问题:

    有关HTML的相关基础问题:1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?   1)<!DICTYPE>声明位于文档中的最前面,处于<html>标签之前,告 ...

  3. Vue.js应用基础

    声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...

  4. node.js学习(二)--Node.js控制台(REPL)&amp;&amp;Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  5. Node.js系列基础学习----安装,实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  6. iOS蓝牙开发(二)蓝牙相关基础知识

    原文链接: http://liuyanwei.jumppo.com/2015/07/17/ios-BLE-1.html iOS蓝牙开发(一)蓝牙相关基础知识: 蓝牙常见名称和缩写 MFI ====== ...

  7. Linux 相关基础笔记

    html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...

  8. linux设备驱动归纳总结(二):模块的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...

  9. linux设备驱动归纳总结(一)内核的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59413.html linux设备驱动归纳总结(一):内核的相关基础概念 xxxxxxxxxxxxxx ...

  10. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

随机推荐

  1. win7显示不是正版系统的解决方法

    十一长假回来,打开电脑就变成这样了.现在的我已经学会了不再逃避问题,要学着解决问题,就在网上搜集了有关这方面的信息.说是下载一个激活工具就可以了.我就试着下载了,但是不知道为什么下了几个激活工具都不管 ...

  2. 图解——VS发布网站详细步骤

    1.打开你的VS2012网站项目,右键点击项目>菜单中 重新生成一下网站项目:再次点击右键>发布: 2.弹出网站发布设置面板,点击<新建..>,创建新的发布配置文件: 输入你自 ...

  3. C#字符串拼接怎么转义背景图片

    C#字符串拼接怎么转义背景图片   StringBuilder sb = new StringBuilder(); sb.Append("<div style=\"backg ...

  4. 使用Eclipse进行Javaweb项目开发时,如何设置外置浏览器Chrome

    使用Eclipse开发Javaweb项目时,在Eclipse中显示页面不是很好,那么如何让它自动打开外置浏览器呢?操作如下

  5. Java开发中碰到的Map的坑

    这属于我在开发中碰过的坑 ,容器中存放者对象,当clear()的时候,出现的奇葩问题.好了,直接看代码: package com.DataType.yinyong; import java.util. ...

  6. iOS之SQLite使用详解

    #pragma mark - 1.引入<sqlite3.h>头文件//添加libsqlite3.0.tbd#import <sqlite3.h>static sqlite3 * ...

  7. Virtual Memory is deprecated in Redis 2.4

    在读一个源码的讲解的文章时或者读一本关于某个技术的数据集时,可能书籍的讲解是滞后的,就是没有更上最新的代码,那么就要注意了WARNING! Virtual Memory is deprecated i ...

  8. Jquery初体验一

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 转--NLTK的内置函数

    NLTK的内置函数 1. 词语索引 (1) concordance函数    给出一个指定单词每一次出现,连同上下文一起显示. >>>text1.concordance('monst ...

  10. 非法字符:“\ufeff”

    解决方法 将编码格式UTF-8+BOM文件转为普通的UTF-8文件. 用Notepad++打开文件,将编码从UTF-8+BOM改为UTF-8