JavaScript渲染页面

JavaScript是一门基于对象的编程语言。

  • 核心(ECMAScript)
  • 文档对象模型(DOM)
  • 浏览器对象模型(BOM)

变量

ECMAScript的变量是松散类型的,松散类型就是可以用来保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符而已。

用var 操作符定义的变量将成为定义该变量的作用域中的局部变量。

name = 'Alice';  //全局变量
function foo() {
    var first = 'hello';  //局部变量
    second = 'world!'  //全局变量
}

数据类型

鉴于ECMAScript 是松散类型的,因此需要有一种手段来检测给定变量的数据类型——typeof 就是负责提供这方面信息的操作符。

var message = "hello world!";
console.log(typeof message);  //string
console.log(typeof(message));  //string
console.log(typeof(123456));  //number

Undefined类型

Undefined类型只有一个值,即特殊的undefined。在使用var声明变量但未对变量赋值时,这个变量的值就是undefined。

对未初始化的变量执行typeof 操作符会返回undefined 值,而对未声明的变量执行typeof 操作符同样也会返回undefined 值。

Null类型

Null类型也只有一个值,特殊的值是null。null值表示一个空对象指针;如果变量设置未null,就相当于这个变量以后只能存放对象,只不过现在没有存放对象。

typeof 操作符检测null 值时会返回"object"。

Boolean类型

Boolean类型只有两个字面值true和false,并且是区分大小写的;True 和False(以及其他的混合大小写形式)都不是Boolean 值。

Number类型

Number类型包含整数、浮点数值和NaN,

  1. 整数可以通过十进制、八进制(0开头)和十六进制(0x开头)来表示。
  2. 浮点数值中必须包含一个小数点,浮点数值的最高精度是17 位小数,但在进行算术计算时其精确度远远不如整数。例如,0.1 加0.2的结果不是0.3,而是0.30000000000000004。
  3. NaN,即非数值(Not a Number)是一个特殊的数值,用于表示一个操作数原本是要返回一个数值,但未如愿返回一个数值,就会返回NaN(这样就不会抛出错误了)。任何涉及NaN 的操作(例如NaN/10)都会返回NaN;NaN 与任何值都不相等,包括NaN 本身。ECMAScript 定义了isNaN()函数,确定这个参数是否“不是数值”。
console.log(isNaN(NaN));  //true
console.log(isNaN(10));  //false(10 是一个数值)
console.log(isNaN("10"));  //false(可以被转换成数值10)
console.log(isNaN("blue"));  //true(不能转换成数值)
console.log(isNaN(true));  //false(可以被转换成数值1)
isNaN()

转换为数值函数,Number()可以用于任何数据类型,parseInt()和parseFloat()则专门用于把字符串转换成数值。

1、Number()函数的转换规则如下:

  • Boolean值,true 和false 将分别被转换为1 和0;
  • null值,返回0;
  • undefined,返回NaN;
  • string只包含数字转换为十进制数;
  • string浮点格式转换为对应的浮点数;
  • string十六进制格式转换为相同大小的十进制整数;
  • 空字符串转换为0;
  • string中包含除上述格式之外的字符,则将其转换为NaN;
var num1 = Number("Hello world!");  //NaN
var num2 = Number("");  //0
var num3 = Number("0xa2");  //162
var num4 = Number(true);  //1
Number()函数

2、parseInt()函数

  • 在转换字符串时,会忽略字符串前面的空格,直至找到第一个非空格字符。
  • 如果第一个字符不是数字字符或者负号,parseInt()就会返回NaN;
  • 如果第一个字符是数字字符,parseInt()会继续解析第二个字符,直到解析完所有后续字符或者遇到了一个非数字字符。
  • 对进制数转换时可以使用第二个参数--基数(即多少进制)。
var num1 = parseInt("1234blue");  // 1234
var num2 = parseInt("");  // NaN
var num4 = parseInt(22.5);  // 22
var num5 = parseInt("AF", 16);  //175(十六进制)
parseInt()函数

