What A F**king/Sweety Langue

大侠武功卓绝，视野开阔，会写18种语言的Hello World，最近在吭哧吭哧写前端，遇到了不少心灵的激荡：

1. 数组清空

JS里的数组，在写强类型语言的程序员面前，根本不是数组，而是类似Java中List的一个存在。刚写数组时，想要清空数组里所有的元素，本能的想去找clear（）方法。可是十分抱歉，JS中数组对象，根本没有那个方法。所以各位老铁们，你们是怎么清空一个数组的？我是里寻他得百度，最后，发现有人通过给数组length属性赋值为0的方式，清空一个数组，一脸懵逼。所以，我现在也是，给数组length属性赋值为0，来清空一个数组。

2. 数组添加另外一个数组的所有元素（扩展运算符）

同上，在Java中，一个列表，添加另外一个列表中所有元素，简直是肌肉反应似地想起list的addAll（）方法。可是在JS里，不好意思，木有这个方法，让你一脸懵逼。最终，发现老铁们用的最多的是使用扩展运算符，可是扩展运算符是ES6新增的，很难想象，在ES6之前，老铁们是怎么摆弄的。(注意哦，concat是返回的一个新的数组，我这里本意说的是不改变原来数组引用的情况下拼接两个数组哦。)

3. 扩展运算符作用于对象

这个其实是我的锅，因为第一次使用扩展运算符时，场景是在一个数组中添加另外一个一个数组中所有元素，并且好长时间，只使用了这么一个功能，所以潜意识当中，认为扩展运算符的那三个点（真是不好意思，之前碰到扩展运算符时，都不知道它叫扩展运算符，所以百度的时候，真是搜索的“三个点”），做了类似于循环那样的操作，所以才把元素都添加到别的数组里。直到有一天，我看到了扩展运算符作用于对象上，简直是把我震惊了，所以赶紧又去瞅了下扩展运算符的用法。

4. 创建对象时使用的匿名key

话说老实巴交的大侠，写代码的风格就是一丝不苟。后台让我传个参数，是这样的{name："zhangsan"}，严谨大侠肯定这么写呀：

我天真的以为，世界就是这么，简单美好,原来JS里的对象，跟Java里的Map，一样嘛，key-value嘛哈哈。可是这么写代码的人，你出来给我解释解释，你为什么这么写一样能行，我保证不动手：

5. 关于element-ui中arguments的奇怪现象（el-upload）

elment-ui这个UI框架，使用他的el-upload组件的时候，发现了这么一个奇怪现象。监听它的on-chage方法:on-change="onSelectChange"：

发现了没，那个file应该是有name等属性的一个对象，可以你在arguments里，怎么长那个球样？正常的，不应该是这个样子的吗：

6. ref()函数和ref属性奇怪的用法

擦，这个参考我的另外一篇博客吧，本来就是一个在setUp方法中，得到dom ref引用的简单的事情，非要使用一种通过变量名建立联系的这种弱的不能弱的关系来搞。更要命的是，ref（）函数的这个用法，官网一个字都没有提及。我觉得我心里的羊驼变得更多了。

7. NODE前端项目导入时，如果目录下是index.js,只写到目录名称即可

这个都无力吐槽了，作为一个新手前端，按着import的路径去找代码，却发现里面只有个index.js，得愣了有三分钟才缓过神来。

8.解构

解构本来挺抽象的了，然后Vue包装的方法，在入参时传入解构,
如：this.$store.dispatch('user/login', this.loginForm),这个方法，就是调用接口里的user/login方法呗，然后屁颠的去看那个js文件了，却发现login({ commit }, userInfo) {}这个方法入参竟然结构了一个commit属性，但是却根本不知道在解构谁(查看源码不方便)，入参明明只有一个，你非要结构出来一个凭空出现的，顿时觉得心里的羊驼不够用了。琢磨了一下，也许是$store.dispatch这个方法包装的吧，它底层调用这个方法时，多入参了一个参数。

9.冗余参数对代码可读性的影响

