精华内容
下载资源
问答
  • Javascript数组降维

    2020-07-31 15:01:27
    Javascript实现的数组降维 JS 中数组默认是一维的(数组的每一个元素是简单类型,不是引用类型)。如果数组的某一项还是数组,那么我们认为数组是二维或者高维的,在算法题目中经常遇到这种情况。 数组的元素可能是...

    Javascript实现的数组降维

    JS 中数组默认是一维的(数组的每一个元素是简单类型,不是引用类型)。如果数组的某一项还是数组,那么我们认为数组是二维或者高维的,在算法题目中经常遇到这种情况。

    数组的元素可能是数组,这样一层层嵌套,可能得到一个嵌套很深的数组,数组降维要做的事就是把嵌套很深的数组展开,一般最后得到一个一维数组,其中的元素都是非数组元素,比如数组[1, [2, 3, [4, 5], 6], 7, 8]降维展开后是[1, 2, 3, 4, 5, 6, 7, 8].

    备注:ES6中,提供了 Array.flat API 直接将高维数组转换成一位数组,不需要使用下面的方法。现在我主要使用这种方法实现数组降维。

    1.普通方法

    function flattenMd(arr){
      var result=[]
      function flatten(arr){
        for (var i = 0; i < arr.length; i++) {
          if (Array.isArray(arr[i])) {
            flatten(arr[i]);
          }else{
            result.push(arr[i]);
          }        
        }
      }
      flatten(arr);
      return result;
    }
    var arr=[1, [2, 3, [4, 5], 6], 7, 8]
    console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ]
    

    **备注:**这里我使用了Array.isArray()方法来检测对象时候是数组。当然了如果支持ES5的话,还可以直接使用数组的迭代方法forEach(或map、reduce等),Es6中还有for···in可以使用,这里就不赘述了。
    这个方法需要定义两个函数,其中flatten方法位于内部。还可以改造成闭包的形式

    function flattenMd(ret) {
      function flatten(arr) {
        arr.forEach(function(item) {
          (Array.isArray(item)) ? flatten(item) : ret.push(item);
        });
      }
    
      return function(arr) {
        flatten(arr);
        return ret;
      }
    
    }([]);
    var arr=[1, [2, 3, [4, 5], 6], 7, 8]
    console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ]
    

    2.数组concat方法

    熟悉数组操作方法的开发人员应该知道数组concat方法的特性:传递给concat方法的参数序列中如果包含数组,则会将这个数组的每一项添加到结果数组中,这就使数组的这个方法具有了天然的展开二维数组的能力,比如:

    var colors=['red','green','blue'];
    var colors2=colors.concat('yellow',['black','brown']);
    console.log(colors2)//[ 'red', 'green', 'blue', 'yellow', 'black', 'brown' ]
    

    **需要注意的是如果数组的元素还是数组则不会再展开了,也就是concat方法只能降低一维。**借助concat方法,可以得到另一种二维数组降维方法。

    function flatten2d(arr) {
      var result = [];
      for(var i = 0; i < arr.length; i++) {
        result = result.concat(arr[i]);
      }
      return result;
    }
    

    上面的方法还可以进一步简化。我们知道apply方法是可以直接接受数组参数,这样我们连循环迭代都省了。

    function flatten2d(arr) {
      return Array.prototype.concat.apply([], arr);
    }
    

    网上很多博客说使用递归很容易将二维的降维改造成多维的降维,实际上操作起来是比较复杂的,因为没有现成的方法能够判断某个数组是不是二维数组,也就不能判断递归的结束条件了。所以对于多维数组的降维需要重新规划使用concat方法可以避免方法一中多出的内部函数
    对于多维数组

    function flattenMd(arr) {
      var result = [];
      for(var i = 0; i < arr.length; i++){
        if(arr[i] instanceof Array) {
          result = result.concat(flattenMd(arr[i]));
        }
        else {
          result.push(arr[i]);
        }
      }
      return result;
    }
    var arr=[1, [2, 3, [4, 5], 6], 7, 8]
    console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ]
    

    3.数组join和split方法的结合(有问题)

    很多开发人员都知道数组的join方法可以将数组展开成字符串,但是不确定的是join方法能够展平数组,即使是多维数组,我们再使用split方法重新组合数组就行了。但是这个方法有天然缺陷,下面的例子中会看到

    function flattenMd(arr) {
       return arr.join().split(',');   
    }
    var arr=['1', [null, 3, [4, 5], {K:1}], undefined, 8]
    
    console.log(flattenMd(arr));//[ '1', '', '3', '4', '5', '[object Object]', '', '8' ]
    

    从结果可以看出,这样处理过后有几个缺点:一是所有类型的元素都会变成字符串;二是null、undefined会变成空字符串、对象会变成’[object Object]’。相当于调用了toString方法,当也不是说这个方法一无是处。对于同一种类型的元素,还是很有用处的,比如要求多维数组的最大值。

    function flattenMd(arr) {
       return arr.join().split(',');   
    }
    var arr=[1, [5, 3, [8, 5], 5,[15]], 9, 13]
    console.log(Math.max.apply(null,flattenMd(arr)));//15
    

    4.实际使用

    function flatten(arr) {
      return arr.reduce((prev, cur) => {
        return plane.concat(Array.isArray(cur) ? flatten(cur) : cur);
      }, []);
    }
    
    function deepFlatten(arr) {
      flatten = arr => [].concat(...arr);
      return flatten(arr.map(item => (Array.isArray(item) ? deepFlatten(item) : item)));
    }
    
    展开全文
  • Js数组降维

    2021-03-27 14:00:36
    Js数组降维的两种常用方法: 1.使用函数的flat()方法; 2.使用递归降维; 下面分别介绍两种方法: 1.flat()方法: //falt(num) num => 降几个维度,不写默认为一维 当num为Infinity,意味着将数组变成一维数组...

    Js数组降维的两种常用方法:
    1.使用函数的flat()方法;
    2.使用递归降维;

    下面分别介绍两种方法:

    1.flat()方法:

    //falt(num)  num => 降几个维度,不写默认为一维   当num为Infinity,意味着将数组变成一维数组。 注意区分降的维度数和降成几维
    let arr = [1,2,[1,[4,6,[2,5,1],3,3],5],4,0,[2,3],7,23,7,2,8,67,23];
    console.log(arr.flat(Infinity));  //[1, 2, 1, 4, 6, 2, 5, 1, 3, 3, 5, 4, 0, 2, 3, 7, 23, 7, 2, 8, 67, 23]
    
    

    2 递归方法降维,(降成一维数组)

    let arr = [1,2,[1,[4,6,[2,5,1],3,3],5],4,0,[2,3],7,23,7,2,8,67,23];
    //创建一个新数组,用来保存降维后的数组
    let newArr = [];
    function fun(arr){
    	if(!Array.isArray(arr)) return; //如果传入的不是数组,退出函数
    	while(arr.length){ //动态判断数组的长度,如果长度为0,退出循环
    		let value = arr.shift();  //截取数组的第一个值
    		if(Array.isArray(value)){
    			fun(value);   //如果数组的数组项是数组,递归调用fun()函数,进行达到降维目的
    		}else{
    			newArr.push(value);  //将截取的数组项添加到新数组中
    		}
    	}
    };
    fun(arr);
    console.log(newArr); //[1, 2, 1, 4, 6, 2, 5, 1, 3, 3, 5, 4, 0, 2, 3, 7, 23, 7, 2, 8, 67, 23]
    
    展开全文
  • JS数组降维–Array.prototype.concat.apply二维数组降为一维数组循环降维concat降维apply和concat降维Vue2.6.11版本源码降维多维数组降为一维数组递归降维 把多维数组(尤其是二维数组)转化为一维数组是业务开发中...
  • js数组降维

    2019-03-01 22:35:29
    二维数组降维 第一种方法,使用for循环遍历数组 var arr = [1,2,[3,4],5,{a:1}]; var downArr = []; for(var i=0;i&amp;amp;lt;arr.length;i++){ for(var j=0;j&amp;amp;lt;arr[i].length;j++){ downArr....

    二维数组降维

    第一种方法,使用for循环遍历数组

    var arr = [1,2,[3,4],5,{a:1}];
    var downArr = [];
    for(var i=0;i<arr.length;i++){
           for(var j=0;j<arr[i].length;j++){
               downArr.push(arr[i][j]);
           }
    }         
    console.log(downArr); //downArr[1,2,3,4,5,{a:1}]
    

    第二种方法,利用concat()不断合并原数组中的元素。

    var arr = [1,2,3,[4,5],{a:1}];
    var downArr = [];
    for(var i=0;i<arr.length;i++){
         downArr = downArr.concat(arr[i]);
    }
    console.log(downArr); //downArr = [1,2,3,4,5,{a:1}]
    

    第三种方法,巧妙运用apply()的特性,apply可以把一个数组默认的转换为参数列表,然后再结合concat()。

    var arr = [1,2,3,[4,5]];
    function fun(arr){
    	return Array.prototype.concat.apply([],arr);
    }
    console.log(fun(arr)); //[1,2,3,4,5]
    

    N维数组降维

    我们知道多维数组不仅仅是二维,还有N维,当我们做N维数组降维的时候,因为我们不确定数组的维度,所以不能直接concat()来合并数组以达到降维的目的,这个时候就可以考虑使用递归的方法来实现。

    var arr = [1,2,3,[4,5,6],[7,[8,9]],{a:1}];
    var newArr = [];
    function downArr(a){                
        for(var i=0;i<a.length;i++){
            Array.isArray(a[i]) ? downArr(a[i]) : newArr = newArr.concat(a[i]); //判断原数组当前元素是否是数组,如果是那就再次调用本方法,如果不是就concat,直到循环完整个数组。
        }
        return newArr;
    }
    console.log(downArr(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, {a:1}]
    
    展开全文
  • JS数组降维--Array.prototype.concat.apply([], arr)

    万次阅读 多人点赞 2020-04-25 10:57:53
    JS数组降维--Array.prototype.concat.apply二维数组降为一维数组循环降维concat降维apply和concat降维Vue2.6.11版本源码降维多维数组降为一维数组递归降维 把多维数组(尤其是二维数组)转化为一维数组是业务开发中...

    多维数组(尤其是二维数组转化为一维数组是业务开发中的常用逻辑,最近跟着黄轶老师学习Vue.js 2.5.17-beta版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象

    Vue源码学习

    二维数组降为一维数组

    循环降维

    let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
    function simpleNormalizeChildren(children) {
      let reduce = [];
      for (let i = 0; i < children.length; i++) {
        if (Array.isArray(children[i])) {
          for (let j = 0; j < children[i].length; j++) {
            reduce.push(children[i][j]);
          }
        } else {
          reduce.push(children[i]);
        }
      }
      return reduce;
    }
    simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    

    此方法思路简单,利用双重循环遍历二维数组中的每个元素并放到新数组中。

    concat降维

    MDN上对于concat的介绍
    “concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”
    concat
    如果concat方法参数是一个元素,该元素会被直接插入到新数组中;如果参数是一个数组该数组的各个元素将被插入到新数组中;将该特性应用到代码中:

    let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
    function simpleNormalizeChildren(children) {
      let reduce = [];
      for (let i = 0; i < children.length; i++) {
        reduce = reduce.concat(children[i]);
      }
      return reduce;
    }
    simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    

    children 的元素如果是一个数组,作为concat方法的参数数组中的每一个子元素会被独立插入进新数组。利用concat方法,我们将双重循环简化为了单重循环。

    apply和concat降维

    MDN上对于apply方法的介绍
    “The apply() method calls a function with a given this value and arguments provided as an array.”
    apply
    apply方法会调用一个函数,apply方法的第一个参数作为被调用函数的this值,apply方法的第二个参数(一个数组,或类数组的对象)作为被调用对象的arguments值,也就是说该数组的各个元素将会依次成为被调用函数的各个参数;将该特性应用到代码中:

    let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
    function simpleNormalizeChildren(children) {
      return Array.prototype.concat.apply([], children);
    }
    simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    

    children作为apply方法的第二个参数,本身是一个数组,数组中的每一个元素(还是数组,即二维数组的第二维)会被作为参数依次传入到concat中,效果等同于[].concat(1, 2, 3, [4, 5, 6], 7, 8, [9, 10])。利用apply方法,我们将单重循环优化为了一行代码

    Vue2.6.11版本源码降维

    let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
    // :any 可以去掉 这里是Vue通过Flow指定传入的参数类型可以是任意类型
    function simpleNormalizeChildren(children: any) {
      for (let i = 0; i < children.length; i++) {
        if (Array.isArray(children[i])) {
          return Array.prototype.concat.apply([], children);
        }
      }
      return children;
    }
    
    simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    

    多维数组降为一维数组

    递归降维

    递归函数就是在函数体内调用自己

    递归函数的使用要注意函数终止条件避免死循环

    // 多维数组
    let children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]];
    function simpleNormalizeChildren(children) {
      for (let i = 0; i < children.length; i++) {
        if (Array.isArray(children[i])) {
          children = Array.prototype.concat.apply([], children);
          for(let j =0; j<children.length; j++) {
            simpleNormalizeChildren(children)
          }
        }
      }
      return children;
    }
    simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    

    大家有更好的降维方法嘛;欢迎留言讨论


    谢谢你阅读到了最后
    期待你,点赞、评论、交流

    展开全文
  • 主要介绍了JS数组降维的实现Array.prototype.concat.apply([], arr),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • js数组降维浅解

    2020-05-20 09:02:30
    js数组降维浅解 简单的二维数组降为 arr=['a',['b'],['c'],['d'],'e','f']//二维数组 arr.flatMap(v=>v)//flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()) //["a", "b", "c", ...
  • JavaScript数组降维 Array类型方法总结 JavaScript数组降维 Q: [[1,2,3],[4,5,6]]这样的二维数组降维成一维数组 // 遍历数组 使用concat连接 function reduceDimension(arr) { let arr2 = []; arr....
  • JavaScript数组降维

    2019-09-26 10:03:15
    首先将n维数组降维为n-1维,依次递归,降维一维。  使用递归,需要知道(1)递归的条件;(2)结束的条件。递归函数传入一个数组参数,当数组元素是数组的时候,进行递归;数组元素不为数组的时候,将元素push到...
  • js 数组降维

    2019-07-02 15:15:58
    let result = [] function ok(arr) { arr.forEach(function (item) { if (Object.prototype.toString.call(item)==="[object Array]") { ok(item) }else { result.push...
  • JS数组降维的几种方法

    多人点赞 热门讨论 2021-04-07 10:24:09
    二维数组降维 使用数组实例方法concat和ES6扩展运算符降维 let arr=[1,2,[3,4],5]; let arr1=[].concat(...arr); //先使用扩展运算符打散最外边的数组,concat自带打散粘合数组的功能 console.log(arr1); // [1, 2, ...
  • 大家都知道将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性和...下面跟着小编一起来学习学习关于JavaScript如何实现数组降维吧。
  • 二维数组降维 使用数组实例方法concat和ES6扩展运算符降维 let arr=[1,2,[3,4],5]; let arr1=[].concat(...arr); //先使用扩展运算符打散最外边的数组,concat自带打散粘合数组的功能 console.log(arr1); // [1, ...
  • 用filter等方法进行数组降维昨天说了reduce数组降维,今天突然想到,为什么不能用其他api来降维,应该也是可以,就试了下,果然可以,但还是遇到了些小问题 直接上代码了let array = [2, 3, 5, [8,[ 4, 6, 9]]]; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,271
精华内容 508
关键字:

js数组降维