3、parseFloat()函数

  • 从第一个字符开始解析,一直解析到字符串末尾,或者遇见一个无效的浮点数字字符为止。
  • 字符串中的第一个小数点是有效的,而第二个小数点就是无效的。
  • parseFloat()只解析十进制值,十六进制格式的字符串则始终会被转换成0。
var num1 = parseFloat("1234blue");  //1234 (整数)
var num2 = parseFloat("0xA");  //0
var num3 = parseFloat("22.5");  //22.5
var num4 = parseFloat("22.34.5");  //22.34
var num5 = parseFloat("0908.5");  //908.5
var num6 = parseFloat("3.125e7");  //31250000
parseFloat()函数

String类型

Unicode字符,用双引号表示的字符串和用单引号表示的字符串完全相同 。字符串一旦创建,值就不能改变

要把一个值转换为一个字符串有两种方式:toString()方法,转型函数String()。

1、toString()方法

  • 数值、布尔值、对象和字符串都有;
  • null 和undefined 值没有这个方法;
var num = 10;
console.log(num.toString()); //  "10"
console.log(num.toString(2)); //  "1010"
var  i = true
console.log(i.toString()); // "true"
toString()方法

2、String()函数

  • 如果值有toString()方法,则调用该方法(没有参数)并返回相应的结果;
  • 如果值是null,则返回"null";如果值是undefined,则返回"undefined"。
var value1 = 10;
var value2 = true;
var value3 = null;
var value4;
console.log(String(value1));  // "10"
console.log(String(value2));  // "true"
console.log(String(value3));  // "null"
console.log(String(value4));  // "undefined"
String()函数

Object类型

可以通过执行new后跟对象类型的名称来创建对象。

Object的每个实例都具有下列属性和方法:

  • constructor:保存着用于创建当前对象的函数;
  • hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中是否存在;
  • isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型;
  • propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in 语句来枚举;
  • toLocaleString():返回对象的字符串表示,该字符串与执行环境对应;
  • toString():返回对象的字符串;
  • valueOf():返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

操作符

一元操作符

++, --:前置型和后置型。顾名思义,前置型应该位于要操作的变量之前,而后置型则应该位于要操作的变量之后;

+, -:正负,一元加减操作符主要用于基本的算术运算,也可以像前面示例所展示的一样用于转换数据类型;

位操作符

&, |, ~:与或非;

逻辑操作符

&&, ||, !:逻辑操作符,与或非;

相等操作符

==, ===:不全等和全等,不全等时经过数据类型转换的;

条件操作符

(条件)? (true结果) : (false结果) :三目运算。

条件语句

if语句的条件判断可以是任意表达式;而且这个表达式求值的结果不一定是布尔值。ECMAScript 会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值

if (i > 10) {
    console.log("i大于10");
} else if (i < 5) {
    console.log("i小于0");
} else {
    console.log("i在5-10中");
}
if语句

switch 语句中:“如果表达式等于这个值,则执行后面的语句”。而break会导致代码跳出switch 语句。如果省略break关键字,就会导致执行完当前case 后,继续执行下一个case。最后的default则用于在表达式不匹配前面任何一种情形的时候执行。

var i = 2;
switch (i) {
    case 1:
        alert("1");
        break;
    case 2:
        alert("2");
        break;
    case 3:
        alert("3");
        break;
    default:
        alert("0");
}
switch-case

循环语句

for语句也是一种前测试循环语句,但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。使用while 循环做不到的,使用for 循环同样也做不到。

var count = 10;
for (var i = 0; i < count; i++){
    console.log(i);
}
for

for-in语句是一种精准的迭代语句,可以用来枚举对象的属性。

var list = [11,22,33]
for (i in list){
    console.log(i)  //索引
    console.log(list[i])  //数值
}
for-in

while语句属于前测试循环语句,先判断条件,再执行循环体内的代码。

var i = 20;
while (i < 10) {
    i += 2;
}
console.log(i)  // 20
while循环

