当前位置: 首页 > news >正文

JavaScript技术干货第二弹,有需自取!

JavaScript作为最常用的前端开发语言,一直以来的发展都不错,也是作为后端Java的必学技能,所以一名优秀的Java开发人员是可以从事前端方面的工作,并且能与后端达成更加友好的团队合作效果,提升工作效率。目前企业也在倾向于选择后端人员兼任前端工作,提升后端的待遇,也为公司缩减人工成本,投入到企业领域。

如果你想提升你的JavaScript技能,成为更好的开发人员,那么可以继续看下去,分享几个代码技巧,大家一起学习,共同进步!

1、用数据即时创建和填充数组

1.// nooby

2.const array = new Array(3);

3.for(let i=0; i < array.length; i++){

4.    array[i] = i;

5.}

6.

7.

8.console.log(array)  // [ 0, 1, 2 ]

9.

10.

11.// pro

12.const filledArray = new Array(3).fill(null).map((_, i)=> (i));

13.console.log(filledArray)  // [ 0, 1, 2 ]

2、轻松地将对象转换为数组

您可以使用展开运算符将数组转换为对象。

1.// nooby

2.let arr = ["v1", "v2", "v3"];

3.let objFromArray = {};

4.

5.

6.for (let i = 0; i < arr.length; ++i) {

7.    if (arr[i] !== undefined) {

8.        objFromArray[i] = arr[i];

9.    }

10.}

11.

12.

13.// { '0': 'v1', '1': 'v2', '2': 'v3' }

14.console.log(objFromArray)

15.

16.

17.// pro

18.let objFromArrayPro = {...arr};

19.

20.

21.// { '0': 'v1', '1': 'v2', '2': 'v3' }

22.console.log(objFromArrayPro)

3、创建并填充指定大小的数组

您可以使用带有两个参数的 Array() 构造函数来创建和填充指定大小和值的数组:大小和值,或者对空数组使用 Array.fill() 方法。

1.// nooby

2.const size = 5;

3.const defaultValue = 0;

4.const arr = []

5.for(let i = 0; i < size; i++){

6.    arr.push(defaultValue)

7.}

8.console.log(arr);

9.

10.

11.// pro

12.const size = 5;

13.const defaultValue = 0;

14.const arr = Array(size).fill(defaultValue);

15.console.log(arr); // [0, 0, 0, 0, 0]

4、用更好的参数改进函数

不要使用单个多个参数,而是使用参数对象。在函数定义中解构它以获得所需的属性。

1.// nooby

2.function upload(user, resourceId, auth, files) {}

3.

4.

5.upload(...); // need to remember the order

6.

7.

8.// pro

9.function upload(

10.    { user, resourceId, auth, files } = {}

11.) {}

12.

13.

14.const uploadObj = {

15.    user: 'me',

16.    resourceId: uuid(),

17.    auth: 'token',

18.    files: []

19.}

20.

21.

22.upload(uploadObj);

5Null 和 Undefined 在 JavaScript 中是不同的

Null 和 undefined 是两个不同的值,表示没有值。

  • null => 是的,这是一个值。Undefined 不是
  • 将 null 想象成在一个空盒子前面
  • 把 undefined 想象成在没有盒子的前面

1.const fnExpression = (s = 'default stringy') => console.log(s);

2.

3.

4.fnExpression(undefined); // default stringy

5.fnExpression(); // default stringy

6.

7.

8.fnExpression(null); // null

以上是今天分享的JavaScript技能小技巧,代码可以直接用哦。如果想就学习更多开发技能,可以持续关注我们!

 

 

相关文章:

  • 华为OD机试用java实现 -【关联子串】
  • 走过最长的路是ChatGPT的套路,信过最真的话是Adobe的Firefly
  • 基于蓄电池进行调峰和频率调节研究【超线性增益的联合优化】(Matlab代码实现)
  • 华为OD机试用Python实现 -【打折买水果】
  • 深入浅出 Fast DDS网络协议(入门篇)
  • 【简陋Web应用2】人脸检测——基于Flask和PaddleHub
  • 基于springboot实现数码论坛系统设计与实现演示【附项目源码+论文说明】
  • 深入理解NLP中的文本匹配任务
  • 关于uview2.0计步器最大值赋值问题
  • Spring cloud 限流的多种方式
  • 面试时被问:为什么裁员只裁你,不裁别人,该怎么回答?
  • openEuler21.10部署nextcloud15,mariadb版本5.5.68,php版本7.0.33
  • 用户界面图形和各种插图网站 UI Graphics
  • 五分钟学会Nacos
  • 从零开始的AI绘画:MidJourney带你掌握AI绘画的基础和高级技巧
  • 《剑指offer》分解让复杂问题更简单
  • 2017-08-04 前端日报
  • angular2开源库收集
  • DataBase in Android
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • gitlab-ci配置详解(一)
  • happypack两次报错的问题
  • Java Agent 学习笔记
  • Java 内存分配及垃圾回收机制初探
  • JS+CSS实现数字滚动
  • JSDuck 与 AngularJS 融合技巧
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • Odoo domain写法及运用
  • Python学习之路13-记分
  • React-Native - 收藏集 - 掘金
  • Vue.js源码(2):初探List Rendering
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • VuePress 静态网站生成
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 基于Javascript, Springboot的管理系统报表查询页面代码设计
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 推荐一个React的管理后台框架
  • 硬币翻转问题,区间操作
  • AI算硅基生命吗,为什么?
  • 湖北分布式智能数据采集方法有哪些?
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (附表设计)不是我吹!超级全面的权限系统设计方案面世了
  • (一一四)第九章编程练习
  • .[hudsonL@cock.li].mkp勒索加密数据库完美恢复---惜分飞
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET 读取 JSON格式的数据
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .NET国产化改造探索(三)、银河麒麟安装.NET 8环境
  • @test注解_Spring 自定义注解你了解过吗?
  • [ C++ ] STL---仿函数与priority_queue