es6中比较有用的7个技巧小结

  • 更新时间:2022-10-27 09:33:30
  • 编辑:邴志学

前言

ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用。

如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来。

es6有用的7个技巧

数组去重

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"

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对码农之家的支持。

相关教程

  • 实例分析JavaScript实现的拼图算法

    这篇文章主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下

    发布时间:2020-02-21

  • javascript的this关键字知识点总结

    这篇文章主要介绍了javascript的this关键字的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2020-03-12

  • 分享JavaScript 获取元素在父节点中的下标技巧

    jQuery中直接通过$(this).index()即可得到当前元素的下标。下面通过实例给大家介绍JavaScript 获取元素在父节点中的下标,需要的朋友参考下吧

    发布时间:2020-02-12

  • 实例解析JavaScript中BOM对象原理与用法

    这篇文章主要介绍了JavaScript中BOM对象原理与用法,,结合实例形式分析了javascript中BOM浏览器对象模型相关概念、原理、用法及相关操作注意事项,需要的朋友可以参考下

    发布时间:2020-02-04

  • 实现JavaScript的组成:BOM和DOM详解

    下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧

    发布时间:2021-05-30

  • jQuery中read和JavaScript中的onload函数的区别总结

    这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下

    发布时间:2019-11-12

  • JavaScript动态检测密码强度原理及实现方法示例效果

    这篇文章主要介绍了JavaScript动态检测密码强度原理及实现方法,结合具体实例形式详细分析了javascript针对输入字符串密码强度检测的原理与相关判断操作技巧,需要的朋友可以参考下

    发布时间:2020-02-04

用户留言