do-while语句是一种后测试循环语句,即先执行循环体中的代码,再判断条件。这种后测试循环语句最常用于循环体中的代码至少要被执行一次的情形。

var i = 20;
do {
    i += 2;
} while (i < 10);
console.log(i);  // 22
do-while

函数

ECMAScript 中的参数在内部是用一个数组来表示的,在函数体内可以通过arguments 对象来访问这个参数数组。

function sayHi() {
    alert(arguments[0] + "," + arguments[1]);  //第一个参数和第二个参数
    alert(arguments.length);  //调用时传入参数的个数
}

JavaScript引用类型

ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值指的是简单的数据段;引用类型值指那些可能由多个值构成的对象。

JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,当复制保存着对象的某个变量时,操作的是对象的引用。但在为对象添加属性时,操作的是实际的对象。

  • 基本数据类型:Undefined、Null、Boolean、Number 和String。这5 种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。从一个变量向另一个变量复制基本类型的值,深拷贝完全独立;
  • 引用类型的值是保存在内存中的对象,所有引用类型的值都是Object 的实例。从一个变量向另一个变量复制引用类型的值,浅拷贝引用同一个对象;

instanceof,检测对象是否为指定的引用类型。

alert(person instanceof Object);  // 变量person 是Object 吗?
alert(colors instanceof Array);  // 变量colors 是Array 吗?
alert(pattern instanceof RegExp);  //变量pattern 是RegExp 吗?
instanceof

Object类型

对象属性名中包含非字母非数字的,可以使用方括号表示法来访问它们。通常,除非必须使用变量来访问属性,否则我们建议使用点表示法。

Object的每个实例都具有下列属性和方法:

  • constructor:保存着用于创建当前对象的函数;
  • hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中是否存在;
  • isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型;
  • propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in 语句来枚举;
  • toLocaleString():返回对象的字符串表示,该字符串与执行环境对应;
  • toString():返回对象的字符串;
  • valueOf():返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
// 使用Object()构造函数
var person = new Object();  //创建实例对象
person.name = "Nicholas";  //为实例添加name属性

// 使用对象字面量表示法;
var person = {
name : "Nicholas",  //以逗号分隔
age : 29
};
创建实例方式

String类型

String 类型是字符串的对象包装类型。length属性字符串长度。

var str1 = "hello world!";
var str2 = new String("hello world!");
console.log(str1.length);  // 12
console.log(str2.length);  // 12
toString()方法

字符方法

charAt([index]), 从一个字符串中返回指定index的字符;

charCodeAt([index]), 从一个字符串中返回指定index的字符Unicode编码;

var string = "Hello World!";
console.log(string.charAt(6));  //w
console.log(string.charCodeAt(6)); //119
查找字符

字符串方法

concat(), 将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回;

slice([start [,end]]), 返回指定索引范围内的子集;

substring([start [,end]]), 返回指定索引范围内的子集;

substr([start [,len]]), 返回从start开始len长度的字符串;

var string = "Hello World!";
console.log(string.concat(" Ahh"));  //Hello World! Ahh
console.log(string.slice(3, 7));  //lo wo
console.log(string.substring(3, 7)); //lo wo
console.log(string.substr(3, 7));  //lo wor
拼接字符串、查找子集

位置方法

indexOf([str]), 返回调用对象中第一次出现的指定值的索引,没找到则返回-1;

lastIdexOf([str]), 返回指定值在调用该方法的字符串中最后出现的位置,没找到则返回-1;

var string = "Hello World!";
console.log(string.indexOf('l'));  //2
console.log(string.indexOf('aa'));  //-1
console.log(string.lastIndexOf('l'));  //9
console.log(string.lastIndexOf('aa'));  //-1
查找字符串索引

去重方法

trim(), 从一个字符串的两端删除空白字符;

trimRight(), 从一个字符串的右端移除空白字符;

trimLeft(), 从一个字符串的左端移除空白字符;

