跳到主要内容

创建数组

创建数组的 4 种方式

1.数组字面量​

数组字面量创建数组
let empty = [] // 没有元素的数组
let primes = [2, 3, 5, 7, 11] // 亿欧5个整值元素的数组
let misc = [1.1, true, 'a'] // 3种不同类型的元素数组
let count = [1, , 3] // 索引0和2有元素，索引1没有元素
console.log(count) // => [1, 空, 3]
let undefs = [, ,] // 两个空数组,数组字面量语法允许末尾出现逗号。
console.log(undefs) // => [空 ×2]

2.对可迭代对象使用...扩展操作符​

let a = [1, 2, 3]
let b = [0, ...a, 4]
console.log(b) // =>[0, 1, 2, 3, 4]
// 可以扩展字符串
let digits = [...'0123456789ABCDEF']
console.log(digits) // ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']

3.Array()构造函数​

有三种方法可以调用这个构造函数

不传参数调用:​

let a = new Array() // 创建一个没有元素的空数组，等价于数组字面量[]

传入一个数组参数，指定长度：​

创建了一个指定长度的数组，注意:这时候数组不会存储任何值，数组索引“0”，“1”等甚至都没有定义。
let a = new Array(10)

传入两个或更多个数组元素，或传入一个非数值元素；​

let a = new Array(5, 4, 3, 2, 1, 'testing,testing')

使用数组字面量永远比这种 new Array() 构造函数更简单

4.工厂方法 Array.of() 和 Array.from()​

Array.of() 属于的​

  • Array.of() 新建一个新数组，（）里面参数如果为空就是创建一个[ ]空数组，如果里面有参数，参数就是数组元素的值。
  • 解决 new Array() 参数是数组个数，无法创建一个数字元素问题。
let e = new Array(1) // 1是数组长度。这种方式永远无法创建一个元素值是一个整数问题。
console.log(e) // => [空]
let f = Array.of(1) // 1是数组值，ES6提供
console.log(f) // => [1]

Array.from() 来自​

Array.from() 是 ES6 另外新增的另一个工厂方法。

Array.from() 是 JavaScript ES6 引入的一个方法，它主要用于将类数组对象（array-like object）或可迭代对象转换为真正的数组实例。这在处理 DOM 集合、函数的 arguments 对象或其他非标准数组结构时非常有用。

语法：

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

  • arrayLike: 必需参数，是一个类数组对象或者可迭代对象。类数组对象是指具有 length 属性和索引元素的对象，如 NodeList 或 HTMLCollection 等。

  • mapFn: 可选参数，是一个映射函数，用于对每个源元素进行处理并将其结果放入新数组中。该函数会被应用到每个源数组元素上，并接收两个参数：当前元素值和其对应的索引。

  • thisArg: 可选参数，执行回调函数 mapFn 时作为 this 的上下文。

示例：

  1. 将类数组对象转换为数组：
let arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 }
let arr = Array.from(arrayLike)
console.log(arr) // ['a', 'b', 'c']
  1. 使用映射函数转换：
let nodeList = document.querySelectorAll('div')
let divsAsArray = Array.from(nodeList, (node) => node.textContent)
console.log(divsAsArray) // 包含所有匹配到的 div 元素文本内容的数组
  1. 转换字符串为字符数组：
let str = 'Hello, world!'
let charArray = Array.from(str)
console.log(charArray) // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!']
  1. 转换 Set 或 Map 为数组：
let set = new Set([1, 2, 3, 4])
let setAsArray = Array.from(set)
console.log(setAsArray) // [1, 2, 3, 4]

let map = new Map([
  [1, 'one'],
  [2, 'two'],
])
let mapEntriesAsArray = Array.from(map.entries())
console.log(mapEntriesAsArray) // [[1, 'one'], [2, 'two']]

通过 Array.from(), 开发者可以更方便地操作非标准数组形式的数据，并利用数组的所有内置方法进行进一步处理。