关于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