var str1 = "  hello  ";
console.log(str1.trim());  //hello;
console.log(str1.trimRight());  //  hello;
console.log(str1.trimLeft());  //hello  ;
去重方法

大小写转换

toUpperCase(), toLowerCase(), 将调用该方法的字符串值转为大、小写形式,并返回;

toLocaleUpperCase(), toLocaleLowerCase(), 根据特定的语言环境返回转换为大、小写的值;

var string = "Hello World!";
console.log(string.toUpperCase()); //HELLO WORLD!
console.log(string.toLowerCase()); //hello world!
console.log(string.toLocaleUpperCase());  //HELLO WORLD!
console.log(string.toLocaleLowerCase());  //hello world!
大小写转换

模式匹配

ma'tch(), 检索返回一个字符串匹配正则表达式的的结果;

search(), 执行正则表达式和String对象之间的一个搜索匹配;

replace(), 返回一个由替换值(replacement)替换一些或所有匹配的模式(pattern)后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数;

split(), 使用指定的分隔符字符串将一个String对象分割成字符串数组;

localeCompare()

根据26个字母顺序进行比较,返回一个数字,调用者靠前为-1,调用者靠后为1,两者相同为0。

var sting = "hello";
console.log(sting.localeCompare("ahh"));  //1
console.log(sting.localeCompare("hello"));  //0
console.log(sting.localeCompare("wowo"));  //-1
localeCompare()

Array类型

Array类型是数据的有序列表,ECMAScript 数组的每一项可以保存任何类型的数据。

数组的length 属性不是只读的。通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

var a1 = new Array(3);  //创建一个包含3项的数组,new可以省略
a1[0] = 28;
a1[1] = "ahh";
console.log(a1);  //[28, "ahh", empty]

obj = {};
var a2 = [1,"A",obj];  //可以是任何数据

a2.length = 2;  //length设置为2,删除第三项
console.log(a2);  //[1,"A"]
a2[a2.length] = obj; //在数组末尾添加新项
console.log(a2);  //[1, "A", {…}]
数组创建方式和length属性

栈队方法

push(), 向数组末端添加项,并返回修改后数组的长度;

pop(), 后进先出LIFO,移除数组中的最后一项并返回该项;

shift(), 先进先出FIFO,移除数组中的第一个项并返回该项;

var a = ["red", "green", "yellow", "blue", "purple"];
console.log(a.push("black")); //6
console.log(a.pop());  //"purple"
console.log(a.shift());  //"red"
堆栈方法

排序方法

sort([func]), 按升序排列数组项,先调用每个数组项的toString()方法,转换成字符串进行比较,sort()方法可以接收一个比较函数作为参数;

reverse(), 反转数组项的顺序;

var a = [2, 1, 3];
function compare(a, b) {
    return a - b;  // 比较数值大小,保证返回正、负、0
};
console.log(a.sort());  // [2, 3, 1]
console.log(a.sort(compare));  // [1, 2, 3]

console.log(a.reverse());  // [3, 1, 2]
排序方法

操作方法

concat([args]), 将参数添加到数组副本的末尾,最后返回新构建的数组;没有参数只是复制当前数组并返回副本;

slice([start [,end]]), 返回一个新的数组对象,是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变;

splice([start, del [, insert]]), 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组;

var a = ["red", "green", "yellow", "blue", "purple"];
var b = ["Alice", 28];

console.log(a.concat(b, "Doctor"));  //["red", "green", "yellow", "blue", "purple", "Alice", 28, "Doctor"]
console.log(a.slice(0, 2));  //["red", "green"]
a.splice(2, 2);  // 从索引2开始删除2个并返回修改内容
console.log(a);  // ["red", "green", "purple"]
a.splice(1, 0, "orange", "yellow");  // 在索引1插入数据并返回修改内容
console.log(a);  // ["red", "orange", "yellow", "green", "purple"]
a.splice(0, 3, "white", "gray");  // 从索引0开始开始删除3个成员,并插入内容
console.log(a);  // ["white", "gray", "green", "purple"]
内容操作方法

