【前端】JavaScript —— JS的基本语法之数组, 函数....

JavaEE

【前端】CSS(3) —— CSS的盒模型与弹性布局

【前端】JavaScript —— JS的组成与基本语法

---

---

条件语句

if 语句

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

// 形式1
if (条件) {
    语句
}

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

// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

三元表达式

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

条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.

注意, 三元表达式的优先级是比较低的

---

switch

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N; 
}
1
2
3
4
5
6
7
8
9
10

---

循环语句

while 循环

while (条件) {
    循环体; 
}
1
2
3

---

for 循环

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

---

数组

创建数组

使用 new 关键字创建

//这样可以成功的创建出一个空的数组, 但是一般不会这么写
let arr = new Array();
1
2

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

//更简单的写法, [ ] 就表示一个空的数组
let arr = [];
//也可以在创建数组的时候, 同时指定初始值
var arr2 = [1, 2, 'haha', false];
1
2
3
4

• 和 java 不同, js 的数组长度是可以动态变化的, js 的数组更接近于 Java 的 ArrayList
• js 的数组允许里面存在不同类型的元素 (也是要归咎于动态类型,其他的动态类型的语言, 也都是类似的设定)

---

访问数组元素

访问数组元素, 通过取下标的方式来进行操作, 从下标 0 开始计数

获取数组长度

arr.length
1

使用下标的时候, 最典型的场景就是, 下标访问越界. (在 Java 中下标访问越界, 就会抛出 ArrayIndexOutOfRangeException 异常)

但 JS 中没有这个问题.

let arr = ['小Gujiu', '中GuJiu', '大GUJIU'];
console.log(arr[3]);
//输出 undefined
1
2
3

为什么会这样呢 ? 因为 我们实际上是在 arr[3] 处新增了一个数组元素.

如果我们直接给 arr[3] 赋值

虽然数组上本来没有下标为 3 的位置, 但是这个操作就会触发一个插入的行为, 就把新元素放到了对应下标的位置上了

整体就变成了长度为 4 的数组

如果我们进行 arr[100] = ’ ’ 的赋值操作, 就会把下标为 100 的元素给插入进去, 整个数组长度变成了 101, 中间部分都是 undefined

我们不仅仅可以使用常规下标, 我们看下面这个例子:

let arr = ['小Gujiu', '中GuJiu', '大GUJIU'];
arr[-1] = '迷你gujiu';
arr['gujiu'] = '鸪鸠'
console.log(arr);
1
2
3
4

把其当成 数组元素, 不如当成键值对, JS 的数组不仅仅是个数组, 还能起到 map 这样的效果

在我们获取 [‘gujiu’] 的时候, 有两种写法:

console.log(arr['gujiu']);
console.log(arr.gujiu);
1
2

• 把数组视为一个对象 .js 的对象和 Java 的对象不同, JS 的对象是可以在运行是随意的新增属性的
• arr[‘gujiu’] 相当于 arr.gujiu. (gujiu 就是 JS 这个数组对象的成员了)

# 注意事项 #

1. 对于 JS 数组来说, [ ] 里是非负整数的时候, 此时才把这个操作视为是 “操作下标” 如果是其他类型的值, 都认为是 数组的自定义属性
2. 这个东西越灵活, 反而就越容易出问题. 虽然数组有能力表示键值对, 并不建议这样使用. JS 里有专门的 map 类型表示键值对 (ES6 标准里引入的特性)
3. (PHP 的数组也是和 JS 类似, 也是有上述这些奇怪的用法)

---

数组新增元素

有很多种方式, 最常用的就是使用 push 方法, 进行尾插 (类似于使用 ArrayList , 最常用的是 add 方法)

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

删除数组中的元素

newArr.pop();//删除最尾端元素
1

JS 的数组也支持中间位置的插入和删除

splice 既可以进行中间位置的插入, 也可以进行中间位置的删除, 还可以进行元素的替换

newArr.splice(2, 0, 'hello')
1

1. 第一个参数, 表示你要取数组的起始下标

2. 第二个参数, 表示你要取数组的长度. 0 就表示不对数组原来的内容做出调整

3. 第三个参数, 表示要替换到数组指定范围的新的值

---

函数

