前端之JavaScript

一、JavaScript的简介

1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中)，后将其改名ScriptEase(客户端执行的语言)。
Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言。Sun和Netscape共同完成，后改名叫JavaScript。
微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript。
为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。
ECMA-262 是 JavaScript 标准的官方名称。

ECMAScript

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"strict mode"严格模式添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**）增加Array.prototype.includes

备注：ES6就是指ECMAScript6。

　　尽管ECMAScript是一个重要的标准，但它并不是JavaScript唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的JavaScript实现是由以下3个不同部分组成的：

　　1.核心（ECMAScript）　　

　　2.文档对象模型（DOM） Document object model (整合js，css，html)

　　3.浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript引入方式

　　1.直接在Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

　　2.引入JS文件

<script src="myscript.js"></script>

三、JavaScript语言规范

1.注释

// 这是单行注释

/*
这是
多行注释
*/

2.结束符

JavaScript中的语句要以分号（；）为结束符。

四、JavaScript的语言基础

1.声明变量

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var +变量名；的格式来进行声明

var name = "Alex";    #声明name为变量名
var age = 18;

注意：

　　1.变量名是区分大小写的。

　　2.推荐使用驼峰式命名规则。

　　3.保留字不能用做变量名。

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

JavaScript中的保留字

2.avaScript数据类型

2.1 JavaScript拥有动态类型

JS是动态类型，同一个变量可以保存不同类型的值。

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

2.2 数字类型

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN，表示不是一个数字（Not a Number）。

常用方法：

#parseInt  将字符串转化为数字     parse（英文意为：从语法上描述或分析）
#parseFloat    将字符串转化为小数    
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

2.3 字符串

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法	说明
.length	返回长度
.trim()	移除两端的空格
.trimLeft()	移除左端的空白
.trimRight()	移除右端的空白
.charAt(n)	返回第n个字符（n从0开始）通过索引找字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置通过字符找索引
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割(delimiter:分隔符，limit：分割限制)

　　在JS中拼接字符串一般使用“+”

#声明一个变量
var s = 'we are family';
undefined
s.split(' ',1);   #limit=1时 结果显示按分隔符delimiter分割结果的第一个值
["we"]
s.split(' ',2);
(2) ["we", "are"]
s.split(' ',3);
(3) ["we", "are", "family"]
s.split(' ',4);    #按‘ ’分割，最多只能得到三个元素，所以limit=4时结果还是三个的结果
(3) ["we", "are", "family"]

split的使用

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

#代码实例
var s = 'we are family';
undefined

s.slice(1,8);
"e are f"
s.substring(1,8);
"e are f"
#区别
s.slice(2,-2);    #stop为负数时  表示从2到倒数第二个之间
" are fami"
s.substring(2,-2);     #stop为负数时，表示从2到0之间
"we"

slice和substring的区别

2.4 布尔类型

区别于Python，true和false都是小写。

var a = true;
var b = false;

　　备注：在JS中""(空字符串)、0、null、undefined、NaN都是false。

对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

示例：

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

关于遍历数组中的元素，可以使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

将数组转换成字符串 toString()

var score = [98,78,76,100,0];
//toString() 直接转换为字符串  每个元素之间使用逗号隔开
           
var str = score.toString();
console.log(str);//98,78,76,100,0

判断是否为数组：isArray()

 布尔类型值 = Array.isArray(被检测的值) ;

forEach()

语法：

forEach(function(currentValue, index, arr), thisValue)

参数：

参数

描述

function(currentValue, index, arr)

必需。数组中每个元素需要调用的函数。
函数参数:

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

thisValue

可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

splice()

语法：

splice(index,howmany,item1,.....,itemX)

参数：

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

var arr=['a','b','c'];

　　若要删除其中的'b',有两种方法：

　　1.delete方法:delete arr[1]

　　这种方式数组长度不变,此时arr[1]变为undefined了,但是也有好处原来数组的索引也保持不变,此时要遍历数组元素可以才用

for(index in arr)
{
　　 document.write('arr['+index+']='+arr[index]);
}

这种遍历方式跳过其中undefined的元素

　　* 该方式IE4.o以后都支持了

　　2.数组对象splice方法:arr.splice(1,1);

　　这种方式数组长度相应改变,但是原来的数组索引也相应改变

　　splice参数中第一个1,是删除的起始索引(从0算起),在此是数组第二个元素

　　第二个1,是删除元素的个数,在此只删除一个元素,即'b';

　　此时遍历数组元素可以用普通遍历数组的方式,比如for,因为删除的元素在

　　数组中并不保留

　　* 该方法IE5.5以后才支持

