类型化数组

数字存储前置知识

  1. 计算机必须使用固定的位数来存储数字,无论存储的数字是大是小,在内存中占用的空间是固定的
  2. n位的无符号整数能表示的个数是2^n个 取值范围是0~2^n-1 举例:000 001 ···111 表示[0-8]
  3. n位的有符号整数能表示的个数是2^n个 取值范围是-2^(n-1)~2^(n-1)-1   举例:000 001 ··· 111 第一位数字表示正负号 因此表示[-4-3]
  4. 浮点数表示法 可以用于表示整数和小数,目前分为两种标准
  • 32位浮点数:单精度浮点数,用1位表示符号,8位表示阶码(指数 eg:10^n),23位表示尾数
  • 64位浮点数:双精度浮点数,用1位表示符号,11位表示阶码,52位表示尾数

     5. JS中所有数字,均使用双精度浮点数保存

类型化数组:用于优化多个数字的存储

  • Int8Array:8位有符号整数,长度1个字节。(-128-127)
  • Uint8Array:8位无符号整数,长度1个字节。(0-255)还有一种类型 Uint8ClampedArray
  • Int16Array:16位有符号整数,长度2个字节。
  • Uint16Array:16位无符号整数,长度2个字节。
  • Int32Array:32位有符号整数,长度4个字节。
  • Uint32Array:32位无符号整数,长度4个字节。
  • Float32Array:32位浮点数,长度4个字节。
  • Float64Array:64位浮点数,长度8个字节。

使用方法跟普通数组一致 但是:

不能增加和删除数据,类型化数组的长度固定

一些返回数组的方法,返回的数组是同类型化的新数组

 基础概念可参考以下连接

ECMAScript 6 入门:ArrayBuffer_js arraybuffer 赋值-CSDN博客

ArrayBuffer

一个对象,用于存储一块固定内存大小的数据

1.创建了一个用于存储10个字节的内存空间

const buff = new ArrayBuffer(10)
console.log(buff)
const buff2 = buff.slice()
console.log(buff2)
const buff3 = buff.slice(3, 5)
console.log(buff3)

类型化数组_第1张图片

类型化数组_第2张图片

 2.创建dataview视图指向该内存区域

const view = new DataView(buff, 3, 4)
console.log(view)

类型化数组_第3张图片

3.set 写入 get  读取

arg1 偏移量 arg2值

view.setInt8(1, 3)
const a = view.getInt8(1)
console.log("查询偏移位置为1的数据:", a)
console.log(view)

类型化数组_第4张图片

4.使用DataView 

通常在需要混用多种存储格式时使用DataView

5.使用类型化数组操作

const buff = new ArrayBuffer(10)//10个字节的内存
const arr = new Int16Array(buff)
arr[0] = 2344//操作了2个字节
console.log(arr)

类型化数组_第5张图片

6.彩色图片转成黑白



//把一个图像变成黑白,设置红绿蓝平均数即可
function change () {
    const img = document.querySelector('img')
    const cvs = document.getElementById('cvs').getContext('2d')
    cvs.drawImage(img, 0, 0)
    const imageData = cvs.getImageData(0, 0, img.width, img.height)
    const data = imageData.data
    for (let i = 0; i < data.length; i += 4) {
        const red = imageData.data[i]
        const green = imageData.data[i + 1]
        const blue = imageData.data[i + 2]
        const avg = (red + green + blue) / 3
        data[i] = data[i + 1] = data[i + 2] = red
    }
    cvs.putImageData(imageData, 0, 0)
}

类型化数组_第6张图片

你可能感兴趣的:(javascript)