【JS经验分享】你真的会写JS吗?满满干货,建议读三遍(2)

news2024/9/28 15:23:35

大家好,最近准备总结一下JS的经验,分享分享,有不对的欢迎讨论哈~

JS作为前端的基础技能,每一位前端开发都要运用熟练,但你真的会写JS吗?js全称JavaScript,是运行在浏览器上的脚本语言,连续多年被评为全球最受欢迎的编程语言。

文接上篇【JS经验分享】你真的会写JS吗?满满干货,建议读三遍(1)_啥咕啦呛的博客-CSDN博客,我们继续修炼JS,打磨JS,让自己的代码看起来舒服,写起来简洁,用起来容易。

目录

 11.默认参数

 12.字符连接用模板字符串

13.类型转换

string强制转换为数字

使用Boolean过滤数组中的所有假值

14.巧用find查找对象数组中属性为特定值的对象

 15.按位运算符方法仅适用于32位整数

16.在数组中查找最大值和最小值

17.数学指数幂函数的简写

18.取整 |0

19.判断奇偶数 &1

20.计算取整


 11.默认参数

add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3

 12.字符连接用模板字符串

const welcome = `Hi ${test1} ${test2}`;

13.类型转换

string强制转换为数字

常用:也可以使用 +来转化字符串为数字

let test1 = +'123'; 
let test2 = +'12.3';

 可以用 *1来转化为数字(实际上是调用 .valueOf方法) 然后使用 Number.isNaN来判断是否为 NaN,或者使用 a!==a 来判断是否为 NaN,因为 NaN!==NaN

'32' * 1         
// 32

'ds' * 1            
// NaN

null * 1            
// 0

undefined * 1       
// NaN

1  * { valueOf: ()=>'3' }  
// 3

其他类型用加号转数字后:

+ '123'            
// 123

+ 'ds'             
// NaN

+ ''               
// 0

+ null             
// 0

+ undefined       
// NaN

+ { valueOf: ()=>'3' }    
// 3

使用Boolean过滤数组中的所有假值

我们知道JS中有一些假值:falsenull0""undefinedNaN,怎样把数组中的假值快速过滤呢,可以使用Boolean构造函数来进行一次转换

const compact = arr => arr.filter(Boolean)

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])         
// [ 1, 2, 3, 'a', 's', 34 ]

14.巧用find查找对象数组中属性为特定值的对象

filteredData = data.find(data => data.type === 'test1' && data.name === name);

 15.按位运算符方法仅适用于32位整数

可以使用双位操作符来替代 Math.floor()。双否定位操作符的优势在于它执行相同的操作运行速度更快。

~~1.9 === 1 // true

不过要注意,对整数来说 ~~ 运算结果与 Math.floor() 运算结果相同,而对于负数来说不相同:

~~4.5            
// 4

Math.floor(4.5)        
// 4

~~-4.5        
// -4

Math.floor(-4.5)        
// -5

16.在数组中查找最大值和最小值