索引方法

indexOf([str,[start]]), 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1;

lastIndexOf(), 从数组末尾开始查找,未找到返回-1;

var a = ["red", "green", "yellow", "green", "purple"];
console.log(a.indexOf("green"));  // 1
console.log(a.indexOf("green", 2));  // 2
console.log(a.indexOf("gray", 2));  // -1
console.log(a.lastIndexOf("green"));  // 3
索引方法

迭代方法

filter([func]):对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的数组;

forEach([func]):对数组的每个元素执行一次提供的函数。。这个方法没有返回值;

map([func]):创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果;

var a = ["red", "green", "yellow", "blue", "purple"];
var reFilter = a.filter(function (color){
    return color.length > 5;
});
console.log(reFilter);  // ["yellow", "purple"]

a.forEach(function (color) {
    if (color.length <= 4){
    console.log(color.toUpperCase());
    }
});  //RED BLUE

var reMap = a.map(function (color) {
    return color.toUpperCase()
});
console.log(reMap)  // ["RED", "GREEN", "YELLOW", "GREEN", "PURPLE"]
迭代方法

reduce()方法

reduce()方法接受两个参数,一个是调用的函数,另一个是基础的初始值;调用的函数应该被传入4个参数:前一个值、当前值、项的索引和数组对象。

var number = [2, 4, 6, 8];
var result = number.reduce(function (acc, cur, index, array) {
    return acc + cur;
},);
console.log(result)  //20

var number = [2, 4, 6, 8];
var result = number.reduce(function (acc, cur, index, array) {
    return acc + cur;
}, acc = 1);
console.log(result)  //21
reduce

Function类型

函数都是Function 类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。

函数声明会率先被解析器读取,加载至内存;可以定义函数钱调用;

函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

//函数声明方式
function  adder(a, b) {
    return a + b;
}

//函数表达式,匿名函数
var adder = function (a, b) {
    return a + b;
}
函数创建方式

RegExp类型

ECMAScript 通过RegExp 类型来支持正则表达式。

正则表达式的匹配模式的3 个标志:

  • g:表示全局(global)模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;
  • i:表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;
  • m:表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

创建正则表达式有两种方式,一是以字面量形式来定义,另一种使用RegExp构造函数。

var pattern1 = /[aA]hh/i;
var pattern2 = new RegExp("[aA]hh", "i");  //两个参数都以字符串类型传入

实例属性

RegExp的每个实例都具有下列属性,通过这些属性可以取得有关模式的各种信息。

  • global:布尔值,表示是否设置了g 标志;
  • ignoreCase:布尔值,表示是否设置了i 标志;
  • multiline:布尔值,表示是否设置了m 标志;
  • lastIndex:整数,表示开始搜索下一个匹配项的字符位置,从0 算起;
  • source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。
var pattern1 = /[aA]hh/gi;
console.log(pattern1.global);  //ture
console.log(pattern1.ignoreCase);  //ture
console.log(pattern1.multiline);  //false
console.log(pattern1.lastIndex);  //0
console.log(pattern1.source);  //[aA]hh
RE实例属性

实例方法

test(str), 用来查看正则表达式与指定的字符串是否匹配。返回true或false。

如果正则表达式设置了全局标志,test()的执行会改变正则表达式lastIndex属性,再次执行test()方法时,会从lastIndex处开始匹配字符串。

var string = "hello wolrd";

var re1 = /h.*o/;
console.log(re1.test(string));  //true
console.log(re1.lastIndex);  //0
console.log(re1.test(string));  //true

var re2 = /h.*o/g;
console.log(re2.test(string));  //true
console.log(re2.lastIndex);  //8
console.log(re2.test(string));  //false
test()方法

exec(str), 在一个指定字符串中执行一个搜索匹配。返回一个结果数组或null;返回的数组将完全匹配成功的文本作为第一项,将正则括号里匹配成功的作为数组填充到后面。

