Fryao

Table Of Contents version one function deepClone(target) { return JSON.parse(JSON.stringify(target)); } const a = { name: "fryao", age: 18 }; const b = deepClone(a); console.log(b); // { name: 'fryao', age: 18} console.log(b === a); // false While this is fine to use most of the time, there are a number of downsides to this approach: If there is a field value in the object that is undefined, the field will disappear directly after conversion If the object has a field value as a RegExp object, the field value will become {} after conversion If the object has a field value of NaN, +-Infinity, the field value becomes null after conversion If the object has a ring reference, the conversion will directly report an error version two Since it is a deep copy of the object, we can create an empty object and copy the values ​​of the original object that need to be copied one by one. function deepClone(target) { if...

Table Of Contents The most complete in history! 56 JavaScript advanced handwriting knowledge points! Help you from beginner to advanced JavaScript player The most common test in the interview 1.Simulate the new operation function myNew(ctor, ...args) { const obj = Object.create(ctor.prototype); //Create an object and point to the constructor prototype //Equivalent to // const obj = new Object() // obj.__proto__ = ctor.prototype; const res = ctor.apply(obj, args); //Point the this of ctor to the newly created object return typeof res === 'object' ? res : obj; //If the constructor does not return data of the object type, the result of new is the object created in step 1. } 2.instanceof keyword function myInstanceof(left, right) { if (typeof left !== 'object' || left === null) return false; let proto = left.__proto__; let prototype = right.prototype; while (true) { ...

Table Of Contents What happens when we type a URL? It has always been the key question of the front-end interview. This article explains each step in detail in two parts. I believe it will be helpful to you. Network request section The user enters a keyword, and the address bar judges whether it is the search content or the url address If it is search content, it will use the browser's default search engine plus search content to synthesize the url; If it is a domain name, a protocol (such as https) will be added to form a complete url. Then press Enter. The browser process passes the url to the network process through IPC ——inter-process communication. (the network process initiates a real network request only after receiving the url). After the network process receives the url, first check whether there is a cache . (Check the strong cache first, if it hits, use the cache resource directly, otherwise enter DNS resolution) There is a cac...

Table Of Contents Why do performance optimization? How important is performance optimization? The performance optimization of the website has a great impact on the retention rate and conversion rate of users, so the performance optimization ability is also an important inspection point for front-end development What is performance optimization In general, under the current B/S architecture, the front-end requests the back-end, the back-end organizes the data and returns it to the client, and then the client performs data processing and rendering to display the interface. Such a general process, and Front-end performance optimization is based on this process. There are only two major directions that we can optimize: One is faster network communication (that is, load-time optimization ), which means that there is less time delay between the client and the server when requesting or responding The second is faster data processing (that is, runtime optimizati...

In daily development, regular expressions are very useful. Knowing some commonly used regular expressions can greatly improve your work efficiency, such as string matching, format verification of form items, etc. Today I will share 20 of them with you. Commonly used regular expressions in development! ! ! Hope to help you improve code efficiency Verification of mobile phone number const phoneReg = ^\+[1-9]{1}[0-9]{7,11}$ const phoneStr1 = '18888888888' console.log(phoneReg.test(phoneStr1)) // true Verification of ID card const sfzReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ const sfzStr1 = '415106199801012130' console.log(sfzReg.test(sfzStr1)) // true const sfzStr2 = '718381298381212183' console.log(sfzReg.test(sfzStr2)) // false Email verification const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/ URL verification const urlReg = /^((...

Table Of Contents The Vue 2.0 series is based on component development. This part is divided into two parts. The first part is mainly about concepts, global components and local components, the application of components in modularization, and parent-child component communication. The next part is non-parent-child component communication, the use of component slots, dynamic components and handling of component boundary conditions. Please read patiently, I believe it will give you a deeper understanding and better application of component-based development. Detailed explanation and in-depth application of vue component development - Part 1: Part 1 address 1. Non-parent-child component communication The specific demo codes have been uploaded to GitHub, and those who are interested are welcome to download and experience Sibling component pass value State management through Vuex in large-scale projects (I will write a detailed application blog of Vuex ...

Table Of Contents The Vue 2.0 series is based on component development. This part is divided into two parts. The first part is mainly about concepts, global components and local components, the application of components in modularization, and parent-child component communication. The next part is non-parent-child component communication, the use of component slots, dynamic components and handling of component boundary conditions. Please read patiently, I believe it will give you a deeper understanding and better application of component-based development. Detailed explanation and in-depth application of vue component development - Part 2: Part 2 address All codes in this article have been uploaded to GitHub: A-sketch123 -VueComponent-eng 1. Concept Component development is to split the page into reusable components as much as possible, so that our code is more convenient to organize and manage during class, and the scalability is also stronger. We can use ...