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 相关文章推荐
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
jQuery手风琴的简单制作
May 12 jQuery
angular directive的简单使用总结
May 24 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
简化版的vue-router实现思路详解
Oct 19 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面向对象编程快速入门
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
百度地图API使用方法详解
2015/08/25 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
Javascript的this详解
2019/03/23 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python装饰器使用实例详解
2019/12/14 Python
python Scrapy框架原理解析
2021/01/04 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
劳动工资科岗位职责范本
2014/03/02 职场文书
助理政工师申报材料
2014/06/03 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
国家助学金感谢信
2015/01/21 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android