js基础及进阶

石器时代 – js基础

操作样式

操作元素.style.元素属性 = '属性值';	

//添加样式或修改样式属性
操作元素.setAttribute('style','color: #fff; font-size:24px;')
操作元素.getAttribute("样式名")

• 操作样式名

操作元素.className = '样式类名'		       className或覆盖之前的样式名
操作元素.classList.add("样式类名")		        添加样式，不会覆盖之前样式
操作元素.classList.remove("样式类名")		移出样式类名
操作元素.classList.toggle('样式名');		样式名切换

• 节点

父级元素.removeChild(父级元素.children[i]); 	删除父级元素中的子元素节点
操作元素.remove();			                原元素移除后，新添加元素使用原元素事件不起作用

// 克隆
操作元素.cloneNode();
 - 克隆节点(克隆后需要将克隆出来的元素进行添加节点操作)
 - 括号参数为空或false，则只克隆复制节点本身，不克隆里面的子节点（浅拷贝）
 - 括号参数为true，则克隆复制节点本身和里面的内容（深拷贝）
 
// 操作节点
父级元素.insertBefore('子级元素'，指定元素)			添加节点(添加到指定元素前面)
父级元素.appendChild('子级元素')			添加节点(添加到后面)
document.createElement('元素')			创建元素节点
操作元素.children()			得到该节点里的所有子元素节点
操作元素.parentNode()			得到的是离该节点最近的父级元素节点
操作元素.previousSibling()		获取已知节点的前一个节点
操作元素.nextSibling()			操作元素.nextSibling

• 事件

// 添加事件
操作元素.onclick = function(){}			
操作元素.addEventListener("click", function(){});
// 作元素.addEventListener("click", function(){}，true);         捕获阶段，与冒泡相反（从外向内触发事件）
// 操作元素.addEventListener("click", function(){}，false/不加);         冒泡阶段（从内向外触发事件）
操作元素.addEventListener('click', fn);          function fn(){}

// 删除事件
操作元素.onclick = null;	
操作元素.removeEventListener('click', fn);         function fn(){}

// 事件类型
> onfocus-----------------//获取焦点
> onblur------------------//失去焦点
> onmouseenter------------//鼠标移入触发
> mouseover---------------//鼠标移入触发
// mouseover鼠标经过冒泡 	mouseenter,鼠标经过不冒泡
> onmouseleave	--------//鼠标移出触发
> mouseout----------------//鼠标移出触发
//mouseout 鼠标离开 冒泡	mouseleave 鼠标离开不会冒泡
> onmousemove-------------//鼠标移动触发
> onmouseup---------------//鼠标弹起触发
> onmousedown-------------//鼠标按下触发
> transitionend-----------//监听过渡完成事件
> onscroll----------------//滚动事件，滚动条发生变化触发

// 止事件冒泡
e.stopPropagation();
// 阻止默认行为
e.preventDefault()

// 鼠标事件
// 跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
> e.clientX
> e.clientY
// 参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
> e.pageX-------------//返回鼠标相对于文档页面的 X 坐标 IE9+ 支持
> e.pageY-------------//返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持
//鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
> e.screenX
> e.screenY

// 键盘事件
> onkeyup------------------// 键盘按键被松开时触发
> onkeydown----------------// 键盘按键被按下时触发
> onkeypress---------------// 键盘按键被按下时触发(不是被功能键 比如ctrl shift 箭头等)
 - 执行顺序-->keydown->keypress->keyup
 - keyup、keydown不区分大小写/keypress区分大小写
 - keydown和keypress--->先触发事件，触发事件的时候，文字还没落入到盒子里

• DOM

// 窗口加载
//DOM中的内容全部加载完毕（包括图片标签）
window.onload=function(){}    写多个，后面覆盖前面
window.addEventListener('load',function(){});    后面不会覆盖前面
document.addEventListener('DOMContentLoaded',function(){})

//DOM中的标签全部加载完毕
document.addEventListener('DOMContentLoaded',function(){})

//窗口大小变化时触发
window.onresize=function(){}
window.addEventListener('resize',function(){})

• BOM

