SegmentFault Technology Weekly -- those things about JavaScript

JavaScript is a prototype-based, first-class function language, a multi-paradigm language that supports object-oriented programming, imperative programming, and functional programming. It provides syntax for manipulating text, arrays, dates, regular expressions, etc. It does not support I/O, such as networking, storage, and graphics, but these can be supported by its host environment.

知识进阶

"JS blocking rendering, have I understood it wrong for so many years? 》

In the Chinese community, a saying has been circulating for so many years: the JS thread is responsible for executing JS, and the GUI rendering thread is responsible for rendering. The two are mutually exclusive, so JS execution will block rendering.

But with the increase in the use of Dev Tools, gradually began to doubt the above statement. This article will explain why JS blocks rendering with practical examples.

"JavaScript Prototype, Prototype Chain"

In other programming languages, such as Java, when using the new command, the constructor of the "class" is called. However, JavaScript does not have "classes" and does not provide a class implementation itself (although the class keyword is provided in ES6, it is just syntactic sugar, JavaScript is still prototype-based). Therefore, JavaScript made a simplified idea. The new command is not followed by a class, but a constructor. The constructor is used to generate an instance object, but its disadvantage is that it cannot share properties and methods. Therefore, a prototype property is set for the constructor, which contains an object (prototype object). All properties and methods that need to be shared by instance objects are placed in this object, and those properties and methods that do not need to be shared are placed in the constructor.

Understanding and Using JavaScript Promises

What is Promise?
How to use Promises?

5 New JavaScript Features You Must Learn

JavaScript is constantly upgrading and iterating, and more and more new features make our code writing concise and interesting. This article will introduce 5 new features, let’s study them together.

"Types of Promise Microtasks You Might Not Know About"

In the ECMA specification, Promise microtasks are divided into two types: NewPromiseReactionJob and NewPromiseResolveThenableJob. Let's look at the generation timing and execution content of these two microtasks in combination with the specification.

JavaScript Closures

In JavaScript, a closure describes a scenario in which the variables of the outer scope in the function are referenced by the inner scope. The structure of the closure stores the variables of the outer scope for the inner scope.

This article will put you in the right perspective on JavaScript closures.

"JavaScript Memory Leaks"

Memory management doesn't need to be considered too much in traditional web development, and usually doesn't have serious consequences. Because when the user clicks a link to open a new page or refreshes the page, the information in the page is cleared from memory.

With the increase of SPA (Single Page Application) applications, we need to pay more attention to memory when coding. Because if the memory used by the application gradually increases, it will directly affect the performance of the web page, and even cause the browser tab to crash.

In this article, we'll examine scenarios where JavaScript coding causes memory leaks and provide some memory management advice.

"Block scoping and shadowing effects in JS"

What are code blocks in JS?
What is block scope?
What is the shadowing effect?
What is illegal masking?
block scope and lexical scope

应用实践

"Several methods for js to generate UUID"

UUID (Universally Unique IDentifier) Universally unique identifier.
A UUID is an algorithmically generated numerical identifier with a binary length of 128 bits. UUID
format is "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" where x is 0-9 or af
A 32-bit hexadecimal number in the range. In an ideal world, no computer or cluster of computers will generate two identical UUIDs.

"Seven common methods of js array deduplication"

The filter() method creates a new array with elements in the new array by checking all elements in the specified array that meet the conditions. item is the value of the current element, and index is the index value of the current element. The indexOf() method returns the first occurrence of a specified string value in a string. Use indexOf() to query the subscript of the array to see if it is equal to the current subscript. If it is equal, it will be returned, otherwise no value will be returned.

"Several Methods of JavaScript Deep Copy"

A shallow copy creates a new object with a copy of the original object's property values. If the attribute is a primitive type, the value of the primitive type is copied, and if the attribute is a reference type, the memory address is copied. Without a deep copy, one of the objects changes the value of the object, which affects the value of the other object.
Deep copy is to copy an object completely from the memory, open up a new area from the heap memory to store the new object, and modify the new object will not affect the original object.

