美文网首页
ES6 7个比较有用的技巧

ES6 7个比较有用的技巧

作者: YollyTo | 来源:发表于2019-08-12 17:13 被阅读0次

数组去重

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"

相关文章

  • ES6 7个比较有用的技巧

    数组去重 数组和布尔 有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null,...

  • 2018-03-31

    关于 ECMAScript 2015(ES6)的一些有用的提示和技巧 以UPX漏洞为例介绍整数溢出(基础篇)

  • (ES6)有用的提示与技巧

    EcmaScript 2015(ES6)已经出来好几年了,可以巧妙地使用各种新功能。列出并讨论其中一些,你会发现它...

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • 如何选择合适的招生技巧(艾叡)

    很多幼儿园园长以及投资人都在搜索关于各种招生 技巧,但是哪一些招生技巧是比较有用的,哪一些是比较没有的招生技巧。其...

  • ES6重要吗?为什么要学习ES6?

    ES6 的全称 ECMAScript 1. ES6 使用频率比较高的特性 2. 学习 ES6 的步骤 3. 对比 ...

  • 如何调试tweak开发过程中遇到的内存问题

    在我们平常使用MobileSubstrate tweak的过程中内存问题一般比较难以调试。本文讲介绍一些有用的技巧...

  • 最容易被忽视的写作技巧

    最近一直在学习写作,除了坚持每天练笔,还一直在学习写作的技巧。 学习写作的技巧有用吗?当然有用。 但是再好的技巧也...

  • ES6 实用开发技巧

    Javascript - ES6 实用开发技巧 本文只罗列出在 ES6 开发过程中相对实用的内容,并非一个高大全的...

  • 编写更优雅的 JavaScript 代码

    代码技巧 优先 ES6 新特性写法 熟练使用 ES6 新特性可以优化代码,更加简洁,代码对比 优化逻辑判断语句 大...

网友评论

      本文标题:ES6 7个比较有用的技巧

      本文链接:https://www.haomeiwen.com/subject/ytaujctx.html