es6 7个比较有用的技巧

junbaor 发布于2019-08-23 18:37 / 2542人阅读

摘要：数组去重数组和布尔有时我们需要过滤数组中值为的值例如你可能不知道这样的技巧是不是很简单只需要传入一个函数即可创建一个空对象有时我们需要创建一个纯净的对象不包含什么原型链等等一般创建空对象最直接方式通过字面量但这个对象中依然存在属性来指向等等

数组去重

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云服务器深度学习的7个有效买个云服务器有用吗数据可视化7个数据类型最有用的算法

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

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

es6 7个比较有用的技巧

摘要：数组去重数组和布尔有时我们需要过滤数组中值为的值例如你可能不知道这样的技巧是不是很简单只需要传入一个函数即可创建一个空对象有时我们需要创建一个纯净的对象不包含什么原型链等等一般创建空对象最直接方式通过字面量但这个对象中依然存在属性来指向等等数组去重 var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) >> [1, 2, 3,...

Apollo 2019-08-02 15:31 评论0 收藏0
值得收藏 7 个有用JavaScript技巧

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

layman 2019-08-23 18:29 评论0 收藏0
8个有用的JS技巧

摘要：不幸的是，它们不能很好地处理非基本类型的数组。还可以接受第二个参数，作用类似于数组的方法，用来对每个元素进行处理，将处理后的值放入返回的数组。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！这些技巧可能大家大部分都用过了，如果用过就当作加深点映像，如果没有遇到过，就当作学会了几个技巧。 1. 确保数组值使用 grid ...

printempw 2019-08-23 18:26 评论0 收藏0
让你的代码更简短，更整洁，更易读的ES6小技巧

摘要：让你的代码更简短，更整洁，更易读的小技巧写在文章前面这篇文章翻译自文章就代码整洁方面对进行了总结。如果你正在使用的代码使用的语法，这个是你需要注意的事情。更多还提供了我们很多很多其他的方式来使我们的代码更简洁，更易读，以及更稳定。让你的代码更简短，更整洁，更易读的ES6小技巧写在文章前面这篇文章翻译自ES6 tips and tricks to make your code cl...

wpw 2019-08-26 11:42 评论0 收藏0
七个 JavaScript 实用小技巧

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

Lin_YT 2019-08-23 17:16 评论0 收藏0