整理 ES6 常用数组方法及应用

84 阅读6分钟
  1. 创建数组 Array.from() ; Array.of()

     Array.from({ length: 10 }, (item, index) => index); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
     用于将类数组结构转换为数组实例
     第一个参数是一个类数组对象,即任何可迭代的结构或者有一个length属性和可索引元素的结构。
     第二个可选的映射函数参数,这个函数可以直接增强新数组的值
     第三个可选参数用于指定映射函数中 this 的值 (箭头函数无法使用)
     
     Array.of((1,2,3,4,5)); //[1, 2, 3, 4, 5]
     可以把一组参数转换为数组,用于代替在ES6之前使用的 Array.prototype.slice.call(arguments),
    

2.检测数组方法 instanceof Array.isArray()

    value instanceof Array()
    instanceofArray的运算符,检查value是否为数组,如果是返回true,否返回false
    Array.isArray(value)
    Array.isArray()是一个方法,用于检查接收的参数是否为数组,如果是的话返回true,否返回false

3.迭代器方法:ES6在Array原型上暴露了keys()、value()、entries();三个方法;因为这些方法都是返回迭代器,所以可以将他们的内容用 Array.from() 转换为数组实例

    const lazy = ['one', 'two', 'three', 'four'];
    Array.from(lazy.keys()) // [0, 1, 2, 3] keys()方法返回数组索引
    Array.from(lazy.values()) // ["one", "two", "three", "four"]  values()返回数组元素
    Array.from(lazy.entries()) // [[0, "one"][1, "two"][2, "three"][3, "four"]] // 返回二维数组元素
    

4.复制和填充方法 Array.fill() Array.copyWithin()

Array.fill() 向一个已有的数组中插入全部或部分相同的值 第一个参数是需要填充的值 第二个参数是开始索引,可选,不选的话从0开始 第三个参数是结束索引,可选,不选的话到末尾结束 索引为负的话从数组末尾开始计算索引,也可以将负索引想象成数组长度加上它得到的一个正索引

const zeroes = [0, 0, 0, 0, 0];
// 用5填充整个数组
zeroes.fill(5); //[5, 5, 5, 5, 5] 
// 用6填充索引大于等于3的元素
zeroes.fill(6, 3); //[0, 0, 0, 6, 6] 
// 用7填充大于等于1且小于3的元素
zeroes.fill(7, 1, 3); //[0, 7, 7, 0, 0] 
// 用8填充索引大于等于1且小于4的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 1)
zeroes.fill(8, -4, -1); //[0, 8, 8, 8, 0] 
// fill() 静默忽略超出数组边界、零长度及方向相反的索引范围 
// 索引过低,忽略
zeroes.fill(1, -10, -6); //[0, 0, 0, 0, 0] 
// 索引过高忽略
zeroes.fill(1, 10, 15); //[0, 0, 0, 0, 0] 
// 索引反向,忽略
zeroes.fill(2, 4, 2); //[0, 0, 0, 0, 0] 
// 索引部分可用,填充可用部分
zeroes.fill(4, 3, 10); //[0, 0, 0, 4, 4]

5.转化方法

 let colors = ['red', 'blue', 'yellow'];
    Array.valueOf()  返回的还是数组本身
    colors.valueOf() // ["red", "blue", "yellow"]
    Array.toString() 返回由每个值的等效字符串拼接而成的一个逗号分隔的字符串
    colors.toString() // 'red,blue.yellow'
    Array.toLocaleString()  得到一个逗号分隔的数组值的字符串,为了得到最终的字符串,会调用每个值的 toLocaleString() 方法,而不是 toString() 方法
    colors.toLocaleString() // 'red,blue,yellow'
    Array.join() 该方法只接收一个参数separator:即分隔符;将数组的元素组起一个字符串,以 separator 为分隔符,省略的话则用默认用逗号为分隔符
    colors.join() // 输出 'red,blue,yellow'
    colors.join('-') // 输出 'res-blue-yellow'
    

6.栈方法 push() pop() push():接收任意数量的参数,并把他们放到数组后面,并返回数组长度 pop() // 移除数组最后一项,并返回呢个元素

    const arr = ['red', 'blue', 'yellow'];
    arr.push('grren','pink')  // 此时,arr为 ['red', 'blue', 'yellow','grren','pink'] , 这个方法返回arr长度 5 
    const item = arr.pop(); // 输出 yellow
    arr 变为 ['red', 'blue'] , length = 2

