js interview questions (advanced) combing

1. What is the difference between undeclared and undefined?

 undefined：声明了变量，但是没有赋值
undecalared：没有声明变量就直接使用

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

2. What is the difference between let & const and var?

 var存在变量提升，可重复声明同一变量，声明的变量均可改
let没有变量提升，不可重复声明同一变量，声明的变量均可改
const没有变量提升，不可重复声明同一变量，声明的基本数据类型不可改，引用类型可改属性，不可只声明变量而不赋值

3. What are the methods to obtain DOM elements?

method	describe
document.getElementById(id)	get dom by id
document.getElementsByTagName(tagName)	Get dom by tag name
document.getElementsByClassName(class)	Get dom by class
document.getElementsByName(name)	Get the dom by the attribute name of the tag
document.querySelector(selector)	Get dom by selector
document.querySelectorAll(selector)	Get dom by selector

4. What are the methods for manipulating DOM elements

method	describe
createElement	Create a label node
createTextNode	Create a text node
cloneNode(deep)	Copy a node, along with attributes and values, when deep is true, copy along with descendant nodes, if not pass or pass false, only copy the current node
createDocumentFragment	Create a document fragment node
appendChild	Append child elements
insertBefore	insert element in front
removeChild	delete child element
replaceChild	replace child elements
getAttribute	Get the properties of a node
createAttribute	Create properties
setAttribute	set node properties
romoveAttribute	delete node attribute
element.attributes	Convert properties to array-like objects

5. What are the types of 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 scope and scope chain What is the scope?

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

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

What is a scope chain?

 一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值

但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链

var x = 10;

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

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

show(fn);

7. What is the difference between splice and slice of array?

method	parameter
splice	splice(start, num, item1, item2, ...)
slice	slice(start, end)

8. What is the difference between substr and substring?

method	parameter
substr	substr(start,length)
substring	substring(start,end)

9. Where is includes better than indexOf?

 includes可以检测NaN，indexOf不能检测NaN，includes内部使用了Number.isNaN对NaN进行了匹配

10. What is the output of the following code?

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

Answers: 3, 3, 3

Solution

 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. What is async/await? What's the problem?

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

12. What are the methods of JS lazy loading?

 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. Why can the new operator create an instance object?

 分析一下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. What is document fragmentation?
What is it: a container used to temporarily store the created dom elements, what is the use of using document.createDocumentFragment() to create: add a large number of elements that need to be added to the document fragment first, and then add the document fragment to the position where it needs to be inserted, Greatly reduces dom operations and improves performance

 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. What are macro tasks and micro tasks?

macro task

#	browser	Node
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

microtasks

#	browser	Node
Promise.prototype.then catch finally	✅	✅
process.nextTick	❌	✅
MutationObserver	✅	❌

16. Object.defineProperty(target, key, options), what parameters can be passed in options?

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

17. What is anti-shake? What is throttling?

operate	describe	Scenes
anti-shake	Trigger an event frequently, but only the last time. last time	1. Computer screen time, recalculate time every time the computer is moved
throttling	Trigger an event frequently, but only every once in a while	1. Scrolling the list of frequent requests can add throttling 2. Long press the mouse in the game, but the actions are done every once in a while

18. What is a higher-order function? Simple implementation of one?

 高阶函数：JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

// 简单的高阶函数
function add(x, y, f) {
    return f(x) + f(y);
}

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

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

19. What is function currying? Simple implementation of one?

 柯里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通的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

benefit

1. Parameter reuse

 // 正常正则验证字符串 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. Delayed execution In fact, Function.prototype.bind is an implementation example of Corey

 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. What is the difference between arrow functions and ordinary functions?

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

21. What are the application scenarios of Symbol?

 使用Symbol充当属性名
使用Symbol充当变量
使用Symbol实现私有属性

22. What is the difference between AMD and CMD?

modular	Representative application	Features
AMD	require.js	1. AMD's api defaults to one and multiple uses. 2. Depends on the front and executes asynchronously.
CMD	sea.js	1. The API of CMD is strictly differentiated, and the responsibilities are single. 2. The dependencies are nearby, loaded on demand, and executed synchronously

23. What is the difference between Commonjs and ES6 Module?

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

24. Why Commonjs doesn’t work in browsers

 var math = require('math');

math.add(2, 3);

第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。

这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

25. What is the length of the function?

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

26. The difference between depth traversal and breadth traversal?

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

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

27. What are the design patterns in JS?

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

28. How to redirect a page to another page in JS?

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

29. What are the coordinates of mouse events in JS?

Attributes	illustrate	compatibility
offsetX	Taking the upper left corner of the current target element as the origin, position the x-axis coordinate	Compatible except Mozilla
offsetY	Taking the upper left corner of the current target element as the origin, locate the y-axis coordinate	Compatible except Mozilla
clientX	Taking the upper left corner of the browser's visible window as the origin, position the x-axis coordinate	are compatible
clientY	Taking the upper left corner of the browser's visible window as the origin, locate the y-axis coordinate	are compatible
pageX	Taking the upper left corner of the doument object as the origin, locate the x-axis coordinate	Compatible except IE
pageY	Taking the upper left corner of the doument object as the origin, locate the y-axis coordinate	Compatible except IE
screenX	Taking the top left corner of the computer screen as the origin, locate the x-axis coordinate (multiple screens will be affected)	Fully compatible
screenY	Taking the top left corner of the computer screen as the origin, locate the y-axis coordinate	Fully compatible
layerX	The nearest absolutely positioned parent element (or the document object if there is none) is the top-left corner of the element, positioning the x-axis coordinate	Mozilla and Safari
layerY	The nearest absolutely positioned parent element (or the document object if there is none) is the top-left corner of the element, positioning the y-axis coordinate	Mozilla and Safari

30. What are the dimensions of the element view in JS?

Attributes	illustrate
offsetLeft	Get the distance from the current element to the left direction of the positioned parent node
offsetTop	Get the distance from the current element to the top direction of the positioned parent node
offsetWidth	Get the current element width + left and right padding + left and right border-width
offsetHeight	Get the current element height + upper and lower padding + upper and lower border-width
clientWidth	Get the current element width + left and right padding
clientHeight	Get the current element height + upper and lower padding
scrollWidth	The actual width of the current element content, the clientWidth of the box when the content does not exceed the width of the box
scrollHeight	The actual height of the content of the current element, the clientHeight of the box when the content does not exceed the height of the box

31. What are the dimensions of the Window view?

Attributes	illustrate
innerWidth	innerWidth browser window visible area width (excluding browser console, menu bar, toolbar)
innerHeight	innerHeight browser window visible area height (excluding browser console, menu bar, toolbar)

32. What are the dimensions of the Document document view?

Attributes	illustrate
document.documentElement.clientWidth	Browser window viewport width (excluding browser console, menu bar, toolbar, scroll bar)
document.documentElement.clientHeight	Height of browser window viewable area (excluding browser console, menu bar, toolbar, scroll bar)
document.documentElement.offsetHeight	Get the height of the entire document (including the body's margin)
document.body.offsetHeight	Get the height of the entire document (excluding the body's margin)
document.documentElement.scrollTop	Returns the distance of the document's scrolling top direction (the value changes when the window is scrolled)
document.documentElement.scrollLeft	Returns the distance in the scroll left direction of the document (the value changes when the window is scrolled)

33. Monitor the progress of ajax upload

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