Javascript : ParseInt 计算出的变换矩阵值 returns NaN

Question

所以我有这个 transform 计算样式

matrix3d(1.5, -7, 2, 0, 7, 1.5, 0, 0, -3, 1, 1, 0, 100, 0, 0, 1)

接下来我要转换为数字数组

var s = window.getComputedStyle(element);
var mattrixArray = s.replace(/3d|matrix|(|)|\s|/g,'').split(','), l = mattrixArray.length;
for (var i=0; i<l; i++){
  mattrixArray[i] = parseInt(mattrixArray[i],10);
}
console.log(mattrixArray)

这个returns

[NaN, -7, 2, 0, 7, 1.5, 0, 0, -3, 1, 1, 0, 100, 0, 0, 1]

如果我不这样做 parseInt(value) 它显示正确但它是 string，该怎么办？

Answer 1

您没有在正则表达式中转义 ( 和 )。

/3d|matrix|(|)|\s|/g
           ^ ^

如果您将其更正为如下所示：

/3d|matrix|\(|\)|\s|/g

正则表达式也正确地删除了括号，从而生成一个数组，您可以成功地将其插入 parseInt 或 parseFloat:

["1.5", "-7", "2", "0", "7", "1.5", "0", "0", "-3", "1", "1", "0", "100", "0", "0", "1"]

Answer 2

您的正则表达式根本没有替换括号。需要一些逃避！

var s = window.getComputedStyle(element);
var mattrixArray = s.replace(/3d|matrix|\(|\)|\s|/g,'').split(',')
  , l = mattrixArray.length;
for (var i=0; i<l; i++){
    mattrixArray[i] = parseFloat(mattrixArray[i],10);
}
console.log(mattrixArray);

同时使用 parseFloat 而不是 parseInt，这样您将获得实际值而不是四舍五入的值。

或者你可以这样做：

var mattrixArray = s.split("(")[1].split(")")[0].split(',')

编辑：刚刚测试过，拆分 3 次比使用正则表达式快大约 4 倍。

Javascript : ParseInt 计算出的变换矩阵值 returns NaN

Javascript : ParseInt the computed transform matrix values returns NaN

javascript

parsing

transform