Understandding ES6：TypedArray

basicSyntaxSample/Understanding-ES6/TypedArray.js

@@ -0,0 +1,52 @@
+//**************************************************************************** */
+// ArrayBuffer: 8bit
+let buffer = new ArrayBuffer(10);
+console.log(buffer.byteLength);
+
+let buffer2 = buffer.slice(4, 6);
+console.log(buffer2.byteLength);
+
+// ArrayBuffer 只是代表内存地址。DataView才能操作 ArrayBuffer
+let view = new DataView(buffer);
+view.setInt8(0, 5);
+console.log(view.getInt8(0));
+
+//**************************************************************************** */
+// Typed Array:
+// Int8Array
+// Uint8Array
+// ...
+
+// BYTES_PER_ELEMENT 可以显示每个类型的一个元素占多少字节
+console.log(Int8Array.BYTES_PER_ELEMENT);
+
+// TypedArray 和普通数组的区别在于：
+// 1. TypedArray的length不能改变，也就是不能随便改变大小
+// 2. TypedArray的方法会检查类型
+// 3. TypedArray不是普通数组。Array.isArray(TypedArray) == false
+// 4. TypedArray会确保数组中的数据类型的正确性。let ints = new Int16Array(['hi'])
+// 5. TypedArray没有普通数组中的以下方法：
+//    concat shift pop push splice unshift
+// 6. TypedArray额外有以下方法：
+//    set subarray
+
+let ints = new Int16Array([25, 50]),
+  mapped = ints.map(v => v * 2);
+
+console.log(mapped.length);
+console.log(mapped[0]);
+console.log(mapped[1]);
+
+console.log(mapped instanceof Int16Array); // true
+console.log(mapped instanceof Array); // false
+
+// 转换成普通数组
+let intsArray = [...ints];
+console.log(intsArray instanceof Array); // true
+
+// 同样也有 of() 和 from()
+let int16s = Int16Array.of(25, 50),
+  floats = Float32Array.from([1.5, 2.5]);
+
+console.log(int16s instanceof Int16Array); // true
+console.log(floats instanceof Float32Array); // true

webpack.config.js

@@ -1,63 +1,63 @@
-const path = require("path");
-const webpack = require("webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const OpenBrowserPlugin = require("open-browser-webpack-plugin");
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const OpenBrowserPlugin = require('open-browser-webpack-plugin');
 
 const PORT = 9999;
 
 module.exports = {
-  devtool: "source-map",
+  devtool: 'source-map',
   // entry: path.resolve(__dirname, './react/components/HOC/index.js'),
   // entry: path.resolve(__dirname, './echarts/twoGrid.js'),
   // entry: path.resolve(__dirname, './ReactInternal/Feact.js'),
   // entry: path.resolve(__dirname, './echarts/dynamicData.js'),
   entry: path.resolve(
     __dirname,
-    "./basicSyntaxSample/Understanding-ES6/Array.js"
+    './basicSyntaxSample/Understanding-ES6/TypedArray.js'
   ),
   output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "./build")
+    filename: '[name].js',
+    path: path.resolve(__dirname, './build')
   },
   module: {
     rules: [
       {
         test: /\.js$/,
-        use: "babel-loader"
+        use: 'babel-loader'
       },
       {
         test: /\.css$/,
         use: [
-          "style-loader",
-          "css-loader",
+          'style-loader',
+          'css-loader',
           {
-            loader: "postcss-loader",
+            loader: 'postcss-loader',
             options: {
-              plugins: () => [require("autoprefixer")]
+              plugins: () => [require('autoprefixer')]
             }
           }
         ]
       },
       {
         test: /\.scss/,
         use: [
-          "style-loader",
-          "css-loader",
+          'style-loader',
+          'css-loader',
           {
-            loader: "postcss-loader",
+            loader: 'postcss-loader',
             options: {
-              plugins: () => [require("autoprefixer")]
+              plugins: () => [require('autoprefixer')]
             }
           },
-          "sass-loader"
+          'sass-loader'
         ]
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
-      title: "Wellcom webpack",
-      template: path.resolve(__dirname, "./index.html")
+      title: 'Wellcom webpack',
+      template: path.resolve(__dirname, './index.html')
     }),
     // 启用 HMR
     new webpack.HotModuleReplacementPlugin(),
@@ -74,8 +74,8 @@ module.exports = {
     historyApiFallback: true,
     // 告诉 dev-server 在使用HMR
     hot: true,
-    contentBase: path.resolve(__dirname, "./build"),
-    publicPath: "/",
+    contentBase: path.resolve(__dirname, './build'),
+    publicPath: '/',
     port: PORT
   }
 };