Huck's dev blog

Reason:Reference types will share the same address, so when we use = operator, if there is modification on the new object, the value on the old object will change too. SolutionIterate the Object recursively. If there is reference type, we create a new one and copy all the value type to the new reference type. 12345678910111213141516171819202122232425262728function deepClone(obj = {}) { // null can't be treated as object if (typeof obj != "object"...

There is a interview question on bfe.dev about decode-message. The link is below https://bigfrontend.dev/problem/decode-message Your are given a 2-D array of characters. There is a hidden message in it. 123I B C A L K AD R F C A E AG H O E L A D col and row are marked with number which start from 0. The number of col is 0 ~ 6 ,and the number of row is 0~2The way to collect the message is as follows start at top left move diagonally down right when cannot move any more, try to switch to...

Steps to implement the apply function: Determine if the calling object is a function. Even though it’s defined on the function’s prototype, there may be instances where it is invoked using methods like call. Check if the incoming context object exists; if not, set it to window. Assign the function as a property of the context object. Determine if the parameter values have been passed in. Invoke the method using the context object and save the returned result. Remove the property that...

(1) Recursive implementationThe common idea behind recursion is straightforward, involving a circular recursion approach where each item is iterated over. If an item is still an array, the process continues recursively to achieve the concatenation of each array item. 1234567891011121314let arr = [1, [2, [3, 4, 5]]];function flatten(arr) { let result = []; for(let i = 0; i < arr.length; i++) { if(Array.isArray(arr[i])) { result = result.concat(flatten(arr[i]));...

○ Shallow copy: Shallow copy refers to copying the attribute value of one object to another object. If the attribute value is a reference type, then the address of the reference is copied to the object, so the two objects will have a reference of the same reference type. Shallow copying can be implemented using Object.assign() and the spread operator. ○ Deep copy: Compared to shallow copy, if a property value is a reference type, deep copy creates a reference type and copies the...

Discuss conceptual questions‘Symbol’ is a primitive data type introduced in ES6. Its primary purpose is to create a unique identifier, which is used in scenarios such as naming object properties, defining constants, and so on. Understanding with Examples Each ‘Symbol’ is unique and can be used as a property name for objects, which helps to avoid conflicts with property names. For example: 1234567const s1 = Symbol();const s2 = Symbol();const obj = { [s1]: 'hello', [s2]:...

What are the differences in asynchronous loading of JS scripts?In Web applications, the asynchronous loading of JavaScript scripts can be achieved in the following ways: a. Dynamically create a tag and set its src attribute to the URL of the script to be loaded. You can use the onload or onreadystatechange event to check if the script has finished loading. 123456const script = document.createElement('script');script.src = 'path/to/script.js';script.onload = function()...

Why is the result of ‘typeof null’ an ‘object’?KernelThe result of ‘typeof null’ being “object” is a legacy issue of the JavaScript language. In the original version of JavaScript, a 32-bit value was used to represent a variable, with the first 3 bits representing the type of the value. 000 represents an object, 010 represents a floating point number, 100 represents a string, 110 represents a Boolean value, and other values are all considered pointers. In this representation, null was...

‘RequestAnimationFrame’ and ‘requestIdleCallback’ are both APIs used for performing animations or other high-performance tasks in the browser. ‘RequestAnimationFrame’ is a mechanism provided by browsers to request an animation frame. It executes a specified callback function right before the browser’s next redraw. The advantage of this approach is that it allows the browser to automatically perform complex calculations and rendering tasks during the next draw, thus preventing the browser...

（1）AJAXAjax stands for “Asynchronous JavaScript and XML.” It’s a way to make web pages interactive without reloading the whole page. Ajax updates parts of a page by fetching a bit of data from the server behind the scenes. This means updates can happen without a full page refresh. Traditional web pages without Ajax need a full reload to update. However, Ajax is not perfect: ● It’s more suited for MVC programming, not quite in line with the front-end MVVM trend. ● Built on the not-so-clear...