值得收藏 7 个有用JavaScript技巧

layman 发布于2019-08-23 18:29 / 1943人阅读

摘要：值得收藏个有用技巧像其它语言一样中也可以通过一些技巧来完成一些复杂的操作接下来我们学习吧数组去重数组和布尔有时我们需要过滤数组中值为的值例如你可能不知道这样的技巧是不是很简单只需要传入一个函数即可创建一个空对象有时我们需要创建一个纯净的对象

值得收藏 7 个有用JavaScript技巧

</>复制代码 
像其它语言一样,JavaScript中也可以通过一些技巧来完成一些复杂的操作. 接下来我们学习吧

数组去重

</>复制代码 
    var arr = [1, 2, 3, 3, 4];
    console.log(...new Set(arr))
    >> [1, 2, 3, 4]

数组和布尔

有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false), 你可能不知道这样的技巧

</>复制代码 
 var myArray = [1, 0 , undefined, null, false];
 myArray.filter(Boolean);
 >> [1]

是不是很简单, 只需要传入一个 Boolean 函数即可.

创建一个空对象

有时我们需要创建一个纯净的对象, 不包含什么原型链等等. 一般创建空对象最直接方式通过字面量 {}, 但这个对象中依然存在 __proto__ 属性来指向 Object.prototype 等等.

</>复制代码 
    let dict = Object.create(null);
    dict.__proto__ === "undefined"

合并对象

在JavaScript中合并多个对象的需求一直存在, 比如在传参时需要把表单参数和分页参数进行合并后在传递给后端

</>复制代码 
    const page = {
        current: 1,
        pageSize: 10
    }
    const form = {
        name: "",
        sex: ""
    }
    const params = {...form, ...page};
    /*
        {
            name: "",
            sex: "",
            current: 1,
            pageSize: 10
        }
    *

利用ES6提供的扩展运算符让对象合并变得很简单.

函数参数必须

ES6中可以给参数指定默认值,确实带来很多便利. 如果需要检测某些参数是必传时,可以这么做

</>复制代码 
    const isRequired = () => { throw new Error("param is required"); };
    const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
    // 这里将抛出一个错误,因为名字时必须
    hello();
    // 这也将抛出一个错误
    hello(undefined);
    // 正常
    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;

获取查询参数

多年来，我们编写粗糙的正则表达式来获取查询字符串值，但那些日子已经一去不复返了; 现在我们可以通过 URLSearchParams API 来获取查询参数

在不使用 URLSearchParams 我们通过正则的方式来完成获取查询参数的, 如下:

</>复制代码 
  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    return r ? r[2] : null;
  }

使用 URLSearchParams 之后:

</>复制代码 
    // 假设地址栏中查询参数是这样 "?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"

相比之前使用起来更加容易了.

云服务器 GPU云服务器值得收藏 cn域名值得收藏吗买个云服务器有用吗 JAVASCRIPT技巧

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

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

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

Jonathan Shieber 2019-08-29 12:33 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

SHERlocked93 2019-08-22 11:04 评论0 收藏0
JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0