Question

我正在尝试理解http://matthew.wagerfield.com/flat-surface-shader/上的代码，其中一行让我感到困惑：

FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;

上面的这一行是做什么的？

我相信？：最后说“如果某事等于Float32Array，则等于数组”。但我不明白Float32Array ==='function'的类型是如何工作的。是说typeof Float32Array是否完全等于字符串'function'？这对我没有意义。

Answer 1

代码正在检查浏览器对javascript函数Float32Array的支持

三元表达式等同于：

if (typeof Float32Array == "function") {
    FSS.Array = Float32Array;
} else {
    FSS.Array = Array;
}

typeof只返回变量的类型，在这种情况下变量是“Float32Array”

以下是typeof的文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

以下是文档中的其他一些示例：

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // Despite being "Not-A-Number"
typeof Number(1) === 'number'; // but never use this form!


// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof always return a string
typeof String("abc") === 'string'; // but never use this form!


// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // but never use this form!


// Symbols
typeof Symbol() === 'symbol'
typeof Symbol('foo') === 'symbol'
typeof Symbol.iterator === 'symbol'


// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // an undefined variable


// Objects
typeof {a:1} === 'object';

// use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> or Object.prototype.toString.call
// to differentiate regular objects from arrays
typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';


// The following is confusing. Don't use!
typeof new Boolean(true) === 'object'; 
typeof new Number(1) === 'object'; 
typeof new String("abc") === 'object';


// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

Answer 2

if (typeof Float32Array === 'function')
    FSS.Array = Float32Array
else
    FSS.Array = Array

Ternary

Operator precedence

          4 1                   2              3              3 
          V V                   V              V              V
FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;

关于类型Float32Array

Answer 3

这是使用后备功能检测的示例。 Float32Array是一种类型化的数组。

类型化数组比普通数组更有效，因为它们允许JS引擎以较小的格式存储大量数字。 JavaScript中的所有数字都是64位浮点数，因此它们可以使用一半的内存来存储Float32Array，并使用这些数字对数学进行优化。

因为类型化数组是数组的子集（钳位类型数组除外），所以当类型化数组不可用时（旧版浏览器），可以使用数组。

它可以被读作“如果Float32Array存在并且是一个函数，则将其存储在FSS.Array中，否则将数组存储在FSS.Array中。”

如果你做new FSS.Array(3000)，你将获得一个带有3000个插槽的Float32Array，或一个带有3000个初始插槽的数组。

typeof Float32Array with Ternary Operator Syntax

3 个答案: