28个你应该知道的JavaScript技巧

news2024/9/21 12:40:05

今天我将分享一些Javascript中的常用技巧,以帮助您解决问题。设置过程中的常见问题更快更容易。

01、Javascript 反向字符串

下面是代码:

/*niemvuilaptrinh.com*/const stringReverse = str => str.split("").reverse().join("");stringReverse('hello world'); /*dlrow olleh*/

02、滚动到页面顶部

下面是代码:

/*niemvuilaptrinh.com*/const scrollToTop = () => window.scrollTo(0, 0);scrollToTop();

03、删除数组中的重复项

下面是代码:

/*niemvuilaptrinh.com*/const removeDuplicate = (arr) => [...new Set(arr)];removeDuplicate([1, 2, 3, 4, 4, 2, 1]); // [1, 2, 3, 4]

04、 获取数组中的随机项

下面是代码:

/*niemvuilaptrinh.com*/const randomItemArray = (arr) => arr[Math.floor(Math.random() * arr.length)];randomItemArray(['a', 'b', 'c', 1, 2, 3]);

05、获取数组中的最大数

下面是代码:

/*niemvuilaptrinh.com*/const maxNumber = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);maxNumber([4,9,5,7,2]) /* 9 */

06、检查型号

下面是代码:

/*niemvuilaptrinh.com*/function isNumber(num) {  return !isNaN(parseFloat(num)) && isFinite(num);}isNumber("Hello"); /*false*/isNumber(123);/*true*/

07、检查类型为空

下面是代码:

/*niemvuilaptrinh.com*/const checkNull = val => val === undefined || val === null;checkNull(123) /* false */checkNull() /* true */checkNull('hello') /* false */

08、获取数组中的最小数

下面是代码:

/*niemvuilaptrinh.com*/const minNumber = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);console.log(minNumber([3,5,9,7,1])) /*1*/

09、获取数组中的平均数

下面是代码:

/*niemvuilaptrinh.com*/const averageNumber = arr => arr.reduce((a, b) => a + b) / arr.length;averageNumber([1, 2, 3, 4, 5]) /* 3 */

10、检查元素的类型

下面是代码:

/*niemvuilaptrinh.com*//*niemvuilaptrinh.com*/ const checkType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();checkType(true) /*boolean*/checkType("hello World") /*string*/checkType(123) /*number*/

11、 计算数组中元素的出现次数

下面是代码:

/*niemvuilaptrinh.com*/const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);countOccurrences([1,2,2,4,5,6,2], 2) /* Số 2 xuất hiện 3 lần trong array */

12、使用 Javascript 获取当前 URL

下面是代码:

/*niemvuilaptrinh.com*/const getCurrentURL = () => window.location.href;getCurrentURL() /* https://www.niemvuilaptrinh.com */

13、大写字符串中的字母

下面是代码:

/*niemvuilaptrinh.com*/const capitalizeString = str => str.replace(/b[a-z]/g, char => char.toUpperCase());capitalizeString('niem vui lap trinh'); /* 'Niem Vui Lap Trinh' */

14、将 RGB 转换为十六进制

下面是代码:

/*niemvuilaptrinh.com*/ const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(52, 45, 125); /* Kết quả là: '#342d7d'*/

15、将数字转换为数组

下面是代码:

/*niemvuilaptrinh.com*/const numberToArray = n => [...`${n}`].map(i => parseInt(i));numberToArray(246) /*[2, 4, 6]*/numberToArray(357911) /*[3, 5, 7, 9, 1, 1]*/

16、 从 HTML 中获取内容

下面是代码:

/*niemvuilaptrinh.com*/const getTextInHTML = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';getTextInHTML('<h2>Hello World</h2>'); /*'Hello World'*/

17、 在 JS 中分配多个变量

下面是代码:

/*niemvuilaptrinh.com*/var [a,b,c,d] = [1, 2, 'Hello', false];console.log(a,b,c,d) /* 1 2 'Hello' false */

18、空数组

下面是代码:

let arr = [1, 2, 3, 4, 5];arr.length = 0;console.log(arr); /* Kết quả : [] */

19、 在 JS 中复制对象

下面是代码:

/*niemvuilaptrinh.com*/const obj = {    name: "niem vui lap trinh",    age: 12};const copyObject = { ...obj };console.log(copyObject); /* {name: 'niem vui lap trinh', age: 12}*/

20、检查偶数和奇数

下面是代码:

/*niemvuilaptrinh.com*/const isEven = num => num % 2 === 0;console.log(isEven(1)); /*false*/console.log(isEven(2)); /*true*/

21、合并两个或多个数组 JS

下面是代码:

/*niemvuilaptrinh.com*/const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const arr = arr1.concat(arr2);console.log(arr); /* [1, 2, 3, 4, 5, 6] */

