1、箭头函数
    // ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
当你只需要一个只有一个参数的简单函数时,可以使用新标准中的箭头函数,它的语法非常简单:标识符=>表达式。你无需输入function和return,一些小括号、大括号以及分号也可以省略。
如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数list。
    // 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();
});
注意,使用了块语句的箭头函数不会自动返回值,你需要使用return语句将所需值返回。
小提示:当使用箭头函数创建普通对象时,你总是需要将对象包裹在小括号里。
// 为与你玩耍的每一个小狗创建一个新的空对象
var chewToys = puppies.map(puppy => {}); // 这样写会报Bug!
var chewToys = puppies.map(puppy => ({})); //

用小括号包裹空对象就可以了。一个空对象{}和一个空的块{}看起来完全一样。ES6中的规则是,紧随箭头的{被解析为块的开始,而不是对象的开始。因此,puppy => {}这段代码就被解析为没有任何行为并返回undefined的箭头函数。

更令人困惑的是,你的JavaScript引擎会将类似{key: value}的对象字面量解析为一个包含标记语句的块。幸运的是,{是唯一一个有歧义的字符,所以用小括号包裹对象字面量是唯一一个你需要牢记的小窍门。
普通function函数和箭头函数的行为有一个微妙的区别,箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。
 
2、 find(value, index, arr)

在某些情况我需要判断一个数组是不是符合一些逻辑的条件,比如需要判断[{id: 1}, {id: 2}, {id: 3}]中是否有含有符合 id=1的数据;
以前我会使用filter方法。
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完整的遍历完数组。

所以如果你只需要对数据进行bool判断或者拿一个数据时候, 建议使用find
除了 find 还有一个方法是findIndex与find用法类似, 不过findIndex 返回的是数组成员的位置, 没有返回-1
3、 from和[…obj]

Array.from 可以对类似数组的对象转成数组,比如 DOM 中上传图片的input.files
实际上也可以使用[…]代替,而且更简洁。但是使用... 必须对象实现了Iterator方法否则会报错。
使用场景: 以前如果上传多个文件需要显示所有文件的名字和进度的话,需要创建有一个存放相关数据的数组
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'];

babel是支持Array.from方法的,但是不在核心包里,需要你安装一个叫做babel-polyfill的包。
npm install --save-dev babel-polyfill 
要让这个插件起作用的话,需要在主入口文件(例如app.js)里面写上如下的代码。
require("babel-polyfill");
4、 fill();
如果我需要实现一个简单的桶算法的话, 比如对范围在0-100的20个整数排序的话
我首先需要创建一个长度为101, 默认值为0的 数组需要
const array = [];
for (let i = 0; i<101; i++) {
array.push(0);
}
如果使用fill只需要
const array = new Array(101).fill(0);
Array.fill(value) 方法会对数组填充数组成员, 填充长度等于数组长度
 
 
 
 
 
 
 
 
 
 
 

ES6的优雅方法的更多相关文章

  1. React与ES6(三)ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  2. 看es6 字符串新方法有感

    'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // " ...

  3. ES6新增对象方法的访问描述符:get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  4. es6数组的方法

    1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null  (是实参构成的数组 ...

  5. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

  6. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  7. es6的map()方法解释

    es6的map()方法解释   map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arr ...

  8. [转载]es6 Promise.resolve()方法

    es6 Promise.resolve()方法 2018-01-27 22:29:06 ixygj197875 阅读数 16925更多 分类专栏: ES6标准入门 (阮一峰) ES6标准入门   Pr ...

  9. es6 Promise.reject()方法

    es6 Promise.reject()方法:https://blog.csdn.net/ixygj197875/article/details/79188195

随机推荐

  1. HttpURLConnection、HttpClient和Session

    原文地址:http://www.cnblogs.com/kross/p/3615695.html 一直没弄懂Session,cookies什么的登陆验证到底是怎么回事,昨天分别用HttpURLConn ...

  2. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

  3. VRRP主备备份配置示例—实现网关冗余备份

    本示例的基本拓扑结构如图所示. HostA通过Switch 双线连接到RouterA 和RouterB .用户希望实现:正常情况下, 主机以RouterA 为默认网关接入Intemet; 而当Rout ...

  4. Harbor快速部署到Kubernetes集群及登录问题解决

    Harbor(https://goharbor.io)是一个功能强大的容器镜像管理和服务系统,用于提供专有容器镜像服务.随着云原生架构的广泛使用,原来由VMWare开发的Harbor也加入了云原生基金 ...

  5. 【bzoj1194】 HNOI2006—潘多拉的盒子

    http://www.lydsy.com/JudgeOnline/problem.php?id=1194 (题目链接) 题意 给出S个自动机,如果一个自动机u的所有状态是另一个自动机v的状态的子集,那 ...

  6. java类加载详解

    1,类的加载过程: JVM将类加载过程分为三个步骤:装载(load),链接(link)和初始化(initialize),其中链接又分为三个步骤: 验证(varification),准备(Prepara ...

  7. Centos Python3安装共存

    安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlit ...

  8. Struts2的配置文件中, <package>的作用,<action><result>重名?

    问:Struts2的配置文件中, <package>的作用是什么? 答:防止action重名啊,例如前台和后台,总会有很多地方起名重复的! 问:可是访问的时候,不也是访问action吗,能 ...

  9. MySQL服务无法启动,错误代码1067

    偶然间一次服务器意外重启 重启过后发现MySQL服务停止 手动启动之,发现无法启动 错误代码1067,进程意外终止 遂开始排查问题,首先想到的可能就是my.ini文件出了问题 但是已经忘了写过什么东西 ...

  10. NATS_08:NATS客户端Go语言手动编写

    NATS客户端    一个NATS客户端是基于NATS服务端来说既可以是一个生产数据的也可以是消费数据的.生产数据的叫生产者英文为 publishers,消费数据的叫消费者英文为 subscriber ...