May 31, 2021 Article blog
1. What are javaScript's data types?
2. What's the difference between the == and the === in javascript?
3. Examples of 3 cast type conversions and 2 implicit type conversions?
4. What is the difference between call(), apply(), bind() methods in native JS?
5. What is closure? What's the feature?
7. How to prevent events from bubbling and default events
8. What's the difference between document load and document ready?
10.. Briefly describe several ways to create a function
12.. What are the pros and cons of iframe?
13.. How does Javascript implement inheritance?
14.. Would you please talk about the disadvantages of cookies?
15.. DOM operations - How do I add, remove, move, copy, create, and find nodes?
16.. What are the ways in which js load late?
17.. What is the difference between documen.write and innerHTML?
18.. What actions can cause memory leaks?
19.. Count the characters that appear most often in a string?
The article comes from the public number: Monkey Brother said front-end author: monkeysoft
This article to share some JavaScript interview experience, in this golden nine silver ten recruitment season, I hope you can find a satisfactory job.
Basic data types: String, Boolean, Number, Undefined, Null
Reference data types: Object (Array, Date, RegExp, Function)
==
and the
===
in javascript?
==
The type conversion is made automatically,
===
no
Force (parseInt, parseFloat, Number())
Implicitly (
==
1 s "1"//true
null==undefined//true
All three methods can change the point of this when the function is running.
The first argument of the three methods is the object that this points to when the function calls execution.
The second argument of the call() method is a variable argument that is required by the function itself when it calls execution.
The second argument of the apply() method is an array or anguments. Both call() and apply() are immediately called function execution, modifying the this point at runtime.
Bind() is the return of a new function, the function body of the new function is consistent with the function body of the original function, when the new function is called, this in the function body points to the object passed by the first argument of the bind() method, and the bind() method does not affect the this point of the original function itself.
Closures, the official explanation for closures is that an expression (usually a function) that has many variables and an environment that binds them is part of the expression.
Features of closures:
(1) As a reference to a function variable, it is active when the function returns.
(2) A closure is a stack that does not release resources when a function returns.
Simply put, JavaScript allows the use of internal functions--- i.e. function definitions and function expressions that are located in the body of another function. F urthermore, these intrinsic functions have access to all local variables, parameters, and other declared intrinsic functions declared in the external functions in which they are located. When one of these intrinsic functions is called outside of the external function that contains them, a closure is formed.
W3C compliant event binding addEventLisntener/attachEvent
Let's take advantage of the principle of event bubbling, let yourself trigger the event, and let his parent element perform instead!
e. stopPropagation ();/standard browser
event.cancebubble-true;/ie9 before
Block default events:
In order not to let a click and then jump, we will give his click event to block
return false
e.preventDefault();
Document.onload performs js only after the structure and style are loaded
window.onload: Not only to complete the structure and style load, but also to execute all the styles, pictures, these resource files, all loaded before triggering the windows.onload event
Document.ready native species do not have this method, and there is $.ready (function) in jquery
return str.replace(/[”&]/g, function(match) {
switch (match) {
case “”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
The first (function declaration): function sum1 (num1, num2) }
The second (function expression): var sum2 , function (num1, num2) , return num1 , num2; }
The third (function object method): var sum3 , new Function ("num1," "num2", "return num1,num2");
If placed before the body is closed, the loading of other resources is blocked
If placed after the body is closed, the loading of elements within the body is not affected
merit:
shortcoming:
Prototype chain inheritance, borrowing constructor inheritance, combination inheritance, parasitic inheritance, parasitic combination inheritance
shortcoming:
1. Limits on the number and length of cookies. Some browsers can only have a maximum of 50 cookies per domain, basically all browsers each cookie length can not exceed 4KB, otherwise it will be intercepted.
2. Security issues. I f the cookie is blocked, the person can get all the session information. Even encryption doesn't help, because the interceptor doesn't need to know the meaning of the cookie, and he can do it by forwarding the cookie as it is.
3. Some states cannot be saved on the client. F or example, to prevent duplicate submission of forms, we need to save a counter on the server side. If we save this counter on the client, it doesn't work.
4. Take up the network upload bandwidth. Each time a server resource is requested, cookie information is passed to the server.
document.write can only redraw the entire page
InnerHTML can redraw part of a page
A memory leak is an object that still exists after you no longer own or need it. T he garbage collector periodically scans objects and calculates the number of other objects that reference each object. If an object has 0 references (no other object has referenced the object), or if the only reference to the object is circular, the memory of that object can be reclaimed.
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
Array flattening is the transformation of a multidimensional array into a one-dimensional array
const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]
const res1 = arr.flat(Infinity);
const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
However, the data type becomes a string
const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
const flatten = arr => {
return arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
}, [])
}
const res4 = flatten(arr);
const res5 = [];
const fn = arr => {
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
fn(arr[i]);
} else {
res5.push(arr[i]);
}
}
}
fn(arr);
const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]
const res1 = Array.from(new Set(arr));
const unique1 = arr => {
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = i + 1; j < len; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
// 每删除一个树,j--保证j的值经过自加后不变。同时,len--,减少循环次数提升性能
len--;
j--;
}
}
}
return arr;
}
const unique2 = arr => {
const res = [];
for (let i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
}
return res;
}
const unique3 = arr => {
const res = [];
for (let i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) res.push(arr[i]);
}
return res;
}
const unique4 = arr => {
return arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
}
const unique5 = arr => {
const map = new Map();
const res = [];
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
map.set(arr[i], true)
res.push(arr[i]);
}
}
return res;
}
A class array is a method that has a legth property but does not have an array prototype. Common arrays of classes have the results returned by the arguments, DOM operation methods.
Array.from(document.querySelectorAll('div'))
Array.prototype.slice.call(document.querySelectorAll('div'))
[...document.querySelectorAll('div')]
Array.prototype.concat.apply([], document.querySelectorAll('div'));
The function executes only once in n seconds after the high frequency time is triggered, and if the high frequency time is triggered again within n seconds, the time is recalculated.
const debounce = (fn, time) => {
let timeout = null;
return function() {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, time);
}
};
Stabilization is often applied to users searching for input to conserve request resources, and it is triggered only once when window triggers a resize event.
High-frequency time is triggered, but only once in n seconds, so throttle dilutes the frequency at which the function is executed.
const throttle = (fn, time) => {
let flag = true;
return function() {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, time);
}
}
Throttling is often applied to mouse clicks to trigger and listen to scrolling events.
Refers to turning a function that accepts multiple arguments into a fixed form of accepting an argument that returns a function, which makes it easier to call again, such as f(1)(2)
Classic interview questions: realize add (1) (2) (3) (4) s 10; 、 add(1)(1,2,3)(2)=9;
function add() {
const _args = [...arguments];
function fn() {
_args.push(...arguments);
return fn;
}
fn.toString = function() {
return _args.reduce((sum, cur) => sum + cur);
}
return fn;
}
Recursive full version (taking into account Symbol attributes):
const cloneDeep1 = (target, hash = new WeakMap()) => {
// 对于传入参数处理
if (typeof target !== 'object' || target === null) {
return target;
}
// 哈希表中存在直接返回
if (hash.has(target)) return hash.get(target);
const cloneTarget = Array.isArray(target) ? [] : {};
hash.set(target, cloneTarget);
// 针对Symbol属性
const symKeys = Object.getOwnPropertySymbols(target);
if (symKeys.length) {
symKeys.forEach(symKey => {
if (typeof target[symKey] === 'object' && target[symKey] !== null) {
cloneTarget[symKey] = cloneDeep1(target[symKey]);
} else {
cloneTarget[symKey] = target[symKey];
}
})
}
for (const i in target) {
if (Object.prototype.hasOwnProperty.call(target, i)) {
cloneTarget[i] =
typeof target[i] === 'object' && target[i] !== null
? cloneDeep1(target[i], hash)
: target[i];
}
}
return cloneTarget;
}
Above is
W3Cschool编程狮
about
JavaScript interview, offer to get soft
related introduction, I hope to help you.