1. 首页
  2. IT资讯

你现在可以使用的10个JavaScript代码段

你现在可以使用的10个JavaScript代码段

毫无疑问,JavaScript是Web开发中最流行的编程语言之一。无论您使用的是React,Vue还是Angular,都只是JavaScript。围绕JS展开了广泛而重要的生态系统,提供了无数的框架和库,可帮助你更快地开发应用程序。

但是有时候最好退一步,尝试了解如何在没有库的情况下做事。看看下面的代码片段,以优雅的方式解决简单的问题,并在日常项目情况下使用这些知识或为编码面试做准备。

1.反转字符串

在此示例中,我们使用扩展运算符(),Array的reverse方法和String的join方法来反转给定的字符串。

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

// 例子
reverseString('javascript'); // 'tpircsavaj'
reverseString('good'); // 'doog'

2.计算数字的阶乘

要计算给定数字的阶乘,我们使用箭头函数和嵌套三元运算符。

const factoriaOfNumber = number => number < 0 ? (() => {
  throw new TypeError('No negative numbers please');
})()
: number <=1 
? 1
: number * factoriaOfNumber(number -1);

// 例子
factoriaOfNumber(4); // 24
factoriaOfNumber(8); // 40320

3.将数字转换为数字数组

在此示例中,我们使用扩展运算符(),Array的map方法和 parseInt 函数将给定的数字转换为一个单数的数组。

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

// 例子
convertToArray(5678); // [5, 6, 7, 8]
convertToArray(123456789); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

4.检查数字是否为2的幂

这很简单。我们检查该数字不是伪造的,并使用按位AND运算符()来确定数字是否为2的幂。

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

// 例子
isNumberPowerOfTwo(100); // false
isNumberPowerOfTwo(128); // true

5.从对象创建键值对数组

在此示例中,我们使用Object中的keys方法和Array中的map方法来映射Object的键并创建键/值对数组。

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

// 例子
keyValuePairsToArray({ Better: 4, Programming: 2 });
// [ ['Better', 4], ['Programming', 2] ]
keyValuePairsToArray({ x: 1, y: 2, z: 3 });
// [ ['x', 1], ['y', 2], ['z', 3] ]

6.返回数组中的[Number]个最大元素

为了从数组中返回最大元素,我们使用了一个箭头函数,该函数获取数组和我们希望函数返回的元素数。我们使用扩展运算符()以及Array中的sort和slice方法。请注意,如果我们不提供第二个参数,则 number 的默认值为 1,因此仅返回一个最大元素。

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.检查数组中的所有元素是否相等

在这个简短的示例中,我们使用Array中的every方法检查数组中的所有元素是否相等。我们基本上检查每个元素是否等于数组中的第一个元素。

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

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

8.返回两个数的平均值

在此示例中,我们使用了扩展运算符()和Array中的reduce方法来返回两个给定数字或一个数组的平均值。

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.返回两个或多个数字的总和

要返回两个或多个给定数字或一个数组的总和,我们再次使用扩展运算符()和Array中的reduce方法。

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

10.返回数字数组的幂集

在最后一个示例中,我们要返回数字数组的幂集。因此,我们使用Array中的reduce,map和concat方法。

const powersetOfArray = array => array.reduce((accumulator, currentValue) => accumulator.concat(accumulator.map(el => [currentValue].concat(el))), [[]]);

// 例子
powersetOfArray([4, 2]); // [[], [4], [2], [2, 4]]
powersetOfArray([1, 2, 3]); /
// [[], [1], [2], [2, 1], [3], [3, 1], [3, 2], [3, 2, 1]]

如你所见,使用JavaScript和一些ES6魔术来解决这些任务并不总是困难的。


来源:公众号《前端全栈开发者》(ID:by-zhangbing-dev)
subscribe2.png

OA_show(3);


(adsbygoogle = window.adsbygoogle || []).push({});

你现在可以使用的10个JavaScript代码段
阅读 269 更新于 8月3日


1 条评论

你现在可以使用的10个JavaScript代码段

orange

第五条不需要实现,就是 Object.entries

推荐阅读
前端工程师成长之多读好书

乱七八糟的书看了很多,有一本讲JavaScript的印象特别深开篇说的是”JavaScript是Java的脚本语言”,但还是看完了,最后忘了书名。

极简丰盛人生 阅读 4.5k 288 赞 7 评论

前端Javascript与Nodejs的异同

很多小伙伴学Node的时候,都没有好好认识她就开始疯狂追求,想一举拿下,直接在网上搜索Node实战,想知道她活好不好,想先用她建个简单博客练练手。

alwaysVe 阅读 8.4k 58 赞 10 评论

你需要的前端进阶书籍清单,分享下载

写在前面 目前专注深入JavaScript学习,特花了点时间整理了一些前端学习相关的书籍。 大致分为以下7大系列:CSS系列、DOM系列、JavaScript基础系列、JavaScript应用系列、JavaScript进阶系列、 JQuery类库系列、M…

小磊哥er 阅读 3.2k 35 赞 5 评论

前端计划——JavaScript的Math、数组和字符串方法总结

前言:JavaScript内提供了丰富的内建函数,本文总结了一份表格,方便快速查找,个人总结,不是很严谨,如有错误,还望指正。 如果想查阅各函数详细的使用说明,建议使用官方文档。[链接] 1、Math函数 方法 作用 …

Alarak 阅读 2.3k 32 赞

如何设计大型网站的前端 JavaScript 框架

相对大型的项目在前端 JS 方面有几个需要达成的目标: 1. 代码逻辑分层 2. 便于多人协作开发 3. 各部分代码模块化,可以按需加载 4. 保持全局变量的清洁 5. 可进行单元测试

思否编辑部 阅读 9.2k 12 赞 1 评论

推销自己的前端技术书籍

今天主要自我推销两本前端技术书籍!《JavaScript半知半解》《Web开发实战》 一、《JavaScript半知半解》 为什么写这本书? 因为之前作者在博客上洋洋洒洒地将之前学习JavaScript的笔记整理了出来,一共17篇,感…

TGCode 阅读 1.7k 10 赞

程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网页应用(WebApps)、…

好程序员 阅读 156 6 赞

ArcGIS Server SOE 前端JavaScript 调用

一、环境 ArcGIS Server 10.2 ArcGIS API for JavaScript 4.4 二、解决方法 拼接参数构造SOE的URL,如下图三、过程 为处理一个复杂的逻辑,在前端运行计算特别慢,转到写一个扩展放到Server上,写完后部署、Serve…

Higer 阅读 2.2k 2 赞

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/199541.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code