玩命加载中 . . .

多维数组转一维数组

一、数组的 join()

let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
console.log(arr.join()) // 输出为:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
let newArr = arr.join().split(',')
console.log(newArr) // 输出为:["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"]

二、toString()

let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
console.log(arr.toString()) // 输出为:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
let newArr = arr.toString().split(',')
console.log(newArr) // 输出为:["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"]

三、空字符串的方法

let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
console.log(arr + '') // 输出为:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
let newArr = (arr + '').split(',')
console.log(newArr) // 输出为:["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"]
优化 数组中每项为字符串将其转换成nunber类型 
let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
console.log(arr + '') // 输出为:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
let newArr = (arr + '').split(',')
console.log(newArr) // 输出为:["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"]
let numberArr = [] // 用于存放新的number类型的数组
newArr.forEach(function (data, index, arr) {
  numberArr.push(+data)
})
console.log(numberArr) // 输出为:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]

四、递归调用

let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
let newArr = [] // 存放转化后的一维数组
function arrConversion (arr) {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      arrConversion(arr[i])
    } else {
      newArr.push(arr[i])
    }
  }
}
arrConversion(arr)
console.log(newArr) // 输出:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]

五、flat()

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]

flatMap()

先对数组中每个元素进行了的处理,再对数组执行 flat() 方法。

// 参数1:遍历函数,该遍历函数可接受3个参数:当前元素、当前元素索引、原数组 // 参数2:指定遍历函数中 this 的指向 
// 参数1:遍历函数,该遍历函数可接受3个参数:当前元素、当前元素索引、原数组
// 参数2:指定遍历函数中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

递归调用优化

var arr = [1,2,3,[4,5,[6,7]]];
 function change(arr) {
      var newArr = [];
      arr.map(item => typeof item === 'object' ? newArr = newArr.concat(change(item)) : newArr.push(item))
      return newArr;
 }
console.log(change(arr))

Array的flat()实现方式

let arr1 = [1,2,[3,4]]
    console.log(arr1.flat()) // [1,2,3,4]
    //实现方式1 递归
    Array.prototype.flat = function(){
      var arr = [];
      this.forEach((item,idx)=>{
        if(Array.isArray(item)){
          arr=arr.concat(item.flat());
        }else{
          arr.push(item)
        }
      })
      return arr
    }
//实现方式2
//连接数组返回字符串用,进行分割,然后map映射将数组的string转换为number
arr.prototype.flat = function(){ this.toString().split(',').map(item=>+item) }
// map映射: 
var arr = [1,2,3] 
var arr2=arr.map((item)=>{return item*2}) 
console.log(arr2) [2,4,6]

 上一篇
ES6 语法汇总 ES6 语法汇总
ES6 即 ECMAScript6,主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,由于 ES6 这个版本变动比较大且后续基本稳定下来。本文主要对 ES6 的特性语法进行了一个整理。
2022-06-29
下一篇 
九种跨域方式及其原理 九种跨域方式及其原理
浏览器和服务端之间进行数据交互经常会面临跨域问题,由于受到同源策略的影响,属于不同域的页面之间不能相互访问各自的页面内容。本文非常详细的介绍了九种跨域的方法及其原理。
2022-05-01
  目录