Api

api使用不提。
注意 forEach``find可以提前退出，every some 当然也是。但是 map/reduce/filter 没有办法中途退出。除了reduce 都没办法逆序。

Array.sort

会修改原数组。

Array.from

  1. // 写node爬虫时候挺常见的 
  2. Array.form(数组、类数组)
  3. Array.prototype.slice.appay(类数组)
  4. [].slice.call(list) instanceof Array

Array.reduce

最基础的就是数组求和：

  1. var a = [1,2,3,4,5]
  2. // 请计算a的数组和
  3. a.reduce(
  4.   (prev,cur)=> prev+cur,
  5.   0
  6. )

栈、队列

js的数组方法可以模拟基本的数据结构。

稀疏数组

没有从0开始索引的数组。一般情况下length长度就是元素个数。但数组本身可以是稀疏的，也就是该有的地方没有。造成的现象是 length 长度大于实际元素个数。

  1. var a = new Array(5) // 有长度没内容
  2. a[1000]=0 // 中间是空的，尾部有值。
  3. a=[,,] // 数组是可以逗号结尾的，长度是2

尤其注意，es6新增的api和早期的版本处理不太一致。比如：

  1. for(let i in [1,,,,]){
  2.   console.log(i)
  3. }
  4. // 0
  6. for(let i in Array.from([1,,,])){
  7.   console.log(i)
  8. }
  9. // 0 1 2
  10. for(let i in Array.of(...[1,,,])) {
  11.   console.log(i)
  12. } // 0 1 2

首先是没啥场景，表现又不一致，就是比较坑。少用。

Type Array

定型数组。js的数组和webGL中的数组不匹配。导致耗时。有点跨语言、跨协议的意思了。

首先就是 ArrayBuffer和 SahredArrayBuffer，后者是前者的变体，后者无需复制就可以在执行上下文之间传递。

  1. const buf = new ArrayBuffer(16);
  2. // 在内存中分配16字节
  3. // buf.length=16
  4. Object.prototype.toLocaleString.call(buf)
  5. // [object ArrayBuffer]

ArrayBuffer一经创建就不能再调整，如果要调整可以通过 slice新开辟空间。

如果要读取、写入内容，需要通过视图，比如 DataView，这个专为 文件I/O 和 网络I/O设计，支持对缓冲数据的高度控制，但相比其他视图类型性能就差点。

  1. const buf = new ArrayBuffer(16)
  2. const fullDataView = new DataView(buf)
  3. fullDataView;
  4. fullDataView.buffer===buf;//true
  5. var f1=new DataView(buf,0,8)
  6. var f2=new DataView(buf,9)

DataView 使用 ElementType 实现js 数字类型到 缓冲内二进制格式的转换。

具体内容就不弄了，不是很懂。还有字节序、大端字节序、小端字节序。

通过DataView 完成读写的前提是有足够的缓冲区，否则会 RangeError，哦范围报错这里还有一个场景，js报错时候困惑过。

其他的就先略过了，等用到了再看。应用场景：Blob、数据下载导出

文件下载

文件下载二进制有多种方式：

  • 后端负责生成现成的文件，给你文件连接，前端通过 window.open(url) 里实现下载
  • 后端返回二进制数据流，内容是乱码
    • 如果是get，还是 window.open
    • 如果是post，除了考虑改成get，就需要前端做拼装

数据流这个，主要是 blob的概念。这部分可以和 Type Array 结合来看。

blob 详解

blob 是一个不可变、原始数据类型的类文件对象，里面的东西不一定是js的原生格式（也即是二进制乱码） Blob 表示二进制类型的大对象，通常是影像、声音或多媒体文件，在 javaScript 中 Blob 表示一个不可变、原始数据的类文件对象。

一般这样用：

  1. new Blob(blobParts, options)
  • blobParts
    • ArrayBuffer
    • ArrayBufferView
    • Blob
    • DOMString

连接起来组成具体数据。

  • options
    • type 指定 mime
    • endings 行结束符 \n 如何被写入。
      • native 根据系统来
      • 默认值 transparent 保持内部不变

返回的 blob

  • 属性
    • size 包含的数据大小
    • type 表示 mime类型
  • 方法
    • slice()
    • stream()
    • text()
    • arrayBuffer()

File 对象是一种特殊的 blob对象，集成了blob的属性和方法，也可以用于 fromData 二进制上传

比如通过 Inpt:type 的值 

  1. var files = event.target.files
  2. files[0] instanceof File // true
  3. files intanceof FileList
  4. file instanceof Blob true

实际场景中，从 xhr file api canvas等地方读取的文件二进制流，如果使用js存，浪费又低效。

  1. axios({
  2.   method: 'post',
  3.   url: '/export',
  4.   responseType: 'arraybuffer',
  5. })
  6.   .then(res => {
  7.   // 假设 data 是返回来的二进制数据
  8.   const data = res.data
  9.   const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  10.   const link = document.createElement('a')
  11.   link.style.display = 'none'
  12.   link.href = url
  13.   link.setAttribute('download', 'excel.xlsx')
  14.   document.body.appendChild(link)
  15.   link.click()
  16.   document.body.removeChild(link)
  18.   // 记得 revoke 一下防止泄露
  19. })

-1 参考链接