冗余参数对代码可读性的影响：next({ ...firstMenu, replace: true })这句代码中，入参肯定是个对象，但是你这么传，我确实猜不出来，firstMenu这个对象里，到底有啥有用的信息,我也不知道，next这个函数，到底需要啥字段。但是你要这么写呢：next({ path: firstMenu.path, replace: true })我一眼就能看出来，firstMenu里有个path属性啊，你这个next方法，入参里需要有path和replace两个参数，且只需要两个参数。为什么非用第一种方式写呢？代码可读性直线下降啊，这是要靠手撸达到加密混淆的效果啊，简直惨绝人寰。

10. global和window混用

这个是最近才发现的，global和window傻傻分不清楚~~~~~~~~

11. 过分的贴心让人猝不及防

写过Java的同学对null这个值一定印象深刻。js中，不但有null，还有undefined。搜罗半天，找到一句话：null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

这玩意咋理解？其实可以理解成，根本就没有毛的区别。

在js中，if(undefined)和if(null)的效果等同于if(false)，这时候，我问你，if("")(空字符串)等同于if(false)还是if(ture)？

初中物理老师的教诲依然谆谆在耳，零度，是零度，而不是没有温度。所以空字符串，也是字符串，不是null，也不是undefined，我所接触到的编程语言，也大都是这么一个思路。

直到JS又给我上了一课。

瞅见了没，在if判断里，空字符串竟然等同于undefined或者null，搞毛啊，空字符串是不是有效值，不应该是我业务逻辑里自行决定的吗？为啥你要贴心的帮我做判断呢？真是无语。
2022-06-30：今天又给我上了一课。if(空字符串)，if(undefinde)，if(null)，都是false我都习惯了。可是有天我写了一行代码{{ scope.row[itemProp.prop] || "无" }}，意思是，如果是空字符串，null，undefined，那么显示一个无就行了。可是有天突然发现当scope.row[itemProp.prop]恰巧是数字零的时候，也显示了无，顿时意识到，if(0)的运算规则，竟然和C语言是一样的，它是false，猝不及防。

恼人的Date

在使用形如2022-06-20T10:52:48.000+00:00这样的字符串，构建Date对象时，同样是Chrome浏览器，在Windows平台和Linux平台，竟然结果不一样。

Windows

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
直接输出 new Date(str)的结果: 2022-06-20 18:52:48，显然，它把零时区的时间，自己加了8个小时，转成了系统设置里的东八区时间，自然，格式化时也一样，dayjs(str).format(formatter): 2022-06-20 18:52:48 自己也加了8个小时。

Linux

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36，注意这里我刚升级了Chrome 103，和102时的行为是一致的，使用2022-06-20T09:08:59.000+00:00，进行格式化：
直接输出new Date(str): Mon Jun 20 2022 09:08:59 GMT+0000 (GMT) ，时区保持不变，没有自己加八个小时，转到系统设置所在的时区。而格式化时，自然也会是如此： dayjs(str).format(formatter): 2022-06-20 09:08:59 没有自己加八个小时。这就很恼人了，苹果的Safari(和微软平台行为一致)。
同样，利用时间戳构建Date对象也是同样的现象：

Windows Safari:

Linux

Node

所以，老铁们，尽量不要在前台做日期操作啊。

Safari

虽然在Safari上没有测试过字符串构建日期时，时区的变化，但是却碰到过字符串构建日期时报错的问题：

formatDate(str: string, template?: string) {
        if (this.isNull(str)) {
            return this.getCurrentDate(template);
        }
        if (this.isNull(template)) {
            template = "yyyy-MM-dd HH:mm";
        }

        let result = "";
        try {
            result = this.datePipe.transform(str, template);
        } catch (error) {
            //ios系统，从字符串转date对象时，类似 "2021-09-01"以及"2021-09-01 05:05"这样的格式会报错;android可以正常转换
            //因此，需要将横杠，转为斜杠才能正常生成Date对象
            //但是，格式化未指定pickerFormate的ion-dateTime控件，中形如：“2021-08-17T09:03:16.636+08:00”的默认值
            //是8601日期标准格式，ios和安卓都是可以正常进行转换的
            //当控件的默认值传递到这个方法进行格式化时，“-”替换成"/"反而会报错，因此，
            //只有格式为"2021-09-01"以及"2021-09-01 05:05"，并且在ios平台，才会/需执行到catch，
            //进行横杠替换斜杠处理
            str = str.replace(/-/g, "/");
            result = this.datePipe.transform(str, template);
        }

        return result;
    }