返回的数组包含两个额外的属性:index 和input;

  • index:表示匹配到的字符串在原始字符串中的索引位置;
  • input:表示原始字符串。

如果设置了全局标志(g),虽然每次也只会返回一个匹配项,但是查找将从正则表达式的lastIndex属性指定的位置开始。

//返回数组的内容和属性
var string = "it is 123, ahhh.";
var re = /is ((\d{3}).*(ah*)\.)/;
var result = re.exec(string);
console.log(result.index);  //3
console.log(result.input);  //it is 123, ahhh.
console.log(result[0]);  //is 123, ahhh.
console.log(result[1]);  //123, ahhh.
console.log(result[2]);  //123
console.log(result[3]);  //ahhh


//全局匹配
var string = "cat, bat, sat, fat";
var re1 = /.at/;
var result1 = re1.exec(string);
console.log(result1.index);  //0
console.log(result1[0]);  //cat
console.log(re1.lastIndex);  //0
var result1 = re1.exec(string);
console.log(result1.index);  //0
console.log(result1[0]);  //cat
console.log(re1.lastIndex);  //0

var re2 = /.at/g;
var result2 = re2.exec(string);
console.log(result2.index);  //cat
console.log(result2[0]);  //0
console.log(re2.lastIndex);  //3
var result2 = re2.exec(string);
console.log(result2.index);  //5
console.log(result2[0]);  //bat
console.log(re2.lastIndex);  //8
exec()方法

Date类型

只能将 Date 作为构造函数调用,才能实例化(instantiate) Date 对象:若将它作为常规函数调用(即不加new操作符),则将会返回一个字符串,而非 Date 对象。

new Date(); 当前时间;

new Date(value); value一个 Unix 时间戳,表示自1970年1月1日00:00:00 UTC以来的毫秒数;

new Date(dateString); dateString表示日期的字符串值;

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]); 月份的整数值,从 0(1月)到 11(12月);

date1 = new Date();
console.log(date1);  //Sat Jun 15 2019 19:04:24 GMT+0800 (中国标准时间)
date2 = new Date(3600000);
console.log(date2);  //Thu Jan 01 1970 09:00:00 GMT+0800 (中国标准时间)
date3 = new Date("June/15/2019 19:10:00");
console.log(date3);  //Sat Jun 15 2019 00:00:00 GMT+0800 (中国标准时间)
date4 = new Date(2019, 5, 15, 17, 10, 0);
console.log(date4);  //Sat Jun 15 2019 17:10:00 GMT+0800 (中国标准时间)
Date类型创建方式

对象方法

Date.now(),  返回自 1970-1-1 00:00:00  UTC(世界标准时间)至今所经过的毫秒数;

Date.UTC(), 接受的参数同日期构造函数接受最多参数时一样,返回从1970-1-1 00:00:00 UTC到指定日期的的毫秒数;

console.log(Date.now());  //1560602400768
date1 = Date.UTC(20119, 5, 15, 20, 40);
date2 = new Date(Date.UTC(20119, 5, 15, 20, 40));  //Fri Jun 16 20119 04:40:00 GMT+0800 (中国标准时间)
console.log(date1);  //572741440800000
console.log(date2);  //Fri Jun 16 20119 04:40:00 GMT+0800 (中国标准时间)
Date对象方法

格式化方法

