ES6的优雅方法

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;
    }, 0);
    // ES6
    var total = values.reduce((a, b) => a + b, 0);

那么不是非常函数化的情况又如何呢?除表达式外,箭头函数还可以包含一个块语句。回想一下我们之前的示例:

     // 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: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}];
const isTrue = array.filter(obj => obj.id === 1).length;

然而在ES6中包含了一个find方法, 实际上更优雅的写法应该是

const array = [{id: 1}, {id: 2}, {id: 3}];
const isTrue = array.find(obj => obj.id === 1);

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]; 
[...'123'] // ['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) 方法会对数组填充数组成员, 填充长度等于数组长度
 
 
 
 
 
 
 
 
 
 
 
posted @ 2017-09-06 18:56  圣耀  阅读(589)  评论(0编辑  收藏  举报