Javascript Es6方法合集

1.filter

原理

filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

let values=[NaN, 10, 10, 0, 10, 10, 10, 10, 10, 10] 
//过滤掉NaN和0
//1.
let Liet= values.filter((item) => {
   return !isNaN(item)&&item
 });
 //2.
let Liet= values.filter((item) =>!isNaN(item)&&item);
//[10, 10, 10, 10, 10, 10, 10, 10]

//
let Liet= values.filter((item,index,arr) => {
        console.log('values',item,index,arr);
        return !isNaN(item)&&item
 });

2.map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。
返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

let ids = this.dynamicTags.map((item) => item.id);
// ["1354306079344857089", "1368812632591613954", "1370252422465757185", "1425622827346993153"]

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
//numbers [1, 4, 9]
//roots  [1, 2, 3]
//Math.sqrt(4)---2求平方根

let numbers = [1, 4, 16];
let numbers1 = numbers.map((currentValue, index, array) => {
      console.log("numbers1", currentValue, index, array);
})
//currentValue 数组中正在处理的当前元素
//index 数组中正在处理的当前元素的索引。
//array   map 方法被调用的数组。   [1, 4, 16]
//1   0   [1, 4, 16]
//4   1    [1, 4, 16]
//16  2    [1, 4, 16]

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3];
var results = arr.map(pow); // [1, 4, 9]
console.log(results);

我们不但可以计算简单的上述操作，还可以计算任意复杂的函数，例如，我们可以快速的将一个数字数组转化为字符串数组：

将数组的元素进行类型转换

var arr = [1, 2, 3];
var results = arr.map(String); 
console.log("results",results);// ['1', '2', '3']
console.log(results.map(Number))// [1, 2, 3]

有时候在使用map的时候也会出现误区，例如，把一个字符串数字转化为数字，可能会出现意想不到的结果，大家想想下面这个的值为什么呢?

var a=['1', '2', '3'].map(parseInt);//[1,NaN,NaN]，
说明： map会给callback传输三个参数，第一个参数是元素本身（当前元素），第二个参数是元素的索引值（当前元素的索引），第三个是原数组（map 方法被调用的数组），而parseInt可以接受一个参数，也可以接受两个参数，接受一个参数的时候该参数直接为需要转化的字符串；接受两个参数的时候：第一个参数是要转为数字的字符串，第二参数是要转化的进制。

在js中参数的个数不需要严格一致，所以这样下来map的前两个参数都自动传给了parseInt，就会导致parseInt接受了不存在的进制(第二个参数一般为2，8，10，16)而显示NaN。所以需要正常显示就需要让parseInt接受一个值或者将其第二个值默认为10

 var a=['1', '2', '3'].map(function(x){return parseInt(x);});
 // [1, 2, 3]

3.reduce

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，

累加和

var arr = [1, 3, 5,3];
let results = arr.reduce(function (x, y) {
    return x + y;
}); // 12
console.log('results', results);

求积

var arr = [1, 3, 5,3];
let results = arr.reduce(function (x, y) {
    return x * y;
}); // 45
console.log('results', results);

要把[1, 3, 5, 7, 9]变换成整数13579，reduce()也能派上用场：

var arr = [1, 3, 5, 7, 9];
let results =  arr.reduce(function (x, y) {
    console.log(x,y);//x为结果，每次用结果和序列的下一个元素做计算
    // 1 3
    // 13 5
    // 135 7
    // 1357 9
    return x * 10 +y
});
console.log('results', results);//最后返回值13579

10.findIndex

var num = this.tableDataChange.findIndex((n) => n.state == "1");
//num == -1