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

前言

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"

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

总结

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

赞 (0)

相关推荐

  • 不得不知的ES6小技巧

    如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来. 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值.这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误. const required = () => {throw new Error('Missing parameter')}; const add = (

  • 浅谈让你的代码更简短，更整洁，更易读的ES6小技巧

    写在文章前面 这篇文章翻译自ES6 tips and tricks to make your code cleaner, shorter, and easier to read!. 文章就代码整洁方面对es6进行了总结.如有错误欢迎指出. template literals 模板字符串 模板字符串使字符串的使用变得比以前更简单了,他们以反引号开始(`),并且能过使用${变量}来插入变量.我们来比较一下下面两行代码. var fName = 'Peter', sName = 'Smith', ag

  • JavaScript ES6中的简写语法总结与使用技巧

    ES6为一些已有的功能提供了非破坏性更新,这类更新中的大部分我们可以理解为语法糖,称之为语法糖,意味着,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些.本章我们将着重讨论这些语法糖,看完之后,可能你会对一些你很熟悉的ES6新语法有不一样的理解. JavaScript ES6对象字面量 对象字面量是指以{}形式直接表示的对象,比如下面这样: var book = { title: 'Modular ES6', author: 'Nicolas', publisher: 'O´Reil

  • 分享ES6的7个实用技巧

    Hack #1 交换元素 利用 数组解构来实现值的互换 let a = 'world', b = 'hello' [a, b] = [b, a] console.log(a) // -> hello console.log(b) // -> world Hack #2 调试 我们经常使用 console.log()来进行调试,试试 console.table()也无妨. const a = 5, b = 6, c = 7 console.log({ a, b, c }); console.ta

  • ES6小技巧之代替lodash

    Javascript ES6标准实行后,Lodash或者Ramada中的一些功能我们就不需要了,可以使用ES6的语法来实现 获取Object中指定键值 我们现在可以使用解包的方法快速获取对象中指定键值的值 const obj = { a:1, b:2, c:3, d:4 }; // 获取obj中a与b的值 const {a,b} = obj; // 也可以给他们取别名 const {a:A, b:B} = obj; 这个小技巧非常的方便,也是最基础的使用方法 排除Object中不需要的键值 既然

  • 你点的 ES6一些小技巧,请查收

    ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中.我想要列下其中一些,希望它们对你有用. 如果你还知道其他一些小技巧,欢迎留言.我很高兴把它们补充进来. 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值.这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误. const required = () =>

  • ES6/JavaScript使用技巧分享

    在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走.本文将一些都知道却不怎么用的小技巧分享给大家 一些小技巧 1.new Set() 数组的去重,在'潜意识'里面感觉就应该去循环然后对比去重,其实在ES6中新增提供了新的数据结构Set,用他可以轻松去重数组,比如: let arr = [1,1, 2, 2, 3, 3]; let set = new Set(arr); // let newArr = Array.from(

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

    前言 ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中.我想要列下其中一些,希望它们对你有用. 如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来. es6有用的7个技巧 数组去重 var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) >> [1, 2, 3, 4] 数组和布尔 有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false), 你可能不知道这样的技巧

  • ES6中字符串string常用的新增方法小结

    本文实例讲述了ES6中字符串string常用的新增方法.分享给大家供大家参考,具体如下: ES6为js新增了很多方法,包括遍历.查询.替换等等,可以很简洁的替换ES5中的类似方法,本文不考虑codePointAt等不常用方法. for-of: let str="wbiokr"; for(let s of str){ console.log(s) } //结果:w, b, i, o, k, r 由于es5并没有为js制定字符串相关遍历方法,for-of无疑会是接下来前端开发中的一个很重要

  • Angular项目中使用scss文件的一些技巧小结

    Angular项目中使用scss文件的一些技巧小结

    目录 使用 Angular CLI 新建一个 Angular 项目: Angular 项目中导入 node_modules 文件夹下文件的一些技巧 附:angular5 配置使用sass 总结 使用 Angular CLI 新建一个 Angular 项目: ng new my-sassy-app --style=scss 创建如下的 scss 文件: styles.scss 是我们使用的主要 scss 文件,里面导入了以下划线开头的 _variables.scss 和 _mixins.scss:

  • PHP编程中字符串处理的5个技巧小结

    字符串 注意单引号和双引号的区别 注意转义字符\的使用\\,\",\$ 注意使用8进制或16进制字符表示 \xf6 echo "H\xf6me";//需要察看是否支持此类文字编码 ---------------------输出结果---------------------------------------- H鰉e --------------------------------------------------------------------- 1.使用printf

  • ES6中javascript实现函数绑定及类的事件绑定功能详解

    本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法.分享给大家供大家参考,具体如下: 函数绑定 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call.apply.bind).但是,箭头函数并不适用于所有场合,所以 ES7 提出了 " 函数绑定 " ( function bind )运算符,用来取代call.apply.bind调用.虽然该语法还是 ES7 的一个提案,但是 Babel 转码器已经支持. 函数绑定运算符是并排的两个双冒号

  • ES6中Symbol、Set和Map用法详解

    本文实例讲述了ES6中Symbol.Set和Map用法.分享给大家供大家参考,具体如下: Symbol 1.Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值.它是 JavaScript 语言的第七种数据类型,前六种分别是:undefined.null.布尔值(Boolean).字符串(String).数值(Number).对象(Object): 2.Symbol 值通过Symbol函数生成,可以作为对象的属性名使用,保证不会与其他属性名产生冲突: let s = Symbo

  • ES6中new Function()语法及应用实例分析

    本文实例讲述了ES6中new Function()语法及应用.分享给大家供大家参考,具体如下: 学习<ECMAScript6入门>中的模板字符串的案例中看见了new Function()创建函数的语法: let str = 'return ' + '`Hello ${name}!`'; let func = new Function('name', str); func('Jack') // "Hello Jack!" 上面的代码传入name参数和字符串函数体,字符串函数体

  • ES6中Set和Map用法实例详解

    本文实例讲述了ES6中Set和Map用法.分享给大家供大家参考,具体如下: Set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. // 例一 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)); fo

  • ES6中Class类的静态方法实例小结

    本文实例讲述了ES6中Class类的静态方法.分享给大家供大家参考,具体如下: 以前看过的es6的东西,又忘了,再总结下: 类相当于实例的原型,所有在类中定义的方法,都会被实例继承.如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为"静态方法" class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new

随机推荐