// location
- 属性
> location.href------------// 获取或者设置URL
> location.host------------// 返回域名 www.baidu.com
> location.port------------// 返回端口号 如果未写 返回空字符串
> location.search----------// 返回参数
> location.hash------------// 返回片段 #后面内容 常见与链接 锚点
- 方法
> location.assign()--------// 跟 href 一样，可以跳转页面（可以记录浏览历史，自带后退功能）
> location.replace()-------// 替换当前页面，因为不记录历史，所有不能后退页面
> location.reload()--------// 重新夹杂以页面，相当于刷新

// history
> history.back()-----------// 后退功能
> history.forward()--------// 前进功能
> history.go()-------------// 前进后退功能（参数 1 则前进1个页面，-1 则后退一个页面） 

// offset
> element.offsetParent-----// 返回作为该元素带有定位的父级元素 如果父级都没有定位 则返回body
> element.offsetTop--------// 返回元素相对带有定位父元素上方的偏移
> element.offsetLeft-------// 返回元素相对带有定位父元素左边框的偏移
> element.offsetWidth----- // 返回自身包括padding、边框、内容区域的宽度，返回数值不带单位
> element.offsetHeight---- // 返回自身包括padding、边框、内容区域的高度，返回数值不带单位

// client
> element.clientTop--------// 返回元素上边框的大小
> element.clientLeft-------// 返回元素左边框的大小
> element.clientWidth------// 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
> element.clientHeight-----// 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

// scroll
// 元素被卷曲的头部是element.scrollTop	页面被卷曲的头部是window.pageYOffset
> window.scroll(x,y);------// 里面的x，y后面不接px，窗口滚动用window (例如：window.scroll(0,100);)

// offset/client/scroll区别
- element.offsetWidth------// 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
- element.clientWidth------// 返回自身包括padding、内容区的宽度，不含边框边框，返回数值不带单位
- element.scrollWidth------// 返回自身实际的宽度，不含边框，返回数值不带单位

铁器时代 – js进阶

• span标签模仿input可编辑效果

//contenteditable属性： true可编辑、false不可编辑
<span class="name" contenteditable='true'>张怡宁</span>

• call、apply、bind

// call()
- 第一个参数：this指向 如果要传参，后面依次是参数
function fn(x, y) {
	console.log(this);
}
var obj = {
	name: "zs"
}
fn(1, 2); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
fn.call(obj, 1, 2); //{name: "zs"}

// apply()
- 与第一种方法不同的是，用数组的形式表示参数
function fn(x, y) {
  console.log(this);
}
var obj = {
  name: "zs"
}
fn(1, 2); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
fn.apply(obj, [1, 2]);  //{name: "zs"}

// bind()
- bind 只改变this指向，不会调用函数
function fn(x, y) {
  console.log(this);
}
var obj = {
  name: "zs"
}
fn(1, 2); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
fn.bind(obj, 1, 2)(); //{name: "zs"}

• 遍历数组与对象

// forEach
- foEach(function(value,index,array){})  
- 不需要return  
- map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
var arr = [1,2,3];
var sum = 0;
arr.forEach(function(value,index,array){
    sum += value;    
})
console.log(sum)  //6

// map
- map()会分配内存空间存储新数组并返回，forEach 不会返回数据。  
- 引用类型数组会改变原数组  
- 基础类型数组不会改变原数组
var arr = [1000, 2000, 100, 200];
var newsdata = arr.map(function (item, index, key) {
    if (item >= 1000) {
        item = item / 1000 + "+";
        console.log(item)  //1+ 2+
    }
    return item;
})

console.log(newsdata)  //["1+", "2+", 100, 200]
console.log(arr)	//[1000, 2000, 100, 200]

// some (一真即真)
- 查找数组数组中满足条件的元素，找到返回true，找不到返回false
- array.some(function(currenValue, index, arr){})
- currentValue:value值
- index：数组下标
- arr：数组本身
var arr = [10, 20, 30];
var flag = arr.some(function(value){
    return value > 20;
})
console.log(flag);	//true

// every (一假即假)
var arr = [1,2,3];
var flag = arr.every(function(value,index,arr){
    return value > 2;
})
console.log(flag);	//false

// filter
- array.filter(function(currentValue,index,arr){})
- currentValue:value值
- index：数组下标
- arr：数组本身
var arr = [12,24,36,48];
var newArr = arr.filter(function(value,index){
    return value >= 36;
})
console.log(newArr);	//[36, 48]

