JavaScript基础入门03

目录

1.条件语句

1.1if 语句

1.1.1基本语法格式

1.1.2练习案例

1.2三元表达式

1.3switch

2.循环语句

2.1while 循环

2.2continue

2.3break

2.4for 循环

3.数组

3.1创建数组

3.2获取数组元素

3.3新增数组元素

3.3.1. 通过修改 length 新增

3.3.2. 通过下标新增

3.3.3. 使用 push 进行追加元素

3.4删除数组中的元素

4.函数

4.1语法格式

4.2关于参数个数

4.3函数表达式

4.4作用域

4.5作用域链

5.对象

5.1基本概念

5.2. 使用 字面量 创建对象 [常用]

5.3. 使用 new Object 创建对象

5.4. 使用 构造函数 创建对象

5.5理解 new 关键字

---

1.条件语句

1.1if 语句

1.1.1基本语法格式

条件表达式为 true, 则执行 if 的 { } 中的代码

// 形式1
if (条件) {语句
}
// 形式2
if (条件) {语句1
} else {语句2
}
// 形式3
if (条件1) {语句1
} else if (条件2) {语句2 
} else if .... {语句...
} else {语句N
} 

1.1.2练习案例

代码示例1: 判定一个数字是奇数还是偶数

var num = 10;
if (num % 2 == 0) {console.log("num 是偶数");
} else {console.log("num 是奇数");
}

注意! 不能写成 num % 2 == 1 就是奇数. 负的奇数 % 2 结果可能是 -1.

代码示例2: 判定一个数字是正数还是负数

var num = 10;
if (num > 0) {console.log("num 是正数");
} else if (num < 0) {console.log("num 是负数");
} else {console.log("num 是 0");
}

代码示例3: 判定某一年份是否是闰年

if (year % 100 == 0) {// 判定世纪闰年if (year % 400 == 0) {console.log("是闰年");} else {console.log("不是闰年");}
} else {// 普通闰年if (year % 4 == 0) {console.log("是闰年");} else {console.log("不是闰年");}
}

1.2三元表达式

是 if else 的简化写法.

条件 ? 表达式1 : 表达式2

条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.
注意, 三元表达式的优先级是比较低的.

1.3switch

更适合多分支的场景.

switch (表达式) {case 值1:语句1;break;case 值2:语句2:break;default:语句N;
}

用户输入一个整数, 提示今天是星期几

var day = prompt("请输入今天星期几: ");
switch (parseInt(day)) {case 1:console.log("星期一");break;case 2:console.log("星期二");break;case 3:console.log("星期三");break;case 4:console.log("星期四");break;case 5:console.log("星期五");break;case 6:console.log("星期六");break;case 7:console.log("星期日");break;default:console.log("输入有误");
}

2.循环语句

重复执行某些语句

2.1while 循环

while (条件) {循环体;
}

执行过程:
        先执行条件语句
        条件为 true, 执行循环体代码.
        条件为 false, 直接结束循环

代码示例1: 打印 1 - 10

var num = 1;
while (num <= 10) {console.log(num);num++;
}

代码示例2: 计算 5 的阶乘

var result = 1;
var i = 1;
while (i <= 5) {result *= i;i++;
}
console.log(result)

2.2continue

结束这次循环
吃五个李子, 发现第三个李子里有一只虫子, 于是扔掉这个, 继续吃下一个李子.

var i = 1;
while (i <= 5) {if (i == 3) {i++;continue;}console.log("我在吃第" + i + "个李子");i++;
}

我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子

代码示例: 找到 100 - 200 中所有 3 的倍数

var num = 100;
while (num <= 200) {if (num % 3 != 0) {num++;  // 这里的 ++ 不要忘记! 否则会死循环.continue;}console.log("找到了 3 的倍数, 为:" + num);num++;
}

2.3break

结束整个循环
吃五个李子, 发现第三个李子里有半个虫子, 于是剩下的也不吃了.

var i = 1;
while (i <= 5) {if (i == 3) {break;}console.log("我在吃第" + i + "个李子");i++;
}

我在吃第1个李子
我在吃第2个李子

代码示例: 找到 100 - 200 中第一个 3 的倍数

var num = 100;
while (num <= 200) {if (num % 3 == 0) {console.log("找到了 3 的倍数, 为:" + num);break;}num++;
}
// 执行结果
找到了 3 的倍数, 为:102

2.4for 循环

for (表达式1; 表达式2; 表达式3) {
循环体
}

表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量.
执行过程:
        先执行表达式1, 初始化循环变量
        再执行表达式2, 判定循环条件
        如果条件为 false, 结束循环
        如果条件为 true, 则执行循环体代码.
        执行表达式3 更新循环变量

代码示例1: 打印 1 - 10 的数字

for (var num = 1; num <= 10; num++) {console.log(num);
}

代码示例2: 计算 5 的阶乘

var result = 0;
for (var i = 1; i <= 5; i++) {result *= i;
}
console.log("result = " + result);

3.数组

3.1创建数组

使用 new 关键字创建

// Array 的 A 要大写
var arr = new Array();

使用字面量方式创建 [常用]

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

注意: JS 的数组不要求元素是相同类型.
这一点和 C, C++, Java 等静态类型的语言差别很大. 但是 Python, PHP 等动态类型语言也是如此.

3.2获取数组元素

使用下标的方式访问数组元素(从 0 开始）

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = '小猫凯迪';
console.log(arr);

如果下标超出范围读取元素, 则结果为 undefined

console.log(arr[3]);  // undefined
console.log(arr[-1]);  // undefined

注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了.

相当于本来 arr 是一个数组, 重新赋值后变成字符串了.

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';

3.3新增数组元素

3.3.1. 通过修改 length 新增

相当于在末尾新增元素. 新增的元素默认值为 undefined

var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);

3.3.2. 通过下标新增

如果下标超出范围赋值元素, 则会给指定位置插入新元素

var arr = [];
arr[2] = 10;
console.log(arr)

此时这个数组的 [0] 和 [1] 都是 undefined

3.3.3. 使用 push 进行追加元素

代码示例: 给定一个数组, 把数组中的奇数放到一个 newArr 中.

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {if (arr[i] % 2 != 0) {newArr.push(arr[i]);}
}
console.log(newArr);

3.4删除数组中的元素

使用 splice 方法删除元素

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

目前咱们已经用到了数组中的一些属性和方法.
arr.length, length 使用的时候不带括号, 此时 length 就是一个普通的变量(称为成员变量, 也叫属
性)
arr.push(), arr.splice() 使用的时候带括号, 并且可以传参数, 此时是一个函数 (也叫做方法)

4.函数

4.1语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {函数体return 返回值;
}
// 函数调用
函数名(实参列表)      // 不考虑返回值
返回值 = 函数名(实参列表)  // 考虑返回值

函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次.

function hello() {console.log("hello");
}
// 如果不调用函数, 则没有执行打印语句
hello();

调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察.
函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

// 调用函数
hello();
// 定义函数
function hello() {console.log("hello");
}

4.2关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配
1) 如果实参个数比形参个数多, 则多出的参数不参与函数运算

sum(10, 20, 30);   // 30

2) 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined

sum(10);   // NaN, 相当于 num2 为 undefined.

JS 的函数传参比较灵活, 这一点和其他语言差别较大. 事实上这种灵活性往往不是好事.

4.3函数表达式

另外一种函数的定义方式

var add = function() {
var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}
console.log(add(10, 20));       // 30
console.log(add(1, 2, 3, 4));     // 10
console.log(typeof add);       // function

此时形如 function() { } 这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示.
后面就可以通过这个 add 变量来调用函数了.
JS 中函数是一等公民, 可以用变量保存, 也可以作为其他函数的参数或者返回值.

4.4作用域

某个标识符名字在代码中的有效范围.
在 ES6 标准之前, 作用域主要分成两个
全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.
局部作用域/函数作用域: 在函数内部生效.

// 全局变量
var num = 10;
console.log(num);
function test() {// 局部变量var num = 20;console.log(num);
}
function test2() {// 局部变量var num = 30;console.log(num);
}
test();
test2();
console.log(num);
// 执行结果
10
20
30
10

创建变量时如果不写 var, 则得到一个全局变量.

function test() {
num = 100;
}
test();
console.log(num);
// 执行结果
100

另外, 很多语言的局部变量作用域是按照代码块(大括号)来划分的, JS 在 ES6 之前不是这样的.

if (1 < 2) {
var a = 10;
}
console.log(a);

4.5作用域链

背景:
函数可以定义在函数内部
内层函数可以访问外层函数的局部变量.
内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

var num = 1;
function test1() {var num = 10;function test2() {var num = 20;console.log(num);}test2();
}
test1();
// 执行结果
20

执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找. 如果还没找到, 就去全局作用域查找.

5.对象

5.1基本概念

对象是指一个具体的事物.
        "电脑" 不是对象, 而是一个泛指的类别. 而 "我的联想笔记本" 就是一个对象.
在 JS 中, 字符串, 数值, 数组, 函数都是对象.
每个对象中包含若干的属性和方法.
        属性: 事物的特征.
        方法: 事物的行为.
        例如, 你有一个女票.
        她的身高体重三围这些都是属性.
        她的唱歌, 跳舞, 暖床都是方法.

5.2. 使用 字面量 创建对象 [常用]

使用 { } 创建对象

var a = {};  // 创建了一个空的对象
var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};

使用 { } 创建对象
属性和方法使用键值对的形式来组织.
键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无
键和值之间使用 : 分割.
方法的值是一个匿名函数

使用对象的属性和方法:

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();

5.3. 使用 new Object 创建对象

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

注意, 使用 { } 创建的对象也可以随时使用 student.name = "蔡徐坤"; 这样的方式来新增属性.

5.4. 使用 构造函数 创建对象

前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.
例如: 创建几个猫咪对象

var mimi = {name: "咪咪",type: "中华田园喵",miao: function () {console.log("喵");}
};
var xiaohei = {name: "小黑",type: "波斯喵",miao: function () {console.log("猫呜");}
}
var ciqiu = {name: "刺球",type: "金渐层",miao: function () {console.log("咕噜噜");}
}

此时写起来就比较麻烦. 使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程.

基本语法

function 构造函数名(形参) {this.属性 = 值;this.方法 = function...
}var obj = new 构造函数名(实参);

注意:
        在构造函数内部使用 this 关键字来表示当前正在构建的对象.
        构造函数的函数名首字母一般是大写的.
        构造函数的函数名可以是名词.
        构造函数不需要 return
        创建对象的时候必须使用 new 关键字.

使用构造函数重新创建猫咪对象

function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound); // 别忘了作用域的链式访问规则}
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

5.5理解 new 关键字

new 的执行过程:
1. 先在内存中创建一个空的对象 { }
2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
3. 执行构造函数的代码, 给对象创建属性和方法
4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了