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的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
随机推荐
- jq 图片裁剪
1.html <div class="jcropbox" style="display: none"> <img src="&quo ...
- SGU 195. New Year Bonus Grant
时间限制:0.75s 空间限制:4M 题意: 在一颗树(最多500000个节点)中,可以对节点染色,但是一个节点染了色后,它的父节点和兄弟节点都不能再染了,求最大的染色节点数,并输出所有染色节点. S ...
- PHPCMS v9 自定义表单添加验证码验证
1. 在 \phpcms\templates\default\formguide\show.html 中添加验证码显示 <input type="text" id=" ...
- YII Query Builder
今天遇到一个Query Builder 联合查询问题: 查询关联表某个字段的总数
- Linux 使用yum install安装mysql登陆不上解决办法
CentOS yum安装mysql后 Can’t connect to local MySQL server through socket ‘/var/lib/ CentOS Can’t connec ...
- oe 仓库管理
需求情景: 销售电商, 其中有些产品 为代理销售(公司不管理库存,建立SO后直接由对应的供应商发货即可) 解决方案: SO 生成 DO 时候 , 源库存的取得逻辑 SO-->SHO ...
- 利用HTML5分片上传超大文件
在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃:二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默 ...
- BZOJ 3572 世界树
Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生不息.持 ...
- MIT教授将网页开发整合为完整独立的程式语言Ur/Web
MIT 的软体技术教授 Adam Chlipala 设计了新的 Ur/Web 程式语言,这是一个整合 HTML.CSS.XML.SQL 及 JavaScript 等网路标准的“完整独立”语言,强调快速 ...
- 开始LXC,DOCKER,VAGRANT,COREOS之旅
很有兴趣哟. 有人说会重构互联基质,可能言重. 但,无疑在未来几年内,DOCKER和COREOS这样的更新布置模式会流行.