匠人学院 JR Academy学AI来匠人
匠人学院 JR Academy学AI来匠人

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png
EN

关于公司

关于我们元宇宙课堂新闻资讯匠人工作成为导师匠人导师联系我们匠人商店J3.Club

匠人资源

工作内推匠人活动1对1私教行业白皮书线上学习平台面试中心分享面试经验Internship会员中心

AI 工具

AI 工具箱考证匠 Cert Master求职匠 Job Hunter牛小匠 UniMate AI

AI 学习方向

全部学习方向AI EngineerContext EngineeringVibe CodingPrompt MasterAI BuilderAI 产品经理Python 入门

AI 应用提效

AI 办公提效AI 数据分析AI 财务AI 内容创作AI 视觉创作前端开发Hermes AgentOpenClaw 本地智能体

大学资源

墨尔本大学昆士兰大学新南威尔士大学悉尼大学莫那什大学阿德莱德大学RMITQUTUTS

少儿 AI 教育

Airbotix 少儿 AI 编程澳洲家长实用资料库NAPLAN 成绩单怎么看My School 学校数据指南悉尼私校学费 2026少儿编程课程与训练营

移民服务

澳洲移民技术移民189/190/491雇主担保482/186/494投资移民188/888英国移民美国移民加拿大移民

企业合作

P3职业孵化器Enterprise (EN)企业培训实习合作招聘合作申请合作

求职代理

岗位代投职位监控LinkedIn代运营LinkedIn人脉代加了解P3项目

匠人支持

FAQsTerms & ConditionsPrivacy PolicyCancellation & Refund PolicySite map

Top Categories

Web全栈班DevOps项目班数据工程全栈班数据分析项目班编程入门班Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au0421-672-555

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2026 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572

首页/资源中心/文章详情
JR Academy · Blog职业洞察

IT干货|前端:8个Javascript小技巧,让你写的代码有腔调,指尖有风

8个Javascript小技巧,让你写的代码有腔调,指尖有风。匠人授予你8大技巧,让你的写法更简单,更酷。技巧包括1 使用 + 字符可以转换成数字,2 清空数组,3 合并数组,4 把Arguments转换成数组,5 复制数组,6 数字转字符串,7在Array中找到最大值和最小值,8 设置默认值 。

发布日期2018-09-27
阅读时长1 分钟
作者Wang Yanbo

好久没有写过Javascript的文章,今天想写一篇关于 Javascript的8个小技巧。这些小技巧可以帮助减少代码量,并帮助你优化代码。写的有腔调,指尖有风。

 

* 如果你想确保你的JavaScript在大多数浏览器和移动设备中都可以工作,那么我从大漠等大神指导,原来可以使用f2etest,也可以使用Endtest,browserstack等

 

1. 使用 + 字符可以转换成数字

 

比如要把一个字符串数字转换成数字,你可能会这样做:

var one = ‘1’;

var two = ‘2’;

 

var numberOne = Number(one); //1

var numberTwo = parseInt(two); //2

 

我要说的这个小技巧是在John Papa那里学到的,通过 + 字符,直接实现了对变量的 数字转换。 

这种方式灰常简单,但前提得是一个数字的字符串,否则就会得到NaN值。

例如下面的代码:

function convertNumber(str){

return +str;

}

 

convertNumber(‘1234’); 

//1234

convertNumber(‘abc’);

//NaN

 

var one = ‘1’;

var numberOne = +one; //1

 

这种写法比较简单,想说为什么这样写,因为比较酷~

 

2 清空数组

有时候清空Array你可能会这样做

 

var list = [1, 2, 3, 4];

list = [ ];

 

但另一个方法可能会更加的高效一些:

你可以这样写:

var list = [1,2,3,4];

list.length = 0;

这样做是因为:

  • list = [ ] ,会将一个新数组的引用分配给变量,而其他任何引用都不受影响。这意味着对前一个数组的内容的引用仍然保留在内存中,导致内存泄漏。

  • list.length = 0, 则直接就删除了Array中的内容

 

3 合并数组

在实际操作中,经常要实现数组的合并,尤其是有时候Component化后,会需要定义许多的Module啊,Component等等,比如Angular, 可能由于项目比较大,而让不同的app声明了不同的数组。那此时可以这样做,使用Array.concat() 或者 [ ].concat()

 

