Web Front-end
JS Tutorial
Summarize 10 common methods in js syntax to improve coding efficiency
Summarize 10 common methods in js syntax to improve coding efficiency
Preface
Due to some changes in work and life, the frequency of writing articles has dropped a bit recently. I’m really sorry, but I believe it will slow down soon. I am recovering slowly and thank you all for your continued attention and support.
This article mainly shares with you some methods and techniques when writing JavaScript code. Although sometimes all roads lead to Rome, there may always be the shortest one. path available. I hope that through the following JavaScript skills, everyone's code can be "complex and simplified, and simplified and refined."
Learn and use skillfully
1. new Set()
Someone may know that new data is provided in ES6 The structure is Set, but there may not be many people who can use it flexibly. Using the Set data structure we can easily deduplicate an array, such as:
let arr = [1, 2, 2, 3]; let set = new Set(arr); let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。 console.log(newArr); // [1, 2, 3]
2. Object.assign()
Object.assign() is also provided in ES6 The extension method of an object can be used to merge and copy objects, such as:
let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // {a: 1, b: 2}3. map()
The map method is used to traverse the array, has a return value, and can Each item is operated and a new array is generated. Sometimes it can replace for and forEach loops to simplify the code, such as:
let arr3 = [1, 2, 3, 4, 5]; let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10 console.log(newArr3); // [10, 20, 30, 40, 50]
4. filter()
filter method is also used for traversal Array, as the name suggests, is to filter the array, trigger a callback function after each element, retain or remove the current item through judgment, and finally return a new array, such as:
let arr4 = [1, 2, 3, 4, 5]; let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模，过滤余数不为0的数 console.log(newArr4); // [2，4]
5. some()
The some method is used to traverse the array and trigger a callback function after each element. As long as one meets the conditions, it will return true, otherwise it will return false, similar to || comparison, such as:
let arr5 = [{result: true}, {result: false}];
let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true，即为true
console.log(newArr5); // true6.every()
The every method is used to traverse the array and trigger a callback function after each element. As long as one does not meet the condition, it returns false, otherwise it returns true, similar to Compare with &&, for example:
let arr6 = [{result: true}, {result: false}];
let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为false
console.log(newArr6); // false7. ~~operator
~ symbol is used in JavaScript to perform bitwise negation, ~~ means Invert twice, and the operation value of bit operation is required to be integer, and the result is also an integer, so the bit operation will automatically become an integer, and the decimal part can be cleverly removed, similar to For parseInt, for example:
let a = 1.23; let b = -1.23; console.log(~~a); // 1 console.log(~~b); // -1
8. || Operator
Clever use of the || operator allows us to set a default value for the variable , for example:
let c = 1; let d = c || 2; // 如果c的值为true则取存在的值，否则为2 console.log(d); // 1
9. ...operator
...The operator is a method used to destructure arrays in ES6 and can be used to quickly obtain the parameters of the array, such as:
let [num1, ...nums] = [1, 2, 3]; console.log(num1); // 1 console.log(nums); // [2, 3]
10. Ternary operationCharacter
This operator should be familiar to everyone. It can simplify the writing of if else when written silently, such as:
let e = true,
f = '';
if (e) {
f = 'man';
} else {
f = 'woman';
}
// 等同于
e ? f = 'man' : f = 'woman';Conclusion
This article only lists 10 common methods to improve coding efficiency in JavaScript syntax and briefly explains them. Of course, each knowledge point can be expanded and explored accordingly. I hope you will Achieve skillful use while learning skillfully.
【Related Recommendations】
1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download
2. Free js online video tutorial
#3.php.cn Dugu Jiujian (3) - JavaScript video tutorial
The above is the detailed content of Summarize 10 common methods in js syntax to improve coding efficiency. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3
PyCharm Remote Development Practical Guide: Improve Development Efficiency
Feb 23, 2024 pm 01:30 PM
PyCharm is a powerful Python integrated development environment (IDE) that is widely used by Python developers for code writing, debugging and project management. In the actual development process, most developers will face different problems, such as how to improve development efficiency, how to collaborate with team members on development, etc. This article will introduce a practical guide to remote development of PyCharm to help developers better use PyCharm for remote development and improve work efficiency. 1. Preparation work in PyCh
Knowledge graph: the ideal partner for large models
Jan 29, 2024 am 09:21 AM
Large language models (LLMs) have the ability to generate smooth and coherent text, bringing new prospects to areas such as artificial intelligence conversation and creative writing. However, LLM also has some key limitations. First, their knowledge is limited to patterns recognized from training data, lacking a true understanding of the world. Second, reasoning skills are limited and cannot make logical inferences or fuse facts from multiple data sources. When faced with more complex and open-ended questions, LLM's answers may become absurd or contradictory, known as "illusions." Therefore, although LLM is very useful in some aspects, it still has certain limitations when dealing with complex problems and real-world situations. In order to bridge these gaps, retrieval-augmented generation (RAG) systems have emerged in recent years. The core idea is
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
Private deployment of Stable Diffusion to play with AI drawing
Mar 12, 2024 pm 05:49 PM
StableDiffusion is an open source deep learning model. Its main function is to generate high-quality images through text descriptions, and supports functions such as graph generation, model merging, and model training. The operating interface of the model can be seen in the figure below. How to generate a picture. The following is an introduction to the process of creating a picture of a deer drinking water. When generating a picture, it is divided into prompt words and negative prompt words. When entering the prompt words, you must describe it clearly and try to describe the scene, object, style and color you want in detail. . For example, instead of just saying "the deer drinks water", it says "a creek, next to dense trees, and there are deer drinking water next to the creek". The negative prompt words are in the opposite direction. For example: no buildings, no people , no bridges, no fences, and too vague description may lead to inaccurate results.