const arr = [1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

17.数学指数幂函数的简写

2**3 // 8

18.取整 |0

对一个数字 |0可以取整,负数也同样适用, num|0

20.15 | 0         
// 20

-20.15 | 0        
// -20

~~number :取整之中最快的,位运算

var num1 = ~~20.15,  //20
    num2 = ~~(-20.15);  //-20

number^0

var num1 = 20.15^0,  //20
    num2 = (-20.15)^0;  //-20

number<<0

var num1 = 20.15 << 0,  //20
    num2 = (-20.15) << 0,  //-20

19.判断奇偶数 &1

 对一个数字 &1可以判断奇偶数,负数也同样适用, num&1

const num=3;

!!(num & 1)                    
// true

!!(num % 2)                    
// true

20.计算取整

四舍五入Math.round(number):Math.round()是Math对象中的一个函数,将数值四舍五入为最接近的整数。

var num1 = Math.round(20.1),  //20
    num2 = Math.round(20.5),  //21
    num3 = Math.round(20.9),  //21
    num4 = Math.round(-20.1),  //-20
    num5 = Math.round(-20.5),  //-20 注意这里是-20而不是-21
    num6 = Math.round(-20.9);  //-21

向上取整Math.ceil(number) :Math.ceil()取向上最接近的整数。

var num1 = Math.ceil(20.1),  //21
    num2 = Math.ceil(20.5),  //21
    num3 = Math.ceil(20.9),  //21
    num4 = Math.ceil(-20.1),  //-20
    num5 = Math.ceil(-20.5),  //-20
    num6 = Math.ceil(-20.9);  //-20

向下取整Math.floor(number) : Math.floor()`取向下最接近的整数。

var num1 = Math.floor(20.1),  //20
    num2 = Math.floor(20.5),  //20
    num3 = Math.floor(20.9),  //20
    num4 = Math.floor(-20.1),  //-21
    num5 = Math.floor(-20.5),  //-21
    num6 = Math.floor(-20.9),  //-21

细节很多,干货满满,建议读三遍。每次分享10个小技巧,欢迎关注我持续更新这个专题哦~~

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

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

相关文章

【高危】Nuxt.js <3.4.3 远程代码执行漏洞(POC公开)

漏洞描述 Nuxt.js(简称 Nuxt)是一个基于 Vue.js 的通用应用框架&#xff0c;用于构建服务端渲染的应用程序&#xff08;SSR&#xff09;和静态生成的网站。 Nuxt.js 3.4.3之前版本中的 test-component-wrapper 组件的动态导入函数存在代码注入漏洞&#xff0c;当服务器在开发…

Java集合流式编程

一、简介 1、什么是集合流式编程 集合流式编程&#xff08;Stream API&#xff09;是Java 8引入的一个功能强大的特性&#xff0c;它提供了一种更简洁、更高效的方式来操作集合数据。它的设计目标是让开发者能够以一种更声明式的风格来处理集合数据&#xff0c;减少了显式的迭…

Ubuntu部署jmeter与ant

为了整合接口自动化的持续集成工具&#xff0c;我将jmeter与ant都部署在了Jenkins容器中&#xff0c;并配置了build.xml 一、ubuntu部署jdk 1&#xff1a;先下载jdk-8u74-linux-x64.tar.gz&#xff0c;上传到服务器&#xff0c;这里上传文件用到了ubuntu 下的 lrzsz。 ubunt…

WordPress 备份插件 BackUpWordPress

WordPress备份是一件必不可少的事情&#xff0c;毕竟自己辛辛苦苦花了很多时间精力写得博客&#xff0c;经验总结&#xff0c;必须保留传承。WordPress备份可以在发生灾难性情况&#xff08;比如劫持或意外锁定&#xff09;下迅速恢复&#xff0c;确保了网站安全。 BackUpWord…

揭示不断增长的预切蔬菜市场:深入研究行业驱动因素和挑战

随着现代社会的快节奏和人们生活压力的增加&#xff0c;越来越多的人选择预制菜作为饮食解决方案&#xff0c;预制菜已经成为餐饮行业的新兴赛道。预制菜的优点包括方便快捷、卫生安全、节省时间、质量可靠&#xff0c;以及丰富的菜品选择和灵活的烹饪和食用方式&#xff0c;满…

基于SpringCloud微服务流动资金贷款业务系统设计与实现

一、引言 由于传统的贷款业务系统并不能够顺应时代的变化,同时在一定程度上对业务发展进行了限制,所以为了适应时代的发展,信息贷款业务应该能够被产品化、丰富化,同时还需要制定一套特定的流程来满足新时代用户的需求。流程化的规范管理是当今银行业务发展的必然趋势,研究并开…

基于Stable Diffusion的2D游戏关卡生成【实战】

接下来的几篇文章将与常规主题有所不同&#xff08;这是在从事通用机器人技术的职业中吸取的教训&#xff09;。 相反&#xff0c;我决定利用我的一些新空闲时间 1 边做边学&#xff0c;并使用所有酷孩子都在谈论的一些很酷的新 ML。 推荐&#xff1a;用 NSDT设计器 快速搭建可…

分割回文串-ii

分割回文串-ii 题目链接&#xff1a;分割回文串-ii 思路&#xff1a;分割字符串s&#xff0c;使得子串都是回文串&#xff0c;最后获得最小分割次数。那么我们可以不断把字符串缩短&#xff0c;判断子串是否可以被分割成回文串&#xff0c;并且最小分割次数。这就是子问题分割…

贝叶斯算法人生

哈喽大家好&#xff0c;我是咸鱼 之前看到过耗子叔写的一篇文章《程序算法与人生选择》&#xff0c;这篇文章中耗子叔结合计算机中的经典算法&#xff08;排序、动态规划等等&#xff09;&#xff0c;让大家在人生道路的选择上获得了一些启发 我最近看了一些关于贝叶斯思想的…

StringBuilder和StringBuffer

StringBuilder和StringBuffer 目录 StringBuilder和StringBuffer特点常见方法练习&#xff1a;测试字符串连接StringBuilder和StringBuffer的区别 特点 封装了char[]数组 是可变的字符序列 提供了一组可以对字符内容修改的方法 常用append()来代替字符串做字符串连接”” 内部…

智慧文旅VR全景展示,深度VR沉浸式体验

导语&#xff1a; 智慧文旅VR全景展示为我们带来了一种独特的旅行体验&#xff0c;让我们可以穿越时空、身临其境地感受历史、艺术和自然的魅力。 在这个数字化时代&#xff0c;智慧文旅VR全景展示成为了旅游界的新宠&#xff0c;它让我们能够以一种前所未有的方式探索世界&am…

看完这篇 教你玩转渗透测试靶机vulnhub—Corrosion:2

Vulnhub靶机Corrosion:2渗透测试详解 Vulnhub靶机介绍&#xff1a;Vulnhub靶机下载&#xff1a;Vulnhub靶机安装&#xff1a;Vulnhub靶机漏洞详解&#xff1a;①&#xff1a;信息收集&#xff1a;②&#xff1a;Tomcat msf 上传漏洞拿到shell&#xff1a;③&#xff1a;look越权…

何时使用Kafka而不是RabbitMQ

Kafka 和 RabbitMQ 都是流行的开源消息系统&#xff0c;它们可以在分布式系统中实现数据的可靠传输和处理。Kafka 和 RabbitMQ 有各自的优势和特点&#xff0c;它们适用于不同的场景和需求。本文将比较 Kafka 和 RabbitMQ 的主要区别&#xff0c;并分析何时使用 Kafka 而不是 R…

独立商城系统开发功能注意事项有哪些?

电商行业的不断发展&#xff0c;越来越多的企业开始构建自己的独立商城系统&#xff0c;以满足消费者日益增长的需求。然而&#xff0c;在开发独立商城系统时&#xff0c;需要注意什么样的功能才能使其成为一个成功的电商平台呢&#xff1f;下面我们就来谈一谈独立商城系统开发…

【C++ 程序设计】第 8 章:文件操作

目录 一、文件基本概念和文件流类 &#xff08;1&#xff09;文件的概念 &#xff08;2&#xff09;C 文件流类 二、打开和关闭文件 &#xff08;1&#xff09;打开文件 &#xff08;2&#xff09;关闭文件 三、文件读写操作 &#xff08;1&#xff09;读写文本文件…

软件测试工程师的那些经验分享

前几天&#xff0c;一个朋友去面软件测试工程师的职位了&#xff0c;回来还信心满满的跟我诉说自己的面试经历。然而&#xff0c;最后这个面试扑街了。其实我早就料到了…… 在面试这个环节&#xff0c;很多细节如果处理不好&#xff0c;最后就会凉凉&#xff0c;无论你软件测…

《名侦探柯南》所有主题曲名字

《名侦探柯南》所有主题曲名字列表&#xff1a; 1.第1-30集&#xff1a;心中动荡不安 2.第21-52集&#xff1a;Feel Your Heart 3.第53-96集&#xff1a;谜 4.第97-123集&#xff1a;转动命运之轮 5.第124-142集&#xff1a;真相究明 6.第143-167集&#xff1a;情义之印 7.第16…

IDEA导入Web项目的三种方式

文章目录 前言一、第一种方式二、第二种方式三、第三种方式 前言 无论那种方式&#xff0c;它们都有相同的前提&#xff0c;那就是首先将你想要导入的Web项目放置在你想要导入的工程目录下 例如&#xff08;举例子&#xff09;&#xff1a;笔者要将一个名为mavenWeb1的Web项目&…

设计模式-05.02-行为型-策略职责链

策略模式【常用】 策略模式。在实际的项目开发中&#xff0c;这个模式也比较常用。最常见的应用场景是&#xff0c;利用它来避免冗长的 if-else 或 switch 分支判断。不过&#xff0c;它的作用还不止如此。它也可以像模板模式那样&#xff0c;提供框架的扩展点等等。 策略模式…

日均调度 10W+ 任务实例,DolphinScheduler 在蔚来汽车一站式数据治理开发平台的应用改造

大家好我是张金明&#xff0c;在蔚来汽车担任大数据平台研发工程师。这次和大家分享的是 Apache DolphinScheduler 在蔚来汽车一站式数据治理开发平台的应用和改造&#xff0c;接下来我将从背景、应用现状和技术改造三个方面去分享一下。 背景 业务痛点 在蔚来汽车构建一个统…