// reduce
- arr.reduce(function(prev,cur,index,arr){},init);
- prev：return返回的值
- cur：数组中的值
- index：下标
- arr：原素组
- init：prev初始值
var arr = [1,2,3,4,5];
var arr1 = arr.reduce(function(prev,n){
    return prev + n;
},0)
console.log(arr1);	//15

// find
- 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);		//12

// findIndex
- 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));		//3

// for in 
- 遍历对象，不推荐遍历数组
var obj = {
    id : 1,
    name : 'andy',
    msg : {
        age: 18
    }
};
var o = {};
for(var k in obj){
// k 是属性名  obj[k] 属性值  拷贝的msg是拷贝的地址值，改变数据原数据也会改变
o[k] = obj[k];
}
console.log(o)	//{id: 1, name: "andy", msg: {…}}

// for of
- 无法循环遍历对象
- 可遍历map，object,array,set string等
- item—>数组中每一项
var arr = ['nick', 'freddy', 'mike', 'james'];
for (var item of arr) {
    console.log(item);	//nick freddy mike james
}
console.log("-------------------------------");
var arr = [
    { name: 'nick', age: 18 },
    { name: 'freddy', age: 24 },
    { name: 'mike', age: 26 },
    { name: 'james', age: 34 }
];
for (var item of arr) {
    console.log("---- item ----");
    console.log(item);
    console.log("---- item.name , item.age ----");
    console.log(item.name, item.age);
}

• 获取iframe中元素的内容

$('#iframe的id').contents().find('要获取的元素').html()

API

String

// charAt()----------------返回指定位置的字符
"qwerty".charAt(2)	//"e"

// substr()----------------截取字符串，以指定下标开始，截取n个字符，包含指定位置下标的字符
var str = 'hello';
str.substr(1,3)		//"ell"
str.substr(-2)		//"lo"
str.substr(-4,1)		//"e"

// indexOf()----------------查询指定字符的位置,返回查找到的第一个字符的下标位置,查不到返回-1
// lastIndexOf()（反之）
var str = 'hello';
a.indexOf('l')		//2
a.indexOf('a')		//-1

// trim()-------------------去掉字符串两边的空格
var str = ' aaa '
console.log(str.trim()) // aaa

// toLowerCase()------------转小写
// toUpperCase()------------转大写
var str = 'Hello World!'
console.log(str.toLocaleLowerCase()) //hello world!

// replace()----------------替换
- replace(字符串,字符串) //只匹配字符串中第一次遇到的元素，其他的不匹配
var str = '我爱背景天安门 背景背景';
console.log(str.replace('背景','北京')) // 我爱北京天安门 背景背景
- replace(正则表达式,字符串)
var str = '我爱背景天安门 背景背景';
console.log(str.replace(/背景/g,'北京')) //我爱北京天安门 北京北京

// padStart() / padEnd()----ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

- 注意：1、如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

- 注意2、如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789')
// '0123456abc'

- 注意3、如果省略第二个参数，默认使用空格补全长度。
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

Number

// isFinite()-----------------判断是否为数字
Number.isFinite(val)
console.log(Number.isFinite('a')) // false
console.log(Number.isFinite('')) // false
console.log(Number.isFinite(null)) // false
console.log(Number.isFinite(undefined)) // false
console.log(Number.isFinite(NaN)) // false

// Number.isInteger()---------是否为整数
console.log(Number.isInteger(1.1)) // false
console.log(Number.isInteger(1)) // true
console.log(Number.isInteger(NaN)) // false
console.log(Number.isInteger(undefined)) // false
console.log(Number.isInteger('1')) // false
- 注意：
console.log(Number.isInteger(1.0)) // true

// isNaN()--------------------是否为NaN
console.log(isNaN(1)) // false
console.log(isNaN(NaN)) //true

// toExponential()------------以指数表示法返回该数值字符串表示形式
console.log(11.123456.toExponential()) // '1.1123456e+1'
console.log(NaN.toExponential()) // 'NaN'
console.log('11.123456'.toExponential()) // 报错

