es6小技巧
let myKey = 'variableKey';
let obj = {
key1: 'One',
key2: 'Two',
[myKey]: 'Three' /* 棒呆! */
};
给变量键加上一层 []
,程序员们就可以在一条对象字面量声明里完成全部事情。
let ages = [12, 19, 6, 4]; let firstAdult = ages.find(age => age >= 18); //
let firstAdultIndex = ages.findIndex(age => age >= 18); //
find
和 findIndex
允许基于计算值查找,这种方式还防止了一些不必要的副作用和循环产生的不确定值。
// 传参给需要多个独立参数的函数 arguments
// 很像 Function.prototype.apply()
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // // 将节点列表转换成数组
let divsArray = [...document.querySelectorAll('div')]; // 将参数转换成数组
let argsArray = [...arguments];
这个神奇的运算符还有附加的好处:它能把可迭代对象(NodeList
, arguments
等等)转化为真正的数组,而之前我们只能用 Array.from
或其它的 hack 方法。
// 多行字符串
let myString = `Hello I'm a new line`; // 这么写完全没问题! // 基础的插值操作
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3
当然,除了多行字符串,模板字符串还有其它的能力,比如说简单或者高级的插值。不过,仅仅是优雅的写多行字符串这件事情,已经让我十分欣慰了。
// 基础用法
function greet(name = 'Anon') {
console.log(`Hello ${name}!`);
}
greet(); // Hello Anon! // 还可以是函数!
function greet(name = 'Anon', callback = function(){}) {
console.log(`Hello ${name}!`); // 不再需要“callback && callback()”啦 (不需要条件判断)
callback();
} // 只给其中一个参数默认值
function greet(name, callback = function(){}) {}
如果在调用的时候不传无默认值的参数,其它的语言可能会发出警告,但是 JavaScript 会默认将它们设为 undefined
。
es6小技巧的更多相关文章
- 6个讨喜的 ES6 小技巧
[编者按]本文作者为 Axel Rauschmayer,主要介绍6个 ES6 小技巧.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中,笔者将介绍6个由 ES6 新功能带来的小技巧. ...
- 【js】中的小技巧
本文主要介绍一些JS中用到的小技巧 1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...
- ES6中常用的小技巧,用了事半功倍哦
ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了 ...
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- ( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
- ( 译、持续更新 ) JavaScript 上分小技巧(二)
考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...
- ( 译、持续更新 ) JavaScript 上分小技巧(一)
感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...
- 12个非常有用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
随机推荐
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- Java学习----HashMap原理
1.HashMap的数据结构 数组的特点是:寻址容易,插入和删除困难:而链表的特点是:寻址困难,插入和删除容易.那么我们能不能综合两者的特性,做出一种寻址容易,插入删除也容易的数据结构?答案是肯定的, ...
- free 堡垒机
环境: centos6.5 mini安装 iptables selinux已经关闭 jumpserver: 192.168.1.209 testserver: 192.168.1.210 一. 部署l ...
- sass编译css(转自阮一峰)
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...
- 【C#枚举】根据EnumName获取Value
public static int GetEnumValue(Type enumType, string enumName) { try { if (!enumType.IsEnum) throw n ...
- ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
- JS生成二维码,支持中文字符
一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...
- Vue 2.0基础
我们将会选择使用一些vue周边的库vue-cli, vue-router,vue-resource,vuex 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我 ...
- !a && !b 和 !(a || b) 的故事
// awk代码,当continue执行时说明书是免费的 || )) { continue } 这段代码大概是半年前写的,半年后过来读,发现已经不理解这段代码了,虽然理解当contniue执行时意味着 ...
- [BZOJ 1303] [CQOI2009] 中位数图 【0.0】
题目链接:BZOJ - 1303 题目分析 首先,找到 b 的位置 Pos, 然后将数列中小于 b 的值赋为 -1 ,大于 b 的值赋为 1 . 从 b 向左扩展,不断算 Sum[i, b - 1] ...