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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
优化javascript的执行速度
Jan 23 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 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调用API接口实现天气查询功能的示例
2017/09/21 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
Prototype使用指南之base.js
2007/01/10 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
初中团委工作总结
2015/08/13 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
python数字类型和占位符详情
2022/03/13 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
解决xampp安装后Apache无法启动
2022/03/21 Servers