React.js學(xué)習(xí)筆記(9) Date對象 + ( Moment.js 時(shí)間格式化插件 ) + ( 形參证芭,實(shí)參瞳浦,傳值傳遞,傳址傳遞 )

(一) Date對象 概述

Date對象是JavaScript提供的日期和時(shí)間的操作接口废士。它可以表示的時(shí)間范圍是叫潦,1970年1月1日00:00:00前后的各1億天(單位為毫秒)。

(1)Date作為普通函數(shù): Date() -------------------返回當(dāng)前時(shí)間字符串

  • Date對象可以作為普通函數(shù)直接調(diào)用官硝,返回一個(gè)代表當(dāng)前時(shí)間的字符串矗蕊。
  • Date對象作為普通函數(shù)使用時(shí),即使帶有參數(shù)氢架,返回的還是當(dāng)前時(shí)間傻咖。
# Date對象作為普通函數(shù),可以直接調(diào)用岖研,返回當(dāng)前時(shí)間字符串



Date()
// Sat Nov 18 2017 17:42:30 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)



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


# 作為普通函數(shù)時(shí)卿操,即使帶有參數(shù)警检,返回的還是當(dāng)前時(shí)間



Date(2000, 1, 1)
// Sat Nov 18 2017 17:42:30 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)

(2) Date作為構(gòu)造函數(shù): new Date()--------------------返回Date對象實(shí)例

  • Date還可以當(dāng)作構(gòu)造函數(shù)使用。對它使用new命令害淤,會返回一個(gè)Date對象的實(shí)例扇雕。如果不加參數(shù),生成的就是代表當(dāng)前時(shí)間的對象
  • 這個(gè)Date實(shí)例對應(yīng)的字符串值窥摄,就是當(dāng)前時(shí)間镶奉。

var Today = new Date()

Today --------------------------------------------- // typeof是一個(gè)Object類型

等同于(相等)

today.toString()------------------------------------// typeof是一個(gè)String類型


最后的值都相等
// Sat Nov 18 2017 17:55:42 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)

作為構(gòu)造函數(shù)時(shí),Date對象可以接受多種格式的參數(shù)崭放。

[1] new Date(datestring)

Date對象接受一個(gè)日期字符串作為參數(shù)哨苛,返回所對應(yīng)的時(shí)間。

  • 日期字符串的完整格式是“month day, year hours:minutes:seconds”币砂,比如“December 25, 1995 13:30:00”移国。如果省略了小時(shí)、分鐘或秒數(shù)道伟,這些值會被設(shè)為0迹缀。

#參數(shù)為日期字符串時(shí),返回對應(yīng)的時(shí)間:

# 如果省略了小時(shí)蜜徽、分鐘或秒數(shù)祝懂,這些值會被設(shè)為0。

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


  • 但是拘鞋,其他格式的日期字符串砚蓬,也可以被解析。事實(shí)上盆色,所有可以被Date.parse()方法解析的日期字符串灰蛙,都可以當(dāng)作Date對象的參數(shù)。

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引擎可能會將其當(dāng)作ISO格式來解析,采用格林尼治時(shí)區(qū)作為計(jì)時(shí)標(biāo)準(zhǔn)宣旱;而對于其他格式的日期字符串仅父,一律視為非ISO格式,采用本地時(shí)區(qū)作為計(jì)時(shí)標(biāo)準(zhǔn)浑吟。(最好不要用這種方式笙纤,可以YYYY/MM/DD形式)
  • 日期字符串有沒有前導(dǎo)0,返回的結(jié)果是不一樣的组力。如果沒有前導(dǎo)0省容,JavaScript引擎假設(shè)用戶處于本地時(shí)區(qū),所以本例返回0點(diǎn)0分燎字。如果有前導(dǎo)0(即如果你以ISO格式表示日期)腥椒,就假設(shè)用戶處于格林尼治國際標(biāo)準(zhǔn)時(shí)的時(shí)區(qū)阿宅,所以返回8點(diǎn)0分。但是寞酿,ES6改變了這種做法家夺,規(guī)定凡是沒有指定時(shí)區(qū)的日期字符串脱柱,一律認(rèn)定用戶處于本地時(shí)區(qū)伐弹。

[2] new Date(year, month [, day, hours, minutes, seconds, ms]), 這種寫法 至少要兩個(gè)參數(shù)(年榨为,月)

  • Date對象還可以接受多個(gè)整數(shù)作為參數(shù)惨好,依次表示年、月随闺、日日川、小時(shí)、分鐘矩乐、秒和毫秒龄句。
  • 如果采用這種格式,最少需要提供兩個(gè)參數(shù)(年和月)散罕,其他參數(shù)都是可選的分歇,默認(rèn)等于0。因?yàn)槿绻皇褂谩澳辍边@一個(gè)參數(shù)欧漱,Date對象會將其解釋為毫秒數(shù)职抡。
    year:四位年份,如果寫成兩位數(shù)误甚,則加上1900
    month:表示月份缚甩,0表示一月,11表示12月---------月份從0開始算
    date:表示日期窑邦,1到31-----------------------------天數(shù)從1開始算
    hour:表示小時(shí)擅威,0到23
    minute:表示分鐘,0到59
    second:表示秒鐘冈钦,0到59
    ms:表示毫秒裕寨,0到999
  • 注意,月份從0開始計(jì)算派继,但是宾袜,天數(shù)從1開始計(jì)算。另外驾窟,除了日期默認(rèn)為1庆猫,小時(shí)、分鐘绅络、秒鐘和毫秒默認(rèn)都是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 (中國標(biāo)準(zhǔn)時(shí)間) 
//  e82 = Thu Feb 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
// e865 = Tue Jun 05 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)

(二) Date實(shí)例對象的方法

Date的實(shí)例對象嘁字,有幾十個(gè)自己的方法,分為以下三類杉畜。

  • to類:從Date對象返回一個(gè)字符串纪蜒,表示指定的時(shí)間。
  • get類:獲取Date對象的日期和時(shí)間此叠。
  • set類:設(shè)置Date對象的日期和時(shí)間纯续。

(1) to類:從Date對象返回一個(gè)字符串,表示指定的時(shí)間灭袁。

(1)Date.prototype.toString()
  • toString方法返回一個(gè)完整的日期字符串猬错。


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)" 



因?yàn)閠oString是默認(rèn)的調(diào)用方法,所以如果直接讀取Date對象實(shí)例茸歧,就相當(dāng)于調(diào)用這個(gè)方法倦炒。


(2)Date.prototype.toUTCString()
  • toUTCString方法返回對應(yīng)的UTC時(shí)間,也就是比北京時(shí)間晚8個(gè)小時(shí)软瞎。

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方法返回時(shí)間字符串

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

(5)Date.prototype.toLocaleDateString()

  • toLocaleDateString方法返回一個(gè)字符串,代表日期的當(dāng)?shù)貙懛ā?/li>

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

d.toLocaleDateString()
// 中文版瀏覽器為"2013年1月1日"
// 英文版瀏覽器為"1/1/2013"

(6)Date.prototype.toLocaleTimeString()

  • toLocaleTimeString方法返回一個(gè)字符串涤浇,代表時(shí)間的當(dāng)?shù)貙懛ā?/li>


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

d.toLocaleTimeString()
// 中文版瀏覽器為"上午12:00:00"
// 英文版瀏覽器為"12:00:00 AM"


(2) get類:獲取Date對象的日期和時(shí)間鳖藕。

Date對象提供了一系列g(shù)et*方法,用來獲取實(shí)例對象某個(gè)方面的值芙代。

getTime():返回距離1970年1月1日00:00:00的毫秒數(shù)吊奢,等同于valueOf方法。
getDate():返回實(shí)例對象對應(yīng)每個(gè)月的幾號(從1開始)纹烹。---------------------------------
getDay():返回星期幾页滚,星期日為0,星期一為1铺呵,以此類推裹驰。-----------------------------
getYear():返回距離1900的年數(shù)。
getFullYear():返回四位的年份片挂。-----------------------------------------------------------------
getMonth():返回月份(0表示1月幻林,11表示12月)。----------------------------------------
getHours():返回小時(shí)(0-23)音念。-----------------------------------------------------------------
getMilliseconds():返回毫秒(0-999)沪饺。
getMinutes():返回分鐘(0-59)。--------------------------------------------------------------
getSeconds():返回秒(0-59)闷愤。----------------------------------------------------------------
getTimezoneOffset():返回當(dāng)前時(shí)間與UTC的時(shí)區(qū)差異整葡,以分鐘表示,返回結(jié)果考慮到了夏令時(shí)因素讥脐。

所有這些get*方法返回的都是整數(shù)遭居,不同方法返回值的范圍不一樣啼器。

分鐘和秒:0 到 59
小時(shí):0 到 23

星期:0(星期天)到 6(星期六)
日期:1 到 31
月份:0(一月)到 11(十二月)
年份:距離1900年的年數(shù)


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

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


(3) set類:設(shè)置Date對象的日期和時(shí)間。

Date對象提供了一系列set*方法俱萍,用來設(shè)置實(shí)例對象的各個(gè)方面端壳。

  • set 這些方法基本是跟 get 方法一一對應(yīng)的,但是沒有setDay方法枪蘑,因?yàn)樾瞧趲资怯?jì)算出來的损谦,而不是設(shè)置的。另外腥寇,需要注意的是成翩,凡是涉及到設(shè)置月份觅捆,都是從0開始算的赦役,即0是1月,11是12月栅炒。

setDate(date):設(shè)置實(shí)例對象對應(yīng)的每個(gè)月的幾號(1-31)掂摔,返回改變后毫秒時(shí)間戳。

setYear(year): 設(shè)置距離1900年的年數(shù)赢赊。
setFullYear(year [, month, date]):設(shè)置四位年份乙漓。
setHours(hour [, min, sec, ms]):設(shè)置小時(shí)(0-23)。
setMilliseconds():設(shè)置毫秒(0-999)释移。
setMinutes(min [, sec, ms]):設(shè)置分鐘(0-59)叭披。
setMonth(month [, date]):設(shè)置月份(0-11)。
setSeconds(sec [, ms]):設(shè)置秒(0-59)玩讳。
setTime(milliseconds):設(shè)置毫秒時(shí)間戳涩蜘。

Date對象








(二) Moment.js時(shí)間格式化插件

(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: 形參和實(shí)參

(1)形參,是在定義函數(shù)時(shí)使用的參數(shù)熏纯,目的是用來接收調(diào)用該函數(shù)時(shí)傳進(jìn)來的實(shí)際參數(shù)同诫。

(2)實(shí)參:是在調(diào)用時(shí)傳遞給函數(shù)的參數(shù)


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


這里a,b,c就是形參。1,2,3為實(shí)參樟澜。 

形參和實(shí)參是不同的變量误窖,他們在內(nèi)存中處于不同的位置,形參在函數(shù)運(yùn)行結(jié)束時(shí)將被釋放秩贰。

(四) 參數(shù)傳遞:傳值傳遞和傳址傳遞

(1)傳值傳遞

  • 函數(shù)參數(shù)(實(shí)參)如果是原始類型的值(數(shù)值霹俺、字符串、布爾值)毒费,
  • 那么傳遞方式是就是傳值傳遞(passes by value)丙唧。
  • 這意味著,在函數(shù)體內(nèi)修改參數(shù)值蝗罗,不會影響到函數(shù)外部艇棕。
    (傳值傳遞蝌戒,在函數(shù)內(nèi)部,參數(shù)值是原始值的拷貝沼琉,無論怎么修改北苟,都不會影響到原始值。)

var p = 2;     // 數(shù)字作為參數(shù)   屬于   原始類型的值

function f(p) {     // 形參
  p = 3;            // 函數(shù)聲明和初始化
}
f(p);               // 實(shí)參打瘪,傳值傳遞-----------------------參數(shù)是數(shù)字友鼻,字符串,布爾值
                    // 調(diào)用f()函數(shù)闺骚,沒有返回值  
 
p // 2              // 傳值傳遞彩扔,在函數(shù)體內(nèi)修改參數(shù)值,不會影響到函數(shù)外部






上面代碼中僻爽,變量p是一個(gè)原始類型的值虫碉,傳入函數(shù)f的方式是傳值傳遞。

因此胸梆,在函數(shù)內(nèi)部敦捧,p的值是原始值的拷貝,無論怎么修改碰镜,都不會影響到原始值兢卵。

(2) 傳址傳遞

  • 如果函數(shù)參數(shù)是復(fù)合類型的值(數(shù)組、對象绪颖、其他函數(shù))秽荤,
  • 傳遞方式是傳址傳遞(pass by reference)。
  • 也就是說柠横,傳入函數(shù)的原始值的地址窃款,因此在函數(shù)內(nèi)部修改參數(shù),將會影響到原始值滓鸠。

var obj = {p: 1};       // 對象作為參數(shù)    屬于     符合類型的值

function f(o) {         // 形參
  o.p = 2;
}
f(obj);                // 實(shí)參雁乡,傳址傳遞-----------------------參數(shù)是對象,數(shù)組糜俗,其他函數(shù)

obj.p // 2             // 傳址傳遞踱稍,在函數(shù)內(nèi)部修改參數(shù)值,會影響到函數(shù)外部的原始值




上面代碼中悠抹,傳入函數(shù)f的是參數(shù)對象obj的地址珠月。因此,在函數(shù)內(nèi)部修改obj的屬性p楔敌,會影響到原始值啤挎。

(3) 注意:

如果函數(shù)內(nèi)部修改的,不是參數(shù)對象的某個(gè)屬性,而是替換掉整個(gè)參數(shù)庆聘,這時(shí)不會影響到原始值胜臊。

var obj = [1, 2, 3];

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

obj // [1, 2, 3]


上面代碼中,在函數(shù)f內(nèi)部伙判,參數(shù)對象obj被整個(gè)替換成另一個(gè)值象对。這時(shí)不會影響到原始值。


這是因?yàn)檠绺В问絽?shù)(o)與實(shí)際參數(shù)obj存在一個(gè)賦值關(guān)系勒魔。

(4) 某些情況下,如果需要對某個(gè)原始類型的變量菇曲,獲取傳址傳遞的效果冠绢,可以將它寫成全局對象的屬性。

var a = 1;

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

a // 2



上面代碼中常潮,變量a本來是傳值傳遞弟胀,但是寫成window對象的屬性,就達(dá)到了傳址傳遞的效果

傳值傳遞蕊玷,傳址傳遞例子:


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');
    }
}




// 執(zhí)行結(jié)果:

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

傳值傳遞邮利,傳址傳遞
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末弥雹,一起剝皮案震驚了整個(gè)濱河市垃帅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌剪勿,老刑警劉巖贸诚,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異厕吉,居然都是意外死亡酱固,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門头朱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來运悲,“玉大人,你說我怎么就攤上這事项钮“嗝校” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵烁巫,是天一觀的道長署隘。 經(jīng)常有香客問我,道長亚隙,這世上最難降的妖魔是什么磁餐? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮阿弃,結(jié)果婚禮上诊霹,老公的妹妹穿的比我還像新娘羞延。我一直安慰自己,他們只是感情好脾还,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布肴楷。 她就那樣靜靜地躺著,像睡著了一般荠呐。 火紅的嫁衣襯著肌膚如雪赛蔫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天泥张,我揣著相機(jī)與錄音呵恢,去河邊找鬼。 笑死媚创,一個(gè)胖子當(dāng)著我的面吹牛渗钉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钞钙,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼鳄橘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了芒炼?” 一聲冷哼從身側(cè)響起瘫怜,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎本刽,沒想到半個(gè)月后鲸湃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡子寓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年暗挑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斜友。...
    茶點(diǎn)故事閱讀 39,703評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡炸裆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鲜屏,到底是詐尸還是另有隱情烹看,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布墙歪,位于F島的核電站听系,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏虹菲。R本人自食惡果不足惜靠胜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧浪漠,春花似錦陕习、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至响谓,卻和暖如春损合,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背娘纷。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工嫁审, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人赖晶。 一個(gè)月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓律适,卻偏偏與公主長得像,于是被迫代替她去往敵國和親遏插。 傳聞我的和親對象是個(gè)殘疾皇子捂贿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容