首页 ›  文章

JavaScript数组_二维数组_三维数组(二十五)

2019-12-04
<input id="articleId" value="1190000021197156" class="hidden">

目录:

1.二维数组

2.三维数组

3.多维数组扁平化处理

一、二维数组

第一种方法:通过数组表达式来创建二维数组

var ArrayObj = [ [ 1,2 ], [ 1,2] ];

第二种方法:通过构造函数来创建二维数组

//第一种方式:传递两个Array构造函数到参数中
var ArrayObj = new  Array(new  Array(),new  Array());

//第二种方式:传递两个Array表达式到参数中
var ArrayObj = new  Array([],[]);

//第三种方式:通过for循环为其添加Array构造函数
var ArrayObj = new Array();    //创建数组对象
for (var i = 0; i < length; i++) {
    ArrayObj[i] = new Array();    //在每一个数组元素内再定义一个数组
}

二、三维数组

三维数组:[[["a","b","c"],[1,2,3]],[["a","b","c"],[1,2,3]]]; //数组的每一个元素是一个二维数组。

三、多维数组扁平化处理【案例】

// 多维数组扁平化 
var arr=[1,2,[3,4,[5,6,7]],9,[10,11]]

// 1) 方法一  循环数组+递归调用
function steamroller (arr){
  // 1.创建一个新数组,保存扁平后的数据
  var newArr=[];
  // 2.for循环原数组
  for(var i=0;i<arr.length;i++){
    if(Array.isArray(arr[i])){
      // 如果是数组,调用steamroller 将其扁平化
      // 然后在push 到newArr中
      newArr.push.apply(newArr,steamroller(arr[i]))
    }else {
      // 反之 不是数组,直接push进newArr
      newArr.push(arr[i])
    }
  }
  // 3.返回新的数组
  return newArr
}
console.log(steamroller(arr)) // [ 1, 2, 3, 4, 5, 6, 7, 9, 10, 11 ]

// 2) 方法二  利用apply+some
// 利用arr.some判断当数组中还有数组的话,递归调用steamroller2扁平函数(利用apply扁平), 用concat连接,最终返回arr;
function steamroller2(arr){
  while(arr.some(item=> Array.isArray(item))){
    arr=[].concat.apply([],arr)
  }
  return arr
}
console.log(steamroller2(arr))

// 3) 方法三   reduce方法
// 当数组中还有数组的话,递归调用steamroller3扁平函数(利用reduce扁平), 用concat连接,最终返回arr.reduce的返回值;
function steamroller3(arr){
  return arr.reduce((prev,next)=>{
    return prev.concat(Array.isArray(next)?steamroller3(next):next)
  },[])
}
console.log(steamroller3(arr))

// 4) 方法四   es6 展开运算符
// 利用arr.some判断当数组中还有数组的话,递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接,最终返回arr;

function steamroller4(arr){
  while(arr.some(item=> Array.isArray(item))){
    // arr=[].concat.apply([],arr)
    arr=[].concat(...arr)
  }
  return arr
}
console.log(steamroller4(arr))

下节预告:数组_数组方法【一】

[![](https://img.javascriptcn.com/beeb839d626f2b5ab325c7b259dae44d.png) ](/u/zhongshenchengchangxing)

<button type="button" class="btn btn-primary follow-user sf_do" data-dotype="post" data-content="{"type":"state","state":false,"true":"\u5173\u6ce8\u4f5c\u8005","false":"\u6b63\u5728\u5173\u6ce8"}" data-api="/iteration/api/user/1030000020463724/follow">关注作者</button>

推荐阅读
![Planets](https://img.javascriptcn.com/6611db3016e948089211a55ff6ecf9e1.png) <map name="gridsMap" id="gridsMap"></map>
原文链接:segmentfault.com

上一篇:爬虫必备:Python 执行 JS 代码 —— PyExecJS、PyV8、Js2Py
下一篇:WebSocket 移动端连接会断开-坑
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入