JavaScript

Posted 2020-10-04

一. 简介

1.JavaScript是嵌入HTML中在浏览器中的脚本语言，具有与java和C语言类似的语法。

     一种网页编程技术，用来向html页面添加交互行为

     直接嵌入HTML页面

     由浏览器解释之行代码，不进行预编译

2.JS和Java对比

     (1). Java特点：

          面向对象：继承，多态，封装

     (2). JS特点：

          基于对象：有对象，但不支持严格的继承，多态，封装。

          继承：JS中没有继承的概念，但是他有原型的概念。每个对象都有一个prototype属性，用来指定该对象的原型对象，类似于继承。

          封装：JS中有不严格的封装，对象中封装的属性和方法是可以任意访问，修改的。

          多态：JS中的所有对象都是Object，即她们的根原型是Object。但是JS不像Java的多态那样严谨。JS中的对象可以赋值给任意类型的其它对象。

3.JS特点

     可以使用任何文本编辑工具编写

     由浏览器内置的javascript引擎执行代码

          —解释执行：事先不编译，逐行执行

          —基于对象：内置大量现成对象

     适宜：

          —客户端数据计算

          —客户端表单合法性验证

          —浏览器事件的触发

          —网页特殊显示效果制作

          —服务器的异步数据提交

二. 使用JavaScript

事件定义式：在事件定义时直接写js

嵌入式：使用<script>标签

文件调用式：代码位于单独的.js文件中；html页面引用.js文件

三. JS基本语法

1. 语句：

     由表达式，关键字，运算符组成；

     大小写敏感；

     使用分号或者换行结束，一行中有多个语句不能省略分号（推荐加上分好，减少错误和歧义）

2.变量

     变量声明：使用关键字var声明变量，如var x,y;

     变量初始化的变量则自动取值为undefined;

     变量没有类型，统一用关键字var声明，变量所引用的数据是有类型的。

3.数据类型

JS数据类型
特殊类型	null: 空； undefine: 未定义
内置对象（基本类型）	Number: 数字（不区分整数和小数） String: 字符串 Boolean:布尔 Function: 函数（函数也是对象） Array: 数组
外部对象	window: 浏览器对象 document: 文档对象
自定义	Object: 自定义对象

4.数据类型转换函数

    toString：所有数据类型均可转换为String类型

    parseInt：强转成整数，如不能转换则返回Nan(Not a number)

    parseFloat：强制转换成浮点数，如不能转换则返回Nan

    typeof：查询当前类型，返回string/number/boolean/object/function/undefine。

        eg:                 typeof(“test”+3)返回string。

    isNaN(is not a number?)：判断被检测表达式经过转换后是否不是一个数，如果被检测表达式不是数则返回true，否则返回false

5.运算符

（1）加(+)，减(-)，乘(*)，除(%)

     — +可以表示加法，也可以用于字符串的连接

     —-可以表示减号也可以表示负号

递增(+ +)，递减(- -)

—i++相当于i=i+1，i--相当于i=i-1

注意：java中5/2结果是2，JS中5/2结果是2.5（在JS中整数小数都是数字是一种类型）

（2）关系运算和java一样

     但是JS中多了一种符号：

     —全等：===（即类型想等且数值想等，其中==只代表数值想等）

     —不全等：!==

（3）逻辑运算与java一样

（4）条件运算（三目运算）与java一致

6.流程控制

（1）控制语句：顺序，分支，循环

（2）switch case;while;do-while;for都和java一样，但是for中(var i = 0;i<10;i--)

（3）JS中的条件表达式

     Java中条件表达式必须返回布尔值

     JS中的表达式可以是任意表达式，即可以返回任何类型的值（一切表示空的值，都是false；非空的数据都是true）

表达式的值	对应的布尔值
true	true
false	false
0	false
null	false
“"	false
undefined	false
NaN	false
“非空”值	true

四.JS对象概述

    JS包含多种对象：内置对象，外部对象(window对象，dom对象)，自定义对象

    对象包含属性和方法；

    访问对象属性（对象.属性）；

    访问对象方法（对象.方法名()）

    常用内置对象JS：

         String对象

         Number对象

         Boolean对象

         Array对象

         Math对象

         Date对象

         RegEx对象（正则）

         Function对象

1.常用内置对象

（1）String对象

    声明方式：

         var str1 = “Hello world”;

         var str2 = new String(“Hello world");

    String对象的属性：length

         str.length

    大小写转换方法：

        x.toUpperCase()

        x.toLowerCase()

    获取指定字符：

        x.charAt(index)：返回指定位置的字符

        x.charCodeAt(index):返回指定位置字符的Unicode编码

    查询指定字符串：

        x.indexOf(findstr, [index])

        x.lastIndexOf(findstr, [index])

        findstr:查找的字符串

        index:开始查找的位置索引，可以省略

    返回findstr在x中出现的首字符位置索引，如果没有找到，则返回-1

        lastIndexOf:从后面找起

    获取子字符串

        x.substring(start,[end])

    使用说明：

        start:开始位置

        end:结束位置加1，可以省略

    替换子字符：

        x.replace(findstr,tostr)

        使用注释：

         findstr：要找的子字符串

         toaster：替换为的字符串

         返回替换后的字符串

    拆分子字符串：

        x.split(bistro,[howmany])

        使用注释：    

        bystr:分割用的字符串

        howmanay:指定返回的数组的最大长度，可以省略

        返回分割后的字符串数组

（2）Number对象

    Number是数值对象

    创建Number对象：var myNum = 123.2;

    toFixed(num)：转换为字符串，并保留小数点后一定位数

         如果必要，该数字会被舍入，也可以用0补足

（3）Array对象（数组对象）

    创建方式：

        var a1 = new Array();

        var a2 = new Array(7);

        var a3 = new Array(100, ‘a‘, true);//直接在数组里赋值，一般不用这个

        var a4 = [100,200,300];

    访问数组元素：

        a1[0] = 1;//a1长度由0变为1

        console.log(a3[1]);

    追加数组元素：

        a.push(2);

    创建二维数组，即数组中的元素是数组。

        var ary = [[1,2,3],[3,4,5],[5,6,7]];

    数组倒转与排序：

        a4.reverse()

    反向数组

        改变数组a4中数值的顺序,则a4为[300,200,100]

    排序：

        a4.sort();//默认由小到大排序

    数组的排序sort：

        1）排序有2个要素：排序规则；比较方法

        2）排序规则：

             sort方法的排序规则是预置的，且永远不能改变，它永远按照由小到大的顺序来排序。

             即当2个数比较结果是负数时，将2个数换位。

        3）比较方法：

         — js预置了比较方法，默认时返回2个数j,i相减的值；

         — 排序规则就是基于这个返回值做出的排序；

         — 该比较方法是可以置换的，修改返回值则会对排序规则产生影响。

    当重写compare方法后用a4.sort(compare)即可。

    eg:

        ar ary =[9,3,40,3,5,66];//undefined

        ary.sort();//[3, 3, 40, 5, 66, 9]

        function compare(j,i){return i-j};//undefined

        ary.sort(compare);//[66, 40, 9, 5, 3, 3]

（4）Math对象

    无需创建，直接把Math作为对象使用就可以调用其所有属性和方法。

        如Math.PI，Math.E，Math.round(3,56)

        Math对象常用方法：

        — 三角函数：Math.sin(x);Math.cos(x);Math.tan(x)等

        — 计算函数：Math.sqrt(x)指数;Math.log(x);Math.exp(x)等

        — 数值比较函数：Math.abs(x)绝对值;Math.max(x,y...);Math.random();Math.round(x)整数等

（5）Date对象：

    Date对象用于处理日期和时间，封装了熊时间毫秒数

    var now = new Date();//now为系统时间

    var b = new Date(“2015-01-01 01:01:01”);//指定时间

    常用对象方法:

    — 读写时间毫秒数：

         now.getTime();

         now.setTime();

    — 读写时间分量：

         getDate()这个月有几天,getDay()今天是这周的第几天,getFullYear()年份等

         setDate(),setDay(),setFullYear()等

    — 转换为字符串

         toString();

         toLocaleTimeString();转换成本地的时间点

         toLocaleDateString();转换成本地的年月

（6）正则RegExp对象概述

    RegExp对象表示正则表达式。

    创建：var rgExp=/pattern/flags;

           var rgExp=new RegExp(“pattern”,[“flags”]);

    flags标识有以下几个：

         — g: 设定当前匹配为全局模式

         — i: 忽略匹配中的大小写检测

    RegEx对象的常用方法

    RegExpObject.test(string)

         —如果字符串string中含有与RegExpObject匹配的文本则返回true，否则返回false

reg.exe(str)	检索字符串中指定的值，返回找到的值
reg.test(str)	检索字符串中指定的值，返回true或false

String对象与正则表达：

— 方法

     x.replace(regexp, tostr);

     x.match(regexp)

     x.search(regexp)

— 使用说明

     regexp代表正则表达式或字符串

     replace返回替换后的结果

     match返回匹配字符串的数组

     search返回匹配字符串的首字符位置索引

（7）Function对象

    JS里的函数就是Function对象

    函数名就是指向Function对象的引用

     — 使用函数名可以访问函数对象

     — 函数名()是调用函数

     function 函数名 ([参数]) {

          函数体;

           return 返回值;    

     }

    函数的返回值：

         — 默认返回undefined

         — 可以使用return返回具体的值

    JS的函数没有重载

    调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数

    没有接收到实参的参数值是undefined

    所有的参数传递给arguments数组对象

    使用Function对象直接创建函数:

        var functionName = new Function(arg1,…argN,functionBody);

（8）arguments对象

    arguments是一种特殊对象，在函数代码中，表示函数的参数数组

    在函数代码中，可以使用arguments访问所有参数

     — arguments.length：函数的参数个数

     — arguments[i]：第i个参数

     — 可以利用arguments实现可变参数的函数（java中的重载功能）

（9）匿名函数

    创建匿名函数：

    var fun = function(arg1,…argN) {

     func_body;

     return value;     

    }

    eg:var a = [6,7,2,9,12,5];

    a.sort();

    [12, 2, 5, 6, 7, 9]

    a.sort(function(a,b){return b-a});

    [12, 9, 7, 6, 5, 2]

 

（10）全局函数

    全局函数可用于所有的JavaScript对象

    常用全局函数有：

    — parseInt/parseFloat

    — isNaN

    — eval:eval函数用于计算表达式字符串，或者用于执行字符串中的JavaScript代码

         只接受原始字符串作为参数

         如果参数中没有合法的表达式和雨具，则抛出异常

本文出自 “学习记录” 博客，请务必保留此出处http://turnsole.blog.51cto.com/9558446/1958825