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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
不安全的常用的js写法
Sep 15 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
json数据的列循环示例
Sep 06 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
十天学会php之第五天
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
菜单效果
2006/10/14 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Python 通过pip安装Django详细介绍
2017/04/28 Python
python批量赋值操作实例
2018/10/22 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
管理站站长岗位职责
2013/11/27 职场文书
学术会议邀请函范文
2014/01/22 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
市场营销工作计划书
2014/05/06 职场文书
教师个人自我评价
2015/03/04 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
深入理解Pytorch微调torchvision模型
2021/11/11 Python