// toFixed()------------------保留几位小数，并四舍五入(转换结果为字符串)
console.log(12345.6789.toFixed(1)) // '12345.7'
console.log(NaN.toFixed(1)) // 'NaN'
console.log(''.toFixed(1)) // 报错
console.log(undefined.toFixed(1)) // 报错
- 注意：
12345.6789.toFixed(6); 	//"12345.678900"(用0填充)

// toLocaleString()-------------千分符
var  num = 123456789；
num.toLocaleString()	//"123,456,789"
console.log((NaN).toLocaleString()) // 'NaN'
console.log((undefined).toLocaleString()) // 报错
console.log(('').toLocaleString()) // ''
console.log(('123456789').toLocaleString()) // '123456789'
-注意：
console.log(123456789.toLocaleString()) // 报错Uncaught SyntaxError: Invalid or unexpected token
console.log((123456789).toLocaleString()) // "123,456,789"

// toString()---------------------返回指定 Number 对象的字符串表示形式
console.log((17).toString()) // '17'

Math

// Math.min()-----------------------一组数值中的最小值
console.log(Math.min(1,2,3,4,3,2,1)) // 1

// Math.max()-----------------------一组数值中的最大值
console.log(Math.max(1,2,3,4,3,2,1)) // 4

// Math.ceil()-----------------------向上取整
console.log(Math.ceil(25.4)) // 26 (只要有小数就向上进一)

// Math.floor()----------------------向下取整
console.log(Math.floor(25.9)) // 25(舍弃小数)

// Math.round()----------------------随机数
//得到两个数之间的随机数
Math.random() * (max - min) + min; 
//得到一个两个数之间的随机整数
Math.floor(Math.random() * (max - min)) + min;	//不含最大值，含最小值
//得到一个两数之间的随机整数，包括两个数在内
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
//随机排序
var arr2=[1,2,3,4,5,6,7,8,9];
arr2.sort(function(a,b){return Math.random()-0.5;});

Math.abs(num)-------------------------返回 num 的绝对值
Math.exp(num)-------------------------返回 Math.E 的 num 次幂
Math.log(num)-------------------------返回 num 的自然对数
Math.pow(num,power--------------------返回 num 的 power 次幂
Math.sqrt(num)------------------------返回 num 的平方根
Math.acos(x)--------------------------返回 x 的反余弦值
Math.asin(x)--------------------------返回 x 的反正弦值
Math.atan(x)--------------------------返回 x 的反正切值
Math.atan2(y,x)-----------------------返回 y/x 的反正切值
Math.cos(x----------------------------返回 x 的余弦值
Math.sin(x)---------------------------返回 x 的正弦值
Math.tan(x)---------------------------返回 x 的正切值

Object

// Object.assign() -------------------合并对象，浅拷贝,改变第一个参数的对象
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(returnedTarget)	//{a: 1, b: 4, c: 5}
console.log(target)	//{a: 1, b: 4, c: 5}
console.log(source)		// { b: 4, c: 5 };
- 建议：
const returnedTarget = Object.assign({},target, source);	//不会改变原有对象

// Object.defineProperty()-------------监听数据变化，vue2.0双向绑定原理
var o = {};
var s = "";
Object.defineProperty(o, 'a', {
    get() {
        return s;
    },
    set(newVal) {
        s = newVal
    },
})
o.a = 3;
console.log(s)	//3

// Object.entries()----------------------返回一个二维数组
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// Object.fromEntries()------------------将二维数组转换为对象
var obj = bject.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
closole.log(obj)	//{foo: "bar", baz: 42}

// Object.hasOwnProperty()---------------判断指定对象上面是否有指定的属性
var o = {a:1};
o.hasOwnProperty('a')	//true
o.hasOwnProperty('b')	//false

// Object.keys()-------------------------以数组的形式返回对象中的所有value
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// Object.values()-----------------------以数组的形式返回对象中的所有value
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

Array

// concat()-------------------------------合并数组，不改变原数组
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3) // ["a", "b", "c", "d", "e", "f"]
console.log(array1) // ["a", "b", "c"]

// flat()----------------------------------按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
var arr = [0,1,[2,3,[4,5,[6,7]]]]
console.log(arr.flat(Infinity)); // [0, 1, 2, 3, 4, 5, 6, 7]（Infinity会展开任意深度的数组）
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]
- 注意：
flat() 方法会移除数组中的空项:
var arr4 = [1, 2, , 4, 5];
console.log(arr4.flat()); // [1, 2, 4, 5]

