React.js学习笔记(9) Date对象 + ( Moment.js 时间格式化插件 ) + ( 形参,实参,传值传递,传址传递 )

(一) Date对象 概述

Date对象是JavaScript提供的日期和时间的操作接口。它可以表示的时间范围是,1970年1月1日00:00:00前后的各1亿天(单位为毫秒)。

(1)Date作为普通函数: Date() -------------------返回当前时间字符串

  • Date对象可以作为普通函数直接调用,返回一个代表当前时间的字符串。
  • Date对象作为普通函数使用时,即使带有参数,返回的还是当前时间。
# Date对象作为普通函数,可以直接调用,返回当前时间字符串



Date()
// Sat Nov 18 2017 17:42:30 GMT+0800 (中国标准时间)



--------------------------------------


# 作为普通函数时,即使带有参数,返回的还是当前时间



Date(2000, 1, 1)
// Sat Nov 18 2017 17:42:30 GMT+0800 (中国标准时间)

(2) Date作为构造函数: new Date()--------------------返回Date对象实例

  • Date还可以当作构造函数使用。对它使用new命令,会返回一个Date对象的实例。如果不加参数,生成的就是代表当前时间的对象
  • 这个Date实例对应的字符串值,就是当前时间。

var Today = new Date()

Today --------------------------------------------- // typeof是一个Object类型

等同于(相等)

today.toString()------------------------------------// typeof是一个String类型


最后的值都相等
// Sat Nov 18 2017 17:55:42 GMT+0800 (中国标准时间)

作为构造函数时,Date对象可以接受多种格式的参数。

[1] new Date(datestring)

Date对象接受一个日期字符串作为参数,返回所对应的时间。

  • 日期字符串的完整格式是“month day, year hours:minutes:seconds”,比如“December 25, 1995 13:30:00”。如果省略了小时、分钟或秒数,这些值会被设为0。

#参数为日期字符串时,返回对应的时间:

# 如果省略了小时、分钟或秒数,这些值会被设为0。

new Date('January 6, 2013');
// Sun Jan 06 2013 00:00:00 GMT+0800 (CST)


  • 但是,其他格式的日期字符串,也可以被解析。事实上,所有可以被Date.parse()方法解析的日期字符串,都可以当作Date对象的参数。

new Date('2013-2-15')
new Date('2013/2/15')
new Date('02/15/2013')
new Date('2013-FEB-15')
new Date('FEB, 15, 2013')
new Date('FEB 15, 2013')
new Date('Feberuary, 15, 2013')
new Date('Feberuary 15, 2013')
new Date('15 Feb 2013')
new Date('15, Feberuary, 2013')

// Fri Feb 15 2013 00:00:00 GMT+0800 (CST)


  • 总之,对于YYYY-MM-DD形式的字符串,JavaScript引擎可能会将其当作ISO格式来解析,采用格林尼治时区作为计时标准;而对于其他格式的日期字符串,一律视为非ISO格式,采用本地时区作为计时标准。(最好不要用这种方式,可以YYYY/MM/DD形式)
  • 日期字符串有没有前导0,返回的结果是不一样的。如果没有前导0,JavaScript引擎假设用户处于本地时区,所以本例返回0点0分。如果有前导0(即如果你以ISO格式表示日期),就假设用户处于格林尼治国际标准时的时区,所以返回8点0分。但是,ES6改变了这种做法,规定凡是没有指定时区的日期字符串,一律认定用户处于本地时区。

[2] new Date(year, month [, day, hours, minutes, seconds, ms]), 这种写法 至少要两个参数(年,月)

  • Date对象还可以接受多个整数作为参数,依次表示年、月、日、小时、分钟、秒和毫秒。
  • 如果采用这种格式,最少需要提供两个参数(年和月),其他参数都是可选的,默认等于0。因为如果只使用“年”这一个参数,Date对象会将其解释为毫秒数。
    year:四位年份,如果写成两位数,则加上1900
    month:表示月份,0表示一月,11表示12月---------月份从0开始算
    date:表示日期,1到31-----------------------------天数从1开始算
    hour:表示小时,0到23
    minute:表示分钟,0到59
    second:表示秒钟,0到59
    ms:表示毫秒,0到999
  • 注意,月份从0开始计算,但是,天数从1开始计算。另外,除了日期默认为1,小时、分钟、秒钟和毫秒默认都是0。

        let e81 = new Date(2018,0)
        let e82 = new Date(2018,1)
        let e865 = new Date(2018,5,5)
   
//  e81 = Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间) 
//  e82 = Thu Feb 01 2018 00:00:00 GMT+0800 (中国标准时间)
// e865 = Tue Jun 05 2018 00:00:00 GMT+0800 (中国标准时间)

