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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
Javascript中的delete介绍
Sep 02 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
Javascript进制转换实例分析
May 14 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
微信小程序用户登录和登录态维护的实现
Dec 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python实现PID算法及测试的例子
2019/08/08 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
如何通过python计算圆周率PI
2020/11/11 Python
python接口自动化框架实战
2020/12/23 Python
团支书的期末学习总结自我评价
2013/11/01 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
美食节策划方案
2014/05/26 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
求职自我推荐信
2015/03/24 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
Python turtle实现贪吃蛇游戏
2021/06/18 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