js坑之数字型字符串比对只比较第一位数字

这是我今天接手项目里面求最大值的一段代码：

            var dataY = this.getDataY(); 
            // 判断点击类型
            if (this.datatype == '0') {
                var max = 0;
                dataY.forEach(x => {
                    if (x > max) {
                        max = x;
                    }
                });
            }

其中dataY是一个数组，最大值为max，咋一看好像没啥问题。

但是这个数组里面装的是数字型字符串，于是神奇的事情就发生了。

现在我还原一下场景：

        let max = 0
        let arr = ['22', '15', '12', '11', '11', '5', '3', '2', '2', '0']
        arr.forEach(item => {
            if (item > max) {
                max = item
            }
            console.log('item', item, 'max', max)
        })
        console.log('arr', arr, 'max', max);

控制台的打印结果是：

可以看到，最大值是5。为什么？不应该是22吗？字符串比较不是会默认隐式转换吗？

分析： 

可以看到前五次的打印结果都是22，到了第六次，就变成了5，且往后的五次打印结果都是5。

那么问题肯定出在第六次，即22和5比较时，浏览器选择了5而不是22

果真如此吗？于是我去控制台又分别对比了 5 和 22 ，5 和 49 ， 5 和 50，5 和 51结果如下：

根据打印结果，可得出一下结论：

js中两个数字型的字符串比较大小时，只会比较第一位数的大小

补充：然后我试着比较数字类型和数字型字符串

发现一切正常

看来字符串和数字比对时，会隐式转换后对比

如何解决：

用Number()，paserFloat()，paserInt()， + , 转换成数字再进行比对就行了

 查看改过之后的值：

PS:其实求最大值可以通过Math.max(val1，val2)去做

比如以下这行代码:

       let arr = ['22', '15', '12', '11', '11', '5', '3', '2', '2', '0']
       let max = Math.max(...arr)
       console.log('max',max)

运行结果为数字型的22