函数就是方法, 方法就是函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {//这里不必写返回值类型 (动态类型),形参列表, 每个形参的类型也不必显式写出
    函数体
    return 返回值; 
}

// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值
1
2
3
4
5
6
7
8
9

正因为 JS 是动态类型, 调用函数, 传参的时候, 同一个函数就允许传不同的类型, 只要说传的这些类型, 在函数内部能够正常使用即可.

比如：

function add(x, y) {
    return x + y;
}
console.log(add(1, 2));
console.log(add('hello', 'world'));
1
2
3
4
5

像 JS 这样的动态类型的语言, 相当于自带了 “泛型” 机制, 也不需要函数重载这样的语法.

# 注意 #

• JS 的函数, 同样是一个函数, 就能支持不同个数的参数
• JS 并不强制要求, 形参和实参个数匹配 (虽然通常不会这么做

我们在此处可以通过判断 a = a || 0; 操作

这时又有一个问题, 如果我们不确定实参的个数, 我们难道要写无数个形参吗？

这时, 我们就要使用一个内置变量 arguments 这个是数组. 数组里放了调用函数时候所有的实参

function add() {
    let ret = 0;
    //arguments 这个数组就包含了调用 add 方法的所有实参的值
    for (let i = 0; i < arguments.length; i++) {
       ret += arguments[i];
    }
    return ret;
}
1
2
3
4
5
6
7
8

# 注意 # splice 这个方法可以支持多个变长的参数, 就是通过 arguments 完成的.

---

函数表达式

在 JS 中, 函数是可以像普通的变量一样进行赋值的, 还可以作为另一个函数的参数 或者可以作为另一个函数的参数. (函数在 JS 中是 “一等公民”, 函数和普通变量一模一样)

let add = function() {
    let ret = 0;
    for (let i = 0; i < arguments.length; i++) {
        ret += arguments[i];
    }
    return ret;
}
1
2
3
4
5
6
7

---

函数作用域

JS 中, 代码中尝试访问一个变量, 会首先查找当前的代码块, 如果当前代码块中没有, 就会继续往上级代码块中查找, 一直查找到全局的作用域.

# 注意 #

• 全局作用域: <script> 标签这一级
• 一个 html 里可以有多个 script 标签, 此时这些标签的全局作用域是同一个.

比如： 我们看这样一段代码

在查找 num 的时候,

• 会先在 蓝色大括号寻找
• 之后在 粉色大括号寻找
• 之后在 黄色大括号中寻找
• 最后在 script 标签中寻找

JS 把上述作用域, 查找规则, 称为 “作用域链”

---

对象

JS 的对象类似于 Java 的对象, 但是功能更加简化. JS 的对象, 是使用 { } 来表示的

let student = {
    // 对象中可以有属性
    name: 'Gujiu',
    age: 18,
    gender: 'female',
    // 也可以有方法
    sleep: function() {
        console.log('Gujiu睡大觉');
    }
}
1
2
3
4
5
6
7
8
9
10

定义好对象就可以使用 . 来进行访问成员操作.

student.name;
student.sleep();
1
2

在 JS 中创建一个对象, 不需要先创建一个类

---

构造函数

使用构造函数来代替了 Java 中的类, 起到了 “对象图纸” 这样的效果

// JS 写构造函数, 习惯 首字母大写, 要写成小写也不是不行
function Student(name, age, gender, sleepMsg) {
    // 构造函数, 会用到 this 同时不必写 return 语句
    // 这里的 this 就表示即将构造出来的对象
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sleep = function() {
        console.log(sleepMsg);
    }
}
let student = new Student('Gujiu', 18, 'female', 'Gujiu睡大觉');
1
2
3
4
5
6
7
8
9
10
11
12

在 ES6 标准以后, 也引入了 class 关键字, 也就允许 JS 中定义 “类” 了

# 注意 #

在 JS 里, 虽然有类的概念, 但是不能提供 “封装”, 也不能进行 “继承” (可以通过原型链的机制模拟实现出类似于继承的效果), 更不能 “多态”, 因此, 我们认为 JS 并不是一个 “面向对象” 的编程语言.

---

以上就是今天要讲的内容了，希望对大家有所帮助，如果有问题欢迎评论指出，会积极改正！！

这里是Gujiu吖！！感谢你看到这里🌬 祝今天的你也 开心满怀，笑容常在。