Algorithm problem
Blog.csdn.net/qq_41800649…
The sorting
Fast row
let arr = [2.5.6.7.9.12.3.6.8.0.0.12.3.4];
function partition(arr,l,r){
let mid = arr[l];
while(l <= r){
while(l<r && arr[r] >= mid) r--;
arr[l] = arr[r];
while(l<r && arr[l] <= mid) l++;
arr[r] = arr[l];
if(l === r) break;
}
arr[l] = mid;
return l;
}
function quickSort(arr,left,right){
if(arr.length <= 1) return;
if(left < right){
let index = partition(arr,left,right);
quickSort(arr,index+1,right);
quickSort(arr,left,index-1);
}
return;
}
quickSort(arr,0,arr.length-1);
console.log(arr);
Copy the codeBubble sort
let arr = [2.5.6.7.9.12.3.6.8.0.0.12.3.4];
function babbleSort(arr){
if(arr.length <= 1) return;
let len = arr.length;
for(let i = 0; i < len ; i++){// Loop len times
let flag = false;// Flag bit to reduce the number of loops
for(let j = 0; j < len - i - 1; j++){// Inner loop len-i 1 times
if(arr[j] > arr[j+1]) {
[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
flag = true; }}if(! flag)break;
}
return;
}
babbleSort(arr);
console.log(arr);
Copy the codeAn array of
What methods do arrays have
Push pop Shift unshift slice splice Reverse create Array: array. of, array. from change itself (9 kinds) : Pop, push, Shift, unshift, reverse, sort, splice, copyWithin, fill do not change themselves (12 kinds) : Concat, Join, slice, toString, toLocaleString, valueOf, indexOf, lastIndexOf, non-standard toSource, and includes are added to ES7. There are 12 traversal methods (flat and flatMap) that will not change themselves: ForEach, every, some, filter, map, reduce, reduceRight, and ES6's new methods find, findIndex, keys, values, and entries. Link: https://juejin.cn/post/6937526265201033230Copy the codeIf you’re dealing with a random array, you’re going to have all the odd numbers in front of you and the even numbers in the back and you’re not going to be able to open the array
let arr = [1.2.3.3.4.5.6.6.7.8.9.9];
function specialSort(arr){
let left = 0,right = arr.length -1;
while(left <= right){/ / double pointer
while(left < right && arr[left]%2= = =1) left++;
while(left < right && arr[right]%2= = =0) right--;
if(left === right) return;
[arr[left],arr[right]] = [arr[right],arr[left]];
left++;
right--;
}
return;
}
specialSort(arr);
console.log(arr);
Copy the codeArray out of order to achieve random sort
let arr = [1.2.3.3.4.5.6.6.7.8.9.9];
arr.sort((a,b) = >{
return Math.random()<0.5 ? -1 : 1;
})
console.log(arr);
Copy the codelet arr = [1.2.3.3.4.5.6.6.7.8.9.9];
function randomSort(arr){
for(let i = 0; i < arr.length; i++){
let t = parseInt(Math.random()*arr.length);
[arr[i],arr[t]] = [arr[t],arr[i]];
}
return;
}
randomSort(arr);
console.log(arr);
Copy the codeFind the largest KTH number in the array
let arr = [10.2.3.35.4.95.6.6.7.78.9.9];
function partition(arr,left,right){
let mid = arr[left];
while(left <= right){
while(left < right && arr[right] <= mid) right--;
arr[left] = arr[right];
while(left < right && arr[left] >= mid) left++;
arr[right] = arr[left];
if(left === right) break;
}
arr[left] = mid;
return left;
}
function findKnth(arr,k){
let left = 0;
let right = arr.length - 1;
let index = partition(arr,left,right);
while(index ! == k-1) {if(index > k-1)
right = index -1;
if(index < k-1)
left = index + 1;
index = partition(arr,left,right);
}
return arr[index];
}
console.log(findKnth(arr,5));
Copy the codeArray to heavy
set
let arr = [10.2.3.10.9.35.4.95.6.6.7.78.78.9.9];
let set = new Set(arr);
arr = [...set];
console.log(arr);
Copy the codemap
let arr = [10.2.3.10.9.35.4.95.6.6.7.78.78.9.9];
let map = new Map(a);let newArr = [];
arr.forEach((item) = >{
if(! map.has(item)){ newArr.push(item); map.set(item,1); }})console.log(newArr);
Copy the codesplice
let arr = [10.2.3.10.9.35.4.95.6.6.7.78.78.9.9];
arr.sort((a,b) = >a-b);
for(let i = 1; i < arr.length; i++){
if(arr[i] === arr[i-1]){
arr.splice(i,1);// Delete duplicate
i--;// Also points to the current element}}console.log(arr);
Copy the codeArray flattening
flat
let arr = [10.2[3.10[9.35.4.95]],6.6.7.78[78.9].9];
arr = arr.flat(Infinity);// Flattening to maximum value
console.log(arr);
Copy the codereduce
let arr = [10.2[3.10[9.35.4.95]],6.6.7.78[78.9].9];
function flatter(arr){
return arr.reduce((pre,cur,index) = >{
if(Array.isArray(cur)){// If it is an array, it is recursive
return pre.concat(flatter(cur));
}else{// If not, connect directly
returnpre.concat(cur); }}}, [])console.log(flatter(arr));
Copy the codemathematics
Pow function implementation and optimization
function pow(x,n){ if(n === 0) return x; return x*pow(x,n-1); O(1) function pow(x,n,total = 1){if(n === 0) return total; if(n == 0) return total; return pow(x,n-1,total*x); }Copy the codeSummation of Fibonacci numbers
// Enter a number representing the sum of the numbers to the x fib
function fibSum(x){
if(x === 0 || x === 1) return x + 1;
let arr = [1.1];
let sum = 2;
for(let i = 2; i <= x; i++){
let temp = arr[0] + arr[1];
sum += temp;
arr[0] = arr[1];
arr[1] = temp;
}
return sum;
}
console.log(fibSum(10));
Copy the codeDetermine if a point is inside a triangle
There is only one difference or the same difference between two sets of large numbers, how to distinguish (direct addition, overflow is also no problem. Final warning xOR)
let arr = [1.1.2.2.4.5.6.4.5.6.3];// Find only one number
let result = arr.reduce((pre,cur,index) = >{
if(index === 0) return cur;// Set the initial value
else{
return pre^cur;/ / or}})console.log(result);
Copy the codestring
A string of numbers is implemented by adding commas every three
let num = 1237890345;
let newNum = num.toLocaleString();// Convert numbers to locale-specific strings
console.log(newNum);/ / 1237890345
Copy the code
let num = 1237890345;
let str = num+' ';
let newStr = ' ';
let count = 0;
for(let i = str.length-1; i>=0; i--){
if(count%3= = =0&& count! = =0){
newStr = str[i] +","+newStr;
}else{
newStr = str[i] + newStr;
}
count++;
}
console.log(newStr);/ / 1237890345
Copy the codeIn order to find all the substring in a string (a given string “adc” output “a”, “d”, “c”, “AD”, “dc”, “adc”)
let str = 'abcar';
function findChildStr(str){
let set = new Set(a);for(let i = 1; i <= str.length; i++){/ / the length
for(let j = 0; j+i <= str.length; j++){
let childStr = str.substring(j,i+j);// from subscript j to I +jset.add(childStr); }}return [...set].join(', ');
}
console.log(findChildStr(str));//a,b,c,r,ab,bc,ca,ar,abc,bca,car,abca,bcar,abcar
Copy the codeFind the longest common subsequence of two strings
Function LSC(text1,text2){let len1 = text1.length; let len2 = text2.length; let dp = []; for(let i = 0; i <= len1; i++){ dp[i] = []; for(let j = 0; j <= len2; j++){ dp[i].push(0); } } for(let i = 0; i < len1; i++){ for(let j = 0; j < len2; j++){ if(text1[i] === text2[j]){ dp[i+1][j+1] = dp[i][j] + 1; }else{ dp[i+1][j+1] = Math.max(dp[i][j+1],dp[i+1][j]); } } } return dp[len1][len2]; }Copy the codeLook for the top three words that appear most frequently in English articles
function counts(article){
// Convert all uppercase Spaces to uppercase
article = article.trim().toUpperCase();
// Match all words with regular + means there is at least one word
var array = article.match(/[A-z]+/g);
// Set the following parameters
article = ""+array.join("") +"";
var max = 0,word,num = 0,maxword="";
// Iterate over an array of strings
for(var i = 0; i < array.length; i++) {
word = new RegExp(""+array[i]+"".'g');// Specify the matching mode
num = article.match(word).length;// Match words
if(num>max){ max=num; maxword = array[i]; }}console.log(maxword+""+max);
}
counts("Age has reached the end of the beginning of a word. May be guilty in his seems to passing a lot of different life became the appearance of the same day;");
Copy the codeBinary trees and linked lists
Binary tree traversal
Function TreeNode(x){this.val = x; this.left = null; this.right = null; } function preDfs(root){if(! root) return; console.log(root.val); preDfs(root.left); preDfs(root.right); } function layBfs(root){if(! root) return; let queue = []; queue.push(root); while(queue.length){ let top = queue.shift(); console.log(top.val); if(top.left) queue.push(top.left); if(top.right) queue.push(top.right); } return; }Copy the codeInsert a node after the head of a single-loop list
// Single linked list data structure
function ListNode(x){
this.val = x;
this.next = null;
}
// Construct a cyclic singly linked list
let head = new ListNode(0);
let pre = head;
for(let i = 1; i < 5; i++){
let l1 = new ListNode(i);
pre.next = l1;
pre = pre.next;
}
pre.next = head;
// Insert a new node
function insertNode(head,x){
let node = new ListNode(x);
let tail = head.next;
head.next = node;
node.next = tail;
return;
}
insertNode(head,19);
// Verify the linked list
let count = 0;
pre = head;
while(pre && count <10) {console.log(pre.val);
pre = pre.next;
count++;
}
Copy the codeReverse one-way linked lists
// Single linked list data structure
function ListNode(x){
this.val = x;
this.next = null;
}
// Create a singly linked list
let head = new ListNode(0);
let pre = head;
for(let i = 1; i < 5; i++){
let l1 = new ListNode(i);
pre.next = l1;
pre = pre.next;
}
function reverseNode(head){
let newHead = new ListNode(0);
let tail = newHead.next;
// Use the head insertion method
while(head){
let p1 = head;
head = head.next;
newHead.next = p1;
p1.next = tail;
tail = p1;
}
return newHead.next;
}
let newHead = reverseNode(head);
// Verify the linked list
pre = newHead;
while(pre ){
console.log(pre.val);
pre = pre.next;
}
Copy the codeMerge incrementally ordered lists
// Single linked list data structure
function ListNode(x){
this.val = x;
this.next = null;
}
// Create a singly linked list
let head1 = new ListNode(0);
let pre = head1;
for(let i = 1; i < 10; i = i+2) {let l1 = new ListNode(i);
pre.next = l1;
pre = pre.next;
}
// Create a singly linked list
let head2 = new ListNode(1);
pre = head2;
for(let i = 2; i < 10; i = i+2) {let l1 = new ListNode(i);
pre.next = l1;
pre = pre.next;
}
// merge linked lists
function concatList(head1,head2){
let newHead = new ListNode(0);
let p = newHead;
let temp = null;
while(head1 && head2){
if(head1.val > head2.val){
temp = head2;
head2 = head2.next;
}else{
temp = head1;
head1 = head1.next;
}
p.next = temp;
p = p.next;
}
if(head1) p.next = head1;
if(head2) p.next = head2;
return newHead.next;
}
let newHead = concatList(head1,head2);
// Verify the linked list
pre = newHead;
while(pre ){
console.log(pre.val);
pre = pre.next;
}
Copy the codeFront end foundation
html
The role of the doctype
<! DOCTYPE HTML > is used to declare the HTML file parsing type. It is placed at the top of the file. Browsers have two modes: standard mode and weird mode. Doctype triggers standard mode (a unified W3C standard) and weird mode (different browsers have different weird mode).Copy the codeSemantic tag understanding
In HTML5, there are many semantic tags, such as <header><nav><main><article><section><footer>. These tags convey some information about the contents of the page. For example, <header> is the header of the page. There may be important information such as a Logo title. - Clean code structure: Easy to read structure without CSS, easier for other developers to understand and less differentiation. - Good for SEO: the crawler will determine the weight of keywords according to this tag, so it can establish good communication with the search engine and help the crawler grab more effective information. - Easy for other devices to parse: screen readers, blind readers, mobile devices, etc. -Copy the code<meta charset what does that mean
The <meta> tag is placed in the <head> and is used to provide meta information about the page. <meta charset=" utF-8 "/> <meta name="keywords" content="... "/> - defines a compilation directive, Will replace the corresponding fields in the HTTP request header -- define content policy <meta http-equiv="content-security-policy" content=""/> -- define the data format to be transmitted <meta http-equiv="content-type" content="text/html; Charset = UTF-8 "/> - <meta name="viewport" content="width=device-width,initial-scale = 1.0"Copy the codeInline elements, block-level elements, and inline elements are converted to block-level **
HTML tags fall into two main categories: inline elements and block-level elements. Block level elements: <div><h1><p><ul><li> etc. Width and height can be set using width and height. The default width is equal to the width of the parent element. Inline elements: <a><span>, etc., width and height cannot be set, and can be separated by content. You can set the left and right inner and outer margins, arranged in line order. <img> <input> is also an inline element, but is replaceable, so you can set width and height. display:block; // Set to block level element display:inline; Display :inline-block; // Set it as an inline block. It does not occupy a single line, but you can set the height and width.Copy the codecss
The box model
There are two kinds of box models. You can use box-sizing to set the standard box model :width is the width of the content, Do not include padding and border (border-box)IE box model :width includes content+padding+borderCopy the codeHorizontal center
1.margin:0 auto; Display :flex; justify-content:center; 3.position:absolute; margin:auto; left:0; right:0;Copy the codeVertical center
1. Parent element display:flex; align-items:center; 2.position:absolute; margin:auto; top:0; bottom:0; 3.position:absolute; top:50%; transform:translateX(-50%);Copy the code.box1{ width:100%; height:500px; background-color: aquamarine; text-align:center; /* The inline element is horizontally centered */ line-height:500px; /* row height = height vertical center */}. Box2 {width:100px; height:100px; background-color:brown; margin: 0 auto; display:inline-block; }Copy the codeSelector priority
1. Id selector (100) #container 2. Class selector (10). Subelement selector div > span 5. Sibling selector div + span 6. Property selector a[href] 7. Pseudoclass A ::hover pseudoelement div::after div::beforeCopy the codebfc
The BFC is a block-level formatting context. Turning on the BFC creates an isolated render area, and elements inside the BFC area do not affect elements outside. Triggering conditions: Float not none 3. Overflow not visible 4. Position not static or relative 5. Display :inline-block,table-cell,flex Features: 1. The boxes inside the BFC will be arranged from top to bottom, and the relative margins will overlap. All elements inside the BFC touch the left side of the containing block. 3. The BFC area does not overlap with the float areaCopy the codeLiquid layout
float:left; 1. Clear :both; Float 2 can be cleared. Div ::after{display:block; content:''; clear:both; } 3. Enable a new BFC to clear overflow:hidden;Copy the codeposition
Position: the static default position: relative; Using the left right top bottom will move it relative to its position. position:absolute; Absolute positioning, using the left right top bottom relative to the first parent element that is not static. Position: Fixed Is positioned relative to the browser windowCopy the codeHeight of collapse
Div ::after{display: block; content:""; clear:both; }Copy the codeHidden elements
display:none; It disappears from the page, causing redraw and rearrangement, does not appear in the Layout tree, and does not render on the page. visibility:hidden; Disappearing from the page, but occupying the corresponding location, only triggers redraw, not rearrangement, and bound events are not triggered. opacity:0; It doesn't disappear, it just doesn't see. Self-bound events can be triggered. (Animation effect works)Copy the codeflex
The parent element display: flex; // open flex layout flex-wrap:wrap; // wrap flex-direction:row; // Column justify-content:center; // align align-items:center; // The project is vertically centered Flex-start is aligned along the beginning of the main axis. Flex-end is aligned along the end of the main axis Flex: 00 300px; // The main element is 300px; flex: 1 0 0; Align -self:stretch// single sub-element stretchCopy the codeUnit blog.csdn.net/VickyTsai/a…
Pt px :CSS pixel vm: width of the screen vh: height of the screen 100vh: full height em: rem: zoom in or out based on the root font sizeCopy the codez-index
https://juejin.cn/post/6942357662482825223 HtmL will open a cascading context by default. Using z-index not auto automatically opens a new cascading context in which there are multiple levels of cascading, from low to high: 1. The background and border of the current cascading context 2. the element with a negative z-index opens a new overlapping context 3. Float element 5. Inline element 6. Z-index :0 with Position 7. Z-index is positive and Position Position is displayed on the page. So it's closer to the human side but when you compare elements in different parent hierarchies, it's determined by the parent context.Copy the codeThe holy Grail of the wheel map layout
Copy the codeTwin wing layout
A two-column layout
<style>
.container{
width:100vw;
height:100vh;
display:flex;
flex-direction:row;
}
.left{
flex:0 0 300px;
height:100%;
}
.right{
flex:1;
height:100%;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
Copy the code** Mobile for **
@media(max-width:768px){
}
Copy the codeWhat’s the difference between putting CSS at the head and at the tail
js
** What are the DOM tags
DOM nodes are classified into three types: element node, text node and attribute node, in which text node and attribute node are child nodes of element node.Copy the codeWhat are the DOM operations
Find elements: document.getelementById ('id'); / / by id lookup, return document. The only node getElementsByClassName (" class "); / / the return value is the nodelist type document. GetElementsByTagName (' div '); / / returns the nodelist document. GetElementsByName (' name '); // Get document.querySelector('ul') from the Name attribute; // Returns the first matching DOM object by taking CSS selectors one by one. document.querySelectorAll('li'); // Return a nodelist querySelector and getElementBy... The difference is that the former retrieves a static collection, while the latter retrieves a dynamic collection looking for nodes based on hierarchy: parent elements. // Get all the children of the parent element (including carriage returns and child elements). // Get all the children of the current element. FirstChild; // Get the parent element of the first child. // Get the parent of the first child. Father. LastELementChild; Son: parentNode; // Get the current sibling of the parent. PreviousElementSibling: document.createElement('p'); // Create element node document.createTextNode(' text '); // create text node add node: parent. AppendChild (new element); RemoveChild (old child element); Replace node: parent element: replaceChild(new element, old element); InsertBefore (new element, old element)// Insert new element before old element copy node: old element cloneNode(true); // Deep replication false Replicates only the current node, not the child nodes. GetAttribute ('class'); getAttribute('class'); Element node. SetAttribute ('class','btn1'); Style ="background-color:red; ..." Style.color = style.backgroundcolor = (small camel) element node.onclick = element node.className = Set text node element node.innerhtml ='<h1>111</h1>'; InnerText = 'Hello ';Copy the codeJs basic type, difference
Js basic data types are: Number, String, Boolean, null, and undefined, Symbol, and the Object. In which the Object belongs to the floorboard of the reference types, and can be divided into an Array, the function, the Date, the RegExp, general Object. Basic data types are stored on the stack, and variable names and values are stored as key-value pairs, so the value can be obtained directly from the variable name. The value of the reference type is stored in the heap, where the variable name and the address in the heap are stored. Therefore, when using the variable name, only the address of the value is retrieved, not the value itself. A method for distinguishing variable data types. Number string Boolean symbol undefined function will return the corresponding string, other will return an object. NaN denotes non-numeric typeof NaN === 'number' 2. an instanceof B can distinguish whether the current object is an instance to the right of the operator (A.__proto__ == b.prototype) [] instanceof Array Return true new Date() instanceof Date; //true new Person() instanceof Person; But according to the prototype chain effect, when instanceof when the Object is true () 3. The Object. The prototype. ToString. Call () is the most comprehensive, But more complicated Object. The prototype. ToString. Call ("); // [object String] Object.prototype.toString.call(1) ; // [object Number] Object.prototype.toString.call(true) ; // [object Boolean] Object.prototype.toString.call(undefined) ; // [object Undefined] Object.prototype.toString.call(null) ; // [object Null] Object.prototype.toString.call(new Function()) ; // [object Function] Object.prototype.toString.call(new Date()) ; // [object Date] Object.prototype.toString.call([]) ; // [object Array] Object.prototype.toString.call(new RegExp()) ; // [object RegExp] Object.prototype.toString.call(new Error()) ; // [object Error] Object.prototype.toString.call(document) ; // [object HTMLDocument] Object.prototype.toString.call(window) ; //[object Window] how to check whether an Array is Array type? 1. c istanceof Array; //true 2. Array.isArray(c); //true 3. Obeject.prototype.toString(c); //[Obejct Array];Copy the codeThe difference between the JS script defer and async
1. Will the main thread stop when asynchronous JS scripts are executed? Is js single threaded? The nature of single threads is that only one task can be executed at a time. Because of the interaction with the user and manipulation of the DOM and other related operations, js must use a single thread, otherwise multithreading will cause synchronization problems. If one thread is modifying the DOM and another thread wants to delete the DOM, the shared resource needs to be locked, making the task tedious. 3.JS is an interpreted language. What's the difference between a compiled language and a compiled language? JavaScript code requires a tool (JS engine) installed on the machine (Node or browser) to execute. This is what interpretive languages need. Compiled language programs are free to run directly. Variable promotion is not code modification. No intermediate code is generated in this process. Variable promotion is just the JS interpreter's way of doing things. JIT compilation is the only point at which we can question whether JavaScript is an interpreted language. But the JIT is not a complete compiler; it compiles before execution. And JIT was only introduced by Mozilla and Google developers to improve browser performance. JIT is never mandated by JavaScript or TC39. So, although JavaScript is executed as if it were compiled or as if it were a hybrid of compiled and interpreted, I still think of JavaScript as an interpreted language or a hybrid language as many people speak today, rather than a compiled language.Copy the codeScope Scope of the executor function
Anonymous functions: self-executing functions, defined and called together. We create an anonymous function and execute it immediately. Since external variables cannot reference it, it is released soon after execution. Crucially, this mechanism does not pollute global objects.Copy the codeHere's how JavaScript handles declarative statements: Once the V8 engine enters an execution context (function) that executes specific code, it performs lexical analysis or word segmentation of the code. This means that the code will be split into atomic tokens like foo = 10. After analyzing the entire current scope, the engine translates the Token resolution into an AST (abstract syntax tree). Each time the engine encounters a declaration, it passes the declaration to the scope to create a binding. Each declaration allocates memory for the variable. Allocating memory does not modify the source code to upgrade variable declarations. As you know, allocating memory in JS means setting the variable to undefined by default. After that, every time the engine encounters an assignment or value, it looks for the binding through its scope. If it is not found in the current scope, it continues to look in the parent scope until it is found. The engine then generates the machine code that the CPU can execute. Finally, the code executes. So variable promotion is just a trick to perform context, not the source code modification that many sites describe. Before any statement is executed, the interpreter finds the value of a variable from the scope that already exists after the execution context is created.Copy the codeJs’ this pointing problem talks about this and change directivity
This in ordinary functions 2. This in object methods 3. This in constructors 4. This in the arrow function changes this fn.call(this, some arguments) apply bindCopy the codeDeep and shallow copies of objects
1. Data Type - Storage Location - Shallow copy copies only one layer. Deep copy copies all layers 2. Let arr1 = [1,2,3]; let arr2 = arr1; Object.assign(target,source); Extension operator let arr3 = [...arr1]; let obj1 = {... obj2}; Parse (json.stringify ()). Functions such as undefined and symbol will disappear when json.stringify () is used.Copy the codeClosures? Write a function that prints 1 the first time it calls, 2 the second time, and 3 the third time
A special region of closure functions and lexical scopes. Return a function when calling a function, through this function can access the local variable, also can realize the local variable save. function foo(){ let a = 1; return function print(){ console.log(a); a++; } } let print2 = foo(); print2(); //1 print2(); //2 print2(); / / 3Copy the codeThe garbage collection
1. Reference counting method The current space has variable access or reference will not be cleared, only when there is no variable reference to clear the problem at that time will be circular reference, will cause memory leakage. var obj1 = {a:obj2}; var obj2 = {a:obj1}; When a variable is assigned a value of a reference type, the reference count of the value of the reference type is increased by 1. Just as the variable obj1 in the code is assigned the address of the object obj1, the variable obj1 refers to the object obj1(top right), and the reference count of obj1(top right) increases by one. When the value of the variable obj1 is no longer the address of the object obj1(top right), the reference count of the object obj1(top right) is reduced by one. When the object obj1 (top right) has a zero reference count, the garbage collector will reclaim it because there are no variables pointing to you and no way to use you. Why would a seemingly reasonable garbage collection strategy go wrong? This is caused by the circular reference mentioned above. Let's analyze it. When the variable obj1 executes the object obj1, the reference count of the object obj1 is incremented by 1, and the reference count is 1. Then obj2's b property refers to the object obj1, so the reference count of the object obj1 is 2. In the same way, obj2 has a reference count of 2. When the code is finished, the variables obj1 and obj2 are assigned to null, but the reference counts of obj1 and obj2 are 1, not 0, so garbage collection is not performed, but these objects are no longer useful. It is also impossible to use them outside the function, so this creates a memory leak. Tag in now widely used to clear recycling strategies will not appear in the above question, tag removal process recovery strategy in general is such, in the beginning will all variables add tags, when performing cycularReference function variables function within these tags will be removed, in after the function plus markup. The marked variables are considered to be deleted because the variables in these functions are no longer accessible. Variables like obj1 and obj2 in the code above are marked at the beginning, cleared when they enter the function, and then marked again after the function is executed as variables to be cleared, so there is no problem with reference counting because token clearing doesn't care about the number of references.Copy the codeWhat are arguments different from arrays
There are three main differences between residual arguments and arguments objects: residual arguments only contain arguments that have no corresponding parameters, while arguments objects contain all arguments passed to a function. The Arguments object is not a real Array and the remaining arguments are real Array instances, meaning you can use all the Array methods directly on it, such as sort, Map, forEach, or POP. Arguments need to be implemented using call, such as [].slice.call(arguments). The Arguments object also has additional properties (such as the Callee property). The residual syntax and expansion operators look similar, but functionally they are polar opposites. Rest syntax looks exactly the same as expansion syntax, except that residual arguments are used to deconstruct arrays and objects. In a sense, residual syntax is the opposite of expansion: expansion expands an array into its elements, whereas residual syntax collects and "condenses" multiple elements into a single element. Arguments the actual arguments to the function arguments are stored in an array-like object. ArrayLike objects have a non-negative length attribute and can access elements by indexing them from 0 to make them look like arrays, such as NodeList, but arrays by default do not have the built-in methods of arrays, such as push, pop, forEach, and Map. We can have a try, just find a website, in the console input: var linkList = document. QuerySelectorAll (' a ') will get a NodeList, we can also through digital subscript to visit one of the elements, such as linkList [0]. But NodeList is not an array, it's an array of classes. Array.isArray(linkList); Arguments is also an array of classes. The length of arguments is determined by the number of arguments, not by the number of parameters. function add(a, b) { console.log(arguments.length); return a + b; } add(1, 2, 3, 4); Arguments is also an object associated with strict mode. In non-strict mode, arguments elements and function arguments are references to the same value, and changes to arguments directly affect function arguments. Function test(obj) {arguments[0] = 'console.log(obj)} test({name: 'Jack '}) // Arguments are copies of function arguments in strict mode, and changes to arguments do not affect function arguments. Arguments cannot be reassigned (can be modified)Copy the codeWhat is array.from ()?
Event loop
When the browser engine executes js code, it is actually single-threaded, and there are two queues, macro task queue and micro task queue. Macro tasks include: script code, setTimeout setInterval,I/O request (Ajax request) microtasks include: promise.then process.nexttick MutationObserver First, take out a macro task from the macro task queue, and put it in the execution stack to start execution. When it encounters the micro task, it will be stored in the current macro task micro task queue, when it encounters the macro task, it will be stored in the macro task queue. When the macro task is finished, it will start to execute all the tasks in the micro task queue. Then perform requestAnimationFrame callbacks, event handling, DOM manipulation, and layout drawing. Then retrieve a macro task.Copy the codeHow to set asynchronous js
Async /await is a syntactic sugar, do you know what to use after await?
Promise series (here I am not familiar, have not implemented, so my sister asked a code question, and eventloop link)
How many transition states does a promise have
Have you ever used promise
Promise encapsulates the asynchronous print operation implementation
Code problem, promise implementation delay (initially said the idea, and then manual implementation)
Generator, understanding of state machines, applications
What if I want to use Promise on older browsers, how does your project work with Babel, how do I implement it without Babel, setTimeout emulation? I don’t know if that’s right
Publish subscribe mode only includes the difference between emit on and return
The publisk-subscribe pattern is a design pattern that uses an event center to allow different methods to subscribe to events and trigger the corresponding callback function when the event occurs. When subscribing to an event, subscribers only care about the event itself, not who will publish the event; When publishing an event, publishers focus on the event itself, not who subscribes to it. Nodejs let Events = require(' Events '); const pbb = new events.EventEmitter(); // Create a publish subscription object. ajax("./test.json",function(data){ pbb.emit('success1',data); // Publish events}) pbb.on('success1',function(data){// Subscribe console.log(data); Class PubSub{constructor(){this.events = {}; } // Emit events (eventName,data){if(this.events[eventName]){this.events[eventName].foreach ((item)=>{ item.apply(this,data); })} // Subscribe to events on(eventName,callback){if(this.events[eventName]){this.events[eventName].push(callback); }else{ this.events[eventName] = [callback]; }}} The observer pattern defines a one-to-many dependency that allows multiple observer objects to listen to a target object at the same time. When the state of the target object changes, all observer objects are notified so that they can update automatically. Observer pattern Scenarios that we may be familiar with are responsive data, such as responsive Vue and responsive Mbox. @param {Object} obj * @param {String} targetVariable Object * @param {Function} */ function observer(obj, targetVariable, callback) {if (! obj.data) { obj.data = {} } Object.defineProperty(obj, targetVariable, { get() { return this.data[targetVariable] }, Set (val) {this.data[targetVariable] = val && callback(val)}, }) if (obj.data[targetVariable]) { callback && callback(obj.data[targetVariable]) } }Copy the codeEvent flow, event capture, and event bubbling
The event flow of DOM2 is divided into three phases: event capture phase, event target phase, and event bubbling phase. When an event occurs on a node element, it will gradually descend from the Window node to the node where the event occurs, which is the event capture stage. When the node is reached, the corresponding callback function will be executed, and then it will gradually rise to the Window node, which is the event bubbling stage. element.addEventListener('onclick',fn,bool); When bool is true, the callback is emitted during capture, otherwise it is emitted during bubbling. Event.stoppropagation () can cancel bubbling. E.target is the element that is fired, and E.currenttarget is the element that the event listens on. Event delegation leverages propagation of event flow. Bind events to the parent element so that when the child elements are fired, they are all listened on and correspond to the same method.Copy the codeWhat do you know about ES6
Let const: This question starts with scope and the chain of scopes. A scope, also known as a lexical environment, is the scope within which a variable or function can be used. When a variable cannot be found within the scope to use, the scope chain is formed by looking up the variable at the next level up. We can declare a variable using var let const, where let and const are block-scoped and cannot be promoted, so there is a temporary dead zone. Var can be used to promote variables, which means that within a function, all variables declared by var are promoted to the top of the function first. Only the promotion declaration (registered in the lexical environment), but no assignment is made. Therefore, if the variable is used before assignment, no error will be reported, but its value is undefined. Let is also bound to the block scope in which it resides. You cannot declare two const variables with the same name in a block scope and declare a read-only constant. Once declared, its address cannot be changed, and in the case of constants, this constant cannot be changed. For other reference types, the value can still change. Const, like let, is a block-level scope with a temporary dead zone. You cannot declare two variables with the same name in the same block.Copy the codeHow is the concept of a class implemented
ES5: function People(name,age){this.name = name; this.age = age; } People.prototype.sayName = function(){ console.log(this.name); } ES6: constructor(name,age){this.name = name;} ES6: constructor(name,age){this.name = name; this.age = age; } sayName(){ console.log(this.name); }} The constructor of ES5 is a function, so it can be called directly. ES6 class cannot be called directly. 2.ES5 instance objects can iterate over all attributes. ES6 can only iterate over attributes on objects, not prototypes. For (let k in p1) 3.ES6 has static methods that can only be called by a class and do not appear on an instance. Also, if a static method contains the this keyword, this refers to the class, not the instance. Static declarations of static properties and methods can be inherited by subclasses.Copy the codeJs inheritance mode
1. The prototype of the inherited subclass points to an instance object of the parent class, but the attributes of the parent class are shared by all subclass instances. function Parent(){ this.name = 'tom'; } function Child(age){ this.age = age; } Child.prototype = new Parent(); 2. Composite inheritance does this by making the parent of each child object different and sharing the methods of the parent object. The downside is that Parent is called twice. function Child(name,age){ Parent.call(this,name); this.age = age; } Child.prototype = new Parent(); Function Child(name,age){Parent. Call (this,name); this.age = age; } Child.prototype = Parent.prototype; /* for(let k in parent.prototype){Child. Prototype [k] = parent.prototype [k]; } */ Child.prototype.constructor = Child; 4.ES6 extends class Child extends Parent{constructor(name,age){super(name); this.age = age; Function P1(){} function P2(){} function Child(){p1.call (this); P2.call(this); } for(let k in P1.prototype){ Child.prototype[k] = P1.prototype[k]; } for(let k in P2.prototype){ Child.prototype[k] = P2.prototype[k]; } Child.prototype.constructor = Child;Copy the code**prototype what is the concept, what are the advantages **
Stereotypes and stereotype chains are concepts that exist on objects. Each constructor has a prototype attribute pointing to its prototype, and the prototype has a constructor attribute pointing to the constructor, from which instances can be accessed via the __proto__ attribute. When an instance object calls a method or property that does not exist in its space, it looks up through the __proto__ pointer until null is found. This procedure accesses the prototype chain. The prototype chain ends with null. Adding a method to Prototype makes it shared by all instance objects, reducing memory overheadCopy the codeThrottling anti – shake throttling is what function throttling implementation
Throttling and anti-shaking can optimize performance. Throttling means responding to only one event in a period of time. Debounce means that two events can be executed only after they have been triggered for more than a fixed time.Copy the codeThe method of the loop, the difference between the methods
ForEach Map Reduce filter let key in obj Let key of OBJ for in traverses array or object keys, traverses enumerable properties of the object, and traverses properties on the prototype. It's in no particular order. Iterators are an interface that provides uniform access to different types of data. ForEach is essentially an array loop, similar to the for loop statement, but with simpler syntax. ForEach will not change the original array and will not return a new array. Map and filter will not change the original array and will return a new array. And because it returns a new array, it can be called chained. The difference is that MAP processes the original array and carries out one-to-one relational mapping, while filter filters the original array and retains the array members that meet the requirements. In iterates through the enumerable properties of the object, including those on the prototype object. Designed primarily for traversing objects, not for traversing groups of numbers. Iterate over objects that have iterators, bypassing for... All defects in the in loop, and can properly respond to break,continue, return statements, etc. Every and some have something of an assertion feel, returning a Boolean type. Object.keys() returns an array of strings containing all the enumerable properties of a given ObjectCopy the codeSum (1) (2) (3)
function add(a,b,c){ return a + b + c; } function curryAdd(fn){ let len = fn.length; Let args = []; return function add(){ args.push(... arguments); if(args.length === len){ return fn.apply(null,args); }else{ return add; } } } let newAdd = curryAdd(add); The console. The log (newAdd (1, 2) (3));Copy the codeFront-end modular, ES6 how to use, how to use node, ES5require it (node directly said do not understand.
Modularity is when one function or file refers to another, breaking up functionality into different functions and files, Let moudleA = require('./indexA'); Module.exports = {moudleA} ES6 exports a reference to the value import moudle from './indexA'; export moudleCopy the codeThe same origin policy of the browser
The browser's native same-origin policy is that Ajax requests cannot be made from non-same-origin urlsCopy the codeHow do browsers cross domain get and post? Tell me what you know about the state code browser rendering process. I dig my own hole. What about browser compatibility
add () remove () function and new function() parameters Set and indexOf===lastIndexOf cssStyleSheet – “CSS_style_sheet
The operating system
What are the conditions for deadlocks in the operating system? How to solve them
** What are threads and processes for example **
A brief introduction to threads/processes; Resource sharing problem; How processes communicate with each other; Thread contention problem; Resource locks introduce processes and threads and interprocess communication
Computer network
Network layer 3 function
Caching HTTP caching mechanism development history HTTP caching cache negotiation cache
Strong cache negotiation cache for example, negotiation cache status code (304) browser cache Strong cache negotiation cache? What HTTP headers are used for strong caching
Cookie details cookie, localstorage and sessionStorage difference token will expire principle
HTTP 2.0 (http1.0) HTTP 2.0 (HTTP 1.0) HTTP 2.0 (HTTP 1.0) HTTP 2.0 (HTTP 1.0) HTTP 2.0 (HTTP 1.0) HTTP 2.0 (HTTP 1.0)
HTTP status code Specifies the HTTP request headers.
What are the protocols at the application layer? TCP UDP what is the difference between TCP three-way handshake and each transmission content?
The difference between get and post requests 301,304 code get and post, have you heard of idempotence the difference between get and post.
Security: MD5 encryption? What does symmetric encryption have? HTTPS SSL process symmetric and asymmetric encryption XSS attacks, DNS TCP redirection from entering URL to page display browser rendering process Redraw backflow Reduce redraw backflow
A brief introduction to cross-domain and its methods
The page life cycle zhuanlan.zhihu.com/p/111316766 CDN used, never used. How does it work? What does it look like
Load balancing, load balancing data consistency, server tracking user sessions, session sharing
Front-end performance optimization
The data structure
What are the characteristics of queues
What’s the difference between an array and a list? Which is an array and which is a linked list.
Automatic expansion of ArrayList in Java?
You learned Java object orientation, right? How Java files are executed (bytecode – JVM – I don’t know later)
C/C++ program compilation process is introduced in detail
git
Project engineering content (gITlab Git gitlab-CI)
Git rebase Git fetch Git pull Git rebase Git rebase Git rebase Git rebase
Compilation principle
You’ve learned the principles of compilation, right? The principles of compilation flow, lexical analysis, syntax analysis or something like that, lexical analysis, top-down method or whatever you call it.
The database
What are the SQL statements? What is a table union? Do you know the principle of database?
Design patterns
Name some design patterns you know? Where it’s been used or seen.
Observer model
7. What is the difference between publish/subscribe and Observer?
Two modes are subscribers and publishers (specific observer can be regarded as a subscriber, specific goals can be considered a publisher), but the observer pattern is scheduled by specific goals, and publish/subscribe pattern is unified by the dispatching center, so the observer pattern between subscribers and publishers are dependent, and publish/subscribe pattern will not.
8. Agent mode?
The proxy pattern is an object structure pattern in which a proxy object is introduced to act as an intermediary between the client and the target access object. Proxy objects can mask or delete content and services that customers do not want to access, or add new content and services based on customer requirements.
linux
What are the Linx instructions for modifying file permissions? How to check whether a port is occupied?
webpack
I also not familiar, asked a plugin, I simply answered the next, estimate to see me not familiar also did not ask
What’s the difference between webpack’s CSS loader and the CSS in your stylus? How will project performance be tested
react
Zhuanlan.zhihu.com/p/304213203 JSX JSX is a js object, like writing and ordinary HTML.
React describes views via JSX. In version 16, this function converts JSX objects into virtual DOM objects, and then uses the diff algorithm in render to compare the old and new virtual DOM objects. To do the final DOM manipulation.
React must be introduced in version 16 because JSX translations call react. CreateElement.
In version 17, however, JSX was optimized to introduce two new entries in the Package that are used by compilers like Babel and typescript to automatically convert JSX objects into virtual DOM objects.
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
Copy the codeThere are several types of components
Class components and functional components
The function component is a pure function that takes a props object and returns a React element. The class component needs to inherit react.componentand create the Render function to return the React element
– Life cycle functions can be used in class components and instantiated when used by class components
Function components, which receive props(properties) objects with unique data and return a React element, which can use Hooks, but cannot use lifecycle functions (because lifecycle methods are implemented by the react.componentclass, which functional components do not inherit). The function component simply executes the function and returns the result.
Check if it is a class component: AComponent. Prototype instanceof react.ponent
Advantages of functional components:
In React16.8, hooks were added that allow us to use useState hooks to manage state in function components and useEffect hooks to use lifecycle functions. Therefore, 2 and 3 points are not the difference between them. The react team has mentioned that there will be some performance improvements to function components in the react release.
The life cycleThe Old Life Cycle (16)
New Life Cycle (17)
Three hooks are about to be discarded and two new hooks are proposed
The life cycle of 16
- The initial stage
Constructor, getDefaultProps props default value, getInitialState State Default value
- Mount the stage
GetDerivedStateFromProps: Every time the component is rerender, including after the component is built (after the virtual DOM, before the actual DOM is mounted), and every time a new props or state is obtained; Each time a new props is received, an object is returned as the new state. Returning null means that no state needs to be updated. Cooperate with componentDidUpdate, can cover all usage of componentWillReceiveProps
render
componentDidMount
-
Update the stage
-
Unloading phase
-
Error handling
hooks
Is setState asynchronous
What happens after setState is called
1. In setState, React creates an updateQueue for the current node.
2. Then the reconciliation process is triggered, during which a scheduling algorithm named Fiber is used to start generating a new Fiber tree. The biggest feature of Fiber algorithm is asynchronous and interruptible execution.
3. React Scheduler executes the nodes with the highest priority according to their priorities, specifically using the doWork method.
4. In the doWork method, React executes the updateQueue method to get the new node. Then compare the old and new nodes and Tag the old nodes with update, insert, replace, and so on.
5. After the doWork of the current node is complete, the performUnitOfWork method is executed to obtain the new node, and the above process is repeated.
6. After all nodes doWork, the commitRoot method is triggered and React enters the commit phase.
7. During the COMMIT phase, React updates the entire DOM element at once, based on the tags assigned to each node.
Setting setState multiple times will render several times
React how to modify state data? Why is setState asynchronous?
Why is it recommended that the argument passed to setState be a callback rather than an object?
Virtual DOM The virtual DOM is an abstraction of the real DOM structure and is essentially a JS object. The React virtual DOM is structured as follows:
const vNode = {
key: null.props: {
children: [{type: 'span'. }, {type: 'span'. }].className: "red".onClick: () = >{}},ref: null.type: "div". }Copy the codeThe type of type is
- classComponent
- function Component
- Original label
- Text node
- React Built-in Labels
Vdom is a vDOM tree formed by the children of props.
Why use the virtual DOM
1. DOM operations can be reduced. Frequent DOM operations will cause backflow and redrawing of the browser. 2. Virtual DOM can be better cross-platform, because virtual DOM is essentially a JS object, which has higher portability and can be used in React Native ReactVR.Copy the codeDisadvantages of the virtual DOM
1. The first rendering requires a VDOM calculation, which is slower than innerHTML insert. 2. It is more suitable for frequent and large changes to the virtual DOM, but a single change to the virtual DOM costs events to compute.Copy the codeThe rendering of the virtual DOM
1. First, convert JSX objects into virtual DOM, which was implemented in version 16 through React. reateElement, and in the new version by introducing a new entry. 2. The virtual DOM is generated by reactdom.render (vdom,container) (if it's the first time) and inserted into the container. 3. There will be a coordination process in render, specifically the diff algorithm, which will compare the new Vnode and the old Vnode to get which part should be updated. 4.Render process: Update the changes to the real DOM (patch)Copy the codekey
Keys are auxiliary flags used to track which elements in a list have been modified, added, or removed. The key tag is unique to distinguish old and new DOM nodes
render(){
return(
<ul>
{this.state.list.map((item,key)=>{
return <li key={key}>{item}</li>
})}
</ul>)}Copy the codeIf the key is the same and the component property changes, react updates only the corresponding property. If there is no change, react does not update it. If the key is different, React destroys the component and then recreates it.
The diff algorithm
The time complexity of the traditional diff algorithm is O(n^3), which is unacceptable in front-end render. In order to reduce the time complexity, the React diff algorithm made some compromises, abandoning the optimal solution and eventually reducing the time complexity to O(n).
So what compromises does react Diff make? , please refer to the following:
1. Tree Diff: Only compare DOM nodes of the same layer, ignoring the movement of DOM nodes across different layers
React only compares DOM nodes in the same color box, that is, all child nodes under the same parent node. When a node is found to be nonexistent, the node and its children are completely removed and not used for further comparison.
This allows you to compare the entire DOM tree with only one walk through the tree.
This means that if a DOM node is moved across hierarchies, React will delete the old node and generate new ones without reuse.
Component diff: If the component is not of the same type, the old component is removed and a new component is created
3. Element diff: For a group of child nodes at the same level, unique ids are required to distinguish them
If there is no ID to differentiate, any insertion will cause the list after the insertion location to be completely re-rendered.
This is why you use unique keys when rendering lists.
The communication modes between components
1. Pass through props
The child component communicates with the parent component. 1. Actively call the method passed by props and pass the desired information as parameters to the parent component’s scope
1. Use the react Context to communicate. CreateContext creates the Context, and useContext uses the Context.
Refer to the following code:
import React, { createContext, useContext } from 'react'; const themes = { light: { foreground: "#000000", background: "#eeeeee" }, dark: { foreground: "#ffffff", background: "# 222222"}}; const ThemeContext = createContext(themes.light); function App() { return ( <ThemeContext.Provider value={themes.dark}> <Toolbar /> </ThemeContext.Provider> ); } function Toolbar() { return ( <div> <ThemedButton /> </div> ); } function ThemedButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> ); } export default App;Copy the code2. Use state management libraries such as Redux or Mobx
3. Use a subscription publishing model
React Docs
12. How does the React parent invoke methods in its children? If you are calling a child component from a method component (>= [email protected]), you can use useRef and useImperativeHandle:
const { forwardRef, useRef, useImperativeHandle } = React; const Child = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ getAlert() { alert("getAlert from Child"); }})); return <h1>Hi</h1>; }); const Parent = () => { const childRef = useRef(); return ( <div> <Child ref={childRef} /> <button onClick={() => childRef.current.getAlert()}>Click</button> </div> ); };Copy the code2. If you are calling a child component from a class component (>= [email protected]), you can use createRef:
const { Component } = React; class Parent extends Component { constructor(props) { super(props); this.child = React.createRef(); } onClick = () => { this.child.current.getAlert(); }; render() { return ( <div> <Child ref={this.child} /> <button onClick={this.onClick}>Click</button> </div> ); } } class Child extends Component { getAlert() { alert('getAlert from Child'); } render() { return <h1>Hello</h1>; }}Copy the codeWhat are refs?
Refs is a JS object that collects all the Refs of the current component instance.
1.String formthis.refs.input1
<input ref="input1" />
2.Callback function formthis.input1
<input ref={currentNode= > this.input1 = currentNode} /> But this form of inline function will cause the callback to be executed twice when the component is updated3.React.createRef()
input1 = React.createRef();
this.input1.current is the element <input ref={this.input1} />
Copy the codeThe difference between Controlled Component and Uncontrolled Component
One of the core components of React is an autonomous component that maintains internal state. But when we introduce native HTML form elements (input, SELECT, Textarea, etc.), should we host all of our data in the React component or keep it in the DOM element? The answer to this question is the defined separation of controlled and uncontrolled components.
Controlled Components refer to components that are Controlled by React and that store all form data in a unified manner
Non-managed components (Uncontrolled Component) store form data in the DOM, not in the React Component. We can use refs to manipulate DOM elements
Why does React define its own event architecture, and how does it relate to the browser’s native event architecture?
<input onClick={this.handleClick}/> This is a synthesized event, not a native dom event. The synthesized event uses event delegate to the outermost element of the component. Reason: For better compatibility. 2. Use event.target to get the DOM element object where the event occurredCopy the codeTo address cross-browser compatibility issues, React encapsulates Browser Native events as synthetic events into your Event handler. Composite events here provide the same interface as native events, but they mask the details of the underlying browser and ensure consistent behavior. Also interesting is that React doesn’t attach events directly to child elements. Instead, React sends all events to the top level for processing as a single event listener. In this way, React updates the DOM without considering how to handle event listeners attached to the DOM, thus optimizing performance.
Fiber React Fiber is a browser-based single-threaded scheduling algorithm.
React Fiber uses a mechanism similar to requestIdleCallback to do asynchronous diff. React implements a list-like data structure that changes the recursive diff to the traversal diff, making it asynchronously updatable.
Hooks juejin. Cn/post / 686774…
The difference between story and Mobx segmentfault.com/a/119000001… Redux is a predictable state container designed for JavaScript applications.
It solves the following problems:
All changes to state require dispatch, making the entire data change traceable and troubleshooting easy. But it also has disadvantages:
More concepts, not easy to understand too much boilerplate code
Thanks to Mobx Observable, precise updates can be achieved with Mobx. The corresponding Redux uses dispath to broadcast, and uses Provider and connect to compare and control the update granularity.
Set a timer similar to the one in the interview room
node
The relationship between Node, ECMS, and JS What is the principle of node event polling fQ? Have you ever been attached to an FQ server? Say it to me
Typescript vs. Java Script
CSS preprocessor
sass stylus less
Personal growth route thinking, future planning
Current stage: looking for an internship, then work stably, constantly enrich my practice and improve my code output ability. At this stage, I focus on learning, and study in the direction of project promotion and personal interest.Copy the code