ES6的优雅方法
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, );
// ES6
var total = values.reduce((a, b) => a + b, );
那么不是非常函数化的情况又如何呢?除表达式外,箭头函数还可以包含一个块语句。回想一下我们之前的示例:
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
}); // ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
// 为与你玩耍的每一个小狗创建一个新的空对象
var chewToys = puppies.map(puppy => {}); // 这样写会报Bug!
var chewToys = puppies.map(puppy => ({})); //
用小括号包裹空对象就可以了。一个空对象{}和一个空的块{}看起来完全一样。ES6中的规则是,紧随箭头的{被解析为块的开始,而不是对象的开始。因此,puppy => {}这段代码就被解析为没有任何行为并返回undefined的箭头函数。
const array = [{id: , name: 'a'}, {id: , name: 'b'}, {id: , name: 'c'}];
const isTrue = array.filter(obj => obj.id === ).length;
然而在ES6中包含了一个find方法, 实际上更优雅的写法应该是
const array = [{id: }, {id: }, {id: }];
const isTrue = array.find(obj => obj.id === );
find方法将会对数组进行遍历,如果有符合条件的数据将结束遍历并返回数据,没有的话返回undefined而不像filter完整的遍历完数组。
const array = [];
for (obj of input.files) { // for of 实际上也是对实现Iterator方法的对象遍历
array.push(obj);
};
// from
const array = Array.from(input.files);
// ...
const array = [...input.files];
[...''] // ['1', '2', '3'];
npm install --save-dev babel-polyfill
require("babel-polyfill");
const array = [];
for (let i = 0; i<101; i++) {
array.push(0);
}
const array = new Array(101).fill(0);
ES6的优雅方法的更多相关文章
- React与ES6(三)ES6类和方法绑定
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- 看es6 字符串新方法有感
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // " ...
- ES6新增对象方法的访问描述符:get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
- es6数组的方法
1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null (是实参构成的数组 ...
- es6 javascript对象方法Object.assign()
es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1 基本用法 Object.assign方法用于对象的合并,将源对象 ...
- JavaScript ES6 数组新方法 学习随笔
JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...
- es6的map()方法解释
es6的map()方法解释 map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arr ...
- [转载]es6 Promise.resolve()方法
es6 Promise.resolve()方法 2018-01-27 22:29:06 ixygj197875 阅读数 16925更多 分类专栏: ES6标准入门 (阮一峰) ES6标准入门 Pr ...
- es6 Promise.reject()方法
es6 Promise.reject()方法:https://blog.csdn.net/ixygj197875/article/details/79188195
随机推荐
- Mysql的两种引擎的区别
Innodb引擎概述 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MyS ...
- docker weave安装
1.升级内核到3.10.0以上,安装iproute22.安装 0.80版本:#wget -O /usr/local/bin/weave https://raw.githubusercontent.co ...
- poj 1966(顶点连通度)
题意:给出一个n个节点和m条边的图,求该图的顶点连通度. 分析: 顶点连通度的求解可以转换为网络最大流问题. (1)原图G中的每个顶点v变成网络中的两个顶点v‘和v’‘,顶点v’至v''有一个条弧(有 ...
- 半夜思考, Java 重载的实现
因为最近在学 scala,看到了参数的默认值这个特性,但是Java好像没有这个特性, Java8 也没有, 所以特意去查了一下,就牵扯到了 C++了,[只怪 C++没怎么学,,]. 下面将一下为什么 ...
- how to show video in website
how to show video in website old version browsers https://www.computerhope.com/issues/ch000591.htm h ...
- Multiple Instance Learning
///////////////////////////////////////////推荐学习组////////////////////////////// http://www.robots.ox. ...
- P4433 [COCI2009-2010#1] ALADIN
题目描述 给你 n 个盒子,有 q 个操作,操作有两种: 第一种操作输入格式为"1 L R A B",表示将编号为L到R的盒子里的石头数量变为(X−L+1)×A mod B,其中 ...
- 前端学习 -- Xhtml语法规范
Xhtml语法规范 HTML中不区分大小写,但是尽量使用小写: HTML的注释不能嵌套: 标签必须结构完整{要么成对出现,要么自结束标签,虽然浏览器会帮我们修正一些不符合规范的内容} 标签可以嵌套但是 ...
- UESTC--1548
题目:Easy math 原题链接:http://acm.uestc.edu.cn/problem.php?pid=1548 分析:费马小定理的应用. #include<cstdio> # ...
- python安装pip、numpy、scipy、statsmodels、pandas、matplotlib等
1.安装python 2.安装numpy(开源的数值计算扩展,可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多. 很多库都是以此库为依 ...