　　值得一提的是splice方法在删除数组元素的同时,还可以新增入数组元素

　　比如arr.splice(1,1,'d','e'),d,e两个元素就被加入数组arr了

　　结果数组变成arr:'a','d','e','c'　

map()

语法：

map(function(currentValue,index,arr), thisValue)

参数：

参数

描述

function(currentValue, index,arr)

必须。函数，数组中的每个元素都会执行这个函数
函数参数:

参数	描述
currentValue	必须。当前元素的值
index	可选。当期元素的索引值
arr	可选。当期元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

补充：

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

2.5数组

类似于Python中的列表。

var a = [123, "ABC"];   #数组（英文名：array）默认变量名为a
console.log(a[1]);  // 输出"ABC"     #console.log() 打印输出

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序

注意：

1 .join()的使用不同于python JS 中字符串的连接的用法是：变量.join("连接符")

2.concat(val,...)的使用，不管拼接的类型是数字，字符串，还是数组，都是直接添加到数组的最后，值得注意的是：拼接数组时，是将拼接数组中的每个元素添加到数组中，而不是整体添加。

3. sort的用法

/*如果调用sort方法时没有传入参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

// 代码实现

var a = [11,22,122,234,34,19];
undefined
a.sort();         #排序结果是按照位来比较的
(6) [11, 122, 19, 22, 234, 34]



如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
*/

// 根据上面的规则自行实现一个排序函数：


function sortNumber(a,b) {
  return a - b
}

// 调用sort方法时将定义好的排序函数传入即可。
stringObj.sort(sortNumber)

// 代码示例
function sortNumber(a,b) {
    return a-b
};
undefined
a.sort(sortNumber);
(6) [11, 19, 22, 34, 122, 234]

sort的用法

可以使用以下方式遍历数组中的元素：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

备注:js中array类型是没有remove('元素')，这个方法的，我们可以通过两种方法实现remove的效果，一种是借助array中的splice效果,直接array.splice(index,1) 。根据索引直接将该数据删除。另外一个方法是自定义一个remove方法：如下：

Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};

2.6 null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

备注：null 需要指定或者手动的添加一个值比如：变量=null

2.7类型查询

typeof "abc"  // "string"     #typeof的使用语法：typeof 数据类型  （不加括号）
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"
typeof NaN  // "number"

值得注意的是：typeof 是一个一元运算符（就像++，--，！，-等一元运算符），它不是一个函数，也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的引用类型是指（数组和对象）

3.运算符

3.1算数运算符

+ - * / % ++ --

3.2比较运算符

> >= < <= != == === !==

注意：

1 == “1”  // true     #在JS中==表示弱等于   它只判断两边的值是否相等
1 === "1"  // false    #在JS中===表示强等于    它不仅判断值是否相等  也判断数据类型是否相等

3.3逻辑运算符

&& || !    #&&等同于python中的and    ||等同于python中的or    ！等同于python中的not

3.4赋值运算符

= += -= *= /=

4.流程控制

4.1 if-else语法的使用

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

4.2 if-- else if -- else 的语法使用

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

4.3 switch语法的使用

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
　default:     #默认 上述所有条件都不满足时，默认执行此处
  console.log("...")
}

备注：switch中的case子句通常都会在后面加break语句，否则程序会继续执行后续case中的语句。

4.4 for 循环语法的使用

var a = [11,2,33,4,55]
for (var i=0;i<a.length;i++){
        console.log(i,a[i]);
}

4.5 while语法的使用

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

4.6 三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b    # var 变量 = 条件 ？条件为true的结果 ：条件为false的结果

5.函数

5.1 函数定义

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

// 普通函数定义
function f1() {
  console.log("Hello world!");
}
// 调用函数    f1();

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数    //立即执行函数的格式 ： (函数)(参数);
(function(a, b){
  return a + b;
})(1, 2);

备注：JS中函数不严谨，因为在给函数传参时不传参，或者少传参、多传参都会执行，且不报错。

5.2 arguments

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)

输出：

3
2

arguments是一个对象，它包含了所有调用函数时传递的参数

function f1(x,y) {
     console.log(arguments);     
}
f1(11,22); 
// 结果输出为一个数组： [11, 22, callee: ƒ, Symbol(Symbol.iterator): ƒ]  
// 前面为传的参数   后面为对象自带的方法

// 我们可以for循环这个数组
function f2(x,y) {
    for (var i=0;i<arguments.length;i++){
        console.log(i,arguments[i]);
};
}      

//输出结果为：0 11        1 22     可以将所有的传入的参数都拿到

5.3 函数的全局变量和局部变量

