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. http和https的优缺点,区别与工作原理

    文章内容 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可 ...

  2. rocketmq 主机负载异常飙高问题的解决

    最近在部署rocketmq到物理机时, 发现并解决了一个主机Load异常飙高的问题, 觉得有必要记录一下. 我们采用了rocketmq(https://github.com/alibaba/Rocke ...

  3. 用ul li实现边框重合并附带鼠标经过效果

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

  4. POJ1430

    这个题目初看上去是一个排列组合题,而实际上……也是一个排列组合题. 题目描述是: Description The Stirling number of the second kind S(n, m) ...

  5. DPHARD

    此篇收集各类DP题. <1D1D动态规划优化初步>的3个模型 1. f[x] = min(f[i]+w[i, x]), i < x且w[i, x]满足单调性(即w[i, j]+w[i ...

  6. 关于UIInterfaceOrientation的一个bug

    在ios中获取设备当前方向的枚举有UIInterfaceOrientation和UIDeviceOrientation ,前者包含枚举 Unknown//未知 Portrait//屏幕竖直,home键 ...

  7. 洛谷P4902乘积

    题面链接 洛谷 题意简述 求\(\prod_{i=A}^B\prod_{j=1}^i \lgroup \frac{i}{j} \rgroup ^{\lfloor \frac{i}{j} \rfloor ...

  8. 【BZOJ4869】【SHOI2017】相逢是问候

    Description BZOJ传送门 Solution 这题涉及到指数嵌套堆叠,可能可以用欧拉函数解决. 试想一个数\(a_i\)经过\(k\)次操作后会变成什么? \[ k个c\;\; \begi ...

  9. tomcat和servlet的基本了解

    看不清的可以下载到本地观看

  10. Java EE之会话

    1.需要会话的原因 所有HTTP服务器技术都普遍采用HTTP会话的概念,并且Java EE也在规范中添加了对会话的支持. 维持状态 会话用于维持请求和请求之间的状态.HTTP请求自身是完全无状态的.从 ...