Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge points about how javascript improves the speed and efficiency of development. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1. Declare and initialize the array

We can initialize the array with a specific size, or we can initialize the contents of the array by specifying a value. You may use an array, but a two-dimensional array can do the same, as shown below:

Const array = Array (5). Fill ('') / output (5) [","] const matrix = Array (5) .fill (0). Map (() = > Array (5) .fill (0)) / / output (5) [Array (5), Array (5)] 0: (5) [0,0,0,0] 1: (5) [0,0,0,0) 0] 2: (5) [0,0,0,0,0] 3: (5) [0,0,0,0,0] 4: (5) [0,0,0,0,0] length: 5

2. Summation, minimum and maximum

We should use the reduce method to find the basic mathematical operations quickly.

Const array = [5, 4, 7, 8, 9, 2]

Summation

Array.reduce ((aformab) = > aforb); / / output: 35

Maximum value

Array.reduce ((a) b) = > a > b?a:b); / / output: 9

Minimum value

Array.reduce ((amerb) = > a murb); / / output (6) [1,5,10,25,40,100] array.sort ((amemb) = > bmura); / / output (6) [100,40,25,10,5,1]

Object array sorting

Const objectArr = [{first_name: 'Lazslo', last_name:' Jamf'}, {first_name: 'Pig', last_name:' Bodine'}, {first_name: 'Pirate', last_name:' Prentice'}]; objectArr.sort ((a, b) = > a.last_name.localeCompare (b.last_name)); / / output (3) [{... }, {... }, {... }] 0: {first_name: "Pig", last_name: "Bodine"} 1: {first_name: "Lazslo", last_name: "Jamf"} 2: {first_name: "Pirate", last_name: "Prentice"} length: 3

4. Filter to virtual values from the array

False values such as 0, undefined, null, false, "",''can be easily filtered out by the following techniques.

Const array = [3,0,6,7,', false]; array.filter (Boolean); / / output (3) [3,6,7]

5. Use logical operators to deal with situations that require conditional judgment

Function doSomething (arg1) {arg1 = arg1 | | 10; / / if arg1 has no value, take the default value 10} let foo = 10; foo = = 10 & & doSomething (); / / if foo equals 10, just execute doSomething (); / / output: 10foo = 5 | | doSomething (); / / is the same thing as if (foo! = 5) then doSomething (); / / Output: 10

6. Remove duplicate values

Const array = [5, item,idx,arr, 4, 7, 7]; array.filter ((item,idx,arr) = > arr.indexOf (item) = idx); / / orconst nonUnique = [... new Set (array)]; / / Output: [5, 5, 4, 7, 7, array, 8, 9, and 9]

7. Create a counter object or Map

In most cases, you can count the frequency of certain special words by creating an object or Map.

Let string = 'kapilalipak';const table= {}; for (let char of string) {table [char] = table [char] + 1 | | 1;} / / output {k: 2, a: 3, p: 2, I: 2, l: 2}

Or

Const countMap = new Map (); for (let I = 0; I

< string.length; i++) { if (countMap.has(string[i])) { countMap.set(string[i], countMap.get(string[i]) + 1); } else { countMap.set(string[i], 1); } }// 输出Map(5) {"k" =>

2, "a" = > 3, "p" = > 2, "I" = > 2, "l" = > 2}

8. Ternary operators are cool

Function Fever (temp) {return temp > 97? 'Visit documentation': temp

< 97 ? 'Go Out and Play!!' : temp === 97 ? 'Take Some Rest!': 'Go Out and Play!';;}// 输出Fever(97): "Take Some Rest!" Fever(100): "Visit Doctor!" 9、循环方法的比较 for 和 for..in 默认获取索引，但你可以使用arr[index]。 for..in也接受非数字，所以要避免使用。 forEach, for...of 直接得到元素。 forEach 也可以得到索引，但 for...of 不行。 10、合并两个对象 const user = { name: 'Kapil Raghuwanshi', gender: 'Male' };const college = { primary: 'Mani Primary School', secondary: 'Lass Secondary School' };const skills = { programming: 'Extreme', swimming: 'Average', sleeping: 'Pro' };const summary = {...user, ...college, ...skills};// 合并多个对象gender: "Male"name: "Kapil Raghuwanshi"primary: "Mani Primary School"programming: "Extreme"secondary: "Lass Secondary School"sleeping: "Pro"swimming: "Average" 11、箭头函数 箭头函数表达式是传统函数表达式的一种替代方式，但受到限制，不能在所有情况下使用。因为它们有词法作用域(父作用域)，并且没有自己的this和argument，因此它们引用定义它们的环境。 const person = {name: 'Kapil',sayName() { return this.name; }}person.sayName();// 输出"Kapil" 但是这样： const person = {name: 'Kapil',sayName : () =>

{return this.name;}} person.sayName (); / / Output "

12. Optional chain

Const user = {employee: {name: "Kapil"}}; user.employee?.name;// Output: "Kapil" user.employ?.name;// Output: undefineduser.employ.name// output: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13. Shuffle an array

Take advantage of the built-in Math.random () method.

Const list = [1,2,3,4,5,6,7,8,9]; list.sort (() = > {return Math.random ()-0.5;}); / / output (9) [2, 5, 1, 6, 9, 8, 4, 3, 7] / output (9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Double question mark grammar

Const foo = null? 'my school';// output: "my school" const baz = 0? 42 const baz / output: 0

15. Remaining and unfolding syntax

Function myFun (a, b,... manyMoreArgs) {return arguments.length;} myFun ("one", "two", "three", "four", "five", "six"); / / output: 6

And

Const parts = ['shoulders',' knees']; const lyrics = ['head',... parts,' and', 'toes']; lyrics;// output: (5) ["head", "shoulders", "knees", "and", "toes"]

16. Default parameters

Const search = (arr, low=0,high=arr.length-1) = > {return high;} search; / / output: 4

17. Convert decimal to binary or hexadecimal

Const num = 10num.toString (2); / / output: "1010" num.toString (16); / / output: "a" num.toString (8); / / output: "12"

Use deconstruction to exchange two numbers

Let a = 5 Portlet b = 8; [aMaginb] = [brecoery a] [aforme b] / / output (2) [8,5]

19. Check the number of palindromes per line

Function checkPalindrome (str) {return str = = str.split ('') .reverse () .join ('');} checkPalindrome ('naman'); / / output: true

20. Convert the Object attribute to an array of attributes

Const obj = {a: 1, b: 2, c: 3}; Object.entries (obj); / / Output (3) [Array (2), Array (2), Array (2)] 0: (2) [a ", 1] 1: (2) [b", 2] 2: (2) [c ", 3] length: 3Object.keys (obj); (3) [" a "," b "," c "] Object.values (obj) (3) [1, 2, 3] above are all the contents of the article "how to improve the development speed and efficiency of javascript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.