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;

    }, );

    // 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的优雅方法

最新文章

热门文章