分享5个JavaScript的写法小技巧

目录
  • 前言
  • 过滤空值
  • 数组对象解构
  • 分隔数字
  • 箭头函数直接返回对象
  • await 链条
  • 总结

前言

JavaScript 易上手，但是难以全面掌握；它有许多“怪癖”，只有在长时间的使用它，才能逐渐揭开它神秘的面纱~

本篇带来 JavaScript 几个片段代码，里面有些小技巧，肯定有你不知道~ 冲！

过滤空值

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

使用 filter() 过滤 “空” 值，如 null、undefined 或空字符串，可以使用 .filter(Boolean) 的缩写方法；

它将所有空值转为 false 并从列表中删除它们，优雅！

const groceries = ['apple', null, 'milk', undefined, 'bread', ''];
const cleanList = groceries.filter(Boolean);
console.log(cleanList);
// 'apple', 'milk', 'bread';

数组对象解构

我们经常使用 ES6 的解构，对于一个数组，每项都是一个对象，如果想获得数组第一项的对象的某个值，可以这样写；

const people = [
  {
    name: "Lisa",
    age: 20,
  },
  {
    name: "Pete",
    age: 22,
  },
  {
    name: "Caroline",
    age: 60,
  }
];

const [{age}] = people;
console.log(age);
// 20

也可以采用逗号占位的方式指定一个项进行赋值；

const people = [
  {
    name: "Lisa",
    age: 20,
  },
  {
    name: "Pete",
    age: 22,
  },
  {
    name: "Caroline",
    age: 60,
  }
];

const [, , caroline] = people;
console.log(caroline);
//  {
//     name: "Caroline",
//     age: 60,
//   }

当然，也有常见的对象解构赋值；

const caroline = {
  firstNm: 'Caroline',
  ag: 27,
};

const {firstNm: firstName, ag: age } = caroline;
console.log(firstName, age);
// Caroline, 27

分隔数字

对大数字使用分隔符号，将极大的提高可读性；这是 ES12 的新特性；

const bigNumber = 1_000_000;
console.log(bigNumber);
// 1000000

箭头函数直接返回对象