5.31 局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

5.32 全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

5.33 变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

5.4 作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

6. 词法分析

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

　　JS中函数的调用跟python中的函数相似，但是在JS中函数在调用时比python中多一个过程，那就是词法分析，JS中的函数在调用时会先进行词法分析，在真正执行函数。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

　　词法分析过程中特别重要的是：函数内部无论是使用参数还是使用局部变量都到AO上找。

看两个例子：

例一：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 问：执行foo()之后的结果是？

// 例一的执行结果为：第一个age的结果为：undefined     第二个age结果为22

// 理解:函数在真正执行之前会先进行词法分析，词法分析的过程为：先形成一个激活对象：Avtive Object（AO） 再判断有没有传参，如果有传参，则将此参数传参给AO 且此时的值为AO.参数 = undefined ，如果没有，则不做任何操作。接着判断有没有局部变量（不论局部变量在函数的最开始还是中间，或者在函数的最后），如果有局部变量，这是若AO的赋值有同名的，即传参和局部变量名一样时，就不做任何操作，即此时AO.参数名（或者局部变量名）值任然为undefined。若AO的赋值上没有跟局部变量同名的，则将局部变量赋值给AO，此时的AO变为AO.局部变量名=undefined 。这是有局部变量的情况，如果没有，则不做任何操作。接着在判断函数中是否有声明的函数，也就是有没有内层函数，如果有，则同样的，看AO上的赋值是否有与声明函数的函数名同名的，如有，则将AO 的值覆盖  此时 AO.声明函数名=声明函数体，如果没有，则不做任何操作。如果没有声明函数，则也不做任何操作。

例一执行结果及理解

例二：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 执行后的结果是？

// 第一个age值为：
    ƒ age(){
    console.log("呵呵");
  }
    
// 第二个和第三个age值为： 22

//  备注：同样的函数在python中会报错。

例二的执行结果

7. 内置对象和方法

　　JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

以下表格中是JS 中的基本的内置对象：

　　备注：var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1的结果为string 而typeof s2 的结果为object。

　　在JS中创建一个对象使用new关键字

7.1 自定义对象

类似于（某方面类似）Python中的字典数据类型

var  cust = {"name":"rain","age":18};
cust.age;      // 18
cust["age"];    // 18

遍历对象中的内容：

var a = {"name": "rain", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象：

var person = new Object();    // 创建一个person对象   
person；   // {}
person.name = 'rain';      // 创建person对象中的name属性。
person;    // {'name':'rain'}
person['age'] = 18;      // a也可以通过这种方式添加person对象中的属性 age
person;    // {'name':'rain','age':18}
// 不同于python中的字典，JS中的对象功能更强，内部可以设置函数属性
person.f1 = function(a,b){return a+b};
person;    // {'name':'rain','age':18,f1:f}
// 可以给对象中的函数传参
person.f1(2,3);     //输出：5

// 父类构造函数
var Car = function (loc) {
  this.loc = loc;
};

// 父类方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子类构造函数
var Van = function (loc) {
  Car.call(this, loc);
};

// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = Van;
// 扩展方法
Van.prototype.grab = function () {
  /* ... */
};

JavaStript面向对象之继承

7.2 Date对象

7.21 创建Date对象

//方法1：不指定参数  默认生成当前的时间
var d1 = new Date();   // Tue Apr 17 2018 15:54:46 GMT+0800 (中国标准时间)    默认输出当前的时间   
console.log(d1.toLocaleString());  // "2018/4/17 下午3:54:46" 字符串类型  
console.log(d1.toLocaleDateString());  // "2018/4/17"  
console.log(d1.toLocaleTimeString());  // "下午3:54:46"

//方法2：参数为日期字符串  可以生成指定日期的时间
var d2 = new Date("2018/3/20 11:12");  // Tue Mar 20 2018 11:12:00 GMT+0800 (中国标准时间) 指定日期的信息
　　// 指定日期的格式有多种，可以是 "2018/3/20 11:12"  "2018-3-20 11:12"  "2018.3.20 11:12"  "2018 3 20 11:12"
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  // Fri Apr 03 2020 11:12:00 GMT+0800 (中国标准时间)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数   可以根据毫秒数来得出具体的时间
var d3 = new Date(5000); 
console.log(d3.toLocaleString());  // 本地时间  
console.log(d3.toUTCString());  // 世界统一时间  UTC

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

7.22 Date对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年   
// 从 ECMAScript v3 开始，JavaScript 的实现就不再使用该方法，而使用 getFullYear() 方法取而代之！
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

代码实现：

编写代码，将当前日期按“2018-12-27 11:11 星期三”格式输出。

var d  = new Date();
function f(){
    var y = d.getFullYear();     //   注意：是   .getFullYear()
    var m = d.getMonth();
    var da =d.getDate();
    var h = d.getHours();
    var mi = d.getMinutes();
    var day = d.getDay();

    var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];  //根据day的索引值取得星期几

    if(m){   m = m+1 }

    if (mi < 10){mi = '0'+ mi}; // 如果是 11:01 就会显示11:1 so需要加'0'

    console.log(y+'-'+m+'-'+da+' '+h+':'+mi+' '+week[day]);
}
f();

