关于javascript:js面试题进阶梳理

1、undeclared 与 undefined 的区别？

undefined：申明了变量，然而没有赋值
undecalared：没有申明变量就间接应用

var a; //undefined
b;    // b is not defined

2、let & const 与 var 的区别？

var 存在变量晋升，可反复申明同一变量，申明的变量均可改
let 没有变量晋升，不可反复申明同一变量，申明的变量均可改
const 没有变量晋升，不可反复申明同一变量，申明的根本数据类型不可改，援用类型可改属性，不可只申明变量而不赋值

3、获取 DOM 元素有哪些办法？

4、操作 DOM 元素有哪些办法

5、DOM 的类型有哪几种？

元素节点              Node.ELEMENT_NODE(1)
属性节点              Node.ATTRIBUTE_NODE(2)
文本节点              Node.TEXT_NODE(3)
CDATA 节点             Node.CDATA_SECTION_NODE(4)
实体援用名称节点       Node.ENTRY_REFERENCE_NODE(5)
实体名称节点          Node.ENTITY_NODE(6)
解决指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
正文节点              Node.COMMENT_NODE(8)
文档节点              Node.DOCUMENT_NODE(9)
文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
DTD 申明节点            Node.NOTATION_NODE(12)

6、JS 的作用域及作用域链
什么是作用域呢？

在 Javascript 中，作用域分为 全局作用域 和 函数作用域

全局作用域：代码在程序任何中央都能拜访，window 对象的内置属性都属于全局作用域
函数作用域：在固定的代码片段能力被拜访

什么是作用域链？

个别状况下，变量取值到 创立 这个变量 的函数的作用域中取值

然而如果在以后作用域中没有查到值，就会向下级作用域去查，直到查到全局作用域，这么一个查找过程造成的链条就叫做作用域链

var x = 10;

function fn(){console.log(x);
}

