一、处理方案

1、Array 方法

• Array.from

Array.from(arrayLike[, mapFn[, thisArg]])

• Array.prototype.slice.call

Array.prototype.slice.call(arrayLike)

2、拓展运算符

  其实拓展运算符...也能将类数组和可迭代对象转换为数组。

// 字符串
const str = 'hello'

const charArray = Array.from(str) // ['h', 'e', 'l', 'l', 'o']
const charArray = [...str] // ['h', 'e', 'l', 'l', 'o']

  但 Array.from()使用方式更灵活一些。

// 生成一个指定范围的数字数组
const start = 1
const end = 5

const rangeArray = Array.from({ length: end - start + 1 }, (_, index) => start + index)
// const rangeArray = Array.from({ length: end - start + 1 }).map((_, index) => start + index)
console.log(rangeArray) // 输出：[1, 2, 3, 4, 5]

  对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

二、类数组对象

// 类数组对象 👏
let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

let arr2 = Array.from(arrayLike) // ['a', 'b', 'c']

提示

  常见的类数组对象有：Arguments 对象、NodeList 对象、Set 对象、Map 对象等

1、arguments 对象

  如果真的想要获取参数数组，其实我更加推荐使用 args 参数

args 参数

function list(...args) {
  return args
}

let params = list(6, 5, 8) // [6, 5, 8]

function list() {
  console.log(arguments)
  // [
  //   0: 6,
  //   1: 5,
  //   2: 8,
  //   length: 3
  // ]

  return Array.from(arguments) // ES6 写法
  // return Array.prototype.slice.call(arguments)  // ES5写法
}

let params = list(6, 5, 8) // [6, 5, 8]

2、NodeList 对象 🎈

提示

  通常情况下，我们可以通过 querySelectorAll() 获得一个 NodeList 对象

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

<script>
  let objList = document.querySelectorAll('li')
  // [
  //   0: li,
  //   1: li,
  //   2: li,
  //   3: li,
  //   length: 4
  // ]

  var newList = Array.from(objList)
  // [li, li, li, li]
</script>

3、Set 对象

// 去重
let arr = ['foo', 'bar', 'baz', 'foo']

const setT = new Set(arr)
// {
//   0: 'foo',
//   1: 'bar',
//   2: 'baz',
//   size: 3
// }

Array.from(setT)
// [ "foo", "bar", "baz" ]

4、Map 对象

// 数组复原
let arr = [
  [1, 2],
  [2, 4],
  [4, 8]
]
const map = new Map(arr)
// {
//   0: {1 => 2},
//   1: {2 => 4},
//   2: {4 => 8},
//   size: 3
// }

Array.from(map)
// [[1, 2], [2, 4], [4, 8]]

三、Array.from 与 回调使用

提示

  其实 Array.from(arrayLike, mapFn)中的回调函数，和直接在后面使用 map 函数 Array.from(arrayLike).map(Fn)是一样的效果。

1、类数组中

let objList = document.querySelectorAll('li')

var newList = Array.from(objList, function (item, index) {
  return `<li>${index}</li>`
})
// 等效于：
// var newList = Array.from(objList).map(function (item, index) {
//   return `<li>${index}</li>`
// })

document.querySelector('ul').innerHTML = newList.join('')

2、可迭代对象中

// 1、Set对象
// 数据处理
const set = new Set([1, 2, 3])

const arrayFromSet = Array.from(set, (num) => num * 2) // [2, 4, 6]
// 等效于:
const arrayFromSet = Array.from(set).map((num) => num * 2) // [2, 4, 6]