Home  >  Article  >  Web Front-end  >  10 practical ES6 methods, come and collect them!

10 practical ES6 methods, come and collect them!

青灯夜游
青灯夜游forward
2021-04-19 19:38:222893browse

This article will share with you 10 practical ES6 methods. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

10 practical ES6 methods, come and collect them!

There is no doubt that JavaScript is one of the most popular programming languages ​​for web development. Whether you're using React, Vue or Angular, it's just JavaScript. JS has evolved around a vast and vital ecosystem, providing countless frameworks and libraries that help us develop applications faster.

But sometimes it's best to take a step back and try to understand how to do things without using libraries. Take a look at the following code snippets. They solve simple problems in an elegant way and are also very practical in daily projects, so take notes and use them directly when you encounter problems.

1. String Reverse


In this example, we use the spread operator, the reverse method of Array and String The join method to reverse the given string.

const reverseString = string => [...string].reverse().join('')

// 事例
reverseString('Medium') // "muideM"
reverseString('Better Programming') // "gnimmargorP retteB"

2. Calculate the factorial of the specified number


const factorialOfNumber = number => 
  number < 0
    ? (() => {
      throw new TypeError(&#39;请输入正整数&#39;)
    })()
    : number <= 1
      ? 1
      : number * factorialOfNumber(number - 1)
      
      
// 事例
factorialOfNumber(4) // 24
factorialOfNumber(8) // 40320

3. Convert the number to a number array


const converToArray = number => [...`${number}`].map(el => parseInt(el))

// 事例
converToArray(5678) // [5, 6, 7, 8]
converToArray(12345678) // [1, 2, 3, 4, 5, 6, 7, 8]

4. Check if the number is a power of 2


const isNumberPowerOfTwo = number => !!number && (number & (number - 1)) == 0

// 事例
isNumberPowerOfTwo(100) // false
isNumberPowerOfTwo(128) // true

5. Create key-value pairs from the object Array


const keyValuePairsToArray = object => Object.keys(object)
  .map(el => [el, object[el]])

// 事例
keyValuePairsToArray({Better: 4, Programming: 2})
// [[&#39;Better&#39;, 4], [&#39;Programming&#39;, 2]]

keyValuePairsToArray({x:1, y:2, z:3})
// [[&#39;x&#39;, 1], [&#39;y&#39;, 2], [&#39;z&#39;, 3]]

6. Return the maximum value in the array of numbers


const maxElementsFromArray = (array, number = 1) => [...array].sort((x, y) => y -x).slice(0, number)

// 事例
maxElementsFromArray([1, 2, 3, 4, 5]) // [5]

maxElementsFromArray([7, 8, 9, 10, 10], 2) // [10, 10]

7. Check all elements in the array Is it equal


const elementsAreEqual = array => array.every(el => el === array[0])

// 事例
elementsAreEqual([9, 8, 7, 6, 5, 4]) // false
elementsAreEqual([4, 4, 4, 4, 4]) // true

8. Returns the average of the numbers


const averageOfTwoNumbers = (...numbers) => numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0) / numbers.length

// 事例
averageOfTwoNumbers(...[6, 7, 8]) // 7
averageOfTwoNumbers(...[6, 7, 8, 9]) // 7.5

9. Returns two or more numbers The sum of The family of sets composed of all subsets (including the complete set and the empty set). The countable set is the smallest infinite set; its power set corresponds one-to-one with the set of real numbers (also called the same potential), and it is an uncountable set. Not all uncountable sets have the same potential as the set of real numbers. The potential of a set can be infinitely large. For example, the power set of the real number set is also an uncountable set, but its potential is larger than the real number set. Suppose X is a finite set, |X| = k, then the potential of the power set of X is 2 to the kth power.

const sumOfNumbers = (...array) => [...array].reduce((accumulator, currentValue) => accumulator + currentValue, 0)

// 事例
sumOfNumbers(5, 6, 7, 8, 9, 10) // 45
sumOfNumbers(...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 50


Original address: https://webdevhub.net/articles/javascriptmedium/10-javascript-code-snippets-you-can-use-right-now

Author: Simon Holdorf


For more programming-related knowledge, please visit:

Programming Teaching

! !

The above is the detailed content of 10 practical ES6 methods, come and collect them!. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete