JavaScript基础入门03

// 形式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 代劳了