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. Mysql的两种引擎的区别

    Innodb引擎概述 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MyS ...

  2. docker weave安装

    1.升级内核到3.10.0以上,安装iproute22.安装 0.80版本:#wget -O /usr/local/bin/weave https://raw.githubusercontent.co ...

  3. poj 1966(顶点连通度)

    题意:给出一个n个节点和m条边的图,求该图的顶点连通度. 分析: 顶点连通度的求解可以转换为网络最大流问题. (1)原图G中的每个顶点v变成网络中的两个顶点v‘和v’‘,顶点v’至v''有一个条弧(有 ...

  4. 半夜思考, Java 重载的实现

    因为最近在学 scala,看到了参数的默认值这个特性,但是Java好像没有这个特性, Java8 也没有, 所以特意去查了一下,就牵扯到了 C++了,[只怪 C++没怎么学,,]. 下面将一下为什么 ...

  5. how to show video in website

    how to show video in website old version browsers https://www.computerhope.com/issues/ch000591.htm h ...

  6. Multiple Instance Learning

    ///////////////////////////////////////////推荐学习组////////////////////////////// http://www.robots.ox. ...

  7. P4433 [COCI2009-2010#1] ALADIN

    题目描述 给你 n 个盒子,有 q 个操作,操作有两种: 第一种操作输入格式为"1 L R A B",表示将编号为L到R的盒子里的石头数量变为(X−L+1)×A mod B,其中 ...

  8. 前端学习 -- Xhtml语法规范

    Xhtml语法规范 HTML中不区分大小写,但是尽量使用小写: HTML的注释不能嵌套: 标签必须结构完整{要么成对出现,要么自结束标签,虽然浏览器会帮我们修正一些不符合规范的内容} 标签可以嵌套但是 ...

  9. UESTC--1548

    题目:Easy math 原题链接:http://acm.uestc.edu.cn/problem.php?pid=1548 分析:费马小定理的应用. #include<cstdio> # ...

  10. python安装pip、numpy、scipy、statsmodels、pandas、matplotlib等

    1.安装python 2.安装numpy(开源的数值计算扩展,可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多. 很多库都是以此库为依 ...