3个有用的JavaScript技巧

1.数组去重

使用ES6全新的数据结构即可简单实现。

let j = [...new Set([1, 2, 3, 3])]
输出: [1, 2, 3]

2.数组和布尔值

当数组需要快速过滤掉一些为false的值(0,undefined,false等)时,一般是这样写:

myArray.map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(item => item);

可以使用Boolean更简洁地实现:

myArray.map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);
//例如:

console.log([1,0,null].filter(Boolean));
//输出:[1]

3.合并对象

合并多个对象这个使用展开运算符(...)即可简单实现。

const person = { name: ‘David Walsh‘, gender: ‘Male‘ };
const tools = { computer: ‘Mac‘, editor: ‘Atom‘ };
const attributes = { handsomeness: ‘Extreme‘, hair: ‘Brown‘, eyes: ‘Blue‘ };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

原文地址:https://www.cnblogs.com/jiazhi88/p/12362691.html

时间: 2024-10-16 17:28:14

3个有用的JavaScript技巧的相关文章

超有用的JavaScript技巧,窍门和最佳实践

超有用的JavaScript技巧,窍门和最佳实践 1. 首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 //

12个非常有用的javascript技巧,必看!

提示:该文章是整理别人别人的文章,作者比较多,很难分辨原创作者是谁. 1)使用!!将变量转换成布尔类型 有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将他们的值视为true.对于这样的检查,你可以使用!!(双重否定运算符),他能自动将任何类型的数据转化为布尔值,只有0.null."".undefined或NaN才会返回false,其他的都会返回true.看一个简单的例子: function Account(cash){ this.cash = cash; this.ha

45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧,技巧和最佳实践)

As you know, JavaScript is the number one programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has many other implementations. It’s also the

45种Javascript技巧大全

原文:45 Useful JavaScript Tips, Tricks and Best Practices 译文:45个有用的JavaScript技巧,窍门和最佳实践 译者:dwqs 在这篇文章中,我将分享一些JavaScript常用的技巧,窍门和最佳实践.不管JavaScript开发者是使用在浏览器/引擎上或者服务器端(SSJS--Service Side JavaScript)JavaScript解释器上,这些他们都是应该知晓的. 需要注意的是,文章中的代码片段均是在最新的Google

85种网站常用JavaScript技巧

40+45种网站常用Javascript技巧转载自网络,地址不详. 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3.

冷门却使用的 javascript 技巧

前端已经被玩儿坏了!像用近似乱码的 javascript 拼一个图形,而且可以正常运行等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以jav

12个JavaScript技巧【转】

使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: 1 2 3 4 5 6 7 8 9 10 11 function Account(cash) { this.cash = cash;

12个JavaScript技巧

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

21个值得收藏的Javascript技巧

在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率. 1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: 1 2 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); 输出:a