JavaScript中实用的8个代码片段

简介: JavaScript中实用的8个代码片段

image.png


1. 反转字符串


使用扩展符号...将字符串解析成数组。


const reverseString = string => [...string].reverse().join('');
reverseString('Medium'); // 'muideM'
复制代码


2. 数阶乘


计算数据的阶乘,使用箭头函数和三元运算符。


const factorialOfNumber = number => 
  number < 0
    ? (() => {
      throw new TypeError('No negative numbers please');
    })()
    : number <= 1
      ? 1
      : number * factorialOfNumber(number - 1);
factorialOfNumber(4); // 24
复制代码


3. 整数转数组


使用扩展符号...,并结合map方法。


const convertToArray = number => [...`${number}`].map(el => parseInt(el))
convertToArray(5678); // [5, 6, 7, 8]
复制代码


注意这里的${number},而不是number


4. 检查是否为2的幂数


这个很简单明了,巧妙运用了与(&)运算符。


const isNumberPowerOfTwo = number => !!number && (number & (number - 1)) === 0;
isNumberPowerOfTwo(100); // false
isNumberPowerOfTwo(128); // true
复制代码


5. 创建一级对象的键值对数组


本例子只是针对一级对象创建数组,这个数组是二维的,其存储转换后对象的键值对


const keyValuePairsToArray = object => Object.keys(object).map(el => [el, object[el]]);
keyValuePairsToArray({ Better: 4, Programming: 2});
// [['Better', 4], ['Programming', 2]]
复制代码


6. 返回数字数组中的最大值


下面我们定义了一个函数,参数一是要传递的数字数组,参数二是要返回的数组长度。当然,对于返回数字数组中的最小值的思路也是一样。


const maxElementsFromArray = (array, len = 1) => [...array].sort((x, y) => y - x).slice(0, len);
maxElementsFromArray([1, 2, 3, 4, 5]); // [5]
maxElementsFromArray([7, 8, 9, 10, 10], 2); // [10, 10]
复制代码


7. 判断数组中的元素是否相同


我们的思路是:将数组中第二个开始的元素逐个与第一个元素相比较,使用===符号比较噢。


const elementsAreEqual = array => array.every(el => el === array[0]);
elementsAreEqual([9, 8, 7, 6, 5]); // false
elementsAreEqual([4, 4, 4, 4, 4]); // true
复制代码


8. 计算平均数


我们使用reduce函数对数组进行处理,再求平均数。


举一反三,计算数的和等也是这种思路


const averageOfNumbers = (...numbers) => numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0) / numbers.length;
averageOfNumbers(...[6, 7, 8]); // 7
averageOfNumbers(6, 7, 8, 9); // 7.5
复制代码


🤣 注意:上面的代码并非严谨的,没有考虑到边界值等小问题,感兴趣者可自行扩展,封装成util方法,毕竟在实际开发中使用还是可以的~



相关文章
|
5天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
7 0
JS代码动态打印404页面源码
|
12天前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
8 1
|
13天前
|
JavaScript
js 【实用技巧】给全文代码添加一键复制按钮
js 【实用技巧】给全文代码添加一键复制按钮
13 1
|
13天前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
17 1
|
15天前
|
JSON JavaScript 前端开发
JavaScript 技巧:干净高效的代码写法
JavaScript 技巧:干净高效的代码写法
13 1
|
15天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
21天前
|
JavaScript 前端开发 Java
JavaScript小数四舍五入的代码
JavaScript小数四舍五入的代码
29 8
|
20天前
|
JavaScript 前端开发 Java
java 执行 javascript 代码
java 执行 javascript 代码
18 6
|
19天前
|
前端开发 JavaScript
JavaScript 时空编织者:驾驭代码的控制流程
JavaScript 时空编织者:驾驭代码的控制流程
|
19天前
|
前端开发 JavaScript
JavaScript 魔法秘笈:编织梦幻般的代码艺术王国
JavaScript 魔法秘笈:编织梦幻般的代码艺术王国