前端开发之JavaScript基础篇二
主要内容：
1、流程控制条件语句和switch语句
2、for循环和while循环
3、Break语句和Continue语句
4、数组和数组常用方法
5、函数
6、对象
一、流程控制条件语句和switch语句
1、条件语句（用于基于不同的条件来执行不同的动作）
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
（1）if语句
只有当指定条件为 true 时，该语句才会执行代码。
语法如下：
if (condition)
{
当条件为 true 时执行的代码
}
注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
实例：
// 当年龄小于18岁时，禁止入内！
if(age<18)
{
alert("你未满18周岁，不得入内！");
}
（2）if...else 语句
使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法：
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
实例：
//当年龄小于18岁时，打印“禁止入内！”，否则，打印“允许入内！”
if(age<18)
{
alert("禁止入内！");
}
else
{
alert("允许入内！");
}
（3）if...else if...else语句
使用if...else if...else语句来选择多个代码块之一来执行。
语法：
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
实例：
// 如果年龄小于18岁，打印“未成年人！”；年龄大于18，小于40岁，打印“青年人！”；否则打印“中老年人！”
if(age<18)
{
document.write("<b>未成年人！</b>")
}
else if(age>=18 && age<=40)
{
document.write("<b>青年人！</b>");
}
else
{
document.write("<b>中老年人！</b>");
}
2、switch语句（switch 语句用于基于不同的条件来执行不同的动作）
使用 switch 语句来选择要执行的多个代码块之一。
语法：
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 执行与case 1和case 2 不同时的代码 }
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。
注意记得使用 break 来阻止代码自动地向下一个 case 运行。
实例：
//显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：
var d=new Date().getDay();
switch (d)
{
case 1:document.write（"今天是星期一" ）;
break;
case 2:document.write（"今天是星期二" ）;
break;
case 3:document.write（"今天是星期三" ）;
break;
case 4:document.write（"今天是星期四" ）;
break;
case 5:document.write（"今天是星期五" ）;;
break;
default:
document.write("哈哈！今天是周末(＾－＾)")
}
default关键词（ default 关键词来规定匹配不存在时做的事情）
实例：
//如果今天不是星期六或星期日，则会输出默认的消息：
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
几种特殊情况：
（1）当两种情况相同时，switch 语句的使用，当两种情况相同时，可以只在第二种情况中写要执行的代码。
案例如下：
//测试 switch语句，当 两种情况相同时，比如下面的10或者11，都会走 alert("10或者11") 这里
function testSwich() {
var number = document.getElementById("test").value;
number=parseInt(number);
switch (number){
case 1: alert(1);
break;
case 10:
case 11:alert("10或者11"); //number = 10 或者 = 11执行相同的操作
break;
default :alert("既不是1，10，11");
}
}
（2）忘记写 break 时的情况。当忘记写 break 时，代码将会执行后面所有 case 分支里面的代码，前面的 case 会跳过。
案例如下：
// 测试不使用break跳出循环
function testSwichNotBreak() {
var number = document.getElementById("test").value;
number=parseInt(number);
switch (number){
case 1: document.write(number);
case 2: document.write(number)
case 3:document.write(number);
case 4:document.write(number);
case 5:document.write(number);
default :document.write(number);
}
}
二、for循环和while循环
1、while循环（在指定条件为真时循环执行代码块）
while循环执行的流程分三个步骤：
（1）初始化循环变量
（2）判断循环条件
（3）更新循环变量
语法：
while(条件)
{
需要执行的代码
}
实例：
var a = 1;
while(a<=9)
{
if(a%3==0)
{
console.log(a);
}
}
2、do...while循环
do/while 循环是 while 循环的变体。在检查条件是否为真之前，该循环会执行一次代码块；然后如果条件为真的话，就会重复这个循环。
语法：
do {
需要执行的代码
}while(条件)；
实例：
var i = 2；
do{
console.log(i);
}while(i<2);
// 输出 2
3、for循环（可以将代码块执行指定的次数）
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
比如你想输出大于0，小于7的数：
// 如果不用循环的话 console.log(1); console.log(2); console.log(3); console.log(4); console.log(5);
console.log(6)
// 使用for循环的话
for(var i = 1;i<7;i++)
{
console.log(i);
}
for循环的语法
for(语句1；语句2;语句3)
{
被执行的代码块
}
// 语句 1 在循环（代码块）开始前执行
// 语句 2 定义运行循环（代码块）的条件
// 语句 3 在循环（代码块）已被执行之后执行
实例：
// 求出1到100以内的奇数
for(var i=1;i<100;i++)
{
if(i%3==0)
{
console.log(i);
}
}
练习1：输出正立的等边三角形
//打印正立的等边三角形
for( var n=1;n<=5;n++) // 行数
{
for( var i=5-n+1;i>=0;i--) // 空格
{
document.write(" ");
}
for( var j=1;j<2*n;j++) // 打印“*”号
{
document.write("*");
}
document.write("<br>"); // 换行
}
练习2：输出倒立的等边的三角形
// 方法一：
for(k=5;k>0;k--) // 行数
{
for(i=0;i<5-k;i++) // 空格
{
document.write(" ");
}
for(j=2*k-1;j>0;j--)
{
document.write("#"); // 打印“*”号
}
document.write("<br>"); // 换行
}
// 方法二：
for(var n=0;n<5;n++) // 行数
{
for(var i=0;i<n;i++) // 空格
{
document.write(" ");
}
for(var j=9-n;j>n;j--) // 打印“*”号
{
document.write("*");
}
document.write("<br>"); // 换行
}
三、Break语句和Continue语句
break 语句用于跳出循环。
continue 用于跳出循环后，会继续执行该循环之后的代码（如果有的话。）
1、Break语句
实例：
for (i=0;i<10;i++)
{
if (i===3)
{
break;
}
document.write("The number is " + i + "<br>");
}
// 输出：
The number is 0
The number is 1
The number is 2
2、Continue语句
实例：
for (i=0;i<10;i++)
{
if (i===3)
{
continue;
}
document.write("The number is " + i + "<br>");
}
// 输出：
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
3、javaScript标签（对 JavaScript 语句进行标记）
如需标记JavaScript语句，请在语句之前加上冒号，如下所示：
label:
statements
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法如下：
break labelname;
continue labelname;
注意：
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
默认标签的情况（除了默认标签情况，其他时候必须要有名标签，否则会有惊喜）
当 break 和 continue 同时用于循环时，没有加标签，此时默认标签为当前"循环"的代码块。
当 break 用于 switch 时，默认标签为当前的 switch 代码块:
有名标签的实例：
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "");
document.write(cars[1] + "");
document.write(cars[2] + "");
break list;
document.write(cars[3] + "");
document.write(cars[4] + "");
document.write(cars[5] + "");
}
上述break list;会跳出list的代码块。如果将break换成continue会有惊喜，违反了明确中的第二点，因为list只是个普通代码块，而不是循环。
除非list写成如下形式 list:
for(var i=0; i<10; ++i)
{
continue list;
}
有了标签，可以使用break和continue在多层循环的时候控制外层循环。
例如下面：
outerloop:
for (var i = 0; i < 10; i++)
{
innerloop:
for (var j = 0; j < 10; j++)
{
if (j > 3)
{
break;
}
if (i == 2)
{
break innerloop;
}
if (i == 4)
{
break outerloop;
}
document.write("i=" + i + "   j=" + j + "");
document.write("<br><br>");
}
}
四、数组和数组常用方法
类似python中的列表，js中数组如同一个容器，用来装东西。
1、数组的创建方式
（1）字面量方式创建（推荐方式）
var colors = ['red','color','yellow'];
console.log(colors);
创建空数组
var emptyArray = [];
（2）使用构造函数的方式创建，使用new关键字对构造函数进行创建
var colors2 = new Array();
var colors3 = new Array("red","green","blue");
console.log(colors2,colors3);
2、数组赋值
var arr = [] ;
arr[0] = 666;
arr[1] = "hello";
arr[2] = "world";
arr[3] = "China";
console.log(arr[1]);
//通过下标取到相对应的值
console.log[arr[2]]
console.log(arr.length); // 4
3、数组的遍历
for(i=0;i<=arr.length;i++)
{
console.log(arr[i]);
}
4、数组的常用方法
（1）数组的合并
var first = ['hello','everyone'];
var last = ['I','am','congcong'];
var FullStr = first.concat(last);
console.log(FullStr);
// 输出：
['hello','everyone','I','am','congcong']
（2）将数组转成字符串
var score = [66,67,68,69,70];
console.log(score);
（3）toString()直接转换为字符串，每个元素之间用逗号隔开
var str = score.toString();
console.log(score);
（4）join() 方法，将数组中的元素使用指定字符串（默认是逗号），连接起来，它会形成一个新的字符串。
var arr = score.join("-");
console.log(arr);
（5）查找下标
第一种：indexOf（） 正向查找
var index = score.indexOf(66);
console.log(index); // 0 (索引从0开始)
var index2 = score.indexOf(9);
console.log(index2); // -1,如果查找的数值不存在，返回-1
第二种：lastIndexOf() 反向查找（得到的结果仍然是从左之右的顺序）
var lastIndex = score.lastIndexOf(66);
console.log(lastIndex); // 0
（6）数组排序
var names = ['frank','alen','blank','alm'];
// reverse() 反转数组（将原数组里的元素位置倒置）
var reverseName = names.reverse();
console.log(reverseNames); // ["alm", "blank", "alen", "frank"]
console.log(names); // ["alm", "blank", "alen", "frank"]----> 特别注意：反转后，原来的数组也会被改变
// sort() 按照26个字母排序
var sortNames = names.sort();
console.log(sortNames); // ["alen", "alm", "blank", "frank"]
（7）从开头移除元素（ shift() ）和添加元素（unshift() ）
// shift() 移除我们的第一个元素，返回的结果是移除的第一个元素
特别注意：原来数组中的第一个元素也会被移除。
firstName = sortNames.shift();
console.log(firstName); // alen
console.log(sortNames); // ["alm", "blank", "frank"]
// unshift() 向数组开头添加一个或多个元素，并返回新的长度
var newNames = name.unshift("cc");
console.log(names,newNames); // ["cc", "alm", "blank", "frank"] 4
var newNames2 = names.unshift('hello','everybody');
console.log(names,newNames2); // ["hello", "everybody", "cc", "alm", "blank", "frank"] 6
（8）push()、pop()
// push() 向数组的末尾添加一个或多个元素，并返回新的长度
var lastNames = names.push('baby');
console.log(names,lastNames); ["hello", "everybody", "cc", "alm", "blank", "frank", "baby"]
var lastName2 = names.push('I','comeback');
console.log(names,lastName2) // ["hello", "everybody", "cc", "alm", "blank", "frank", "byby", "I", "comeback"] 9
// pop() 从数组的末尾删除一个元素
var popName= names.pop(); // popName表示被删除的元素
console.log(popName); // comeback
console.log(names.pop(),popName) // I（pop()删除数组的最后一个元素） comeback
小练习：反转字符串
例如输入 “there is a will,there is well” ，
输出“well is will,there a is there”。
解答：
var str = 'there is a will,there is well';
console.log(str.split(' ').reverse().join(' ')); // well is will,there a is there
五、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1、JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
执行代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
2、在javascript中，函数是一等公民，函数在JavaScript中是一个数据类型，而非像c#中或其他描述性语言那样仅仅作为一个模块来使用。
javaScript的函数声明，有声明，就一定有调用。
主要有下几种形式：
（1）函数声明不带参数
function add() {
alert('函数被调用了额！');
alert(this) // 当前的this指向了windows
}
add(); // 函数执行
或者 var add = function(){
alert('函数被调用了的');
}
（2）函数声明带参数
function add2(a,b) {
alert(a+b);
}
add2(3,4);
（3）函数声明带参数并且有返回值
function add3(a,b) {
return a+b;
}
var sum = add3(6,9);
alert(sum);
六、对象
1、JavaScript 对象是拥有属性和方法的数据。
例如：真实生活中，一辆汽车是一个对象。
汽车这个对象有它的属性，如重量和颜色等，方法有启动停止等:
所有汽车都有这些属性，但是每款车的属性都不尽相同。
2、在 JavaScript中，几乎所有的事物都是对象。
对象也是一个变量，但对象可以包含多个值（多个变量）
比如：
var car = {type:"Fiat", model:500, color:"white"};
在以上实例中，3 个变量 (type, model, color) 赋予变量 car；3 个值 ("Fiat", 500, "white") 赋予变量 car。
注意：定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的：
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
3、对象属性
（1）关于对象属性的几点理解：
可以说 "JavaScript 对象是变量的容器"。
但是，我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。
所以我们可以说JavaScript对象是属性变量的容器。
对象键值对的写法类似于：Python中的字典，C语言的哈希表，Java中的哈希映射。
（2）访问对象属性
有两种方式访问对象属性,即使用 .property或者["property"]
第一种：
person.lastName;
第二种：
person["lastName"];
完整案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "Jack",
lastName : "France",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"]+ " " + person.lastName;
</script>
</body>
</html>
（3）对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
访问person对象的fullName方法，实例如下：
name = person.fullName(); // 必须加()，否则返回的只是返回定义函数的字符串，而函数并不执行
完整实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
（4）访问对象方法
创建对象方法：
methodName : function() { code lines }
使用以下语法访问对象方法：
objectName.methodName()
注意：fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。