使用箭头函数返回一个对象，为了和函数的 { 区分开来，在外层包一层 ( 即可解决；

const createPerson = (age, name, nationality) => ({
  age,
  name,
  nationality,
});

const caroline = createPerson(27, 'Caroline', 'US');

console.log(caroline);

// {
//   age: 27,
//   name: 'Caroline'
//   nationality: 'US',
// }

await 链条

我们可以用 filter 和 map 方法接在 await 方法后形成链条过滤或映射处理获取的数据；

const chainDirectly = (await fetch('https://www.people.com'))
  .filter(person => age > 20)
  .filter(person => nationality === 'NL')

总结

到此这篇关于JavaScript写法小技巧的文章就介绍到这了,更多相关JavaScript写法小技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 史上最全JavaScript常用的简写技巧（推荐）

    JavaScript 是属于网络的脚本语言!被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用.同时很容易使用,所以越来越多的开发者选择js代码来实现自己想要的效果,但开发过程中,为了更高的效率和良好的代码规范要求,我们不得不知晓js一些常用的简写技巧,如下我帮大家整理了下,一起进来看看吧~ 1. 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如: const x = 20; let answer; if (x

  • Javascript字符串拼接小技巧(推荐)

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items = '<li class="details">' + '<span>Hello world</span>' + '</li>'; 利用反斜线拼接字符串 var items = '<li class=

  • JavaScript截取、切割字符串的技巧

    对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png"; arr=str.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif&q

  • 最佳JS代码编写的14条技巧

    写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的,下面是来自Javascript Toolbox发布的14条最佳JS代码编写技巧. 1. 总是使用 var 在javascript中,变量不是全局范围的就是函数范围的,使用var关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置var关键词,下面的例子将强调不这样做潜在的问题. 不使用 Var 造成的问题 var i=0; // This is good - crea

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • JavaScript中的alert()函数使用技巧详解

    在JavaScript代码中,可以使用window对象的alert()函数来显示一段文本,从而进行程序的调试,或者向用户警示相关信息: 复制代码 代码如下: //Use window object's alert() function window.alert("sample text"); 这一写法可以简化为直接使用alert()函数: 复制代码 代码如下: //Simplified alert() usage alert("sample text"); 如果需要

  • 五段实用的js高级技巧

    技巧一之setTimeout. 应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInterval,技巧一就是克服这个问题 复制代码 代码如下: (function () { var i = 0; function job() { console.log(i++); if (i < 10) { setTimeout(job, 1000); } } job(); })(); 上面这个job函数就只会乖乖的执行10次.然后自动停止 技巧二之高效的fo

  • 分享5个JavaScript的写法小技巧

    分享5个JavaScript的写法小技巧

    目录 前言 过滤空值 数组对象解构 分隔数字 箭头函数直接返回对象 await 链条 总结 前言 JavaScript 易上手,但是难以全面掌握:它有许多“怪癖”,只有在长时间的使用它,才能逐渐揭开它神秘的面纱~ 本篇带来 JavaScript 几个片段代码,里面有些小技巧,肯定有你不知道~ 冲! 过滤空值 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 注意: filter() 不会对空数组进行检测. 注意: filter() 不会改变原始数组.

  • JavaScript的一些小技巧分享

    数组去重 ES6提供了几种简洁的数组去重的方法,但该方法并不适合处理非基本类型的数组.对于基本类型的数组去重,可以使用... new Set()来过滤掉数组中重复的值,创建一个只有唯一值的新数组. const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); > Result:(4) [1, 2, 3, 5] 这是ES6中的新特性,在ES6之前,要实现同

  • JavaScript必看小技巧(必看)

    在这篇文章中将给大家分享有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: functio

  • javascript json对象小技巧之键名作为变量用法分析

    本文实例讲述了javascript json对象小技巧之键名作为变量用法.分享给大家供大家参考,具体如下: 有时候在项目开发过程中,我们需要json对象的键名作为一个变量,键名可变,传统的json格式不支持这个,怎么办呢? 传统的json数据格式 <script type="text/javascript"> var json={ name : "谭勇" } console.log(json.name); </script> 这样是没有问题的

  • 9个JavaScript日常开发小技巧

    1.生成指定范围的数字 在某些情况下,我们会创建一个处在两个数之间的数组.假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法 let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000] // 还有这种方式,但对于很的范围就不太稳定 Array.from({ length: end - start + 1 }, (_, i

  • 分享几个JavaScript运算符的使用技巧

    ECMAScript发展进程中,会有很多功能的更新,比如销毁,箭头功能,模块,它们极大的改变JavaScript编写方式,可能有些人喜欢,有些人不喜欢,但像每个新功能一样,我们最终会习惯它们.新版本的ECMAScript引入了三个新的逻辑赋值运算符:空运算符,AND和OR运算符,这些运算符的出现,也是希望让我们的代码更干净简洁,下面分享几个优雅的JavaScript运算符使用技巧 一.可选链接运算符[?.] 可选链接运算符(Optional Chaining Operator) 处于ES2020

  • 分享常用的3个C++小技巧

    目录 1.头文件是引用<iostream.h>还是<iostream>? 2.逗号分割表达式 3.在main函数之前运行代码 1.头文件是引用<iostream.h>还是<iostream>? 编码中依旧有程序员依旧使用<iostream.h>而不是<iostream>库.实际上,这两个库是有区别的: 首先针对用.h作为标准头文件已经明确不推荐使用. 其次,在功能方面,<iostream>包括IO类,且同时支持窄字符和宽字

  • 分享一些非常实用的Python小技巧

    目录 1.唯一性 2.变位词(相同字母异序词) 3.内存 4.字节大小 5.打印N次字符串 6.首字母大写 7.列表细分 8.压缩 9.计数 10.链式比较 11.逗号分隔 12.元音计数 13.首字母小写 14.展开列表 15.寻找差异 16.输出差异 17.链式函数调用 18. 19.将两个列表转换为字库 20.出现频率最高的元素 21.回文(正反读有一样的字符串) 22.不用if-else语句的计算器 23.随机排序 24.展开列表 1.唯一性 以下方法可以检查给定列表是否有重复的地方,可

  • JavaScript实用代码小技巧

    在上次的 "Chrome DevTools 你可能不知道的小技巧" 文中,得到很多开发朋友的反馈确实不知道这些小技巧.今天,我们来聊一聊在 EcmaScript5/6+ 中的一些小技巧,欢迎评论区讨论下更多技巧. JSON.stringify 我们平时经常会用到JSON 对象,比如当我们要实现对象的深拷贝时,我们可以用JSON 对象的JSON.stringify和JSON.parse 来拷贝一个完全一样的对象,而不会对原对象产生任何引用关系.在使用localStorage 时,也会用到

随机推荐