JavaScript基础总结

目录

一：JavaScript的历史

二：ECMAScript

三：JavaScript基础

3.1 变量

3.2 基础规范

3.3 常量和表示符

3.4 数据类型

3.5 ECMA运算符

3.5 控制语句

3.7 异常处理

四：ECMA对象

4.1 String对象

4.2 Function对象

4.3 Array对象

 4.4 Date对象

4.5 RegExp对象

4.6 Math对象

---

一：JavaScript的历史

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

二：ECMAScript

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

• 核心（ECMAScript）
• 文档对象模型（DOM） Document object model (整合js，css，html)
• 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
• Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的. 

简单地说，ECMAScript 描述了以下内容：

• 语法 
• 类型 
• 语句 
• 关键字 
• 保留字 
• 运算符 
• 对象 (封装 继承 多态) 基于对象的语言.使用对象

JavaScript的引入方式

#1.直接编写
<script>
    alert('hello JavaScript')
</script>

#2.导入文件
<script src="1.js"></script>

三：JavaScript基础

3.1 变量

• 声明变量时不用声明变量类型. 全都使用var关键字;  var a
• 一行可以声明多个变量.并且可以是不同类型. var name="xiaod",age=20
• 声明变量时 可以不用var. 如果不用var 那么它是全局变量
• 变量命名：首字母只能是字母，下划线 $中的一个，不能以数字开头
• 变量命名：匈牙利类型标记法：最前面：小写字母说明变量类型+首字母大写驼峰命名    var iMyTestValue=0

3.2 基础规范

• 每行结束以分号作为结束符(推荐)  若没有分号则以换行符作为结束
• 注释单行 //    多行 /**/
• 使用{ }来封装代码块

3.3 常量和表示符

常量：直接在程序中出现的数据值

标识符：

1. 由不以数字开头的字母、数字、_、 $ 组成
2. 常用于表示函数、变量等的名称
3. JavaScript语言中代表特定含义的称为保留字，不允许再定义为标识符

3.4 数据类型

数字类型(Number)

注：不区分整型和浮点数值，所有的都采用64位浮点格式存储

16进制和8进制数的表达

•     16进制数据前面加上0x
•      8进制前面加0
•      2进制前面加b 

字符串(String)

注：是由Unicode字符 数字 标点符号 组成的序列   常量用单引号或双引号括起，特殊字符加\  

Unicode的插入方法

<script>
        var str="\u4f60\u597d\n欢迎来到\"JavaScript世界\"";
        alert(str);
</script>

布尔型(Boolean)

注：只有两个值 true和false(小写) 实际运算中 true=1 false=0 

用于JavaScript的控制语句

 if (x==1){
    y=y+1;
    }else{
    y=y-1;
    }

Null &Undefined

Undefined 类型只有一个值，即 undefined 

当变量没有初始化，该变量的默认值是undefined   当函数无明确返回值，返回的也是undefined

 Null类型只有一个值 null   最主要用来表示尚未存在的对象

如果函数或方法主要返回的是对象，那么找不到该对象时，返回的就是null

var person=new Person()

var person=null

数据类型转换

JavaScript属于松散类型的程序语言，变量在声明的时候并不需要指定数据类型，只有在赋值的时候才会确定数据类型

数字+字符串 ： 数字转换为字符串

数字+布尔值 ： true转换为1 false转换为0

字符串+布尔值 ： 布尔值转换为字符串 true或 fakse

强制类型转换函数

函数 parseInt:  parseInt("6.12")=6  parseInt("12a")=12   parseInt("a12")=NaN   parseInt("1a2")=1

函数 parseFloat  parseFloat("6.12")=6.12

函数 eval   将字符串转换为表达式并返回结果 eval("1+1")=2   eval("1<2")=true

NaN属于Number类型的一个特殊值，当遇到字符串转换成数字无效时，会得到一个NaN数据  NaN参与的运算都是false除了！

类型查询函数 

函数 typeof :查询数据类型（string number boolean object）

typeof(null)   返回 object

type(true+1)  返回 number

3.5 ECMA运算符