22、将内容复制到剪贴板

下面是代码:

/*niemvuilaptrinh.com*/const copyTextToClipboard = async (text) => {  await navigator.clipboard.writeText(text)}

23、从一系列值中选择一个随机数

下面是代码:

/*niemvuilaptrinh.com*/var max = 10;var min = 1;var numRandom = Math.floor(Math.random() * (max - min + 1)) + min;console.log(numRandom)

24、检查元素是否聚焦

下面是代码:

/*niemvuilaptrinh.com*/const elementFocus = (el) => (el === document.activeElement);elementIsInFocus(element);/*if true element is focus*//*if false element is not focus*/

25、用 JS 测试苹果设备

下面是代码:

/*niemvuilaptrinh.com*/const isAppleDevice =/Mac|iPod|iPhone|iPad/.test(navigator.platform);console.log(isAppleDevice);/*if true element is apple devices **//*if false element is not  apple devices*/

26、 将字符串转换为数组

下面是代码:

/*niemvuilaptrinh.com*/const str = "Hello";const arr = [...str];console.log(arr); /* ['H', 'e', 'l', 'l', 'o'] */

27、在 JS 中使用箭头函数

下面是代码:

/* regular function*/const sum = function(x, y) {  return x + y;};/* arrow function */const sum = (x, y) => x + y;

28、条件句的简写

总结:

我希望这篇文章能为您提供对开发网站有用的javascript知识,如果您有任何问题,请留言区给我留言,我会尽快回复。

感谢您的阅读,祝您今天过得愉快!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/80084.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搜索引擎项目测试报告

目录单元测试构建索引模块文档信息对象Document的构建的单元测试**针对每一篇文档进行分析、处理、分词**针对文档内容提取关键字的测试&#xff08;正则表达式&#xff09;测试去掉script测试去掉标签完整测试Document类中的parseContent方法关于ansj分词器的测试关于构建倒排…

CleanMyMac4.12.2最新免费的macOS电脑清理工具

相信不少的小伙伴都在用苹果电脑&#xff0c;不论是 iMac&#xff0c;还是 MacBook&#xff0c;用着用着电脑就变慢了。这通病与苹果电脑的性能无关&#xff0c;主要是硬盘空间不足的问题&#xff01;当然你可以在购买电脑的时候就把硬盘升级&#xff0c;但主要的问题是 – 没有…

python代码圣诞树你还没有嘛?所有画法都在这篇文章里拉~

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~ 今天&#xff0c;我就来给大家分享一下python制作的几种圣诞树吧~ 一&#xff1a;唯美圣诞 代码展示 导入模块 完整源码点击领取即可 import turtle as t from turtle import * import random as r import time n 100.0spee…

【JavaWeb】Tomcat的入门使用

1Tomcat的相关概念: Tomcat是Apache软件基金会一个核心项目&#xff0c;是一个开源免费的轻量级Web服务器&#xff0c;支持Servlet/JSP少量JavaEE规范。 概念中提到了JavaEE规范&#xff0c;那什么又是JavaEE规范呢? JavaEE: Java Enterprise Edition,Java企业版。指Java企业…

5年Java开发干到月薪38k?当初实习期2.5k的苦我也吃过...

每一个能在所属行业中成为佼佼者的人&#xff0c;一定都会有他自己的独到的见解以及成长方法......这个观点我非常认同&#xff0c;我不自诩自己是个大佬&#xff0c;但现在也算是做出了头&#xff0c;我从刚毕业做 Java 实习生月薪 2.5k&#xff0c;到现在干了 5 年 Java 开发…

仿雷速体育app踢足球tab