7.队列方法 shift() 和 unshift() shift() 删除数组的第一个元素,并返回删除的呢个元素,如果数组为空的话,则返回undefined unshift() 在数组头添加一个元素,并返回数组长度

    const arr = ['red', 'blue', 'yellow'];
    const item = arr.shift() // item 为 'red'
    arr 为 ['blue', 'yellow'] 
    const item = arr.unshift('pink') // item  =  4
    arr //  ['pink', 'red', 'blue', 'yellow']
    

8.排序方法 reverse() // 反向,反转数组,并改变原数组 sort() 按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。sort貌似不太好用

    let arr = [13, 24, 51, 3];
    console.log(arr.reverse()); //[3, 51, 24, 13]
    console.log(arr); //[3, 51, 24, 13](原数组改变)
    let arr1 = ["a", "d", "c", "b"];
    console.log(arr1.sort()); // ["a", "b", "c", "d"]
    let arr2 = [13, 24, 51, 3];
    console.log(arr2.sort()); // [13, 24, 3, 51] 两位数字先比较第一位再比较第二位
    console.log(arr2); // [13, 24, 3, 51](原数组被改变) 
    

9.操作方法 Array.concat() // 将concat中的参数放到array中,并返回一个新的,不操作原数组

    const arr = [1,3,5,7];
    const arrCopy = arr.concat(9,[11,13]); // 此时arrcopy为 [1, 3, 5, 7, 9, 11, 13] ,原数组为[1,3,5,7];

Array.slice() // 返回原数组中指定位置的新数组

    const arr = [1,3,5,7,9,11];
    const arrCopy = arr.slice(1);
    const arrCopy2 = arr.slice(1,4);
    const arrCopy3 = arr.slice(1,-2);
    const arrCopy4 = arr.slice(-4,-1);
    console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
    console.log(arrCopy); //[3, 5, 7, 9, 11]
    console.log(arrCopy2); //[3, 5, 7]
    console.log(arrCopy3); //[3, 5, 7]
    console.log(arrCopy4); //[5, 7, 9]
    // arrCopy只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。 
    // arrCopy2设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。 
    // arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。 
    // arrCopy4中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)。

Array.splice() 很强大的数组方法,它有很多种用法,可以实现删除、插入和替换

    let arr = [1,3,5,7,9,11];
    let arrRemoved = arr.splice(0,2);
    console.log(arr); //[5, 7, 9, 11]
    console.log(arrRemoved); //[1, 3]
    let arrRemoved2 = arr.splice(2,0,4,6);
    console.log(arr); // [5, 7, 4, 6, 9, 11]
    console.log(arrRemoved2); // []
    let arrRemoved3 = arr.splice(1,1,2,4);
    console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
    console.log(arrRemoved3); //[7]

10.搜索和位置方法 严格相等 Array.indexOf() 接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。 Array.lastIndexOf() 接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

    const arr = [1,3,5,7,7,5,3,1];
    console.log(arr.indexOf(5)); //2
    console.log(arr.lastIndexOf(5)); //5
    console.log(arr.indexOf(5,2)); //2
    console.log(arr.lastIndexOf(5,4)); //2
    console.log(arr.indexOf("5")); //-1
    Array.includes() ES7
    const arr = [1,3,5,7,7,5,3,1];
    arr.includes(3); // true
    arr.includes(4); // false
  

10.断言函数:返回值决定了想要的索引的元素是否被认为匹配;Array.find() Array.findIndex()找到匹配项后,这两个方法都不再继续搜索 Array.find() 返回第一个匹配的元素 Array.findIndex() 返回第一个匹配元素的索引 11.迭代方法

    Array.forEach()
    Array.map() 指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
    const arr = [1, 2, 3, 4, 5];
    const arr2 = arr.map(function(item){
        return item*item;
    });
    console.log(arr2); //[1, 4, 9, 16, 25]
    Array.filter() “过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
    }); 
    console.log(arr2); //[1, 4, 7, 8, 9, 10]
    Array.every() 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
    const arr = [1, 2, 3, 4, 5];
    const arr2 = arr.every(function(x) {
    return x < 10;
    }); 
    console.log(arr2); //true
    const arr3 = arr.every(function(x) {
    return x < 3;
    }); 
    console.log(arr3); // false
    Array.some() 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
    const arr = [1, 2, 3, 4, 5];
    const arr2 = arr.some(function(x) {
    return x < 3;
    }); 
    console.log(arr2); //true
    const arr3 = arr.some(function(x) {
    return x < 1;
    }); 
    console.log(arr3); // false
    

12.归并方法 Array.reduce()和 Array.reduceRight()