算术运算符

+ - * / % 和数学中的运算方法一致

-除了可以表示减号还可以表示负号 例如：x=-y

+除了可以表示加法运算还可以用于字符串的连接 例如："abc"+"def"="abcdef"

 逻辑运算符

等于==      不等于！=     >  >=    <    <=  

与（&&）  或（||）  非（！） （and or not ）一样

如果某个运算数不是原始的Boolean值，逻辑与运算返回的不一定是Boolean值（或运算类似）

•  如果某个运算数是 null，返回 null
• 如果某个运算数是 NaN，返回 NaN
• 如果某个运算数是 undefined，返回undefined

赋值运算符

= 赋值   ==判断是否相等 常见 if (x==1) {...}    ===判断是否相等(并且判断数据类型是否相等)

等性运算符 

• 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1
• 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字
• 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串
• 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字
• 值 null 和 undefined 相等
• 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true
• 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等

 关系运算符

比较运算符两侧是字符串，会先比较最高位的ASCII码，如果最高位相等，取下一位比较

比较运算符一侧是数字，一侧是其他类型，会将其他类型转换为数字类型

var bResult = "25" < "3";
alert(bResult); //输出 "true"

var bResult = "25" < 3;
alert(bResult); //输出 "false"

全等号和非全等号

等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换

3.5 控制语句

if语句

switch语句

switch比 else if结构更加清晰，效率更高

     switch只把表达式计算一次，然后与case的值比较，if else 每次判断条件都要加载一次

for语句 

 

doms=document.getElementsByTagName("p");
    for (var i in doms){
       console.log(i); // 0 1 2 length item namedItem
       //console.log(doms[i])
    }


//循环的是你获取的th一个DOM元素集，for in用来循环对象的所有属性，dom元素集包含了你上面输出的属性。

//如果你只要循环dom对象的话，可以用for循环:

    for (var i=0;i<doms.length;i++){
        console.log(i) ; // 0 1 2
        //console.log(doms[i])
    }

for i in 不推荐使用

while语句

3.7 异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

注：主动抛出异常 throw Error('xxxx')

四：ECMA对象

11种内置对象

Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object

 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的

4.1 String对象

获取字符串长度

var str1="String对象";
alert("str1长度 "+str1.length);

(1) —— 格式编排方法

书写格式:

String对象提供了一组针对HTML格式的方法，如x.anchor()返回锚定义字符串<a>x</a>，
x.bold()返回粗体表示字符串<b>x</b>，x.sup()返回上标格式字符串<sup>x</sup>。
-----------------------------------------

var x="yuan";
var y="x.italics():"+x.italics();
document.write(y.fontsize(10));
//<font size="10">x.italics():<i>yuan</i></font>

(2)——  大小写转换

var str1="AbcdEfgh"; 
var str2=str1.toLowerCase();
var str3=str1.toUpperCase();
alert(str2);
//结果为"abcdefgh"
alert(str3);
//结果为"ABCDEFGH"

(3) —— 获取指定字符

x.charAt(index)

x.charCodeAt(index)

使用注解

x代表字符串对象
index代表字符位置
index从0开始编号
charAt返回index位置的字符
charCodeAt返回index位置的Unicode编码
----------------------
var str1="welcome to the world of JS! 11";

var str2=str1.charAt(28);
var str3=str1.charCodeAt(28);
alert(str2);
//结果为"1"
alert(str3);
//结果为33489

(4)——  查询字符串

x.indexOf(findstr,index) #返回匹配的索引值
    #和Python中 "".index() "".find()类似 前者找不到报错 后者找不到返回-1
x.lastIndexOf(findstr)
//-------------------------------------
var str1="welcome to the world of JS!";
var str2=str1.indexOf("l");
var str3=str1.lastIndexOf("l");
alert(str2);
//结果为2
alert(str3);
//结果为18

//-------*********************************************************-------

x.match(regexp)   #返回所有匹配的内容，放到数组中，没有的话返回null
x.search(regexp)  #返回匹配结果的第一个的位置索引

//使用注解
//
//x代表字符串对象
//
//regexp代表正则表达式或字符串
//-------------------------------------
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]);
//结果为"world"
alert(str3);
//结果为15

(5) ——子字符串处理

截取子字符串

x.substr(start, length)

x.substring(start, end)

//使用注解
//
//x代表字符串对象
//
//start表示开始位置
//
//length表示截取长度
//
//end是结束位置加1
//
//第一个字符位置为0


var str1="abcdefgh";
var str2=str1.substr(2,4);
var str3=str1.substring(2,4);
alert(str2);
//结果为"cdef"
alert(str3);
//结果为"cd"

//-------*********************************************************-------
//x.slice(start, end)

var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);
alert(str2);
//结果为"cd"
alert(str3);
//结果为"efgh"
alert(str4);
//结果为"cdefg"
alert(str5);
//结果为"fg"

替换字符串

x.replace(regexp,tostr)

var str1="abcdefgh";
var str2=str1.replace("cd","aaa");  #返回匹配成功的整串
alert(str2);
//结果为"abaaaefgh"

分割字符串

var str1="一,二,三,四,五,六,日"; 

var strArray=str1.split(",");  #切割条件也可以是正则,取出所有的匹配结果，放到数组中

alert(strArray[1]);
//结果为"二"

连接字符串

//y=x.concat(addstr)
//
//使用注解
//
//x代表字符串对象
//addstr为添加字符串
//返回x+addstr字符串
    
var str1="abcd"; 
var str2=str1.concat("efgh");

alert(str2);
//结果为"abcdefgh"

4.2 Function对象

函数的定义

function 函数名 (参数){
函数体;
    return 返回值;
}

用Function类可以表示开发者定义的任何函数

var 函数名 =new Function ("参数1","参数n" ,"function_body");

function func1(){
    alert('hello yuan!');
    return 8
}
 
    ret=func1();
    alert(ret)
－－－－－－－－－－－－－－－－
 
var func1=new Function("name","alert(\"hello\"+name);")
func1("smalld")

注：JS的函数 加载与Python不同，是整体加载到内存才会执行，Python是加载一行，执行一行 所以执行函数放在函数声明上面或者下面都可以

<script>
    //f(); --->OK
    function f(){
        console.log("hello")
    }
    f() //----->OK
</script>

Function对象的length属性

ECMAScript 定义的属性 length 声明了函数期望的参数个数

alert(func1.length)

Function对象的方法

Function对象也有与所有对象共享的valueOf()方法和toString方法，返回的是函数的源代码，调试时有用

alert(void(fun1(1,2)))

void的作用：拦截方法的返回值

函数的调用 

只要函数名写对即可,参数怎么填都不报错

function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

//面试题
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

函数的内置对象arguments

function add(a,b){
        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]

    }
    add(1,2)

    ------------------arguments的用处1 ------------------
    function nxAdd(){
        var result=0;
        for (var num in arguments){
            result+=arguments[num]
        }
        alert(result)

    }

    nxAdd(1,2,3,4,5)

   ------------------arguments的用处2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

匿名函数

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

函数的作用域 

JavaScript与Python类似，if，while等控制语句并没与自己的作用域，而函数有自己的 

4.3 Array对象

创建数组对象

创建方式1:
var a=[1,2,3];

创建方式2:
new Array(size); size如果只有一个参数，代表元素的个数

 Array对象的属性

获取数组元素的个数：length

var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
cnweek[2]="星期二";
cnweek[3]="星期三";
cnweek[4]="星期四";
cnweek[5]="星期五";
cnweek[6]="星期六";
for (var i=0;i<cnweek.length;i++){
  document.write(cnweek[i]+" | ");
}

Array对象的方法 

（1）连接数组-join方法

x.join(bystr)
                #Python中用法：bystr.join(x)  所属的对象不一样 一个是Array 一个是Str
//x代表数组对象
//bystr作为连接数组中元素的字符串
//返回连接后的字符串
//与字符串的split功能刚好相反
    
var arr1=[1, 2, 3, 4, 5, 6, 7];

var str1=arr1.join("-");

alert(str1);
//结果为"1-2-3-4-5-6-7"

 （2）连接数组-concat方法

//x.concat(value,...)  #连接之后返回一个新的数组

var a = [1,2,3];
var a = new Array(1,2,3);
var b=a.concat(4,5) ;

alert(a.toString());
//返回结果为1,2,3
alert(b.toString());
//返回结果为1,2,3,4,5

 （3）数组排序-reverse sort

//x.reverse()  #逆序数组元素
//x.sort()  #排序 默认按照ascii码 小于10正常 大于10 加一个自定义函数的参数

var arr1=[32, 12, 111, 444];

arr1.reverse(); //颠倒数组元素
alert(arr1.toString());
//结果为444,111,12,32

arr1.sort();    //排序数组元素
alert(arr1.toString());
//结果为111,12,32,444


function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);

改进版：
function IntSort(a,b){
    return a-b;
}

（4）数组切片-slice

//x.slice(start, end)

//x代表数组对象
//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数，-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//结果为"c,d" 
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"

（5）删除子数组

x. splice(start, deleteCount, value, ...)

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略


var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
//a变为 [1,4,5,6,7,8]
alert(a.toString());
a.splice(1,1);
 //a变为[1,5,6,7,8]
alert(a.toString());
a.splice(1,0,2,3);
 //a变为[1,2,3,5,6,7,8]
alert(a.toString());

（6）数组的进出栈操作

//push pop 操作的是数组尾部   unshift shift操作的是数组头部
//栈 先进先出 后进先出 开口的瓶子
//队列 先进先出 后进后出 两端开口的瓶子


//x.push(value, ...)  压栈
//x.pop()             弹栈      
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"

unshift shift 
//x.unshift(value,...)
//x.shift()
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);
//结果为"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1);
//结果为"6,7,4,5,1,2,3"
arr1.shift();
alert(arr1);
//结果为"4,5,1,2,3"

（7）  js数组特性

java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.

js中的数组特性1: js中的数组可以装任意类型,没有任何限制.

js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.

var arr5 = ['abc',123,1.14,true,null,undefined)];
         arr5[10] = "hahaha";
         alert(arr5.length); //11
         alert(arr5[9]);// undefined */

 4.4 Date对象

创建Date对象

//方法1：不指定参数
var nowd1=new Date();

//方法2：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

 获取日期和时间

getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

 练习实例

function getCurrentDate(){
        //1. 创建Date对象
        var date = new Date(); //没有填入任何参数那么就是当前时间
        //2. 获得当前年份
        var year = date.getFullYear();
        //3. 获得当前月份 js中月份是从0到11.
        var month = date.getMonth()+1;
        //4. 获得当前日
        var day = date.getDate();
        //5. 获得当前小时
        var hour = date.getHours();
        //6. 获得当前分钟
        var min = date.getMinutes();
        //7. 获得当前秒
        var sec = date.getSeconds();
        //8. 获得当前星期
        var week = date.getDay(); //没有getWeek
        // 2014年06月18日 15:40:30 星期三
        return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" 
"+parseWeek(week);
    }

alert(getCurrentDate());

//解决 自动补齐成两位数字的方法
    function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }

}
//将数字 0~6 转换成 星期日到星期六
    function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

 设置日期和时间

//setDate(day_of_month)       设置日
//setMonth (month)            设置月
//setFullYear (year)          设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒

 日期和时间的转换

getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

4.5 RegExp对象

在表单验证时使用该对象验证用户填入的字符串是否符合规则

创建方式1 

    参数1 正则表达式  参数2 验证模式  g global / i 忽略大小写
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");

创建方式2

    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

方法
    test方法  ==>  测试一个字符串是否复合 正则规则. 返回值是true 和false.
    alert(reg2.test(str));// true

4.6 Math对象

Math是内置对象 , 与Global的不同之处是, 在调用时 需要打出 "Math."前缀

//练习：获取1-100的随机整数，包括0和100

var num=Math.random();
num=num*100;
num=Math.round(num);  #进行四舍五入
alert(num)

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)    返回角的正切。