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的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
随机推荐
- maven+jetty项目在tomcat部署
步骤1:项目打包 clean install 步骤二:拷贝war 包到tomcat下 步骤三:修改server.xml文件的端口 步骤四:启动tomcat,注意jetty的项目是不需要带项目名的,To ...
- Java-生成验证码图片(自定义内容,尺寸,路径)
1 package cn.gp.tools; import java.awt.*; import java.awt.image.BufferedImage; import java.io.*; imp ...
- elastic search 学习笔记
Elastic search在数据分析的应用中相当于一个数据库的搜索引擎. 跟MySQL类似,它有自己的查询语言,只不过不是关系型数据库,属于NoSQL. 可以根据索引从分布式服务器文件系统中快速存取 ...
- chrome调试状态下动态加载的js
在js文件中加入 //@ sourceURL=文件名.js
- PHP框架_Smarty_实现登录功能
1.项目框架 |--mvc |--data 数据 |--cache 缓存 |--template_c 模板生成目录 |--framework |--function |--function.php 功 ...
- DEDECMS栏目自定义字段添加
用到的文件: catalog_add.htm 路径:\dede\templets\ catalog_edit.htm 路径:\dede\templets\ catalog_add.php 路径 ...
- shuffle机制和TextInputFormat分片和读取分片数据(九)
shuffle机制 1:每个map有一个环形内存缓冲区,用于存储任务的输出.默认大小100MB(io.sort.mb属性),一旦达到阀值0.8(io.sort.spill.percent),一个后台线 ...
- gridview checkbox从服务器端和客户端两个方面实现全选和反选
GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下,希望本文对你有所帮助 GridVi ...
- 关于wtl的一个实验
代码如下: #include <iostream> using namespace std; template<typename T> class Base { public: ...
- 转:2014年最酷的30个JavaScript库
原文来自于:http://www.gbtags.com/gb/share/3701.htm 使用JavaScript库将会使开发变的更简单,大部分JavaScript库提供的功能都是极好的,当我们在为 ...