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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 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使用mkdir创建多级目录入门例子
2014/05/10 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
如何基于python生成list的所有的子集
2019/11/11 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python开发前景如何
2020/06/11 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
校庆筹备方案
2014/03/30 职场文书
汽车专业求职信
2014/06/05 职场文书
运动会广播稿200字
2014/10/18 职场文书
西游记读书笔记
2015/06/25 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS