JavaWeb -03 JavaScript基础

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 1.JavaScript介绍
    • 1.1 JavaScript简介
    • 1.2 JavaScript发展史
    • 1.3 JavaScript应用场景
    • 1.4 JavaScript组成
  • 2.JavaScript基础语法
    • 2.1 如何运行JavaScript代码
    • 2.2 打印输出语句
    • 2.3 标识符
    • 2.4 变量与常量
    • 2.5 注释
    • 2.6 数据类型
    • 2.7 数据类型间的转换
  • 3.JavaScript运算符
    • 3.1 算数运算符
    • 3.2 逻辑运算符
    • 3.3 关系运算符(比较运算符)
    • 3.4 赋值运算符
  • 4.流程控制
    • 4.1 分支语句
    • 4.2 循环语句
  • 5.JavaScript中特殊的对象数组
    • 5.1 初始化与使用数组
    • 5.2 遍历数组
    • 5.3 数组操作案例
  • 6.函数
    • 6.1 函数的声明与使用
    • 6.2 函数的返回值
    • 6.3 其它函数
    • 6.4 作用域相关概述
  • 7.类与对象
    • 7.1 对象的创建方式
    • 7.2 new关键字和构造函数
    • 7.3 this的使用
    • 7.4 对象的使用
  • 8.标准库对象(内置对象)
    • 8.1 Math对象
    • 8.2 Date时间日期
    • 8.3 数组相关方法属性
    • 8.4 RegExp 对象
    • 8.5 String对象
    • 8.6 JSON对象
  • 9.正则表达式


1.JavaScript介绍

1.1 JavaScript简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。

1.2 JavaScript发展史

  • 1994年Netscape公司推出免费版本浏览器 Netscape Navigator(网景浏览器1.0) 1995年微软公司发布 Internet Explorer 1.0。
  • 1995年网景公司为适应市场变化,需要开发一门专门在浏览器运行的脚本语言,这个任务交给了布兰 登,为了应付公司安排的任务, 他只用10天时间就提交了工作,并将这门语言命名为 LiveScript; 后来为了蹭sun公司java的热度,与sun公司合作,将其临时改名为“JavaScript”;
  • 1996年8月,微软模仿JavaScript开发了一种相近的语言,取名为JScript,首先内置于IE 3.0
  • 1997年7月,ECMA组织发布ECMAScript 1.0版; 此后,明争暗斗不断,1998年6月,ECMAScript 2.0版发布,1999年12月,ECMAScript 3.0版发布;
  • 2007年10月,ECMAScript 4.0版草案发布,2008年7月中止ECMAScript 4.0的开发,并发布3.1版本; 会后不久,ECMAScript 3.1就改名为ECMAScript 5。
  • 2011年6月,ECMAscript 5.1版发布,现在使用最为广泛的版本 版发布,现在使用最为广泛的版本;
  • 2015年6月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”; 随后,ECMA组织决定,每年发布一个升级版本,以年号来代替版本号,如:ECMAScript 2016、

1.3 JavaScript应用场景

JavaScript 发展到现在几乎无所不能。

  1. 网页特效
  2. 服务端开发(Node.js)
  3. 命令行工具(Node.js)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(cocos2d-js)

1.4 JavaScript组成

ECMA 欧洲计算机制造联合会; ECMAScript 是一套标准,定义了一种语言的标准,规定了基本语法、数据类型、关键字、具体API的设 计规范等,解析引擎设计的参考标准,但与具体实现无关;

JavaWeb -03 JavaScript基础_第1张图片

2.JavaScript基础语法

2.1 如何运行JavaScript代码

通过在HTML代码中镶嵌script标签,在script标签中编写

<script>
	编写js语句;
script>

通过引入外部js文件

<script src ="js文件路径">script>

2.2 打印输出语句

打印输出语句有三种:

// 1.浏览器弹窗
alert("输出的内容");

// 2.浏览器F12控制台输出
console.log("输出的内容");

// 3.浏览器页面文本形式输出
document.write("输出的内容");

代码演示

<script>
    alert("弹窗输出");
    console.log("控制台输出");
    document.write("浏览器页面文本输出");
script>

2.3 标识符

1.标识符的命名规则

  • 由字母、数字、下划线、$符号组成,且不能以数字开头
  • 区分大小写
  • 不能是关键字和保留字,例如:for、while。

2.标识符命名规范

  • 变量名必须有意义
  • 遵守驼峰命名法。(首字母小写,后面单词的首字母需要大写。例如:userName、 userPassword)

2.4 变量与常量

1.常量 : 在程序运行过程中其值保持不变的量。

const 常量名 =;

2.变量 : 在程序运行过程中其值可能发生变化的量。

// 1.先声明,再赋值
var 变量名; 变量名 =;

// 2.边声明,边赋值
var 变量名 =;

// 3.多个变量同时定义并赋值
var 变量名1 =1 , ... , 变量n = 值n;

代码演示:

<script>
    // 1.定义一个常量
    const PI = 3.141592653589793;
    document.write("PI = " + PI);

    // 2.定义一个常量
    var name = "张三";
    document.write("name = " +name);

    var age = 10 , gender = '男';
    document.write("age = " +age);
    document.write("gender = " +gender);
script>

2.5 注释

注释是程序不执行的代码。对程序起到解释说明的作用。

单行注释:// 注释内容

多行注释: /* 注释内容 */

2.6 数据类型

强数据类型与弱数据类型

  • 强数据类型,是在声明时就规定了该存储空间储存的是什么类型的数据,后期存入值时只能存入声明时的数据类型。
  • 若数据类型,是在声明时未规定该存储空间存储的是什么类型的数据,后期可以存储任意的数据类型的数据。

JavaScript中判断一个变量的数据类型的格式

typeof (变量名/);

代码演示:

<script>
    // 判断数据类型
    console.log(typeof (11));

    var name = "zhangsan";
    console.log(typeof name);
script>

数据类型的分类

  • number : 数值型,代表所有的整数和小数
  • string : 字符串类型
  • boolean :布尔类型 true/false
  • undefine : 未定义,也就是一个变量声明但未被初始化。
  • null : 空值
  • Object : 引用数据类型
<script>
    // 1.number
    console.log(typeof 10)
    console.log(typeof 3.14);

    // 2.string字符串
    console.log(typeof "张三丰");

    // 3.boolean 布尔值
    console.log(typeof true);

    // 4.未定义
    var age;
    console.log(typeof age);

    // 5. Object
    console.log(typeof null);

script>

注意事项 : NaN : not a number,没有数值

2.7 数据类型间的转换

强制转换 :

转成字符串类型string
1.toString方法
2.String()方法
3.字符串拼接符:""+要转换的数据

转成数值型number
1.调用Number()构造
2.调用parseInt()方法
3.调用parseFloat()方法
4.通过运算的方式 +--0

转成布尔值boolean
1.调用Boolean()方法

代码演示

<script>
    // 1.转成数值
    var a = Number('1');
    var b = Number(1);
    var c = Number('c');
    var d = Number(null);
    var e = Number(undefined);
    console.log(a,b,c,d,e);

    var a = parseFloat('1.2df');
    var b = parseFloat('1.3.4');
    var c = parseFloat('c12');
    var d = parseFloat(null);
    var e = parseFloat(undefined);
    console.log(a,b,c,d,e);

    // 2.转成字符串
    console.log(typeof (String(122)));
    var num = 123;
    console.log(typeof (num.toString()));
    console.log(typeof (num+""));

    // 3.转布尔
    var a = Boolean('0');
    var b = Boolean(0);
    var c = Boolean('1');
    var d = Boolean(null);
    var e = Boolean(undefined);
    var f = Boolean(NaN);
    console.log(a,b,c,d,e,f);
script>

3.JavaScript运算符

3.1 算数运算符

运算符 描述
+ 加号,求和运算
- 减号,用于做减法运算
/ 除号,做除法运算
% 取余(取模),求取余数
++ 自增运算
自减运算

代码演示

<script>
    console.log(3 + 2);
    console.log(3 - 2);
    console.log(3 * 2);
    console.log(3 / 2);
    console.log(3 % 2);

    // 前置++
    var num1 = 5;
    ++ num1;
    var num2 = 6;
    console.log(num1 + ++ num2); 
    
    // 后置++
    var num1 = 5;
    num1 ++;
    var num2 = 6
    console.log(num1 + num2 ++); //12
script>

总结:

前置++:先加1,后参与运算

后置++:先参与运算,后加1 后置++ 运算的两个条件,满其一就会执行 1:整个表达式结束;2表达式没结束但是又被使用了;

上面两个理解后,下面两个自通

前置-- :先减1,后参与运算

后置-- :先参与运算,后减1

3.2 逻辑运算符

符号 描述
&& 与 左边为真则取右边,左边为假则取左边
|| 或 左边为真则取左边,左边为假则边右边
取反

代码演示

<script>
    var a = 1;
    var b = 2;
    var c = 0;
    console.log(a || b); //1
    console.log(b || a); //2
    console.log(c && a); //0
    console.log(a || c && b); //1
    // JS逻辑运算中的逻辑或和逻辑与的运算结果:
    // 决定整个表达式的子表达式的值
script>

3.3 关系运算符(比较运算符)

1. > 大于
2. < 小于
3. <= 小于等于
4. >= 大于等于
5.= 不等于
6. == 等等于
7. === 全等于

代码演示

<script>
    var result = '55' == 55; // true
    var result = '55' === 55; // false 值相等,类型不相等
    var result = 55 === 55; // true
script>

注意事项: == 与 ===的区别是,==比较的是内容。===全等于比较的是内容和数据类型

3.4 赋值运算符

= += -= *= /= %=

代码演示

<script>
    var num = 0;
    num += 5; //相当于 num = num + 5;
script>

4.流程控制

4.1 分支语句

if条件语句格式

// 格式一: 
if(条件){
    语句;
}

// 格式二:
if(条件){
    语句1;
}else{
    语句2;
}

// 3.格式三:
if(条件1){
    语句1;
}else if(条件2){
    语句2;
}
...
else if(条件n-1){
    语句n-1;
}else{
    语句n;
}

switch语句

switch(条件){
    case 常量1:
        语句1;
        break;
    ....;   
    case 常量n-1;
        语句n-1;
        break;
    default :
        语句n;
        break;
}

4.2 循环语句

for循环

for(初始化语句;循环条件;循环自增量){
    循环体语句;
}

while循环

初始化语句;
while(循环条件){
    循环体语句;
    循环自增量;
}

do-while循环

do{
    初始化语句;
    循环自增量;
}while(循环条件);

三元运算符

表达式1 ? 表达式2 : 表达式3;

代码示例

<script>
    // 判断一个数是偶数还是奇数
    var n = 10;
    if(n%2==0){
        console.log('偶数');
    }else{
        console.log('奇数');
    }

    /* *
    * 判断这个人的成绩的级别:
    * 如果是A,则提示,分数在90分以上
    * 如果是B,则提示,分数在80分以上
    * 如果是C,则提示,分数在70分以上
    * 如果是D,则提示,分数在60分以上
    * 否则提示,不及格
    * */
    var jiBie="B";
    switch (jiBie){
        case "A" :
            console.log("分数在90分以上的");
            break;
        case "B" :
            console.log("分数在80分以上的");
            break;
        case "C" :
            console.log("分数在70分以上的");
            break;
        case "D" :
            console.log("分数在60分以上的");
            break;
        default :
            console.log("不及格");
    }

    //求1-100之间所有数的和
    var s = 0;
    for(var i=0;i<=100;i++){
        s+=i;
    }
    console.log(s);

    // 初始化变量
    var i = 1;
    var sum = 0;
    // 判断条件
    while (i <= 100) {
        // 循环体
        sum += i;
        // 自增
        i++;
    }
    console.log(sum);


    // 初始化变量
    var i = 0;
    var sum = 1;
    do {
        sum += i;//循环体
        i++;//自增
    } while (i <= 100);//循环条件

script>

5.JavaScript中特殊的对象数组

5.1 初始化与使用数组

初始化数组

// 1.一维数组
var 数组名 = [1,2,3, ... , 值n];

// 2.二维数组
var 数组名 = [
    [1,2,3, ... , 值n]
    ....
    [1,2,3, ... , 值n]
];

数组的元素可以是任意类型的数据,因此,有时数组中的某个元素的值又是一个数组,而这样的数组被 称为多维数组,如果数组中只有其他类型的数据,而没有另外的数组值,这样的数组被称为一维数组; 通常,数组被嵌套N层,则称为N维数组,最常见的就是二维数组、三维数组、四维数组,超过一维的 数组都会被泛称为多维数组; 数组的维度值越大,复杂度就越高,开发中尽量避免产生高维度值的数组;

使用数组

数组名[下标] =;
获取数组的长度: 数组名.length;

代码演示

<script>
    var arr = ['red',, 'green'];
    arr[0]; // red
    arr[1]; // undefined 下标位置没有数据
    arr[2]; // green
    arr[5]; // 这个数组的最大下标为2,因此返回undefined

    // 获取多维数组的数据
    var arr = ['路飞','娜美',['巴基','女帝',['佐助','乔巴']]];
    console.log(arr[2][2][0]); //佐助
script>

5.2 遍历数组

遍历一维数组

<script>
    var arr1 = [1, 3, 4];
    for(var i = 0;i<arr1.length;i++){
        console.log(arr1[i]);
    }
script>

遍历二维数组

<script>
	var arr = [
        [1,2,3,4,5],
        ["a","b"],
        [true,false]
    ];
    
    for(var i = 0; i < arr.length; i++){
        for(var j = 0; j < arr[i].length; j++){
            console.log(arr[i][j]);
        }
    } 
script>

5.3 数组操作案例

获取数组中最大值

<script>
    //最大值
    var arr = [10, 20, 30, 40, 50, 60];
    //假设这个变量中的值是最大的
    var maxNum = arr[0];
    //遍历数组
    for (var i = 0; i < arr.length; i++) {
        //判断
        if (maxNum < arr[i]) {
            maxNum = arr[i];
        }
    }
    console.log("最大值是:" + maxNum);
script>

对数组求和

<script>
    var arr = [10, 20, 30, 40, 50, 60];
    var sum = 0;

    for(var i = 0; i < arr.length; i++ ){
        sum += arr[i];
    }
    console.log("总和:"+sum);
script>

6.函数

6.1 函数的声明与使用

函数的声明

// 方式一
function 函数名(参数列表){
    函数体语句;
    return 返回值;
}

函数的使用

函数名(参数);

代码演示

<script>
	// 定义一个函数,求俩数的最大值
    function maxNum(num1 , num2){
        return num1 > num2 ? num1 : num2;
    }
    conlose.log("两个数的最大值:" + maxNum(1,2));
script>

形式参数与实际参数

  1. 形式参数:在声明一个函数的时候,为了函数的功能更加灵活,有些值是固定不了的,对于 这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值,仅仅起到一个占位 置的作用,我们通常称之为形式参数,也叫形参。
  2. 实际参数:如果函数在声明时,设置了形参,那么在函数调用的时候就需要传入对应的参 数,我们把传入的参数叫做实际参数,也叫实参。

6.2 函数的返回值

  • 如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
  • 如果函数使用 return语句,那么跟在return后面的值,就成了函数的返回值
  • 如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值也是:undefined
  • 函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后 面的所有其他代码都不会再执行。

6.3 其它函数

匿名函数 : 将一个函数的声明赋值给一个变量

var 函数名 = function(参数列表){
    函数体语句;
    return 返回值;
}

函数的自调用 : 匿名函数如果没有任何变量来表示它,那么就不能直接调用来执行,因此可以通过匿名函数的自 调用的方式来执行

(function(形式参数列表){
    函数体语句;
    return 返回值;
})(实际参数列表);

关于自执行函数(匿名函数自调用)的作用:防止全局变量污染。

6.4 作用域相关概述

全局变量与局部变量

// 1.全局变量与全局作用域
在任何地方都可以访问到的变量就是全局变量,全局变量所在的区域就是全局作用域
// 2.局部变量
只在固定的代码片段内可访问到的变量,最常见的例如函数内部的变量,就是局部变量。局部变量
所在的区域就是局部作用域(函数作用域)

变量提升

// 1.变量提升
定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。
// 2.函数提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

js运行过程

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。
JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析(编译)过程和代码执行过程

// 1.预解析过程:
0. 语法检查,如果有错误,直接停止后续步骤不再运行。
1. 把变量和函数的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值和调用。
2. 先提升变量后提升函数,如果函数和变量同名,则被替换;

// 2.代码执行过程
变量的赋值,函数的调用,循环判断等,根据代码由上往下顺序执行;

词法作用域

变量的作用域是在定义时决定而不是执行时决定的,也就是说词法作用域取决于编译阶段,通过静态分析就能确定,因此词法作用域也叫做静态作用域。
在 js 中词法作用域规则:
	函数允许访问函数外的数据.
	整个代码结构中只有函数可以限定作用域.
	作用域规则首先使用提升规则分析
	如果当前作用规则中有名字了, 就不考虑外面的名字
也就是说:
函数内部可以访问函数外部的变量,但是函数外部不可以访问函数内部的变量;
函数内部如果有变量,则优先使用内部的变量,如果函数内部没有,才会使用函数外部的变量;

作用域链

有函数可以制造作用域结构, 那么只要是代码,就至少有一个作用域, 即全局作用域。凡是代码中有函
数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用
域。
将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

作用域与作用域链的关系图

JavaWeb -03 JavaScript基础_第2张图片

代码演示

<script>
    var a = 1;
    function fn1(){
        var a = 2;
        function fn2(){
            var a = 3;
            function fn3(){
                console.log(a);
            }
            fn3();
        }
        fn2();
    }
    fn1();
script>

7.类与对象

类 : 是对一类事物的描述,在JavaScript中一个js文件,就代表一个类。

对象 : 是一类事务描述的具体实现。

7.1 对象的创建方式

字面值创建对象

var 对象名 = {
    属性名:属性值;
    方法名:function(参数列表){
        方法体;
    }
}

通过new Object()的方式创建对象

var 对象名 = new Object();
对象名.属性名 =;
对象名.方法名 = function(参数列表){
    方法体
}

自定义构造函数创建对象

function 构造函数名(参数1,参数2,...,参数n){
    this.属性名1 : 参数1,
    this.属性名2 : 参数2,
    ...
    this.属性名n : 参数n,
    this.方法名:function(参数列表){
        方法体;
    }
}

// 使用
var 对象名 = new 构造函数(参数);

代码演示

<script>
    // 1.字面值创建对象
    var per1 = {
        name:"张三丰",
        age : 11,
        say:function(){
            console.log(this.name + ":" +this.age);
        }
    };
    per1.say();

    // 2.new Object()方式创建
    var per2 = new Object();
    per2.name="张无忌";
    per2.age = 10;
    per2.say = function () {
        console.log(this.name + ":" +this.age);
    }
    per2.say();

    //3.自定义构造器
    function Person(name,age) {
        this.name = name;
        this.age = age;
        this.say = function () {
            console.log(this.name + ":" +this.age);
        }
    }
    new Person("周芷若",22).say();
script>

7.2 new关键字和构造函数

构造函数 ,是一种特殊的函数,又叫做函数构造器。主要用来在创建对象时初始化对象, 即为对 象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。

  1. 构造函数用于创建一类对象,首字母通常大写。
  2. 构造函数要和new一起使用才有意义。
  3. new 关键字也读做实例化。实例化构造函数,得到一个对象。

7.3 this的使用

JavaScript中的this指向问题,比较复杂,有时候会让人难以捉摸,随着学习的深入,我们会不断 接触this, 在学习过程中,我们可以不断总结,最终搞清楚this在何种情况下指向何处…… 目前,我们只需要记住以下两点就可以了:

  1. 函数如果在某个对象下,this就指向这个对象

  2. 函数如果被直接调用,this指向window对象

7.4 对象的使用

格式

对象名.方法名();
对象名.属性名();

遍历对象的方式

for(var 变量名 in 对象名){
    conlose.log(变量名);
}

代码演示

<script>
    // 1.字面值创建对象
    var per = {
        name:"张三丰",
        age : 11,
        say:function(){
            console.log(this.name + ":" +this.age);
        }
    };
    for(var key in per){
        console.log(key);
    }
script>

8.标准库对象(内置对象)

8.1 Math对象

方法 描述
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值,以弧度为单位。
acosh(x) 返回 x 的双曲反余弦值。
asin(x) 返回 x 的反正弦值,以弧度为单位。
asinh(x) 返回 x 的双曲反正弦值。
atan(x) 返回 x 的反正切值,返回的值是 -PI/2 到 PI/2 之间的弧度值。
atan2(y, x) 返回其参数商的反正切值。
atanh(x) 返回 x 的双曲反正切值。
cbrt(x) 返回 x 的三次方根。
ceil(x) 返回 x,向上舍入为最接近的整数。
clz32(x) 返回 x 的 32 位二进制表示中前导零的数量。
cos(x) 返回 x 的余弦值(x 以弧度为单位)。
cosh(x) 返回 x 的双曲余弦值。
exp(x) 返回 Ex 的值。
expm1(x) 返回 Ex 减去 1 的值。
floor(x) 返回 x,向下舍入为最接近的整数。
fround(x) 返回数的最接近的(32 位单精度)浮点表示。
log(x) 返回 x 的自然对数。
log10(x) 返回 x 的以 10 为底的对数。
log1p(x) 返回 1 + x 的自然对数。
log2(x) 返回 x 的以 2 为底的对数。
max(x, y, z, …, n) 返回值最高的数字。
min(x, y, z, …, n) 返回值最小的数字。
pow(x, y) 返回 x 的 y 次幂值。
random() 返回 0 到 1 之间的随机数。
round(x) 将 x 舍入为最接近的整数。
sign(x) 返回数的符号(检查它是正数、负数还是零)。
sin(x) 返回 x 的正弦值(x 以弧度为单位)。
sinh(x) 返回 x 的双曲正弦值。
返回 x 的平方根。
tan(x 返回角度的正切值。
tanh(x) 返回数的双曲正切值。
trunc(x) 返回数字 (x) 的整数部分。
console.log(Math.PI); //圆周率3.141592653589793
Math.random();//介于 0 和 1 之间的伪随机数。
Math.ceil(6.6);//获取大于或等于提供数值的最小整数--向上取整
Math.floor(8.8);//获取小于或等于提供数值的最大整数--向下取整
Math.round(9.9);//四舍五入
Math.max(10,20,15);//取多个值中的最大值
Math.min(10,20,15);//取多个值中的最小值
Math.pow(10,2);//返回x的y次幂
Math.sqrt(100);//求平方根

8.2 Date时间日期

常用的方法属性

// 获取当前时间,UTC世界时间,距1970年1月1日(世界标准时间)起的毫秒数
var now = new Date();
console.log(now.getTime()); // 获取距1970年1月1日(世界标准时间)起的毫秒数
console.log(now.valueOf()); // valueOf用于获取对象的原始值,与getTime()方法相同
Date构造函数的参数
1. 毫秒数 1498099000356 new Date(1498099000356)
2. 日期格式字符串 '2015-5-1' new Date('2015-5-1')
3. 年、月、日…… new Date(2015, 4, 1) // 月份从0开始

获取日期毫秒值

var now = new Date();
console.log(now.getTime());
// valueOf用于获取对象的原始值
console.log(now.valueOf());
// HTML5中提供的方法,有兼容性问题
var now = Date.now();
// 不支持HTML5的浏览器,可以用下面这种方式
var now = + new Date(); // 隐式调用 Date对象的valueOf()

日期格式化方法

toString() // 转换成字符串
valueOf() // 获取毫秒值
// 下面格式化日期的方法,在不同浏览器可能表现不一致,一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

获取指定日期部分

getTime() // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份,***从0开始***
getFullYear() //返回4位的年份 如 2016

8.3 数组相关方法属性

Array属性

属性 描述
constructor 返回创建 Array 对象原型的函数。
length 设置或返回数组中元素的数量。
prototype 允许您向数组添加属性和方法。

Array方法

方法 描述
concat() 连接两个或多个数组,并返回已连接数组的副本。
copyWithin() 将数组中的数组元素复制到指定位置或从指定位置复制。
entries() 返回键/值对数组迭代对象。
every() 检查数组中的每个元素是否通过测试。
fill() 用静态值填充数组中的元素。
filter() 使用数组中通过测试的每个元素创建新数组。
find() 返回数组中第一个通过测试的元素的值。
findIndex() 返回数组中通过测试的第一个元素的索引。
forEach() 为每个数组元素调用函数。
from() 从对象创建数组。
includes() 检查数组是否包含指定的元素。
indexOf() 在数组中搜索元素并返回其位置。
isArray() 检查对象是否为数组。
join() 将数组的所有元素连接成一个字符串。
keys() 返回 Array Iteration 对象,包含原始数组的键.
lastIndexOf() 在数组中搜索元素,从末尾开始,并返回其位置。
map() 使用为每个数组元素调用函数的结果创建新数组。
pop() 删除数组的最后一个元素,并返回该元素。
push() 将新元素添加到数组的末尾,并返回新的长度。
reduce() 将数组的值减为单个值(从左到右)。
reduceRight() 将数组的值减为单个值(从右到左)。
reverse() 反转数组中元素的顺序。
shift() 删除数组的第一个元素,并返回该元素。
slice() 选择数组的一部分,并返回新数组。
some() 检查数组中的任何元素是否通过测试。
sort() 对数组的元素进行排序。
splice() 从数组中添加/删除元素。
toString() 将数组转换为字符串,并返回结果。
unshift() 将新元素添加到数组的开头,并返回新的长度。
valueOf() 返回数组的原始值。

8.4 RegExp 对象

RegExp 对象属性

属性 描述
global RegExp 对象是否具有标志 g。
ignoreCase RegExp 对象是否具有标志 i。
lastIndex 一个整数,标示开始下一次匹配的字符位置。
multiline RegExp 对象是否具有标志 m。
source 正则表达式的源文本。

RegExp 对象方法

方法 描述
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值,并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法 描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

8.5 String对象

String属性

属性 描述
constructor 对创建该对象的函数的引用
length 字符串的长度
prototype 允许您向对象添加属性和方法

String方法

方法 描述
anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。

8.6 JSON对象

  • JSON 是用于存储和传输数据的格式。
  • JSON 是文本,文本可以在任何地方传输,并可通过任何编程语言读取。
  • JavaScript 对象可以转换为 JSON,JSON 可以转换回 JavaScript 对象。
  • 这样,我们可以将数据作为 JavaScript 对象使用,而无需复杂的解析或转换。
方法 描述
parse() 解析 JSON 字符串并返回 JavaScript 对象。
stringify() 将 JavaScript 对象转换为 JSON 字符串。

9.正则表达式

正则表达式,它是对字符串执行模式匹配的强大工具。

方括号 : 方括号用于查找某个范围内的字符:

表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符 描述
. 查找单个字符,除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

你可能感兴趣的:(JavaWeb相关内容,javascript,前端,开发语言)