artdxl/daily-code

:art: 【Daily Code】平时记录的一些代码片段，文章，杂记...

daily-code's Issues

path.resolve vs path.join

背景

平时开发时配置各种脚手架 cli 的时候总是看到 path.join() 和 path.resolve()，傻傻分不清楚。

path.join()

path.join() 方法使用平台特定的分隔符作为定界符将所有给定的 path 片段连接在一起，然后规范化生成的路径。

零长度的 path 片段会被忽略。

如果连接的路径字符串是零长度的字符串，则返回 '.'，表示当前工作目录。

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// 返回: '/foo/bar/baz/asdf'

path.join('foo', {}, 'bar');
// 抛出 'TypeError: Path must be a string. Received {}'

path.resolve()

path.resolve() 方法将路径或路径片段的序列解析为绝对路径。

给定的路径序列从右到左进行处理，每个后续的 path 前置，直到构造出一个绝对路径。

eg: 给定的路径片段序列：/foo、 /bar、 baz，调用 path.resolve('/foo', '/bar', 'baz') 将返回 /bar/baz。

如果在处理完所有给定的 path 片段之后还未生成绝对路径，则再加上当前工作目录。

生成的路径已规范化，并且除非将路径解析为根目录，否则将删除尾部斜杠。

零长度的 path 片段会被忽略。

如果没有传入 path 片段，则 path.resolve() 将返回当前工作目录的绝对路径。

path.resolve('/foo/bar', './baz');
// 返回: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// 返回: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 如果当前工作目录是 /home/myself/node，
// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'

path.join() vs path.resolve()

新建内容如下的 path.js ，node 环境下当前路径执行 node path.js

const path = require('path');

console.log(__dirname)                                      // /Users/lee/Desktop/doc
console.log('----------------------------------------------------------------------------------')
console.log(path.join('/work', 'smart'))                    // /work/smart
console.log(path.join('./work', 'smart'))                   // work/smart
console.log(path.join('./work', '../smart'))                // smart
console.log(path.join('/work', '/smart'))                   // /work/smart
console.log(path.join(__dirname, '/work', 'smart'))         // /Users/lee/Desktop/doc/work/smart
console.log(path.join(__dirname, './work', 'smart'))        // /Users/lee/Desktop/doc/work/smart
console.log(path.join(__dirname, './work', '../smart'))     // /Users/lee/Desktop/doc/smart
console.log(path.join(__dirname, '/work', '/smart'))        // /Users/lee/Desktop/doc/work/smart
console.log('----------------------------------------------------------------------------------')
console.log(path.resolve('/work', 'smart'))                 // /work/smart
console.log(path.resolve('./work', 'smart'))                // /Users/lee/Desktop/doc/work/smart
console.log(path.resolve('./work', '../smart'))             // /Users/lee/Desktop/doc/smart
console.log(path.resolve('/work', '/smart'))                // /smart
console.log(path.resolve(__dirname, '/work', 'smart'))      // /work/smart
console.log(path.resolve(__dirname, './work', 'smart'))     // /Users/lee/Desktop/doc/work/smart
console.log(path.resolve(__dirname, './work', '../smart'))  // /Users/lee/Desktop/doc/smart
console.log(path.resolve(__dirname, '/work', '/smart'))     // /smart

总结

• 在指定 __dirname 并且参数中没有 / 开头的绝对路径的情况下，两者的效果基本是一样的。
• path.resolve() 最终一定会生成绝对路径，path.join 只是生成拼接后的路径。

参考链接

• nodejs-path.join([...paths])
• nodejs-path.resolve([...paths])
• 关于path.join，path.resolve的详细介绍

记一次移动端对象遍历的问题 Object.keys()

记一次移动端对象遍历的问题 Object.keys()

背景

排查一次移动端手机上的 bug ,Andorid 端是没问题的，iOS 端是出现问题的，最后定位的问题是 Object.keys() 遍历对象取 key 来匹配的问题。

本来是知道 Object.keys 是不保证顺序的, 解决了此问题，但是结果 Android 端的解析和 iOS 端的解析竟然不一样，奇怪？

Object.keys()

Object.keys() 是不保证遍历顺序的，遍历规则如下：

Object.keys 在内部会根据属性名key的类型进行不同的排序逻辑

分三种情况：

• 如果属性名的类型是 Number ，那么 Object.keys 返回值是按照 key 从小到大排序
• 如果属性名的类型是 String ，那么 Object.keys 返回值是按照属性被创建的时间升序排序。
• 如果属性名的类型是 Symbol ，那么逻辑同 String 相同

Object.keys被调用时，背后发生了什么，参考: 5分钟彻底理解Object.keys

参考: MDN Object.keys()

Android 端 和 iOS 端解析不一样的问题

两个端的内核浏览器的 JavaScript 解析引擎遵循的 ECMA 规范不同

SO ...

以后对于对象的遍历方式要慎重，可以优先搞成可控的数组类型在遍历取值

参考: js能够保证object属性的输出顺序吗？