代码实现

7.3 JSON对象

var str1 = '{"name": "snow", "age": 20}';
var obj1 = {"name": "snow", "age": 20};
// JSON字符串转换成对象     JSON.parse(str)
var obj = JSON.parse(str1); 
// 对象转换成JSON格式的字符串     JSON.stringify(obj)    
var str = JSON.stringify(obj1);

7.4 RegExp对象

创建正则对象的两种方式：

1.var reg = new RegExp（"正则表达式"）;

2.var reg = /正则表达式/匹配模式; //推荐使用此种方式

// 方式一：
var reg = new RegExp('正则表达式')；
// 方式二：
var reg = /正则表达式/匹配模式;

测试一个字符串是否符合对应的正则规则是用RegExp对象的test方法：reg.test(str) 结果返回true或false。

String对象与正则结合的4个方法：

str.match(/regex/g); //查找字符串中符合正则的内容

str.search(/regex/g); //查找字符串中符合正则表达式的内容位置（索引）

str.split(/regex/g); //按照正则表达式对字符串进行切割

str.replace(/regex/g,"替换的新内容"); // 对字符串按照正则进行替换

var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

正则的使用示例

关于匹配模式：g 表示全局匹配 i 表示忽略大小写

在JS中使用正则表达式需要注意：

1.在JS中正则表达式的使用：不能有空格。

// 比如：
var reg = /[a-z]{4,8}/;
// 测试同样的字符串 sleep 
reg.test('sleep');
// true

var reg = /[a-z]{4, 8}/;   // 同样的正则表达式，只是在{4,  8}的逗号后面加一个空格
reg.test('sleep');
// false

正则的使用不能用空格

2.在使用test匹配字符串时，如果为空（reg.test()）则默认匹配字符串"undefined"。

// 创建两个正则表达式   reg =/[a-z]{4,8}/    和  reg11 = /[0-9]{4,8}/
var reg = /[a-z]{4,8}/;

reg.test();   //同样的测试空  结果不同
// true     
reg.test(undefined);
// true
reg.test('undefined');
// true

var reg11 = /[0-9]{4,8}/;

reg11.test();
// false
reg11.test(undefined);
// false

test后为空时，默认undefined

3.使用replace方法时，要设置匹配模式，如果不设置，则匹配到第一个结果就停止。

var str = 'adgafa';

// 不使用全局模式，匹配到第一个就停止
str.replace(/a/,'哈哈');
"哈哈dgafa"

// 使用g模式，则将所有符合条件的替换掉
str.replace(/a/g,'哈哈');
"哈哈dg哈哈f哈哈"

全局模式

使用全局模式g时，它内部会生成一个RegExpObject.lastIndex的属性：

// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

lastIndex属性

4.使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。

7.5 Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

Math.ceil() 向上取整，'天花板函数'

var x = 1.234;
//天花板函数  表示大于等于 x，并且与它最接近的整数是2
var a = Math.ceil(x);
console.log(a);//2

Math.floor 向下取整，'地板函数'

var x = 1.234;
// 小于等于 x，并且与它最接近的整数 1
var b = Math.floor(x);
console.log(b);//1

求两个数的最大值和最小值

//求 两个数的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2

随机数 Math.random()

var ran = Math.random();
console.log(ran);[0,1)

如果让你取100-200之间的随机数，怎么做？

背过公式：min - max之间的随机数： min+Math.random()*(max-min)

相关阅读:
【Caffe代码解析】Layer网络层
 Codeforces Round #276 (Div. 2)
深入一点让细节帮你和Fragment更熟络
 C-IDE使用指南
 14.11 隔离事务
 【工具类】遍历扫描目录下全部文件并列出
 Cocos2d-x源代码解析（1）——地图模块（1）
【Android实战】----基于Retrofit实现多图片/文件、图文上传
 RabbitMQ基本使用
 Spring 4 中重定向RedirectAttributes的使用
原文地址：https://www.cnblogs.com/zhaopanpan/p/8859087.html