Consolidation of front-end basic knowledge

Two, JS foundation

1. What data types are returned by javascript typeof

object number function boolean underfind string
typeof null;//object
typeof isNaN;//
typeof isNaN(123)
typeof [];//object 
Array.isARRAY(); es5
toString.call([]);//”[object Array]”
var arr=[];
arr.constructor;//Array

2. Give examples of 3 types of forced type conversions and 2 types of implicit type conversions?

强制(parseInt,parseFloat,Number()
隐式(==1==1//true
null==undefined//true

3. The difference between split() and join()

The former is to cut into the form of an array, the
latter is to convert the array into a string

4. Array method pop() push() unshift() shift()

push() add
pop() tail delete
unshift() head add
shift() head delete

5. What is the difference between event binding and ordinary events

Traditional event binding and W3C-compliant events

div1.onclick=function(){
    
    };
<button  onmouseover=""></button>

1. If two or more events of the same type are bound to the same element, then the subsequent binding will override the previous binding
2. DOM event flow, event capture stage, target element stage => event bubbling is not supported stage

addEventListener
1. If two or more events of the same type are bound to the same element, the binding will be triggered in turn.
2. Support DOM event flow
3. No on front end is required for event binding and parameter transfer
addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行

ie9 start, ie11 edge: addEventListener

Before ie9: attachEvent/detachEvent
1. The on prefix is ​​required to pass the event type parameter.
2. This method only supports event bubbling and does not support event capture.
Event binding means registering events to specific elements, normal events Refers to events that can be used to register

6. The difference between IE and DOM event stream

1. The order of execution is different,
2. The parameters are different
3. The event is added or not
4. This points to the problem

Before IE9: attachEvent("onclick"), detachEvent("onclick")
IE9 started to be the same as the DOM event stream, both are addEventListener

7. What are the compatible writing methods under IE and standards?

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

8. The difference between call and apply

Call and apply have the same point:
both are to use a method that does not belong to an object and let this object execute

toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

9, b inherits the method of a

Test point: multiple ways of
inheritance 1. Prototype inheritance:
2. Constructor inheritance:
3. Call, apply to achieve inheritance:
multiple ways of inheritance

10. JavaScript this pointer, closure, scope

this: points to the calling context
Closure: the inner scope can access variables in the outer scope
Scope: defining a function opens up a local scope, and the entire js execution environment has a global scope

11. What is event delegation

The event binding addEventLisntener/attachEvent
that conforms to the W3C standard lets you use the principle of event bubbling to let your own triggered events be executed by their parent elements instead!

12. What is a closure, what are its characteristics, and what impact does it have on the page?

Closures are functions that can read the internal variables of other functions.
Disadvantages of closures: Misuse of closure functions will cause memory leaks, because the variables defined in the wrapper function referenced in the closure will never be released, so we should release the closure function in time when necessary

13. How to prevent event bubbling and default events

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9之前
//阻止默认事件:
//为了不让a点击之后跳转,我们就要给他的点击事件进行阻止
return false 
e.preventDefault();

14. Add, delete, replace and insert into a contact

obj.appendChild()
obj.insertBefore() //原生的js中不提供insertAfter();
obj.replaceChild()//替换
obj.removeChild()//删除

15. JavaScript's native objects, built-in objects and host objects

The local object is array, obj, regexp, etc., which can be instantiated with new, and the
built-in object is gload Math, etc. that cannot be instantiated. The
host is the browser’s own document, window, etc.

16. The difference between document load and document ready

Document.onload executes js
window.onload after the structure and style are loaded: not only after the structure and style are loaded, but also all the resource files such as styles and pictures are executed. The window.onload event will be triggered after all loading.
Document.ready native species does not have this method, there is $().ready(function) in jquery

17. The difference between " ==" and " ==="

The former will automatically convert the type, the
latter will not

1==”1”
null==undefined

=== First judge the data types on the left and right sides. If the data types are inconsistent, return false directly
before judging the values ​​on both sides.

18. javascript's same-origin policy

A script can only read the properties of windows and documents from the same source. The same source here refers to the combination of host name, protocol and port number
http, ftp: protocol
host name; localhost
port name: 80: http protocol Default port
https: The default port is
the trouble caused by the 8083 same-origin policy: Ajax requests under different domain names cannot be realized.
If you want to request js files or json data from other sources, you can use jsonp to solve it.

19. Write an array de-duplication method

var arr=[1,1,3,4,2,4,7];
=>[1,3,4,2,7]
A relatively simple implementation is:
1. First create an empty array for storage The final result
2, loop each element in the original array
3, and then loop each element twice to determine whether there is the same element, if not, put this element in the new array
4. Return this New array

function oSort(arr) {	
	var result ={};
	var newArr=[];
	for(var i=0;i<arr.length;i++){
		if(!result[arr]) {
		newArr.push(arr)
		result[arr]=1
		}
	}
	return newArr
}

Guess you like

Origin blog.csdn.net/u013034585/article/details/105089603