JavaScript
-
- 一、JavaScript基础
-
- [1. JavaScript入门](#1. JavaScript入门)
- [2. 语句](#2. 语句)
- [3. 数据类型](#3. 数据类型)
- [4. 函数](#4. 函数)
- [5. 对象](#5. 对象)
- [6. 数组](#6. 数组)
一、JavaScript基础
1. JavaScript入门
html
<script> </script>
<script type="text/javascript" src="xxx.js"> </script>
javascript
//单行注释
/* 多行注释
Uniconde字符集
大小写敏感
驼峰命名法
代码格式化：js一般会忽略分隔符，如空格符、制表符和换行符
标签：由一个合法字符加一个冒号组成，标签可以放在任意行的起始位置。结构体中使用break、continue等语句跳出循环结构
关键字:JavaScript默认定义具有特殊含义的词汇，如指令名、语句名、函数名、方法名、对象名、属性名。
保留字:预留以后作为关键字使用
*/- 对象
javascript
// 使用点号可以引用对象的属性和方法，在调用对象方法时应在函数名称后面补加小括号。
var me = {
name:"张三",
say:function() {
return "Hi, world!";
}
}
document.write("<h1>" + me.name + " : " + me.say() + "</h1>");- 数组
javascript
var me = [
"Charlie",
function(){
return "Hi,world!";
}
]
document.write("<h1>" + me[0] + " : " + me[1]() + "</h1>");- 全局变量和局部变量（私有变量）
javascript
// 全局变量：在整个页面中可见，并在页面中任何位置允许访问。【在域外，或者域内不使用var定义】
// 局部变量：只能在指定函数中可见，函数外面是不可见的，也不允许访问。【使用var关键字声明的变量就是私有变量】- 表达式
javascript
// 表达式是指可以运算，且必须返回一个确定的值的句子。表达式一般由常量、变量、运算符、子表达式构成
// 运算符：连接表达式的符号2. 语句
语句就是JavaScript指令，通过这些指令可以设计程序的逻辑执行顺序
- 表达式语句和语句块
javascript
// 如果在表达式的尾部添加一个分号就会形成一个表达式语句，默认独立一行的表达式也是一个表达式语句，解析时会自动补加分号。
var a,b,c; //表达式语句
{ // 语句块
a=b=c=1
a = b + c
}- 条件语句
javascript
// 程序的基本逻辑结构包括3种：顺序、选择和循环。大部分控制语句属于顺序结构，而条件语句则属于选择结构。主要包括if语句和switch语句两种
// if 语句
if (condition)
statements1
else
statements2
// switch语句
switch (expression) {
case label1 :
statement1;
break;
case label2 :
statement2;
break;
...
default : statementn;- 循环语句
javascript
// 循环语句就是能够重复相同操作的语句：while 、 for
// while 语句
while (condition) {
statements
}
// while语句特殊变体
do
statement
while (condition);
// for 语句
for ([initial-expression;] [condition;] [increment-expression]) {
statements
}
// for语句特殊形式
for (variable in object) {
statements
}- 跳转语句
javascript
// 跳转语句能够从所在的分支、循环或从函数调用返回的语句跳出 : break 、 continue 、 return
// break语句 : 退出循环或者switch语句
break;
// continue语句 : 重新执行循环语句
continue;
// return语句 : 指定函数的返回值，只能够用在函数或者闭包重。
return [expression]- 异常处理语句
javascript
// 抛出(throw)异常，捕捉(catch)异常。 try、catch、finally
try { // 执行语句
CreateException();
}
catch(ex) { // 捕捉异常
alert(ex.number + "/n" + ex.description);
}
finally { // 最后必须执行的语句
alert("end");
}- var语句和function语句
javascript
// var : 声明一个或多个变量，也可以在声明变量时进行初始化。默认状态下，初始值为underfined
// function : 定义函数
function [name]([param][,param][...,param]) {
statements
}- with语句和空语句
javascript
// with语句能够为一组语句创建缺省的对象 (能够破坏变量的作用域链，一般不建议使用)
with (object) {
statements
}
// 示例
<div id="box"></div>
<script>
document.getElementById("box").style.borderColor="red";
document.getElementById("box").style.borderWidth="1px";
document.getElementById("box").style.borderStyle="solid";
document.getElementById("box").style.width="400px";
document.getElementById("box").style.height="200px";
</script>
// 使用with语句简化 :
<div id="box"></div>
<script>
with(document.getElementById("box").style){
borderColor="red";
borderWidth="1px";
borderStyle="solid";
width="400px";
height="200px";
}
</script>
// 空语句就是只有一个独立的分号，作用是创建一个主体为空的条件或循环，如：
while(true) {
;
}3. 数据类型
js中数据存在两种存储方式，一种直接存储数据，称为值类型数据；另一种存储数据的空间地址来间接保存数据，称为引用型数据
- 基本数据类型 ： 数值、字符串、布尔型
- 特殊类型 ： null、undefined
- 引用数据类型 ： 数组、对象、函数
4. 函数
- 定义函数
javascript
// 定义函数方法有两种：function语句声明函数；Function对象构造函数
//function定义函数方式一 ： 命名函数(声明式函数)
function f() {
// 函数体
}
// function定义函数方式二 ： 匿名函数(引用式函数/函数表达式)
var f = function() {
// 函数体
}
// Function对象构造函数(仅用于特定的动态环境中，一般不建议使用)
var function_name = new Function(arg1,arg2,...,argN,function_body)- 调用函数
javascript
function f() {
return "Hello World! "; // 设置函数返回值
}
document.write(f()); // 调用函数，并输出返回值
// 一个函数可以包含多个return函数，但是调用函数时只有第一个return语句被执行，且该语句后面的表达式的值被作为函数的返回值被返回，return语句后面的代码将被忽略掉
// 函数的返回值没有类型限制，可以返回任意类型的值- 函数参数
javascript
//参数：形参、实参。形参：定义函数时传递给函数的参数，形式上参数；实参：函数被调用时传递给函数的参数。
function add(a,b) { //形参a和b
return a+b;
}
alert(add(23,34)); //实参23,34
// arguments.length可以获取实参个数- 函数应用
javascript
// 在实际开发中函数常被当作表达式来处理，用户可以把函数视为一个值赋给变量，或者作为一个参数传递给另一个函数- 闭包函数
javascript
// 闭包函数就是外部函数被调用后，它的变量不会消失，仍然被内部函数所使用，而且所有的内容部函数都拥有对外部函数的访问权限。5. 对象
对象(Object)是面向对象编程的核心概念，它是已经命名的数据集合，也是一种更复杂的数据结构。
- 创建对象
javascript
// 在js中，对象是由new运算符生成，生成对象的函数被称为类(或称构造函数、对象类型)，生成的对象被称为类的实例，简称为对象
var o = new Object(); // 构造原型函数
var date = new Date(); // 构造日期对象
var ptn = new RegExp("ab+c","i"); // 构造正则表达式对象
var xxx = { // 定义对象直接量
name : value, // 属性、值
name1 : value1,
......
}- 访问对象
javascript
// 可以通过点号运算符(.)来访问对象的属性
// 也可以使用集合运算符([])来访问对象的属性，此时可以使用字符串下标来表示属性。6. 数组
对象是无序的数据集合，而数组(Array)是一组有序数据集合，他们之间可以相互转换，但是数组拥有大量方法，适合完成一些复杂的运算。
- 定义数组
javascript
// 定义数组通过构造函数Array()和运算符new来实现
// 1. 定义空数组
var a = new Array();
// 2. 定义带有参数的数组
var a = new Array(1,2,3,"4","5");
// 3. 定义指定长度的数组
var a = new Array(6);
var a = Array(6);
// 4. 定义数组直接量
var a = [1,2,3,"4","5"];- 存取元素
javascript
// 使用[]运算符可以存取数组元素的值，
var str = ""; //声明临时变量
var a = [1,2,3,4,5]; //定义数组
for(var i = 0 ; i < a.length; i++) { //遍历数组，把数组元素串连成一个字符串
str += a[i] + "-";
}
document.write(a + "<br />"); //读取数组的值
document.write(str); //显示串连的字符串
// 数组的大小不是固定的，可以动态增加或删除数组元素
// 通过改变数组的length属性来改变
// 使用push()和pop()方法来操作数组
var a = [];
a.push(1,2,3); //得到a[1,2,3]
a.push(4,5); //得到a[1,2,3,4,5]
a.pop(); //得到a[1,2,3,4]
// 使用unshift()和shift()方法
var a = [];
a.unshift(1,2,3); //得到a[1,2,3]
a.unshift(4,5); //得到a[4,5,1,2,3]
a.shift(); //得到a[5,1,2,3]
// 使用splice()方法 : 通用删除和插入元素的方法，可以在数组指定的位置开始删除或插入元素
// splice(插入的起始位置，要删除元素的个数，插入的具体元素)
var a = [1,2,3,4,5,6];
var b = a.splice(2,2);
document.write(a + "<br />"); //输出[1,2,5,6]
document.write(b); //输出[3，4]
var a = [1,2,3,4,5,6];
var b = a.splice(2,2,7,8,9);
document.write(a + "<br />"); //输出[1,2,7,8,9,5,6]
document.write(b); //输出[3，4]- 数组应用
javascript
// 利用数组对象包含的众多方法，可以对数组进行更加复杂的操作
// 数组与字符串转换:join()/split()
// 数组排序 : reverse()/sort()
// 连接数组 : concat()
// 截取子元素 : slice()