比如

ComponentModule= [‘call-back’,’router’,’nav’]

 

PageModule = [‘home’,’payment’]

 

AppModule = [ ]. concat(ComponentModule,PageModule)

 

然后这个函数并不适合用来合并两个大型的数组,因为其将消耗大量的内存来存储新创建的数组。在这种情况之个,可以使用Array.pus().apply(arr1,arr2)来替代创建一个新数组。这种方法不是用来创建一个新的数组,其只是将第一个第二个数组合并在一起,同时减少内存的使用:

var array1 = [1,2,3]; 

var array2 = [4,5,6]; 

console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

 

4 把Arguments转换成数组

这用到了ES6的特性,把Arguments的数值spread出去

function toArray(…args){

  console.log(args);

}

 

toArray(1,2,3); //[1,2,3]

 

5 复制数组

同样也使用了ES6的特性

var arr=[1,2,3];

//var arr2=Array.from(arr);

var arr2=[...arr];

 

arr.pop();

console.log(arr); //[1,2]

console.log(arr2); //[1,2,3]

 

6 数字转字符串

假设有不确定的变数类型,需要转换成字符串,如果直接使用可能会有错误

 

var one = 1;

var two = 2;

var three = '3';

 

var result = one + two + three;

 // 会得到 "33" 而非 "123"

 

可以使用 concat 来链接字符串,而避免了错误

var one = 1;

var two = 2;

var three = '3';

 

var result = ''.concat(one, two, three); // 得到 "123"

 

7 在Array中找到最大值和最小值

 

有时候,程序员就是有尿性,非要找到最大值和最小值,内建函数有 Math.max() 和 Math.min() 可以找到最大和最小值

Math.max(1, 2, 3, 4); // 4

Math.min(1, 2, 3, 4); // 1

 

如果要在Array中找最大最小值可以这样用

var numbers = [1, 2, 3, 4];

Math.max.apply(null, numbers) // 4

Math.min.apply(null, numbers) // 1

 

通过ES6 的Spread来完成

 

var numbers = [1, 2, 3, 4];

Math.max(...numbers) // 4

Math.min(...numbers) // 1

 

8 设置默认值

 

也许这个小技巧,许多小伙伴在学javascript一段时间就都已经掌握了了。

如果你想必须给一个变量赋默认值,可以这样简单写

var  a;

console.log(a) // undefined

 

a = a || ‘default value’

console.log(a)  // default value

 

a = a || ‘new value’

console.log(a)   // default value

Javascript
作者Wang Yanbo
一键分享或复制链接
Wang Yanbo
Reviewer: Wang Yanbo

Founder of JR Academy

查看该作者的更多文章 →

相关学习资源

  • 前端学习路径
← 上一篇IT趣闻|土澳的逗逼历史,因为一棵树跟朝鲜断交25年下一篇 →IT干货 | 吴恩达带你了解AI世界

相关文章推荐

第一份工作就年薪80k,毫无工作经验的他是怎么做到的?

2019-11-21

如何写一个让面试官满意的 Generator 执行器?

2019-09-05

JS中,如何提高展开运算符的性能

2019-09-04

JavaScript之深入理解闭包

2019-09-04

如何写出一个惊艳面试官的深拷贝?

2019-09-03

【CuteJavaScript】ES2019 新特性汇总

2019-09-03
查看全部文章 →
JR Academy
全球华人学习 AI 第一站
✓15000+ 学员
✓50+ 课程
✓AI 驱动学习平台
训练营免费资源AI学习职业辅导
精选推荐
AI 职业影响地图
测测你的职业风险等级,查看转型路径与学习方向
热门工具
AI & 数据训练营
系统化课程 + 真实项目实战,快速提升竞争力
热门课程
1v1 就业辅导
资深导师一对一指导,简历优化 + 面试准备
就业保障
企业内训定制
AI 技能培训方案,助力团队升级
企业服务
热门标签
Vibe CodingAI 编程CursorClaude求职攻略Prompt前端开发后端开发
订阅更新

获取最新 AI 学习资源、技术教程和求职攻略,直接送达邮箱。

我们尊重您的隐私,不会发送垃圾邮件