数组 Array

数组即一组数，是指在一段连续的内存中存储相同类型元素(保证元素长度系统一致)的一种集合。

数组长度是固定的，每个元素有对应一个索引，并且这个索引同数组所占内存的一样是连续的。

在不同的编程语言中，对数组的实现不尽相同。在JS中，数组的长度是非固定的， 类型也非固定，并且能存放任意类型， 这意味着在JS程序中， 你可以看到以下的代码：

const arr = [1, '张三', [1], function fn() {}]

实际上，js中的数组大部分情况下在内存中都是非连续的，因此大多情况下用普通数组达不到很高的性能。这体现在遍历数组时寻址的性能差距，且数组中的每个number元素至少都要占 4字节, 因为js中只有number类型（该类型是32位的）。

大多数情况下，你都不需要为你数组的类型困扰。唯一需要注意的是尽可能的保持元素类型的一致（方便js引擎进行优化）。

类型数组 TypedArray

js也有对数组的正统实现：TypedArray。

const arr1 = new Uint8Array()
const arr2 = new Uint16Array()

这个类型在操作二进制数据（文件）时有很大的作用

使用场景

数组的传统使用场景就是操作底层数据，但在前端中除了编码和文件操作，几乎用不到。因此以下提到的大多是前端的应用场景。

• 作为普通的数组使用
• 作为栈使用
• 作为队列使用
• 作为列表使用

JS中 数组的方法

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

<template>
  <div class="box">
    <div>origin: {{ origin }}</div>
    <div>arr: {{ arr }}</div>

    <VRunCode
      title="切割"
      :code="code1"
      :ctx="{
        arr
      }"
    />

    <VRunCode
      title="拼接"
      :code="code2"
      :ctx="{
        arr
      }"
    />
  </div>
</template>

<script lang="ts" setup>
import { shallowReactive } from 'vue'

const origin = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const arr = shallowReactive([...origin])

const code1 = `
return arr.slice(2, 3)
`

const code2 = `
const result = arr.splice(1, 3)
console.log(arr)
return result
`
</script>

<style scoped>
.box > div {
  margin-bottom: 10px;
}
</style>