Javascript基础整理

一、简述

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

特点

字符集：JavaScript程序是用Unicode字符集。

大小写敏感：JavaScript区分大小写。

分号可选：语句处于不同行，可以不使用分号

注释：

  //   单行注释

  /*   */   多行注释

标识符：不能以数字开头

二、数据类型和值

JavaScript 中的数据类型包括基本数据类型和对象数据类型。

基本数据类型：数字，文本字符串，布尔值

对象：数组，函数，对象类...

其他：

null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。

 

1、数字

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

十六进制 '0X'或者'0x'开头，八进制是以'0'开头

浮点表示  [digits][.digits][(E|e)[(+|-)]digits]

特殊值：NaN，非数字，使用 isNaN(num) 来判断；Infinity，无穷大，使用 isFinite(num) 来判断。

//使用下面两个函数将目标值转换成数字或者浮点数
parseInt(..)    将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

Math对象：其中包括了许多算术用的函数，如Math.sin(x)，一般运算都可以在其中找到对应的函数。

 

2、 字符串

由单引号或者双引号扩起来。

字符串常用的操作函数如下：

obj.length                           长度
obj.trim()                           移除空白
obj.trimLeft()                      移除左侧空白
obj.trimRight)                     移除右侧空白
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项

 

字符串序列化方法：

JSON.stringify(obj)   序列化
JSON.parse(str)        反序列化

 

3、 布尔类型

true/false两种值。

4、数组

数组通过Array()和new来创建，数组第一个元素下标是0。

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

因为数组的元素也可以是数组，所以可以实现多维数组。

concat()     连接两个或更多的数组，并返回结果。
join()     把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()     删除并返回数组的最后一个元素
push()     向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()     颠倒数组中元素的顺序。
shift()     删除并返回数组的第一个元素
slice()     从某个已有的数组返回选定的元素
sort()     对数组的元素进行排序
splice()     删除元素，并向数组添加新元素。
toSource()     返回该对象的源代码。
toString()     把数组转换为字符串，并返回结果。
toLocaleString()     把数组转换为本地数组，并返回结果。
unshift()     向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()     返回数组对象的原始值

 

三、变量

JavaScript中的变量是无类型的，变量使用之前必须要用var来申明。

另外需要注意的是变量的作用域。

<script type="text/javascript">
 
    // 全局变量
    v1 = 'global_v';
 
    function func(){
        // 局部变量
        var age = 18;
 
        // 全局变量
        gender = "男"
    }
</script>

四、函数

1 定义和调用

使用function来定义函数，如下

// 普通方式
    function func(arg){
        return true;
    }
          
// 赋值给变量
    var func = function(arg){
        statements;
    }
  
// 自执行函数
    (function(arg){
        statements;
    })('123')

函数中不使用return的话，返回undefined

2 函数的属性和方法

 

五、语句

1 if语句

//version1

if (expression)
    statement

//version2

if (expression)
{
    statement
}

//version3
if (expression)
    statement1
else
    statement2

//使用else if
if (expression)
    statement1
else if (expression)
    statement2
...
else
    statementn

2 switch语句

switch(expression){
    statements  
}

// 具体的
switch(n) {
    case1:
        //执行代码块#1
        break;
    case2:
        //执行代码块#2
        break;
    case3:
        //执行代码块#3
        break;
    default:
         //执行代码块#4
        break;  
}

// 注意，default部分需要放在最后面

3 while语句

while(expression)
    statement

// do ... while的方式
do 
    statement
while (expression);

4 for 语句

for (initialize; test; increment)
    statement

// for/in 的形式
for (variable in object)
    statement

5 异常

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

小结

for/in	for (variable in object)    statement	遍历一个对象的属性
function	function funcname(arg1[...,argn]) {      statements }	声明函数
if/else	if(expression)      statement1 [else statement2]	有条件的执行代码
label	identifier: statement	给statement指定1个identifier
return	return [expression];
switch	switch (expression) {     statements }
throw	throw expression;	抛出一个异常
try	try{}catch(){}finally{}	捕获一个异常
var	var name_1 [= value_1][...,name_n [= value_n]];	声明或者初始化变量
while	while(expression){}
with	with(object){ statement}	扩展作用链

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 六、正则表达式

 在JavaScript中，正则表达式由RegExp对象表示。

1、创建RegExp对象

可以使用特殊的直接量语法来创建：

var pattern = /^Java\w*/gm;

也可以使用RegExp()来创建：

var pattern = new RegExp("^Java\w*/gm");

2、字符类

[...]	匹配位于括号内的任意字符
[^...]	匹配不位于括号内的任意字符
.	匹配除换行符和其他Unicode行终止符之外的任意字符
\w	等价于[a-zA-Z0-9]
\W	等价于[^a-zA-Z0-9]
\s	任何Unicode空白符
\S	任何非Unicode空白符
\d	等价于[0-9]
\D	等价于[^0-9]
[\b]	退格直接量

 

 

 

 

 

 

 

 

 

 

 

3、重复

{n,m}	匹配前一项至少n次，不超过m次
{n,}	匹配前一项至少n次
{n}	匹配前一项n次
?	匹配前一项0次或1次
+	匹配前一项1次或多次
*	匹配前一项0次或多次

 

 

 

 

 

 

 

4、非贪婪的匹配

在重复字符后加问号即可，比如：

字符串"aaa"

/a+/：匹配结果aaa，默认的贪婪方式

/a+?/:匹配结果a

5、标志

位于第二个/(斜杠)之后，含义如下：

/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配

6、匹配方法

1 test(string)     检查字符串中是否和正则匹配

n = 'aaa'
reg1 = /\d+/
reg2 = /\w+/
reg1.test(n)  ---> false
reg2.test(n)  ---> true

2 exec(string)    获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

3 obj.search(regexp)                   获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
4 obj.match(regexp)                    获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
5 obj.replace(regexp, replacement)     替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项

 

七、在HTML中位置

Javascript 可以以代码段的形式放置在HTML文件中，也可以存储为单独的js文件，在HTML文件中引用。

<!-- 代码段 -->
<script type"text/javascript">
    Js代码内容
</script>

<!-- 引用外部JS文件一 -->
<script type"text/javascript" src="JS文件"></script>
  

可以看到在HTML中，JavaScript的内容是在标签<script></script>内部的。

<script>可以放置在：

1 HTML的head中
2 HTML的body代码块底部

 

八、DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。

1、HTML DOM 树

 

未完待续...