7个javascript实用小技巧

tinysun1234 发布于2019-08-23 16:59 / 3127人阅读

摘要：每种编程语言都有一些黑魔法或者说小技巧，也不例外，大部分是借助或者浏览器新特性实现。下面介绍的个实用小技巧，相信其中有些你一定用过。当然不管语言如何变化，我们总能在编程中总结一些小技巧来精简代码。

每种编程语言都有一些“黑魔法”或者说小技巧，JS也不例外，大部分是借助ES6或者浏览器新特性实现。下面介绍的7个实用小技巧，相信其中有些你一定用过。

数组去重

const j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

数组清洗

洗掉数组中一些无用的值，如 0, undefined, null, false 等

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

创建空对象

我们可以使用对象字面量{}来创建空对象，但这样创建的对象有隐式原型__proto__和一些对象方法比如常见的hasOwnProperty，下面这个方法可以创建一个纯对象。

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

该方法创建的对象没有任何的属性及方法

合并对象

JS中我们经常会有合并对象的需求，比如常见的给用传入配置覆盖默认配置，通过ES6扩展运算符就能快速实现。

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",
}
*/

设置函数必传参数

借助ES6支持的默认参数特性，我们可以将默认参数设置为一个执行抛出异常代码函数返回的值，这样当我们没有传参时就会抛出异常终止后面的代码运行。

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");

解构别名

ES6中我们经常会使用对象结构获取其中的属性，但有时候会想重命名属性名，以避免和作用域中存在的变量名冲突，这时候可以为解构属性名添加别名。

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as as { otherName }
const { x: otherName } = obj;

获取查询字符串参数

以前获取URL中的字符串参数我们需要通过函数写正则匹配，现在通过URLSearchParamsAPI即可实现。

// 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的不断发展，很多语言层面上的不良特性都在逐渐移除或者改进，如今的一行ES6代码可能等于当年的几行代码。

拥抱JS的这些新变化意味着前端开发效率的不断提升，以及良好的编码体验。当然不管语言如何变化，我们总能在编程中总结一些小技巧来精简代码。

本文首发于公众号「前端新视界」，如果你也有一些Javascript的小技巧，欢迎在下方留言，和大家一起分享哦！

云服务器 GPU云服务器实用技巧 PHP实用技巧 js实用技巧 javascript实用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103640.html

七个 JavaScript 实用小技巧

摘要：接下来先介绍七个马上就能用起来的小技巧。老实讲，文章所说的小技巧大部分都是新增的语法特性，，或者说已经发布好些年头，这些特性大家可能已经非常熟识。，对象合并，不多说，大部分场景可以取代。作者：@davidwalshblog原文：7 Useful JavaScript Tricks 和许多其他语言一样，JavaScript 也需要靠很多小技巧去完成各种不同的事情。有的可能早已经广为人...

Lin_YT 2019-08-23 17:16 评论0 收藏0
实用Javascript调试技巧分享

摘要：见过太多同学调试只会用简单的甚至，看着真为他们捉鸡。。下面我就分享一些实用且聪明的调试技巧，希望能让大家调试自己代码的时候更加从容自信。其实提供了文件的搜索功能，只不过大部分时候我们给忽略了。。见过太多同学调试Javascript只会用简单的console.log甚至alert，看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码，却忽略了如何优雅而高效地调试代码，不得不说是有点...

jk_v1 2019-08-23 18:06 评论0 收藏0
12个非常实用的JavaScript小技巧

摘要：如果第一个参数返回的值为，那么第二个值将会认为是一个默认值。获取数组中最后一个元素用来获取和之间的数组元素。但这个对象不具有数组的函数功能，比如等。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的...

jsbintask 2019-08-20 18:37 评论0 收藏0
45个实用的JavaScript小贴士、小技巧和最佳实践

摘要：翻译正文第一次声明变量时，请不要忘记使用关键字声明使用代替空字符串转成布尔值都为每行代码的末尾最好都加上个分号最好给对象都添加上构造函数在使用和尽量小心。翻译介绍翻译标题：45 Useful JavaScript Tips, Tricks and Best Practices 翻译来源：http://modernweb.com/2013/12/23/45-useful-java...

Moxmi 2019-08-14 11:56 评论0 收藏0
ES6 javascript 实用开发技巧

摘要：实用开发技巧本文只罗列出在开发过程中相对实用的内容，并非一个高大全的文档，如果希望查阅详细的内容，可购买阮一峰老师所出版的相关图书。 Javascript - ES6 javascript 实用开发技巧本文只罗列出在 ES6 开发过程中相对实用的内容，并非一个高大全的文档，如果希望查阅详细的内容，可购买阮一峰老师所出版的 ES6 相关图书。另外阮一峰老师《ECMAScript 6 入...

DobbyKim 2019-08-26 11:53 评论0 收藏0