"Several ways of js data type conversion"

Coercive type conversion String(), toString() to string type String to numeric type Number parseInt()
String to array split, array to string join
......

"Several Inheritance Methods of JavaScript"

Several inheritance methods of JavaScript prototype chain inheritance with the help of constructor inheritance (classical inheritance)
Combinatorial inheritance: prototype chain + borrowed constructor (most common)
Prototype inheritance (Object.create)
Parasitic Inheritance Parasitic Compositional Inheritance (ideal)
Inheritance in ES6

"JS utils tool functions that make you do more with less"

Today, I will share a JS utils tool function that has been accumulated and collected for a long time. The article has a large amount of code. It is recommended to collect it and read it slowly. When you need it one day, open your long-lost favorites, I believe it can make you business code development with less effort.
It brings together time-related, DOM-related, URL-related, judgment-related, image-related, cache-related, etc. Part of the logic processing is relatively simple. If the business volume is relatively complex, it is recommended to use it carefully, but it should be more than enough for most projects. Next, let's go to the code part~

"JavaScript Development Tools in 2022"

The compiler is responsible for converting the input code into some target output format. For our purposes, we're focusing on compilers that support converting modern JavaScript and TypeScript into specific versions of ECMAscript that are compatible with browsers and the latest version of Node.js.

"Manually implementing a JS execution engine"

Supports parsing js scripts to generate syntax trees and formatting codes Supports running complete js scripts Supports running single-line expressions in safe mode Supports setting timeouts

"js get page size"

In most cases, document.documentElement.clientWidth can return the correct value, but in IE6's quirks mode, document.body.clientWidth returns the correct value, so it needs to be compatible. In addition, clientWidth and clientHeight are read-only properties and cannot be assigned a value.

面试真题

"JS Interview Questions (Basic) Carding"

How many data types does JavaScript have?
JavaScript Max Safe Number vs Min Safe Number?
What is the difference between deep copy and shallow copy?
What is a closure?

"JS Interview Questions (Advanced) Carding"

What is the difference between undeclared and undefined?
Difference between let & const and var?
What are the ways to get a DOM element?
What are the methods for manipulating DOM elements

热门问答

• How does js get the text of all child nodes under a node and store it in an array?
• What method can be used to achieve text compression in js?
• How to use js to implement the coercive conversion of int to byte type in java, that is (byte)
• js recursively modify tree structure
• How to quickly and efficiently determine whether the conditions in the array are satisfied by js double storage loop
• js how to get today's start timestamp and end timestamp
• How does js extract the fields in the memory loop to splicing the fields of the outer loop
• js how to judge whether the value of the object in the array is repeated

课程推荐

"Front-end Big Data Visualization Practice"

I believe that front-end developers still have a certain understanding of html, css, javascript, browser, etc. But how well do you know? Know the meaning? Simple/skillful use? Deep research?
Please try to answer my following questions:

Is the page writing more still in the div set of divs? Is the style writing more or width, height, positioning?
Have you had a deep understanding of JavaScript? Why is JavaScript single-threaded? (Original design? Reason for limitation?)
How does JavaScript work in the Browser? How is it compiled? (precompiled? just-in-time compiled?)
Do you have a specific direction to focus on in the front-end field? Or is it the best way to find a job?

After trying to solve the problem, the result may not be so ideal. It doesn't matter how the result is. Personally, I think it is not terrible to have a problem. It is a good result to find the problem in time. It is not a panacea for everyone, it is necessary to learn and make progress all the time.

Course gains:

• Master a ubiquitous and growing need for technology
• Improve your own technology and broaden your front-end vision
• Strengthen hard power and seize promotion opportunities
• Based on the bottom layer of the computer, moving forward to the front-end architecture

---

PS: What technical content do you want to see, you can leave a message in the comment area~
If you have any questions, you can add Ms. WeChat~