ES6 数组常用方法介绍和应用

综合应用：

item =>  true会自动返回item

(fieldDescs || []).filter(item => ['DOUBLE','INTERGE','BIGINT','FLOAT'].includes(item.type)).map((item, index) => {
       return <Option
               value={item}
               key={`${index}${item}`}
               disabled={addListRenderOption().includes(item)}>{item}
             </Option>;
})

                                        常用方法

Filter() 

 旧数组不变，返回新的数组

 filter()把传入的函数依次作用于每个元素，根据返回值是true还是false决定保留还是丢弃该元素。

---

 应用场景：

1. 去除数组的空数据

            var arr = ['A', '', 'B', null, undefined, 'C', '  '];
            var brr = arr.filter( s => {
                return s && s.trim()
                // !!s,s存在的情况下再trim()
                // ''.trim()---false
                // '   ',trim() --- turn
            });

            console.log(arr); // ['A', '', 'B', null, undefined, 'C', '  ']
            console.log(brr); // ['A', 'B', 'C']

Map()

旧数组不变，返回新的数组

调用map中的回调函数作用于每个元素,把处理后的值放入一个新的数组。

---

 应用场景：

1. 把字符串变成整数

        var arr = ['1.1', '2', '3.333333'];
        var brr = arr.map(Number);
        // var brr = arr.map((x) => {return Number(x)}) 同上

        console.log(arr); // ['1.1', '2', '3.333333']
        console.log(brr); // [1.1, 2, 3.333333]

reduce()

旧数组不变，返回新的数组

调用回调处理返回的累积值和当前元素。 总共四个参数

    var arr = [0, 1, 2, 3]
    var brr = arr.reduce((pre, cur,i) => {
        return pre + cur
    }, 10);

    console.log(brr); //16

    // pre:上一次调用回调时,返回的累积值
    // cur: 当前值
    // i: 当前值的索引
    // 10: 初始值，没有时，pre为第一个值

---

 应用场景：

1. 求和
2. 二维变一维

    var arr = [[0, 1], [2, 3], [4, 5]]
    var brr = arr.reduce((pre, cur,i) => {
        return pre.concat(cur)
    });

    console.log(arr); // [Array(2), Array(2), Array(2)]
    console.log(brr); // [0, 1, 2, 3, 4, 5]

forEach()

旧数组不变，无返回

只做遍历，无法终止或跳出循环，如需要可使用别的方法

eg:

• for...of / for...in 循环
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()

    var arr = ["ds",'dd','ff','11']
    var brr = arr.forEach((item,index) => {
       console.log(item) //ds dd ff 11
    });

    console.log(arr);  // ['ds', 'dd', 'ff', '11']
    console.log(brr); //undefined

 应用场景：

同map,但只遍历修改数组

                                        偶尔使用

find()

找出数组中满足callback()函数的第一个元素，并返回这个元素

没有时返回undefined

    var arr = [5, 12, 8, 130, 44]
    var brr = arr.find((item,index) => {
      return item > 10
    });
    console.log(arr);  // [5, 12, 8, 130, 44]
    console.log(brr); // 12

from() 数组合并去重

将不同类型的数据转化为想要的数组

 应用场景：

            const nodesTar = [].concat(toJS(groupTopoData)).map(node => {

                return node.toModelAndTargetJson

            })

            const nodeSet = Array.from(new Set(nodesFrom.concat(nodesTar)));

                                             重温

splice()可指定位置

旧数组改变，返回删除的元素放入的数组或空数组

start​：修改开始的位置，deleteCount：要移除的元素个数

item1：要添加的元素

返回：如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

删除或替换现有元素或者原地添加新的元素来修改数组

toString()

旧数组不变，返回字符串

    const arr = ['a', "d", 1,2];
    const brr = arr.toString();
    console.log(arr);  // ['a', 'd', 1, 2]
    console.log(brr); // a,d,1,2

pop()，shift(删除开头)

旧数组改变，返回删除的元素

删除数组中最后一个元素，并返回该元素的值。此方法更改数组的长度

    const arr = ['a', "d", 'c'];
    const brr = arr.pop();
    console.log(arr);  // 'a', 'd'
    console.log(brr); // c

push() unshift(添加到开头)

旧数组改变，返回数组新的长度

将一个或多个元素添加到数组的末尾,返回该数组的新长度

    const arr = ['a', "d", 'c'];
    const brr = arr.push('e');
    console.log(arr);  // 'a', 'd', 'c', 'e']
    console.log(brr); // 4

indexOf()

返回给定元素在数组中的可以找到的第一个索引，没有返回-1

    const arr = ['a', , 'c'];
    console.log(arr.indexOf('c')) //2
    console.log(arr.indexOf("d")) //-1

join()

将数组或类数组，连接成一个字符串，并返回这个字符串

    const arr = ['a', "d", 'c'];

    console.log(arr.join())  //a,d,c
    console.log(arr.join(''))  //adc
    console.log(arr.join('-'))   //a-d-c

 应用场景：

每一部分换行

 const arr = ['a', "d", 'c'];
    console.log(arr.join('\n'))  
//a 
//d 
//c 
//换行了

keys()

返回是一个新的迭代器对象

索引迭代器会包含没有对应元素的索引

    const array1 = ['a', , 'c'];
    const iterator = array1.keys();
    for (const key of iterator) {
        console.log(key);
    }

    console.log([...array1.keys()]); //[0, 1, 2]
    console.log(Object.keys(array1)); //['0', '2']
    console.log(iterator); // Array Iterator {}
    console.log([...iterator]); //[]

slice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

entriy()

var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined

for (let e of iterator) {
    console.log(e);
}

// [0, "a"]
// [1, "b"]
// [2, "c"]

includes()

 应用场景：

    <Button icon="eye"
         disabled={[0].includes(state)}
         onClick={() => {}}
    />

Array.sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

Array.isArray() 用于确定传递的值是否是一个 Array。返回true或false

Array.every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

Array.includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

Array.reverse() 方法将数组中元素的位置颠倒，并返回该数组

Array.some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

---

parseInt() 把字符串转成了整数
number()  保留数字的完成

callback()是数组中每个元素执行的函数