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 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
js自制图片放大镜功能
Jan 24 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
微信小程序实现获取用户信息并存入数据库操作示例
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 表单数据的获取代码
2009/03/10 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php加密解密字符串示例
2016/10/13 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Vue多系统切换实现方案
2018/06/05 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
安全大检查反思材料
2014/01/31 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js