MyTabLayout MyTabLayout用法参照BaseLibrary的Demo GitHub仓库地址 效果图 引入 gradle allprojects {repositories {maven { url https://jitpack.io }} }implementation com.github.DL-ZhangTeng:BaseLibrary:2.3.0属性 MyTabLayout属性名描述&#xff1a;可参考原生控…

Chat GPT使用体验,它真的好厉害!!!

最近的chat GTP很火&#xff0c;起因是OpenAI发布了一个全新的聊天机器人模型。就连马斯克也在感叹“很多人疯狂地陷入了 ChatGPT 循环中”&#xff0c;“ChatGPT 好得吓人&#xff0c;我们离强大到危险的人工智能不远了”。 官方的介绍是&#xff0c;这一模型可以与人类进行谈…

人类特有本能:保护族群老弱病残

人有哪些特有的本能&#xff1f; - 知乎 对于动物群体来说&#xff0c;受伤了就不管了&#xff0c;自生自灭。对于人类来说&#xff0c;受伤了尽量照顾恢复。这看起来吃亏&#xff0c;实际上划算。一个成年人&#xff0c;长大需要20年&#xff0c;受伤恢复只要3个月。 远方青木…

全新CorelDRAW2023最新版矢量图软件功能简介

CorelDRAW2023简介 &#xff1a;设计绘画 CorelDraw 是一个绘图与排版的软件&#xff0c;它广泛地应用于商标设计、标志制作、模型绘制、插图描画、排版及分色输出等诸多领域。 作为一个强大的绘图软件&#xff0c;它被喜爱的程度可用下面的事实说明&#xff1a;用作商业设计和…

WPFUI LiveCharts使用记录(一)柱状图

前言&#xff1a;LiveCharts是一个图标控件库集&#xff0c;可以实现柱状图、折线图、饼图、仪表盘等图表控件。而且最新版本支持全平台使用&#xff0c;实现的样例展示可以点击查看作者Alberto Rodrguez的 github仓库 1.背景 1.1 新建项目 这篇文章使用的是.NET framework4.…

Foxmail升级后图片链接乱

升级后默认勾选了总是以纯文本格式阅读邮件。 在设置-高级-中取消勾选

ZooKeeper组件的核心知识总结,吐血总结,一文带你学会

文章目录数据模型数据存储Watch机制会话机制ACL权限序列化方式集群ZAB协议日志清理实现分布式锁实现分布式ID实现负载均衡开源框架使用案例Zookeeper 基本介绍Apache ZooKeeper 是由Apache Hadoop的子项目发展而来&#xff0c;为分布式应用提供高效且可靠的分布式协调服务。 在…

java计算机毕业设计ssm医院管理系统3w16k(附源码、数据库)

java计算机毕业设计ssm医院管理系统3w16k&#xff08;附源码、数据库&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。…

【应用】OPC 通讯协议

OPC 通讯协议OPC 通讯协议基础OPC 简介OPC 与 OPC UAOPC 逻辑对象模型OPC 通信方式Java 实现 OPC 的方式Java 实现 OPC-clientOPC-DAOPC-UA模拟数据进行代码测试OPC-DA 代码验证OPC-UA 代码验证OPC 通讯协议基础 OPC 简介 OPC 全称 OLE For Process Control&#xff0c;即用于…

8. 发布确认高级

二八佳人体似酥&#xff0c;腰间仗剑斩愚夫。虽然不见人头落&#xff0c;暗里教君骨髓枯。 在生产环境中由于一些不明原因&#xff0c;导致 rabbitmq 重启&#xff0c;在 RabbitMQ重启期间生产者消息投递失败&#xff0c; 导致消息丢失&#xff0c;需要手动处理和恢复。于是&am…

PyQt - 使用多线程避免界面卡顿

PYQT作为界面程序包&#xff0c;为Pythoner快速构建界面&#xff0c;提供了便利性。特别是结合Pycharm扩展工具&#xff08;QTdesigner&#xff09;能够通过“拖拖拽拽”的方式构建简单界面。通过UIC将UI文件快速转化为PY文件&#xff0c;节省了时间。 PYQT的项目实践&#xff…

痞子衡嵌入式:我被邀请做贸泽电子与非网联合推出的《对话工程师》节目嘉宾...

《对话工程师》是「贸泽电子」赞助、「与非网」制作的一档网络节目&#xff0c;自2022年11月起&#xff0c;邀请不同技术领域的资深工程师&#xff0c;聊聊开发过程中的经验感悟&#xff0c;栏目共 10 期&#xff0c;痞子衡有幸被邀请做了第 4 期节目的嘉宾(12月5日在 「B站 - …

COVID

不信谣不传谣&#xff0c;只是自己的一点记录&#xff0c;有引用到各位大佬的内容&#xff0c;侵删&#xff0c;感谢感谢&#xff0c;对自己可以理中客&#xff0c;对别人还是尽可能主观上的友好&#xff0c;不要慷他人之慨。 准备 喉咙刺痛方面&#xff1a;柠檬&#xff08;…

Python爬虫实战,requests+openpyxl模块,爬取手机商品信息数据(附源码)

前言 今天给大家介绍的是Python爬取手机商品信息数据&#xff0c;在这里给需要的小伙伴们代码&#xff0c;并且给出一点小心得。 首先是爬取之前应该尽可能伪装成浏览器而不被识别出来是爬虫&#xff0c;基本的是加请求头&#xff0c;但是这样的纯文本数据爬取的人会很多&…

读《冯诺伊曼传》

关于冯诺依曼几年前读了本冯诺依曼的书&#xff0c;冯诺依曼是20世纪的全才&#xff0c;原名约翰尼&#xff0c;匈牙利美籍科学家&#xff0c;被称为计算机之父和博弈论之父。计算机和博弈论都深刻改变人类的生活工作和思维方式&#xff0c;极大地促进了社会和人类文明的进步发…