// Array.from()----------------------------从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
console.log(Array.from('foo'));	// ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));	// [2, 4, 6]

// slice()---------------------------------返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（前包后不包）。原始数组不会被改变
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));		//["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));		//["camel", "duck"]
console.log(animals.slice(1, 5));		//"bison", "camel", "duck", "elephant"]

// sort()----------------------------------排序
var arr3 = [30,10,111,35,1899,50,45];
arr3.sort((a, b) => a - b)
console.log(arr3);//输出  [10, 30, 35, 45, 50, 111, 1899]
var arr4 = [30,10,111,35,1899,50,45];
arr4.sort((a, b) => b - a)
console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]

// splice()--------------------------------通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
- 从第 2 位开始删除 0 个元素，插入“drum”*
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");	
// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

- 从第 2 位开始删除 0 个元素，插入“drum” 和 "guitar*
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');		
// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

- 从第 3 位开始删除 1 个元素*
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);		
// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素: ["mandarin"]

- 从第 2 位开始删除 1 个元素，插入“trumpet”*
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");	
// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

- 从第 0 位开始删除 2 个元素，插入"parrot"、"anemone"和"blue"*
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');	
// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// 被删除的元素: ["angel", "clown"]

- 从第 2 位开始删除 2 个元素*
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);
// 运算后的 myFish: ["parrot", "anemone", "sturgeon"]
// 被删除的元素: ["blue", "trumpet"]

- 从倒数第 2 位开始删除 1 个元素*
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);
// 运算后的 myFish: ["angel", "clown", "sturgeon"]
// 被删除的元素: ["mandarin"]

- 从第 2 位开始删除所有元素*
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]

// includes()------------------------------是否包含指定元素
// indexOf()-------------------------------返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
// join()----------------------------------将数组以指定分隔符分隔合并为字符串
// pop()-----------------------------------方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度
// shift()---------------------------------从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
// push()----------------------------------将一个或多个元素添加到数组的末尾，并返回该数组的新长度
// unshift()-------------------------------将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)

Date

var date = new Date();
console.log(date); // Tue Jun 16 2020 14:01:22 GMT+0800 (中国标准时间)

var date = +new Date();
console.log(date); // 1592287386929(毫秒数)

// getTime()---------------------------返回 1970 年 1 月 1 日至今的毫秒数。
var date = new Date();
console.log(date.getTime()); // 1592287386929(毫秒数)

// getFullYear()-----------------------从 Date 对象以四位数字返回年份。
var date = new Date();
console.log(date.getFullYear()); // 结果：2020

// getMonth()--------------------------从 Date 对象返回月份 (0 ~ 11)。
var date = new Date();
console.log(date.getMonth() + 1); // 6

// getDate()---------------------------从 Date 对象返回一个月中的某一天 (1 ~ 31)。
var date = new Date();
console.log(date.getDate()); // 16

// getDay()----------------------------从 Date 对象返回一周中的某一天 (0 ~ 6)。
var date = new Date();
console.log(date.getDay()); // 2

// getHours()--------------------------返回 Date 对象的小时 (0 ~ 23)。
var date = new Date();
console.log(date.getHours());	//14

// getMinutes()------------------------返回 Date 对象的分钟 (0 ~ 59)
var date = new Date();
console.log(date.getMinutes());	/10

// getSeconds()------------------------返回 Date 对象的秒数 (0 ~ 59)。
var date = new Date();
console.log(date.getSeconds());	//10

// toJSON()-----------------------------以 JSON 数据格式返回日期字符串
var date = new Date();
console.log(date.toJSON()); // 2020-06-16T06:11:18.937Z

// toString()---------------------------把 Date 对象转换为字符串
var date = new Date();
console.log(date.toString());	//Tue Jun 16 2020 14:11:46 GMT+0800 (中国标准时间)

// toLocaleTimeString()-----------------显示格式根据本地电脑，格式化显示
let a = new Date()
console.log(a.toLocaleTimeString())	//"下午3:22:54"