(二) Date实例对象的方法

Date的实例对象,有几十个自己的方法,分为以下三类。

  • to类:从Date对象返回一个字符串,表示指定的时间。
  • get类:获取Date对象的日期和时间。
  • set类:设置Date对象的日期和时间。

(1) to类:从Date对象返回一个字符串,表示指定的时间。

(1)Date.prototype.toString()
  • toString方法返回一个完整的日期字符串。


var d = new Date(2013, 0, 1);

d.toString()
// "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)"

d
// "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)" 



因为toString是默认的调用方法,所以如果直接读取Date对象实例,就相当于调用这个方法。


(2)Date.prototype.toUTCString()
  • toUTCString方法返回对应的UTC时间,也就是比北京时间晚8个小时。

var d = new Date(2013, 0, 1);

d.toUTCString()
// "Mon, 31 Dec 2012 16:00:00 GMT"

d.toString()
// "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)"

(3)Date.prototype.toDateString()
  • toDateString方法返回日期字符串。

var d = new Date(2013, 0, 1);
d.toDateString() // "Tue Jan 01 2013"

(4)Date.prototype.toTimeString()
  • toTimeString方法返回时间字符串

var d = new Date(2013, 0, 1);
d.toTimeString() // "00:00:00 GMT+0800 (CST)"

(5)Date.prototype.toLocaleDateString()

  • toLocaleDateString方法返回一个字符串,代表日期的当地写法。

var d = new Date(2013, 0, 1);

d.toLocaleDateString()
// 中文版浏览器为"2013年1月1日"
// 英文版浏览器为"1/1/2013"

(6)Date.prototype.toLocaleTimeString()

  • toLocaleTimeString方法返回一个字符串,代表时间的当地写法。


var d = new Date(2013, 0, 1);

d.toLocaleTimeString()
// 中文版浏览器为"上午12:00:00"
// 英文版浏览器为"12:00:00 AM"


(2) get类:获取Date对象的日期和时间。

Date对象提供了一系列get*方法,用来获取实例对象某个方面的值。

getTime():返回距离1970年1月1日00:00:00的毫秒数,等同于valueOf方法。
getDate():返回实例对象对应每个月的几号(从1开始)。---------------------------------
getDay():返回星期几,星期日为0,星期一为1,以此类推。-----------------------------
getYear():返回距离1900的年数。
getFullYear():返回四位的年份。-----------------------------------------------------------------
getMonth():返回月份(0表示1月,11表示12月)。----------------------------------------
getHours():返回小时(0-23)。-----------------------------------------------------------------
getMilliseconds():返回毫秒(0-999)。
getMinutes():返回分钟(0-59)。--------------------------------------------------------------
getSeconds():返回秒(0-59)。----------------------------------------------------------------
getTimezoneOffset():返回当前时间与UTC的时区差异,以分钟表示,返回结果考虑到了夏令时因素。

所有这些get*方法返回的都是整数,不同方法返回值的范围不一样。

分钟和秒:0 到 59
小时:0 到 23

星期:0(星期天)到 6(星期六)
日期:1 到 31
月份:0(一月)到 11(十二月)
年份:距离1900年的年数


var d = new Date('January 6, 2013');

d.getDate() // 6-----------------------------------------
d.getMonth() // 0----------------------------------------
d.getYear() // 113
d.getFullYear() // 2013----------------------------------
d.getTimezoneOffset() // -480


(3) set类:设置Date对象的日期和时间。

Date对象提供了一系列set*方法,用来设置实例对象的各个方面。

  • set 这些方法基本是跟 get 方法一一对应的,但是没有setDay方法,因为星期几是计算出来的,而不是设置的。另外,需要注意的是,凡是涉及到设置月份,都是从0开始算的,即0是1月,11是12月。

setDate(date):设置实例对象对应的每个月的几号(1-31),返回改变后毫秒时间戳。

setYear(year): 设置距离1900年的年数。
setFullYear(year [, month, date]):设置四位年份。
setHours(hour [, min, sec, ms]):设置小时(0-23)。
setMilliseconds():设置毫秒(0-999)。
setMinutes(min [, sec, ms]):设置分钟(0-59)。
setMonth(month [, date]):设置月份(0-11)。
setSeconds(sec [, ms]):设置秒(0-59)。
setTime(milliseconds):设置毫秒时间戳。

Date对象








(二) Moment.js时间格式化插件

(1) 安装

npm install moment --save

(2)引入和使用 - 在需要的地方引入

es5
var moment = require('moment');
moment().format();


es6
import moment from 'moment';
moment().format();

(3)示列:

//
2017-11-19T17:07:11+08:00 -------moment().format()
2016-06-06 -------moment().format('2016-06-06')
2016-6-6 -------moment().format('2016-6-6')
date.js:13-----------------------------------------------------
2017-11-19 -------moment().format('YYYY-MM-DD')
05/07/11 -------moment().format('hh/mm/ss')
date.js:16-----------------------------------------------------
17 "moment().hour()"
7 "moment().minute()"
11 "moment().second()"
date.js:20-----------------------------------------------------
2017 "moment().year()"
10 "moment().month()"
19 "moment().date()"
0 "moment().day()"
date.js:25-----------------------------------------------------
2018/11/19 -------moment().add(1,'y').format('YYYY/MM/DD')
2018 "moment().add(1,'years').year()-------这是number类型"
2018 -------moment().add(1,'years').format('YYYY')-------这是string类型
2016 "moment().subtract(1,'y').year()"
11 -------moment().startOf('month').format('MM')

moment.js







(三) ps: 形参和实参

(1)形参,是在定义函数时使用的参数,目的是用来接收调用该函数时传进来的实际参数。

(2)实参:是在调用时传递给函数的参数


function myfun(a,b,c){
    ...  
}
myfun(1,2,3);


这里a,b,c就是形参。1,2,3为实参。 

形参和实参是不同的变量,他们在内存中处于不同的位置,形参在函数运行结束时将被释放。

(四) 参数传递:传值传递和传址传递

(1)传值传递

  • 函数参数(实参)如果是原始类型的值(数值、字符串、布尔值),
  • 那么传递方式是就是传值传递(passes by value)。
  • 这意味着,在函数体内修改参数值,不会影响到函数外部。
    (传值传递,在函数内部,参数值是原始值的拷贝,无论怎么修改,都不会影响到原始值。)

var p = 2;     // 数字作为参数   属于   原始类型的值

function f(p) {     // 形参
  p = 3;            // 函数声明和初始化
}
f(p);               // 实参,传值传递-----------------------参数是数字,字符串,布尔值
                    // 调用f()函数,没有返回值  
 
p // 2              // 传值传递,在函数体内修改参数值,不会影响到函数外部






上面代码中,变量p是一个原始类型的值,传入函数f的方式是传值传递。

因此,在函数内部,p的值是原始值的拷贝,无论怎么修改,都不会影响到原始值。

(2) 传址传递

  • 如果函数参数是复合类型的值(数组、对象、其他函数),
  • 传递方式是传址传递(pass by reference)。
  • 也就是说,传入函数的原始值的地址,因此在函数内部修改参数,将会影响到原始值。

var obj = {p: 1};       // 对象作为参数    属于     符合类型的值

function f(o) {         // 形参
  o.p = 2;
}
f(obj);                // 实参,传址传递-----------------------参数是对象,数组,其他函数

obj.p // 2             // 传址传递,在函数内部修改参数值,会影响到函数外部的原始值




上面代码中,传入函数f的是参数对象obj的地址。因此,在函数内部修改obj的属性p,会影响到原始值。

(3) 注意:

如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o){
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]


上面代码中,在函数f内部,参数对象obj被整个替换成另一个值。这时不会影响到原始值。


这是因为,形式参数(o)与实际参数obj存在一个赋值关系。

(4) 某些情况下,如果需要对某个原始类型的变量,获取传址传递的效果,可以将它写成全局对象的属性。

var a = 1;

function f(p) {
  window[p] = 2;
}
f('a');

a // 2



上面代码中,变量a本来是传值传递,但是写成window对象的属性,就达到了传址传递的效果

传值传递,传址传递例子:


export default  class DatesTest extends Component {

    aaa = 1;
    bbb = 'abc';
    ccc = false;

    eee = [1,2,3];
    fff = {'a':1,'b':2};

    funTest = (a,b,c,e,f,g) => {
        a = 22222222222222;
        b = 'abccccccccccc';
        c = true;

        e[0] = 1111111111111111;
        f['a'] = 22222222222222
    }

    componentDidMount() {
        this.funTest(this.aaa,this.bbb,this.ccc,this.eee,this.fff)

        console.log(this.aaa,'this.aaa');
        console.log(this.bbb,'this.bbb');
        console.log(this.ccc,'this.ccc');
        console.log(this.eee,'this.eee');
        console.log(this.fff,'this.fff');
    }
}




// 执行结果:

1 "this.aaa"
abc this.bbb
false "this.ccc"
[1111111111111111, 2, 3] "this.eee"
Object {a: 22222222222222, b: 2} "this.fff"

传值传递,传址传递
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容