最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 数组扁平化

    正文概述 掘金(一米阳光1470297573000)   2021-04-07   349

    数组扁平化

    已知数组var arr = [ [1, 3, 2, 1], [5, 3, 4, 8, 5, 6, 5], [6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16 ],将这个数组扁平化,并得到一个升序无重复值的数组

    1,数组扁平化

    1,toString

    注:如果数组中有空数组,不使用此方法。此方法得到的数组的值是字符串不是数字。

    var newArr = arr.toString().split(',')
    // ["1", "3", "2", "1", "5", "3", "4", "8", "5", "6", "5", "6", "2", "8", "9", "4", "11", "15", "8", "9", "12", "12", "13", "10", "14", "16"]
    

    2, reduce

    reduce方法对累加器和数组中的每个元素应用一个函数,将其减少为单个值

    reduce语法:

    arr.reduce(function(prev,cur,index,arr){
    ...
    }, init);
    arr 表示原数组;
    prev 表示上一次调用回调时的返回值,或者初始值 init;
    cur 表示当前正在处理的数组元素;
    index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
    init 表示初始值。
    
    示例:1,求数组之和
    var arr = [3, 9, 4, 3, 6, 0, 9]
    var sum = arr.reduce((a, b) => {
      return a + b
    })
    sum // 34
    
    2, 求数组项最大值
    var max = arr.reduce((a, b) => {
      return Math.max(a, b)
    })
    max // 9
    
    3, 数组去重
    var newArr = arr.reduce(function (a, b) {
      a.indexOf(b) === -1 && a.push(b)
      return a
    }, [])
    // [3, 9, 4, 6, 0]
    初始化一个空数组,将需要去重的数组的第一项在初始化数组中查找,如果找不到将该项添加到初始化数组中,将需要去重的数组的第2项在初始化数组里查找,如果找不到,将该项继续添加到初始化数组中,....将需要去重的数组中的第n项在初始化数组中查找,如果找不到将该项添加到初始化数组中,将这个初始化数组返回
    

    reduce扁平化:

    function flatten(arr) {
      return arr.reduce((a, b) => [].concat(Array.isArray(a) && a ? flatten(a) : a, Array.isArray(b) && b ? flatten(b) :
        b), [])
    }
    var newArr = flatten(arr)
    newArr // [1, 3, 2, 1, 5, 3, 4, 8, 5, 6, 5, 6, 2, 8, 9, 4, 11, 15, 8, 9, 12, 12, 13, 10, 14, 16]
    

    3, 遍历数组方法

    var newArr = []
    function flatten(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] instanceof Array) {
          flatten(arr[i])
        } else {
          newArr.push(arr[i])
        }
      }
    }
    flatten(arr)
    newArr  // [1, 3, 2, 1, 5, 3, 4, 8, 5, 6, 5, 6, 2, 8, 9, 4, 11, 15, 8, 9, 12, 12, 13, 10, 14, 16]
    

    instanceof:用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

    语法:

    object:某个实例对象 constructor:某个构造函数

    function Car(make, model, year) {
      this.make = make
      this.model = model
      this.year = year
    }
    const auto = new Car('Honda', 'Accord', 2030) // auto被标记为Car的实例
    auto instanceof Object
    auto instanceof Car
    
    2,数组去重

    1,Set

    ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值:

    Array.from(new Set(newArr))
    

    Array.from()方法将一个类数组对象或者可遍历对象转成一个真正的数组

    什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象

    let arrayLike = {
      0: 'tom',
      1: '65',
      2: '男',
      3: ['jane', 'john', 'Mary'],
      length: 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr)
    

    数组扁平化 如果把上面代码中的length去掉,实践证明,答案是:一个空数组([])

    现将以上代码修改:

    let arrayLike = {
      'name': 'tom',
      'age': '65',
      'sex': '男',
      'friends': ['jane', 'john', 'Mary'],
      length: 4
    }
    let arr = Array.from(arrayLike) // ES6写法
    console.log(arr)
    // [undefined, undefined, undefined, undefined]
    会出现长度为4,元素均为undefined的数组
    
    // ES5写法
    let arr = [].slice.call(arrayLike)
    

    将一个类数组对象转换为一个真正的数组,必须具备以下条件:

    1,该类数组对象必须具有length属性,用于指定数组的长度,如果没有length,转换后的数组就是一个空数组

    2,该类数组对象的属性名必须是数值型或者字符串型的数字

    2, 去重方法2:reduce

    newArr.reduce((a, b) => {
      if (a.indexOf(b) === -1) {
        a.push(b)
      }
      return a
    }, [])
    

    3,数组下标去重法

    newArr.filter((ele, idx, arr) => {
      return arr.indexOf(ele) === idx
    })
    

    通过数组的过滤方法,利用indexOf获取当前元素ele在被过滤数组arr中的第一个索引值,如果值与当前索引值idx相当则返回,如果不相等则过滤。

    4, 遍历数组方法去重

    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
      }
    }
    
    3, 数组排序

    var arr = [5, 6, 3, 1, 8, 7, 2, 4]

    1,sort

    function sort(arr) {
      return arr.sort((a, b) => {return a - b})
    }
    

    2, 冒泡排序

    function bubbleSort(arr) {
      var len = arr.length
      for (let i = len - 1; i > 0; i--) {
        for (let j = 0; j < i; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      return arr
    }
    bubbleSort(arr)
    

    数组扁平化 思路:

    双层循环,外循环控制需要比较的元素,比如第一次排序后,最后一个元素就不需要比较了,内循环则负责两两元素比较,将元素放在正确位置上

    3,插入排序

    function insertSort(arr) {
      var temp
      for (let i = 1; i < arr.length; i++) {
        temp = arr[i]
        for (var j = i; j >= 0; j--) {
          if (arr[j - 1] > temp) {
            arr[j] = arr[j - 1]
          } else {
            arr[j] = temp
            break
          }
        }
      }
      return arr
    }
    insertSort(arr)
    

    数组扁平化 思路:

    双层循环,外循环控制未排序的元素,内循环控制已排序的元素,将未排序元素设为标杆,与已排序的元素进行比较,小于则交换位置,大于则位置不动 4, 快速排序

    function quickSort(arr) {
      //如果数组<=1,则直接返回
      if (arr.length <= 1) {
        return arr;
      }
      var pivotIndex = Math.floor(arr.length / 2);
      //找基准,并把基准从原数组删除
      var pivot = arr.splice(pivotIndex, 1)[0];
      //定义左右数组
      var left = [];
      var right = [];
    
      //比基准小的放在left,比基准大的放在right
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] <= pivot) {
          left.push(arr[i]);
        } else {
          right.push(arr[i]);
        }
      }
      //递归
      return quickSort(left).concat([pivot], quickSort(right));
    }
    quickSort(arr)
    

    数组扁平化

    描述:

    1,在数据集之中,选择一个元素作为“基准”(pivot),一般以中间做为基准

    2,所有小于“基准”的元素放left,所有大于“基准”的元素放right,这个操作称为分区操作,分区操作结束后,基准元素所处的位置就是最终排序后他的位置

    3,对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止


    起源地下载网 » 数组扁平化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元