JS中的数组操作

200 views次阅读
一条评论

1.扁平化n维数组 Array.flat(n)是ES10扁平数组的api, n表示维度, n值为 Infinity时维度为无限大。

    console.log([1,[2,3]].flat(2))
    // 原理:实质是利用递归和数组合并方法 concat实现扁平。
    function flat(arr) {
      while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr)
      }
      return arr
    }

2.字符串和数组的相互转化

    var str = '12321321'
    var arr = [1,2,3,4,5]
    console.log(str.split(''))
    console.log(arr.join(',')) // 1, 2, 3, 4, 5  string类型

3.fifter函数 返回符合条件的元素组成的新数组,同时不会修改原数组

    let arr1 = [1,2,35,6]
    let newArr = arr1.filter(item => item !== 6)
    console.log(arr1) // [1,2,35,6]
    console.log(newArr) // [1,2,35]

4.map 对原数组进行一系列变换,并得到一个转换后的新数组,同时不会修改原数组

    let arr3 = [1,2,3]
    let array = arr3.map(item => item + 2)
    console.log(arr3)
    console.log(array) // [3,4,5]

5.reduce 通过回调函数将传入的元素最终转换为一个值,并且不会修改原数组。reduce接收两个参数:回调函数和初始值。回调函数又接收四个参数,分别是prev,cur,curIndex,arr,分别代表上一次返回的值,当前值,当前值的索引,原数组

    let arr4 = [1,2,3]
    let sum = arr4.reduce((acc, current) => acc + current, 0)
    console.log(arr4) // [1,2,3]
    console.log(sum) // 6

6.数组去重

    // 第一种方法,使用indexOf
    var arr1 = [1,2,2,2,3,3,3,4,4,5,6];
    var arr2 = [];
    for(var i=0,l=arr1.length;i<l;i++){
      if(arr2.indexOf(arr1[i])<0){
        arr2.push(arr1[i]);
      }
    }
    console.log(arr2);
    // 第二种方法,使用ES6Set方法,set是ES6新出来的一种一种定义不重复数组的数据类型,Array.from是将类数组转化为数组,...是扩展运算符,将set里面的值转化为字符串。
    console.log(Array.from(new Set([1,1,2,2,3,3,3,4,4,5])))
    console.log([...new Set([1,1,2,2,3,3,3,4,4,5])])

7.求数组中最大值

    Math.max(...[1,2,3,4]) // 4
    Math.max.apply(this,[1,2,3,4]) // 4
    [1,2,3,4].reduce((pre, cur, index, arr) => {
      return Math.max(pre, cur)
    }, 0) // 4
    // Math.max()是Math对象内置的方法,参数是字符串
    // reduce是ES5的数组api,参数有函数和默认初始值。函数有四个参数:pre:上一次的值;cur:当前值;curIndex:当前值索引;arr:当前数组

8.数组求和

    const arr = [1, 2, 3]
    const sum = arr.reduce((acc, current) => acc + current, 0)
    console.log(sum) // 1 + 2 + 3 = 6
guxuerui
版权声明:本站原创文章,由guxuerui于2019年10月31日发表,共计2233字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(一条评论)
Loading...
骑誓 评论达人LV.1
2020-07-30 03:23:57 回复

多学 多练 :idea: