根底知识点

ECMAScript中的进制

ES中进制标准基于C语言，随着倒退而后进行了改良。上面列举JavaScript不同进制写法：

// 二进制 Binary system// 以0b或0B结尾var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607// 二进制展现（不便展现，了解上却更难了）// 负数：就是负数的原码// 正数：负号+负数的原码// 不是数值的二进制补码parseInt(-10).toString(2) // -1010// 八进制 Octal number system// 以0结尾，ECMAScript 6反对0ovar n = 0755; // 493var m = 0644; // 420var e = 0o755; // 493 ECMAScript 6标准// 十进制 Decimal system// 以0结尾，然而前面跟8以下会当作八进制解决var d = 1234567890;var l = 0888; // 888 十进制var 0 = 0777; // 511 八进制// 十六进制 Hexadecimal// 以0x或0X结尾0xFFFFFFFFFFFFFFFFF // 2951479051793528300000x123456789ABCDEF   // 819855292164869000XA                 // 10

原码、反码、补码

先让咱们看下 1 和 -1 原码、反码、补码，而后咱们通过这个2个数字来解释原码、反码、补码。

JavaScript 正数显示 是 负号+原码（实践上不便查看），比方 parseInt(-10).toString(2) 二进制展现输入是 -1010 



间接原码进行 有符号 的加计算 ，后果十进制是 -2 ，这个后果显著是谬误的。符号直接参与运算有问题。

  • 原码：

    • 数字的二进制示意，有符号数，最高位作为符号位， 0 示意 + ， 1 示意 - ，无符号数 即无符号位

  • 反码：

    • 负数和 +0 其原码自身就是反码
    • 正数和 -0 符号位与原码中一样，放弃不变，其余位数逐位取反， 1 换成 0 ， 0 换成 1 

  • 补码：

    • 负数和 +0 其原码自身就是补码
    • 正数和 -0 先计算其反码，而后反码加上 1 （例如8位的加 0000 0001 ），失去补码

数据在内存中是以补码模式存储（不便换算），原码和补码是在运行过程进行转换的。 通过补码计算失去补码，而后转成反码，再转成原码（这里不是减 1 还是加 1 ）。
  -0 原码和反码不统一，所以呈现了补码，反码成了两头过渡。

字节序

什么是字节？

大部分零碎8个二进制位（Bit）形成一个字节（Byte）单元，一个字节能够存储一个英文字母或半个汉字。

常常据说汉字须要占2个字节（Byte）？

当初根本应用对立的字符集 Unicode ，规定的是字符的十六进制，根本罕用字符的在Plane 0（0000–FFFF）外面，如英文 A 字母 U+0041 ，汉字 范畴是 U+4E00 ~ U+9FA5 ，是 4个十六进制数即可示意一个字符 。

1 byte = 8 bit
那 8 bit 能够存储的数值范畴：

  • 无符号数值范畴 0～255
  • 有符号数值范畴（符号占1位，1示意正数，0示意负数） -128～127

十六进制转二进制，1位十六进制对应4 bit二进制，1个 Unicode 字符由4位十六进制组成。所以 Unicode 都须要 2个字节（Byte）。

这怎么英文也要2个字节了？

咱们先看下十六进制转二进制，十六进制数与二进制有一一对照表，这里不开展。

中文 U+4E07 汉字 万 ，看下图例子：

英文 U+0041 即 A ，看下图例子：

能够看到 Unicode 不论英文、汉字都是须要16 bit来存储，也就是2 byte。大家看到 A 的是 0041 ，高位字节 0 其实没有作用，在传输、存储时能够省略。那如何省略，变成1个字节？这时候就呈现编码方式，就是 UTF-8 、 GBK 等，通过编码压缩长度。

上图 UTF-8 编码方式： 数字、英文是1个字节，汉字是3个字节。
而 GBK 编码方式：数字、英文是1个字节，汉字是2个字节，1个字节范畴 00–7F 。

扩大常识：在数据库 MySQL 4.0 以下 varchar(20) 是指20个字节，能够存储数字英文20个，utf-8汉字6个，在MySQL 5.0 及以上 varchar(20) 是指20个字符，能够存储数字英文汉字都是20个。
// Unicode 转换// charCodeAt、fromCharCode 默认十进制// 通过 toString 转成十六进制console.log('a'.charCodeAt(0).toString(16)) // 61console.log(String.fromCharCode(0x61)) // a

什么是字节序？

举个例子：十六进制 0x12345678 存储，内存最小的单位一个字节，一个字节8位，将其转成二进制 0001 0010 0011 0100 0101 0110 0111 1000 就是32位，就是4个字节，所以分为 0x12 、 0x34 、 0x56 、 0x78 （只是为了示意是十六进制所以写成 0x12 ，理论是 12 存储是8 bits）4个字节存储。然而存储网络传输时是先从 0x12 开始传，还是 0x78 开始传？所以多字节呈现才有字节序。

// 十六进制 0x12345678// 十进制 305419896// 二进制 0b00010010001101000101011001111000// 0001 0010 0011 0100 0101 0110 0111 1000console.log(0b0001, 0b0010) // 1 2

依据字节存储的程序，分为：

  • Big endian（大端）：将最高无效字节存储在内存低位
  • Little endian（小端）：将最低无效字节存储在内存低位
留神辨别最高无效字节（高位字节）和最高无效位（高位），大端小端是指最高无效位的程序不一样

文件能够通过文件头的 字节程序标记（BOM）辨认哪种字节程序。

位运算

位运算操作数都当做 32 bits 进行操作。提醒：上面案例中二进制都是 原码 。

JavaScript 正数输入展现是 负号+原码（实践上不便查看），比方 parseInt(-10).toString(2) 二进制展现输入是 -1010

&（按位与）

两个运算比拟的 bit 位都是 1 时，这个 bit 位才是 1 。

const a = 5;        // 00000000000000000000000000000101const b = 3;        // 00000000000000000000000000000011console.log(a & b); // 00000000000000000000000000000001// 1// 是否2的n次幂 // (x & x - 1) === 0console.log((2 & 2 - 1) === 0) // true// 奇偶// x & 1 === 0 偶数// x & 1 === 1 奇数console.log(2 & 1 === 0) // 0// 求平均值，防溢出function avg(x, y){    return (x & y) + ((x ^ y) >> 1);}// 取模// i % 4 === i & (4 - 1)console.log(1%4 , 1&3) // 1 1// 转换// 0xffffffff 11111111111111111111111111111111-10 & 0xffffffff// 0xff 11111111

|（按位或）

两个运算比拟的 bit 位只有一个是 1 时，这个 bit 位就是 1 。将任一数值 x 与 0 进行按位或操作，其后果都是 x。将任一数值 x 与 -1 进行按位或操作，其后果都为 -1。

const a = 5;        // 00000000000000000000000000000101const b = 3;        // 00000000000000000000000000000011console.log(a | b); // 00000000000000000000000000000111// 7

～（按位非）

对运算值的每一个 bit 位取反（即反码）。

const a = 5;     // 00000000000000000000000000000101const b = -3;    // 0000000000000000000000000000011// 补码计算，转原码展现// 补 1111 1111 1111 1111 1111 1111 1111 1010// 反 1000 0000 0000 0000 0000 0000 0000 0101// 原 1000 0000 0000 0000 0000 0000 0000 0110console.log(~a); // 10000000000000000000000000000110// -6console.log(~b); // 00000000000000000000000000000010// 2// 取正数console.log(~4 + 1) // -4// 舍弃小数console.log(~~1.5) // 1

^（按位异或）

两个运算比拟的 bit 位不雷同，这个 bit 位才是 1 。

const a = 5;        // 00000000000000000000000000000101const b = 3;        // 00000000000000000000000000000011console.log(a ^ b); // 00000000000000000000000000000110// 6// 替换变量值let a = 1;let b = 2;a = a^b;b = a^b;a = a^b;console.log(a, b) // 2 1// 判断赋值if(x === a){    x = b}else{    x =a}// 等价于上面x = a ^ b ^ x

<<（左移）

9 << 2 数字9转换成32位二进制，而后向左挪动2位，右边移出的抛弃，左边用0补位，返回值的十进制计算公式 X * 2 ** Y ，舍弃小数取整。

// x * 2 ** y 舍弃小数位，向整数位进1// 9 * (2 ** 2) = 9 * (4) = 36console.log(9 << 2) // 36// 9 * (2 ** 3) = 9 * (8) = 72console.log(9 << 3) // 72

>>（右移）

左移的反向操作，即向右移位，然而左侧补位的不是间接补0，而是复制最左侧位来填充。

// x / 2 ** y 舍弃小数位，向整数位进1// -9 / (2 ** 2) = 9 / (4) = -2.25console.log(-9 >> 2) // -3// -9 / (2 ** 3) = 9 * (8) = -1.125console.log(-9 >> 3) // -2// 小数 伪代码(2.25).toString(2) // "10.01"//   0010//   0001// = 0011console.log(0b10 + 0b01) // 3(3.25).toString(2) // "11.01"//   0011//   0001// = 0100console.log(0b11 + 0b01) // 4

>>>（无符号右移）

操作数向右位移，右位移出的数抛弃，左侧用 0 填充，因为用 0 填充，所以总是非，正数将变成负数。

const a = 5;          //  00000000000000000000000000000101const b = 2;          //  00000000000000000000000000000010const c = -5;         // -00000000000000000000000000000101                                            // -5 补码 10000000000000000000000000000101console.log(a >>> b); //  00000000000000000000000000000001// expected output: 1console.log(c >>> b); //  00111111111111111111111111111110// expected output: 1073741822

二进制

转二进制

js外面怎么转二进制？
字符通过 charCodeAt 转成 Unicode 码十进制，而后通过 Number 对象 toString 办法转成不同进制。

/** * 计算字符串所占的内存字节数，默认应用UTF-8的编码方式计算，也可制订为UTF-16 * UTF-8 是一种可变长度的 Unicode 编码格局，应用一至四个字节为每个字符编码 *  * 000000 - 00007F(128个代码)      0zzzzzzz(00-7F)                             一个字节 * 000080 - 0007FF(1920个代码)     110yyyyy(C0-DF) 10zzzzzz(80-BF)             两个字节 * 000800 - 00D7FF                                 预留                                                                              三个字节 * 00E000 - 00FFFF(61440个代码)    1110xxxx(E0-EF) 10yyyyyy 10zzzzzz           三个字节 * 010000 - 10FFFF(1048576个代码)  11110www(F0-F7) 10xxxxxx 10yyyyyy 10zzzzzz  四个字节 *  * 注: Unicode在范畴 D800-DFFF 中不存在任何字符 * @see http://zh.wikipedia.org/wiki/UTF-8 *  * UTF-16 大部分应用两个字节编码，编码超出 65535 的应用四个字节 * 000000 - 00FFFF  两个字节 * 010000 - 10FFFF  四个字节 * @see http://zh.wikipedia.org/wiki/UTF-16 */console.log('0'.charCodeAt()) // "48" 十进制console.log('0'.charCodeAt().toString(16)) // "30" 十六进制console.log(0x0030.toString(10)) // "48" 十进制console.log(String.fromCharCode(48)) // "0"console.log('万'.charCodeAt().toString(16)) // "4e07" 十六进制console.log(String.fromCharCode(0x4e07)) // "万"console.log('万'.charCodeAt().toString(2)) // "100111000000111" 二进制console.log(String.fromCharCode(0b100111000000111)) // "万"

JavaScript外面 Number 类型是存储为 双精度64位浮点数 , 然而运算转成32位。

对于浮点陷阱问题请看 JavaScript 浮点数陷阱及解法 ，这里不开展。
// 数字 9 的二进制let binaryStr = parseInt(9, 10).toString(2)console.log(binaryStr) // 1001// 下面只返回了4位，4位能够示意0-15的值，超过16位数减少console.log(parseInt(16, 10).toString(2)) // 10000// 补位到8位while(binaryStr.length < 8){    binaryStr = '0' + binaryStr}console.log(Number('0b' + binaryStr)) // 9

然而下面只是单纯的进制转换，不能真正的管制二进制，如何操作二进制？那么就是上面要讲到的 ArrayBuffer 对象、 TypedArray 视图、 DataView 视图。

Note：ES6 标准新增 ArrayBuffer 对象、 TypedArray 视图、 DataView 视图，这三者是操作二进制的接口。最开始设计是为了 WebGL 通信，晋升性能。

ArrayBuffer

ArrayBuffer  对象用来示意通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组汇合，通常在其余语言中称为“byte array”。ArrayBuffer 和 Array 不是同一个概念。所以 ArrayBuffer 只是一个指名长度，并默认填充 0 的二进制数据缓存区。

// 申明一个长度为8的字节数组(8个字节的内存缓存区)，并默认用0填充const buffer = new ArrayBuffer(8);console.log(buffer.byteLength); // 8

无奈间接操作 ArrayBuffer ，能够通过 TypedArray 和 DataView 对象来操作。

// 申明一个长度为8的字节数组，const buffer = new ArrayBuffer(8);// new TypedArray(buffer [, byteOffset [, length]]);const x = new Int8Array(buffer); // 裸露全副字节console.log(x) // Int8Array [0, 0, 0, 0, 0, 0, 0, 0]const y = new Int8Array(buffer, 1); // 偏移1位字节console.log(y) // Int8Array [0, 0, 0, 0, 0, 0, 0]const z = new Int8Array(buffer, 1, 4); // 偏移1位字节，裸露长度为4console.log(z) // Int8Array [0, 0, 0, 0]

TypedArray

TypedArray 是不同类型化数组构造函数的原型( [[Prototype]] )，指定字节位读取的视图，上面列表展现不同类型化数组的数值范畴、字节等。 TypedArray 默认应用零碎端字节序，个别零碎是小端字节序，如果想管制字节序程序应用 DataView ，所以次要解决本地数据。

能够间接 new 一个 TypedArray 对象，该对象缓存大小是传入的 length参数 * 数组中每个元素的字节数，字节数参考下面 TypedArray 列表。

// 类型化数组长度 8const int8 = new Int8Array(8);int8[0] = 42;console.log(int8); // Int8Array [42, 0, 0, 0, 0, 0, 0, 0]console.log(int8[0]); // 42console.log(int8.length); // 8console.log(int8.BYTES_PER_ELEMENT); // 1console.log(int8.byteLength); // 8 字节长度 8 * 1

或者通过 ArrayBuffer 生成固定大小缓存区，如果传入的是 ArrayBuffer 那么不会创立新的缓冲区，而是应用传入的 ArrayBuffer 代替。

// 字节长度 8const buffer = new ArrayBuffer(8);// 类型化数组长度 4，每个元素占2个字节 8/2const int16 = new Int16Array(buffer);console.log(int16); // Int16Array [0, 0, 0, 0]console.log(int16.length); // 4console.log(int16.BYTES_PER_ELEMENT); // 2console.log(int16.byteLength); // 8

DataView

DataView 视图是能够从 ArrayBuffer 读写多种数值类型的底层接口，还能够管制整数与浮点转化、字节程序等。所以在数据传输中更加可控、灵便，比方零碎字节序不一样。

Note：setInt8、setUint8 单字节是无法控制大小端的
// 判断零碎是否小端var littleEndian = (function() {  var buffer = new ArrayBuffer(2);  new DataView(buffer).setInt16(0, 256, true /* 设置值时，应用小端字节序 */);  // Int16Array 应用零碎字节序（由此能够判断零碎字节序是否为小端字节序）  return new Int16Array(buffer)[0] === 256;})();console.log(littleEndian); // 返回 true 或 false

间接通过API读取设置，相比 TypedArray 更加灵便、简略，也可创立 复合视图 （将不同类型视图组合）。

// 16个字节的缓冲区const buffer = new ArrayBuffer(16);// 复合视图const view = new DataView(buffer);// 32位，4个字节view.setInt32(1, 2147483647); // (max signed 32-bit integer)// 8位，1个字节view.setInt8(5, 34);console.log(view.getInt32(1)); // 2147483647console.log(view.getInt8(5)); // 34

NodeJS Buffer

Nodejs 外面的 Buffer 实例也是 JavaScript 的 Uint8Array 和 TypedArray 实例。全副 TypedArray 办法在 buffer 上都是反对的。然而 Buffer API 和 TypedArray API 有轻微的不兼容。具体查看 Buffers and TypedArrays。

理论应用

写了这么多，那到底理论中哪些场景能够应用？

  • WebGL 游戏数据处理
  • WebSockets、AJAX、Fetch、WebRTC 服务通信
  • WebUSB、WebAudio 硬件通信
  • Crypto 加密算法

前面会写一个游戏的使用场景，敬请期待。

中文转字节

// 字符串转utf8 unicode编码function stringToByte(str) {  const bytes = new Array();  let c;  let len = str.length;   for (var i = 0; i < len; i++) {    c = str.charCodeAt(i);    if (c >= 0x010000 && c <= 0x10FFFF) {      // 4个字节范畴      bytes.push(((c >> 18) & 0x07) | 0xF0);      bytes.push(((c >> 12) & 0x3F) | 0x80);      bytes.push(((c >> 6) & 0x3F) | 0x80);      bytes.push((c & 0x3F) | 0x80);    } else if (c >= 0x000800 && c <= 0x00FFFF) {      // 3个字节范畴      bytes.push(((c >> 12) & 0x0F) | 0xE0);      bytes.push(((c >> 6) & 0x3F) | 0x80);      bytes.push((c & 0x3F) | 0x80);    } else if (c >= 0x000080 && c <= 0x0007FF) {      // 2个字节范畴      bytes.push(((c >> 6) & 0x1F) | 0xC0);      bytes.push((c & 0x3F) | 0x80);    } else {      // 1个字节范畴      bytes.push(c & 0xFF);    }  }  return bytes;}

charCodeAt 获取到值的范畴 0～65536 ，按8 bits切成4个字节。

字节转整数

4个字节数，每个 byte 即 8 bits （可能是通过汉字的值的每个 8 bits 转过来的），所以能够示意的数值范畴是 0~255 ，每个值的二进制8位。

& 0xFF 将最高无效8位之外置 0
<< 取是截取对应的位数
| 将前面1个字节位合并（即数值相加）

// 转成有符号整数0xFFFFFFFF // 无符号 4294967295 有符号 -1(0xFFFFFFFF).toString(2)// 11111111111111111111111111111111// 通过 & 变成32位整数（有符号），并确保不会超过js整数的无效范畴n & 0xffffffff
// convert 4 bytes to unsigned integer// 如果曾经转成8位字节（0～255） ，可不必& 0xfffunction byteToInt(bytes, off) {  off = off ? off : 0;  const b = ((bytes[off + 3] & 0xFF) << 24) |        ((bytes[off + 2] & 0xFF) << 16) |        ((bytes[off + 1] & 0xFF) << 8) |        (bytes[off] & 0xFF);  return b;}

也能够应用 ArrayBuffer、DataView 来实现

// 初始化视图 0偏移 大端function getView(bytes){  var view = new DataView(new ArrayBuffer(bytes.length));  for (var i = 0; i < bytes.length; i++) {    view.setUint8(i, bytes[i]);  }  return view;}// 读取32位有符号整数function toInt32(bytes){    return getView(bytes).getInt32();}