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的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
随机推荐
- QWidget QMainWindow QDialog 三者区别
Qt类是一个提供所需的像全局变量一样的大量不同的标识符的命名空间.通常情况下,你可以忽略这个类.QObject和一些其它类继承了它,所以在这个Qt命名空间中定义的所有标识符通常情况下都可以无限制的使用 ...
- 【ZOJ2112】【整体二分+树状数组】带修改区间第k大
The Company Dynamic Rankings has developed a new kind of computer that is no longer satisfied with t ...
- js string操作总结
var str = "0123456789"; console.log(str.substring(0)); //------------"0123456789" ...
- jQuery备忘录--私家版
最近在看jQuery,总是看过了忘,不知道该怎么办?准备开启洗脑模式,日常念一念,紧箍咒加身. 1.jQuery方法第一步:ready=>加载html的骨架.而onload=>整个页面加载 ...
- 插件和过滤器装饰器开发中的感悟-python-django
写这篇随笔是因为今天自己在写插件和过滤方法的过程中碰壁了,折腾了好久终于稍微发现些问题,在此记下,以作备忘. 在看了xadmin的插件机制后,笔者也想使用该思想来扩展kadmin中视图的方法. 例如, ...
- isKindOfClass:和isMemberOfClass:-b
isKindOfClass: Returns a Boolean value that indicates whether the receiver is an instance of given c ...
- study note -(some good sentence)
There are, however, some disadvantages.However, there may be better ways of tacking this problem. Ho ...
- jquery的笔记
1. 基本选择器 基本的 #id .class element(元素) *(全部元素) $("#id") $(".class") ...
- [BZOJ 1207] [HNOI 2004] 打鼹鼠 【DP】
题目链接:BZOJ - 1207 题目分析 每一次打鼹鼠一定是从上一次打某只鼹鼠转移过来的,从打第 j 只鼹鼠能不能转移到打第 i 只鼹鼠,算一下曼哈顿距离和时间差就知道了. 那么就有一个 DP ,用 ...
- Kernel PCA 原理和演示
Kernel PCA 原理和演示 主成份(Principal Component Analysis)分析是降维(Dimension Reduction)的重要手段.每一个主成分都是数据在某一个方向上的 ...