Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Do you know these five skills of JavaScript?

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

Do you know the five skills of JavaScript? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Anyone who says JavaScript is a better language in the world will probably be overwhelmed by spitting stars. But if JavaScript is the most widely used programming language in the world, most people will have no problem with it. Especially with NodeJS, JavaScript is all-pervasive.

Atwood's Law: "any application that can be written in JavaScript will eventually be written by JavaScript."

Even so, JavaScript has some little-known features and techniques that are less common, but very useful. This article is not going to introduce those bizarre features, because there is no practical use except as an after-dinner conversation.

1. Plus operator +

Are you sure you got it right? My nephew in the first grade knows it! Yes, the basic arithmetic operator + you must know:

Const two = 1 + 1

But instead of adding numbers, we're talking about operators that convert expressions into numbers.

Console.log (+ new Date ()); / / 1592102280555 console.log (+ true); / / 1 console.log (+ false); / / 0 const random = {valueOf: () = > Math.floor (Math.random () * 100),}; console.log (+ random); / / 4 console.log (+ random); / / 26 console.log (+ random); / / 47

Newcomers to JavaScript may find this kind of writing a little strange, and numeric type conversions tend to use the Number () function. The result is the same, but isn't it much simpler to use +? It is also worth noting that if the object contains a valueOf method, the + operator returns the result of this method. Such as the example above.

2.debugger statement

Break the debugging point on the browser DevTools, and almost everyone can. But do you know how to mark breakpoints in code? Yes, just use debugger statements. This technique is more convenient when you want to quickly break a point to a specified code location.

Const bubbleSort = (arr) = > {const length = arr.length; for (let I = 0; I

< length; i++) { for (let j = 0; j < length - i - 1; j++) { if (arr[j] >

Arr [j + 1]) {debugger; [arr [j], arr [j + 1]] = [arr [j + 1], arr [j]];}} return arr;}; console.log (bubbleSort ([8, 2, 19, 8, 4, 5, 2])); / 2, 2, 4, 5, 8, 8, 19

Debugger

3. Comma operator

Comma? I think you're kidding me! I'm not kidding you. The comma here is not a comma in an array or a comma between object attributes, but a comma operator in an expression. For example, const a = (1,2), the value of an is 2. The comma operator makes multiple expressions execute sequentially and returns the value of the last expression. What good will it do? It makes the code more concise. For example:

Let money = 10; const hasStudied = false; const relax = () = > console.log ('relax'); const study = () = > console.log (' study'); / / complete variable assignment and execute method hasStudied? (money++, relax ()): (money / = 2), study (); console.log (money); / / study 5 / / batch definition of multiple variables for (let I = 1, j = 2; I + j)

< 10; i++, j++) { console.log(i, j); } // 1 2; 2 3; 3 4; 4 5; // 不改变现有方法实现的情况下,增加逻辑 确 定 4.集合对象 Set 这是 ES6 引入的数据结构,集合类型 Set。学过数学的都知道,集合的特性是不包含重复元素。有一道很常见的面试题,就是数组去重问题。当然,面试题的本意可能不是让你直接用 Set,而是自己实现去重的逻辑。但是在实际工作中用来去重,它不香吗?还可以用来计算两个集合的交集: // 数组去重 const arr = [1, 1, 7, 5, 6, 6, 6, 8, 7]; // 传统方式 let noDup = arr.filter((a, b) =>

Arr.indexOf (a) = = b); / / it is more convenient to use Set noDup = [... new Set (arr)]; console.log (noDup); / 17 568 / / set operations let a = new Set ('hello Worldwide'); / / "h", "e", "l", "o", "w", "r", "d", "!" Let b = new Set ('jianshu is neighbors'); / / "j", "I", "a", "n", "s", "h", "u", "", "c", "o", "l", "!" / / intersection const intersection = (a, b) = > {let intersection = new Set () For (let elem of b) {if (a.has (elem)) {intersection.add (elem);}} return intersection;}; console.log (intersection (a, b)); / / "h", "o", "l", "!"

5. Native Date operation

I come across a lot of front-end developers, all date operations must use libraries such as moment.js. It's not that it doesn't work, but if only a few API are used in a few places, such as simple formatting, is it necessary to introduce a library? Besides, what if API doesn't support some custom requirements? In fact, the native operation is not as troublesome as you think. You can write one yourself soon after you understand the principle and logic. Such as formatting:

Function formatDate (date, format) {var calendar = ['January',' February', 'March',' April', 'May',' June', 'June',' July', 'August',' September', 'October',' November', 'December']; format = format |' YmurmMaidai; var dateObj = new Date (date); if (isNaN (+ dateObj)) {return 'Invalid Date' } var year = dateObj.getFullYear (), month = dateObj.getMonth () + 1, date = dateObj.getDate (); return format.replace ('Yee, year). Replace (' masks, month). Replace ('dudes, date). Replace (' Mises, calendar [month-1]);}

Just a few lines of code! For example, if you get the last day of last month, maybe moment.js has a related API, and I don't bother to check it. The origin is also very simple:

Const day1 = new Date (); day1.setDate (- 1); / / unbelievable, it's that simple! After reading the above, you have mastered the five skills of JavaScript. Do you know the method? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report