7个好用的JavaScript技巧分享(译)


Posted in Javascript onMay 07, 2019

前言

就像所有其他编程语言一样,JavaScript也有许多技巧可以完成简单和困难的任务。 一些技巧广为人知,而其他技巧则足以让你大吃一惊。 让我们来看看你今天就可以开始使用的七个JavaScript技巧吧!

原文链接:davidwalsh.name/javascript-…

数组去重

数组去重可能比您想象的更容易:

var j = [...new Set([1, 2, 3, 4, 4])]
>> [1, 2, 3, 4]

很简单有木有!

过滤掉falsy值

是否需要从数组中过滤出falsy值(0,undefined,null,false等)? 你可能不知道还有这个技巧:

let res = [1,2,3,4,0,undefined,null,false,''].filter(Boolean);
>> 1,2,3,4

创建空对象

您可以使用{ }创建一个看似空的对象,但该对象仍然具有__proto__和通常的hasOwnProperty以及其他对象方法。 但是,有一种方法可以创建一个纯粹的“字典”对象:

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

这种方式创建的对象就很纯粹,没有任何属性和对象,非常干净。

合并对象

在JavaScript中合并多个对象的需求已经存在,尤其是当我们开始使用选项创建类和小部件时:

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",
}
*/

这三个点(...)使任务变得更加容易!

Require函数参数

能够为函数参数设置默认值是JavaScript的一个很棒的补充,但是请查看这个技巧,要求为给定的参数传递值:

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

解构添加别名

解构是JavaScript的一个非常受欢迎的补充,但有时我们更喜欢用其他名称来引用这些属性,所以我们可以利用别名:

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

有助于避免与现有变量的命名冲突!

获取查询字符串参数

获取url里面的参数值或者追加查询字符串,在这之前,我们一般通过正则表达式来获取查询字符串值,然而现在有一个新的api,具体详情可以查看这里,可以让我们以很简单的方式去处理url。

比如现在我们有这样一个url,"?post=1234&action=edit",我们可以利用下面的技巧来处理这个url。

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

比我们过去用的容易多了!

多年来JavaScript已经发生了很大的变化,但是我最喜欢的JavaScript部分是我们所看到的语言改进的速度。 尽管JavaScript的动态不断变化,我们仍然需要采用一些不错的技巧; 将这些技巧保存在工具箱中,以便在需要时使用!

那你最喜欢的JavaScript技巧是什么?

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 #Javascript
vue搜索和vue模糊搜索代码实例
May 07 #Javascript
详解Vue demo实现商品列表的展示
May 07 #Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 #Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 #Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 #Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 #Javascript
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
python调用fortran模块
2016/04/08 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python数字类型math库原理解析
2020/03/02 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
java字符串格式化输出实例讲解
2021/01/06 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
教师实习自我鉴定
2013/12/11 职场文书
社团活动总结模板
2014/06/30 职场文书
授权委托书
2014/07/31 职场文书
公司外出活动方案
2014/08/14 职场文书
全国助残日活动总结
2015/05/11 职场文书
微信搭讪开场白
2015/05/28 职场文书
升学宴家长答谢词
2015/09/29 职场文书
护士医德医风心得体会
2016/01/25 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers