JavaScript 进阶营

React.js学习笔记(9) Date对象 + ( Momen

2017-11-18  本文已影响2311人  woow_wu7

(一) Date对象 概述

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

（1）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对象实例


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对象接受一个日期字符串作为参数，返回所对应的时间。


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

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

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




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)

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


        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的实例对象，有几十个自己的方法，分为以下三类。

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

（1）Date.prototype.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()

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

var d = new Date(2013, 0, 1);
d.toDateString() // "Tue Jan 01 2013"
（4）Date.prototype.toTimeString()

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

（5）Date.prototype.toLocaleDateString()


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

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

（6）Date.prototype.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*方法，用来设置实例对象的各个方面。

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)传值传递


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

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






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

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

(2) 传址传递


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"
传值传递，传址传递
上一篇 下一篇

猜你喜欢

热点阅读