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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
javascript实现2048游戏示例
May 04 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
函授本科自我鉴定
2014/02/04 职场文书
店长职务说明书
2014/02/04 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
《将心比心》教学反思
2014/04/08 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
委托证明范本
2014/11/25 职场文书
大学生年度个人总结
2015/02/15 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Redis IP地址的绑定的实现
2021/05/08 Redis
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android