JS articles of front-end interviews (1)

What are the basic types of js? What are the reference types? Difference between null and undefined

There are two types of js variable values:
1. Basic type value: simple data type stored in stack memory. Species such as Number, String, Boolean, Null, and Undefined
2. Reference type values: objects stored in heap memory. Such as Object, Array, Function, Data

null : indicates that the variable does not exist, and is often used as a function to return a non-existent object.
Undefined: exists but is undefined. For example, if the variable declaration is not assigned, the variable is undefined; the parameter that needs to be provided in the calling function is not provided, and the parameter is undefined; The function has no return value, the variable receiving this function is Undefined, etc.

How to tell if a variable is of type Array? How to tell if a variable is of type Number? (more than one)

Say it first. The operator typeof that detects the type can detect string, function, object, number, etc., but can't detect Array, detect Array, and the returned value is 'object'

So you need to use other methods to detect whether it is an array type:

  1. ES5 provides the Array.isArray('variable to detect') method, if so, returns true
  2. Object.prototype.toString.call (variable to be detected), the array returns "[object Array]"
  3. Start with the constructor, obj instanceof Array

    Is it a numeric type

1. Use typeof
2. Use isNaN

JS common dom operation api

  1. DOM creation:document.createElement('div')
  2. DOM query:

    //DOM的查询获取
    var el = document.getElementById('xxx');
    //获取父元素、父节点
    var parent = ele.parentNode;//只读,没有兼容性问题
    //获取子节点:
    var nodes = ele.childNodes;
    //当前元素的第一个/最后一个子元素节点
    var el = ele.firstChild;
    
  3. DOM changes

    // 添加、删除子元素
    ele.appendChild(el);
    ele.removeChild(el);
    // 替换子元素
    ele.replaceChild(el1, el2);
    
    // 插入子元素
    parentElement.insertBefore(newElement, referenceElement);
    
    //克隆元素
    ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点
  4. property manipulation

    // 获取一个{name, value}的数组
    var attrs = el.attributes;

    There are also getting and setting tag attributes: getAttribute, setAttribute; judging and removing tag attributeshasAttribute removeAttribute

Explain event bubbling and event capture

 一个完整的JS事件流是从window开始,最后回到window的一个过程
    事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。

Let's talk about event capture first: the event is triggered from the top and least accurate object document, and then to the precise element specified by the code to trigger
ele.addEventListener(event, function, boolean)

If the parent has a click event, and the child has a click event, if the last parameter of addEventListener is set to true, when clicking, the parent will be executed first, and then the child will be executed. . .

If the third parameter is set to true, then the event starts to fire during the capture phase.
Set to false to fire during the bubbling phase

If the parent has a click event, and the child has a click event, if the last parameter of addEventListener is set to false, when clicking, the child will be executed first, and then the parent will be executed. . .
And in the child level, you can organize upward bubbling, and the final result is to only execute the click event of the child level.
You can use e.stopPropagation();

Understanding of closures? When is a closure constituted? How to implement closures? What are the pros and cons of closures?

A closure is formally a function return function;

We all know that there are two types of variables in js: global variables and local variables. According to the circular chain, the child object will search for the variables of all parent objects level by level. Therefore, all the variables of the parent object are visible to the child object, and vice versa is not true; the local variables in the function can be manipulated globally through the function return function, which forms a closure

Disadvantages:
function is a reference type, so the function is stored in heap memory; if the private variable of the function is returned, it will cause memory leaks

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325857407&siteId=291194637