function show(f){
    var x = 20;
    f();    // 10}

show(fn);

7、数组的 splice 与 slice 的区别？

8、substr 和 substring 的区别？

9、includes 比 indexOf 好在哪？

includes 能够检测 NaN，indexOf 不能检测 NaN，includes 外部应用了 Number.isNaN 对 NaN 进行了匹配

10、上面代码输入的后果？

for(var i = 0; i < 3; i++){setTimeout(function(){console.log(i);   
  },0); 
};

答案：3，3，3

解决办法

for(let i = 0; i < 3; i++){setTimeout(function(){console.log(i);   
  },0); 
};
// 0 1 2

for (var i = 0; i < 3; i++) {(function(i) {setTimeout(function () {console.log(i);
    }, 0, i)
  })(i)
};
// 0 1 2

11、什么是 async/await？解决了什么问题？

是 generator + Promise 的语法糖，次要的作用是用同步形式执行异步操作，await 只能在 async 函数中应用，async 函数执行会返回一个 Promise，值由函数的 return 值所决定

12、JS 提早加载的办法有哪些？

1、<script async src="script.js"></script>：给 script 标签加 async 属性，则加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）2、<script defer src="script.js"></script>：给 script 标签加 defer 属性，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），然而 script.js 的执行要在所有元素解析实现之后，DOMContentLoaded 事件触发之前实现
3、动态创建 script 标签：等到 DOMContentLoaded 事件触发时，生成一个 script 标签，渲染到页面上上
4、setTimeout 定时器提早代码执行

13、new 操作符为什么能创立一个实例对象？

剖析一下 new 的整个过程：1、创立一个空对象
2、继承构造函数的原型
3、this 指向 obj，并调用构造函数
4、返回对象

简略实现一下 new：function myNew (fn, ...args) {
    // 第一步：创立一个空对象
    const obj = {}

    // 第二步：继承构造函数的原型
    obj.__proto__ =  fn.prototype

    // 第三步：this 指向 obj，并调用构造函数
    fn.apply(obj, args)


    // 第四步：返回对象
    return obj
}

14、什么是文档碎片？
是什么：一个容器，用于临时寄存创立的 dom 元素，应用 document.createDocumentFragment()创立
有什么用：将须要增加的大量元素先增加到文档碎片中，再将文档碎片增加到须要插入的地位，大大减少 dom 操作，进步性能

var oFragmeng = document.createDocumentFragment(); 
for(var i=0;i<10000;i++)
{var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    // 先附加在文档碎片中

    oFragmeng.appendChild(op);  

} 
// 最初一次性增加到 document 中
document.body.appendChild(oFragmeng); 

15、宏工作与微工作有哪些？

宏工作

微工作

16、Object.defineProperty(target, key, options)，options 可传什么参数？

value：给 target[key]设置初始值
get：调用 target[key]时触发
set：设置 target[key]时触发
writable：默认 false，为 true 时此属性能力被赋值运算符批改
enumerable：默认 false，为 true 时此属性能力被枚举
configurable：默认为 false，为 true 时此属性的描述符能力被批改，能力被删除

17、什么是防抖？什么是节流？

18、什么是高阶函数？简略实现一个？

高阶函数：JavaScript 的函数其实都指向某个变量。既然变量能够指向函数，函数的参数能接管变量，那么一个函数就能够接管另一个函数作为参数，这种函数就称之为高阶函数。// 简略的高阶函数
function add(x, y, f) {return f(x) + f(y);
}

// 用代码验证一下：add(-5, 6, Math.abs); // 11

像数组的 map、reduce、filter 这些都是高阶函数

19、什么是函数柯里化？简略实现一个？

柯里化，是把承受多个参数的函数变换成承受一个繁多参数（最后函数的第一个参数）的函数，并且返回承受余下的参数而且返回后果的新函数的技术。// 一般的 add 函数
function add(x, y) {return x + y}

// Currying 后
function curryingAdd(x) {return function (y) {return x + y}
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

益处

1、参数复用

// 失常正则验证字符串 reg.test(txt)

// 一般状况
function check(reg, txt) {return reg.test(txt)
}

check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true

// Currying 后
function curryingCheck(reg) {return function(txt) {return reg.test(txt)
    }
}

var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)

hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

2、提早执行 其实 Function.prototype.bind 就是科里化的实现例子

function sayKey(key) {console.log(this[key])
}
const person = {
  name: 'Sunshine_Lin',
  age: 23
}
// call 不是科里化
sayKey.call(person, 'name') // 立刻输入 Sunshine_Lin
sayKey.call(person, 'age') // 立刻输入 23

// bind 是科里化
const say = sayKey.bind(person) // 不执行
// 想执行再执行
say('name') // Sunshine_Lin
say('age') // 23

20、箭头函数与一般函数的区别？

1、箭头函数不能作为构造函数，不能 new
2、箭头函数没有本人的 this
3、箭头函数没有 arguments 对象
4、箭头函数没有原型对象

21、Symbol 的利用场景？

应用 Symbol 充当属性名
应用 Symbol 充当变量
应用 Symbol 实现公有属性

22、AMD 和 CMD 的区别？

23、Commonjs 和 ES6 Module 的区别？

1、前者是拷贝输入，后者是援用输入
2、前者可批改引入值，后者只读
3、前者是运行时，后者是编译时

24、为什么 Commonjs 不适用于浏览器

var math = require('math');

math.add(2, 3);

第二行 math.add(2, 3)，在第一行 require('math')之后运行，因而必须等 math.js 加载实现。也就是说，如果加载工夫很长，整个利用就会停在那里等。这对服务器端不是一个问题，因为所有的模块都寄存在本地硬盘，能够同步加载实现，等待时间就是硬盘的读取工夫。然而，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于 "假死" 状态。因而，浏览器端的模块，不能采纳 "同步加载"（synchronous），只能采纳 "异步加载"（asynchronous）。这就是 AMD 标准诞生的背景。

25、函数的 length 是多少？

length 是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。形参的数量不包含残余参数个数，仅包含第一个具备默认值之前的参数个数

26、深度遍历广度遍历的区别？

对于算法来说 无非就是工夫换空间 空间换工夫

1、深度优先不须要记住所有的节点, 所以占用空间小, 而广度优先须要先记录所有的节点占用空间大
2、深度优先有回溯的操作 (没有路走了须要回头) 所以相对而言工夫会长一点
3、深度优先采纳的是堆栈的模式, 即先进后出
4、广度优先则采纳的是队列的模式, 即先进先出

27、JS 中的设计模式有哪些？

创立模式：该模式形象了对象实例化过程。结构型模式：这些模式解决不同的类和对象以提供新性能。行为模式：也称公布 - 订阅模式，定义了一个被观察者和多个观察者的、一对多的对象关系。并行设计模式：这些模式解决多线程编程范例。架构设计模式：这些模式用于解决架构设计

28、JS 中如何将页面重定向到另一个页面？

1、应用 location.href：window.location.href =“https://www.baidu.com/”)
2、应用 location.replace：window.location.replace("https://www.baidu.com/;")

29、JS 中鼠标事件的各个坐标？

30、JS 中元素视图的各个尺寸？

31、Window 视图的各个尺寸？

32、Document 文档视图的各个尺寸？

33、监听 ajax 上传进度

//【上传进度调用办法实现】xhr.upload.onprogress = progressFunction