toDateString(), 易读的形式返回一个日期对象日期部分的字符串;
toLocaleDateString(), 返回该日期对象日期部分的字符串,该字符串格式因不同语言而不同;
toTimeString(), 以人类易读形式返回一个日期对象时间部分的字符串,该字符串以美式英语格式化;
toLocaleTimeString(), 返回该日期对象时间部分的字符串,该字符串格式因不同语言而不同;
toString(), 以人类易读形式返回一个日期对象的字符串;
toLocaleString(), 方法返回该日期对象的字符串,该字符串格式因不同语言而不同;
toUTCString(), 把一个日期转换为一个字符串,使用UTC时区。
var date = new Date(2019, 5, 15, 20, 40, 0);
var dateOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toDateString());  //Sat Jun 15 2019
console.log(date.toLocaleDateString());  //2019/6/15
console.log(date.toLocaleDateString("chiese", dateOptions));  //2019年6月15日星期六
console.log(date.toTimeString());  //20:40:00 GMT+0800 (中国标准时间)
console.log(date.toLocaleTimeString());  //下午8:40:00
console.log(date.toLocaleTimeString("en-US", {hour12: false}));  //20:40:00
console.log(date.toString());  //Sat Jun 15 2019 20:40:00 GMT+0800 (中国标准时间)
console.log(date.toLocaleString());  //2019/6/15 下午8:40:00
console.log(date.toLocaleString("en-US", {timeZone: "UTC"}));  //6/15/2019, 12:40:00 PM
console.log(date.toUTCString());  //Sat, 15 Jun 2019 12:40:00 GMT
格式化方法

实例方法

getTime(), 返回表示日期的毫秒数;与valueOf()方法返回的值相同;
getTimezoneOffset(), 返回UTC时间相对于当前时区的时间差值,单位为分钟;
getFullYear(), 返回指定日期的4位数年份;
getMonth(), 返回一个指定的日期对象的月份,为基于0的值(0表示一年中的第一月);
getDate(), 返回一个指定的日期对象为一个月中的哪一日(从1--31);
getDay(), 返回一个具体日期中一周的第几天,0 表示星期天;
getHours(), 返回一个指定的日期对象的小时。
getMinutes(), 返回一个指定的日期对象的分钟数;
getSeconds(), 返回一个指定的日期对象的秒数;
getMilliseconds(), 返回一个指定的日期对象的毫秒数。
var date = new  Date(2019, 5, 15, 21, 30, 45, 300);

//本地时间
console.log(date.getTime());  //1560605400000
console.log(date.getTimezoneOffset());  //-480
console.log(date.getFullYear());  //2019
console.log(date.getMonth());  //5
console.log(date.getDate());  //15
console.log(date.getDay());  //6
console.log(date.getHours());  //21
console.log(date.getMinutes());  //30
console.log(date.getSeconds());  //45
console.log(date.getMilliseconds());  //300

//UTC时间
console.log(date.getUTCFullYear());  //2019
console.log(date.getUTCMonth());  //5
console.log(date.getUTCDate());  //15
console.log(date.getUTCDay());  //6
console.log(date.getUTCHours());  //12
console.log(date.getUTCMinutes());  //30
console.log(date.getUTCSeconds());  //45
console.log(date.getUTCMilliseconds());  //300

//设置时间
date.setTime(3600000);
console.log(date.toUTCString());  //Thu, 01 Jan 1970 01:00:00 GMT
date.setFullYear(2018);
date.setMonth(0);
date.setDate(18);
date.setHours(12);
date.setMinutes(38);
date.setSeconds(27);
date.setMilliseconds(888);
console.log(date);  //Thu Jan 18 2018 12:38:27 GMT+0800 (中国标准时间)
Date实例方法

Math对象

Math对象提供了一些数学方面的属性和方法,与在JavaScript直接编写的计算功能相比,Math对象提供的计算功能执行起来要快得多。

Math.PI, π的值;

max(), 最大值;

min(), 最小值;

ceil(), 向上舍入;

floor(), 向下舍入;

round(), 四舍五入;

random(), 大于等于0 小于1 的一个随机数;

console.log(Math.PI);  //3.141592653589793
console.log(Math.max(11,22,33));  //33
console.log(Math.min(11,22,33));  //11
console.log(Math.ceil(23.33));  //24
console.log(Math.floor(27.77));  //27
console.log(Math.round(23.33));  //23
console.log(Math.round(27.77));  //28
console.log(Math.random());  //0.1292293761974017
Math对象属性和方法

 

posted @ 2019-09-12 09:03  houyongchong  阅读(1519)  评论(0编辑  收藏  举报