时间format函数引爆的知识点和年末有话说

年末感慨

转眼之间，一年的最后一天来了。

2017，技术界貌似正在飞跃。多年的量变终于引起了质变。

人工智能，区块链。对此，我很激动，激动着有点害怕，害怕中有点紧张，还有点渴望。未来的至高点，未来的风口，自己作为一个小小的菜鸟程序员，能够抢占呢？能否参与吗？改变世界？

火车上，回家后，看完了《神们自己》，想起以前囫囵吞枣看的《北京折叠》，这些科幻，离我们，真的很远吗？也曾看过一些历史穿越装逼小说，活了21个年岁，终于也渐渐感受到历史和人类的伟大。从倾向于文采的那个时代，到实业兴邦的近代，甚至到如今支付宝、比特币刷新实体货币。

中国现在很强。

不过下面还是来说说时间的format函数吧

实业兴邦啊（互联网当然也是实业啦，当时的虚业我猜应该是写诗之类的吧，这里就先不百度了）

一.目标程序

一个时间format函数，用法 format(date,"yyyy-MM-dd hh-mm-ss"),参数可变

const format = (value, format = "yyyy-MM-dd hh:mm:ss") => {

    const date = new Date(value);

    const o = {

        "M+": date.getMonth() + 1, // 月份

        "d+": date.getDate(), // 日

        "h+": date.getHours(), // 小时

        "m+": date.getMinutes(), // 分

        "s+": date.getSeconds(), // 秒

        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度

        "S": date.getMilliseconds() // 毫秒

    };

    let fmt = format;

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,

    (`${date.getFullYear()}`).substr(4 - RegExp.$1.length));

    Object.keys(o).forEach((k) => {

        if (new RegExp(`(${k})`).test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ?

        (o[k]) :

        ((`00${o[k]}`).substr((`${o[k]}`).length)));

    });

    return fmt;

};

二.不要小看上面的函数，用到的知识点其实还是不少的

现在的技术真是一环扣一环，所以要重视基础啊。

1.关于Date对象方法

getDate,getDay,getMonth,getFullYear(getYear已经被弃用了)

getHours,getMinutes,getSeconds

2. substr的运用 --- 一个Array对象的方法(我们来跟 substring 比较下)

substr(start, length) "slfjlsjf".substr(0,4) => "slfj"

"slfjlsjf".substr(1,4) => "lfjl"

substring(start, end) "slfjlsjf".substring(0,4) => "slfj"

"slfjlsjf".substring(1,4) => "lfj"

`上面两个方法不改变原数组

3.RegExp的$

RegExp.$1-$9：MDN上的解释是，该特性是非标准的，尽量不要在生产环境使用。

==貌似已经使用了。

该属性是只读的，而且只有在正确匹配的情况才会改变.

括号匹配项是无限的，但是RegExp对象能捕获的只有9个。

这些属性可以在 String.replace 方法中替换字符串，在这种情况下，不用在前面加上RegExp

const reg = /(\w+)\s(\w+)/;

const str = "hello haha";

console.log("pre：", RegExp.$1, RegExp.$2); // test.js

const a = reg.test(str);

console.log("after：", RegExp.$1, RegExp.$2); // hello haha

我们发现一件非常有趣的事情。node环境下，默认的 RegExp.$1 竟然是文件的名字

此后的 RegExp.$1 为第一个括号所匹配的 hello

RegExp.$2 为第二个括号所匹配的 haha

4.Object.keys(o)

Object.keys() 方法会返回一个给定对象自身可枚举属性组成的数组。

数组中属性名的排列顺序和使用 for ... in 循环遍历该对象返回的顺序一致。

(两者的主要区别是一个 for ... in 循环还会枚举其原型链上的属性

根据MDN的解释，该方法在 ES5 和 ES2015(原名ES6) 的解释是不同的

Object.keys("foo"); // TypeError: "foo" is not an object (ES5 code)

Object.keys("foo"); // ["0", "1", "2"]

我自己在我电脑的 Node 6 环境下即为后者的结果

Node.js 是针对V8引擎的现代版本而构建的。根据其文档来看，Node 已经对 ES2015的许多东西进行了实现。

该方法的正常使用

const o = { "one": 1, "two": 2 }

console.log(Object.keys(o)); // ['one', 'two']

该方法和它的兄弟们的区别：for in / Object.keys / Object.getOwnPropertyNames

共同点：三者皆可遍历对象。

不同点：摘自：https://www.cnblogs.com/37sky/articles/5324105.html

const parent = Object.create(Object.prototype, {

    a: {

        value: 1,

        writable: true, // 可写

        enumerable: true, // 可枚举

        configurable: true // 能否使用访问器, 能够delete

    }

});

// 上面的 parent - a可以被枚举

const child = Object.create(parent, {

    b: {

        value: 2,

        writable: true,

        enumerable: true,

        configurable: true

    },

    c: {

        value: 3,

        writable: true,

        enumerable: false,

        configurable: true

    }

});

// b可枚举，c不可枚举

// TEST 1 --- es3 for...in

for (const attr in child) {

    console.log(attr); // ------------> b,a

}

// Result: for in 会输出自身以及原型链上可枚举的可见的属性

// TEST 2 --- es5 Object.keys

console.log(Object.keys(child)); // ----------> ['b']

// Result: Object.keys 会输出 自身(仅自身，不包括原型链)可枚举的可见属性

// TEST 3 --- es5 Object.getOwnPropertyNames

console.log(Object.getOwnPropertyNames(child)); // ------> ['b', 'c']

// Result：Object.getOwnProperyNames 会输出 自身(不包括原型链)所有的可见属性

// TEST 4 --- es6 for ... of

for(var i of child) {

    console.log(i);

}

// Result: 很遗憾，node 6.10.0 还不支持它

这里做个总结：

Object.keys可以输出自身(不包括原型链)的可枚举的可见属性。
Object.getOwnPropertyNames可以输出(不包括原型链的)的所有可见属性。
for in 可以输出自身和原型链可枚举(不可枚举则不行)的可见属性。

Object.keys 可以说是要求最严格的，严谨。

5.同时引出JS Object的几个属性

学习链接：http://blog.csdn.net/qq_17335153/article/details/52584727

Configurable
Enumerable
Writable
Value
Getter
Setter

数据属性

const obj = {};

Object.defineProperty(obj, 'name', {

    configurable: false,

    enumerable: false,

    writable: false,

    value: 'test'

});

console.log(obj.name);

obj.name = 'write';

console.log(obj.name); // test ，修改失败

console.log("用delete", delete obj.name); // false, delete失败

console.log(obj.name); // 完好如初

Object.defineProperty(obj, 'name', {

    configurable: true // 不可修改，将抛出错误

});

访问器属性：C# ???

const book = {

    _year: 2004,  // 加 _ ，代表属性只能通过对象方法访问

    edition: 0

}

Object.defineProperty(book, 'year', {

    get: function () {

        return this._year;

    },

    set: function (newValue) {

        this._year = newValue;

        this.edition += newValue - 2004;

    }

});

console.log(book.year); // 2004

book.year = 2006;

console.log(book.year); // 2006 若无 set，则依旧为 2004

三.最后的难点

fmt = fmt.replace(RegExp.$1,

            (`${date.getFullYear()}`).substr(4 - RegExp.$1.length));

此句话的作用主要是：当我们写的是 'yyy' 的时候，只会返回年份值的后三个数

Object.keys(o).forEach((k) => {

            if (new RegExp(`(${k})`).test(fmt)) fmt = fmt.replace(RegExp.$1,

            (RegExp.$1.length === 1) ?

            (o[k]) :

            ((`00${o[k]}`).substr((`${o[k]}`).length)));

        });

使用ES6的模板引擎语法将属性字符串变为一个个正则表达式

最后使用 replace 一一替换

重点注意，以下两句话是不一样的

http://blog.csdn.net/u010552788/article/details/51019367

console.log("test", new RegExp(`${k}`));

console.log("test2", new RegExp(`(${k})`));

看似只是一句括号之差，但是我们这里需要用到 RegExp.$1

如若用第一种，$ 是没有办法匹配到的

此后依次匹配到 MM hh 等，之后采用 replace 的方法分别将 MM hh 等替换为

我们的 o[k] 对象。

其后的三元运算符又是什么意思呢？

原来是这样：

假设我们返回的秒数o[k] = 1 ，那么这里我们应该给它显示 01 不是吗？

所以我们这里使用 (00${o[k]}).substr((${o[k]}).length) 来替换

根据是 1 位还是 2 位来决定使用 (008).substr(1) = 08 // 8秒

还是 (0018).substr(2) = 18 // 18秒

对于length = 1 的情况。

1.此句为了 当分钟数或者秒数或者..... 为 个位数的时候 显示 '01', '02', '08'之类的

2.一般情况下，没有 "q+" 和 "S" 的匹配了。具体看 fmt 是否有东西。

3.对于秒来说，这里的判断其实不会走 RegExp.$1.length === 1 (true)

4.对于毫秒 S 来说，会走这步。所以 = 1的情况是为了毫秒而准备的。

四.至此，大功告成

一段小小的程序，却能发掘出这么多我不懂的东西。还是差的太远了我，基础。

巴特西