JavaScript强化

前端小组第三次培训2023/11/4

基本格式

JavaScript不同于Python语言，它有括号，每行语句后要加分号。

注：所有的符号一律用英文格式的符号，中文格式的符号会报错

如下是实现相同功能两者代码的区别：

def bubble_sort(nums: list[int]):
    n = len(nums)
    # 外循环：未排序区间为 [0, i]
    for i in range(n - 1, 0, -1):
        # 内循环：将未排序区间 [0, i] 中的最大元素交换至该区间的最右端
        for j in range(i):
            if nums[j] > nums[j + 1]:
                # 交换 nums[j] 与 nums[j + 1]
                nums[j], nums[j + 1] = nums[j + 1], nums[j]

function bubbleSort(nums) {
    // 外循环：未排序区间为 [0, i]
    for (let i = nums.length - 1; i > 0; i--) {
        // 内循环：将未排序区间 [0, i] 中的最大元素交换至该区间的最右端
        for (let j = 0; j < i; j++) {
            if (nums[j] > nums[j + 1]) {
                // 交换 nums[j] 与 nums[j + 1]
                let tmp = nums[j];
                nums[j] = nums[j + 1];
                nums[j + 1] = tmp;
            }
        }
    }
}

Python主要靠缩进来控制代码结构和作用域，JavaScript则通过大括号{}控制。

对于括号，如() [] {}，都要成对出现。不然会报语法错误。

{}代码块与作用域

每个变量/常量都有其作用域与生命周期

页面全局变量

页面全局变量即在页面函数Page()中传入的页面对象中的data对象中的变量，它们的作用域为当前页面，也就是说只能在本页面中可以访问到，除非将其作为页面参数传递到下一页面，生命周期伴随此页面的生成与销毁（切换跳转到另一个页面并不算页面的销毁，页面的切换与跳转依靠栈实现，所有的数据仍在栈中）。

关于Page()函数该传入什么参数，详见开发文档框架接口 / 页面 / Page (qq.com)

示例代码

Page({
    data: {
        num: 7410,
        count: 0,
        str: "A string."
    },
    voidfunc: function() {
        
    }
})

代码解释

代码中，函数Page()中()包裹的{}即为页面对象，页面对象包含了页面全局变量data对象与名为voidfunc的空函数，各字段用,隔开，data对象中包含了名为num值为7410、名为count值为0、名为str值为A string.的三个页面全局变量，且各字段用,隔开。

局部变量

在函数代码块中声明的变量我们称其为局部变量，局部变量的生命周期由声明方式决定，作用域由代码块{}决定。

函数体

function() {	//此{}内即为函数体
    
}

var与let

由var关键字声明的变量在本函数体内可见。

由let关键字声明的变量在本代码块，即{}内可见。

示例代码

function() {
    let a = 10;	//a=10，本代码块{}内可见，由于此级{}是函数体，所以此处var与let等效
    var b = 20;	//b=20，本函数体内可见
    if (b === 20) {	//如果b等于20，执行if内的代码块{}
        let c = 30;	//c=30，本代码块内可见，即if代码块{}
        var d = 40;	//d=40，本函数体内可见
        console.log(a);	//控制台打印a
        console.log(b);	//控制台打印b
    }
    console.log(d);	//控制台打印d
    console.log(c);	//控制台打印c
}

运行结果

10
20
40
WAServiceMainContext.js:2 ReferenceError: c is not defined
    at Br.func (index.js:14)
    at Object.r.safeCallback (WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2)
    at WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2
    at wn (WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2)
    at WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2
    at g (WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2)
    at WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2
    at WASubContext.js?t=wechat&s=1698412746305&v=2.19.4:2
    at WAServiceMainContext.js:2
    at s (VM9 asdebug.js:1)(env: Windows,mp,1.06.2308310; lib: 2.19.4)

打印a、b、d正常，但打印c报错（引用错误，c未定义），因为let关键字声明的变量只在if后的{}内可见，且生命周期只在{}内。

同时，上级代码块{}中声明的变量在下级代码块{}中可见，上述代码中if代码块中仍可打印a、b。

对象（Object）

对象的概念详见JS入门与函数、数据绑定 | whaleghostの小窝的对象部分，此处不再赘述。

对象由{}进行包裹，但此处的{}并不算代码块，代码块一般指函数/方法中的{}。

对象内包含若干字段，字段后接:其后跟值or函数/方法，且每个字段声明结束后都要加,。

示例代码

Page({	//匿名对象
    data: {	//data字段声明为一个对象
        vari: 1,	//data对象内vari字段声明结束，接逗号“,”
        tof: true,	//data对象内tof字段声明结束，接逗号“,”
        txt: "HHH"	//对象最后一个字段不需要接逗号“,”
    },	//data字段声明结束，接逗号“,”
    createObj: function() {	//createObj字段声明为一个函数/方法
        var student = {	//声明一个名为student的局部对象
            name: "John",	//student对象内name字段声明结束，接逗号“,”
            age: 19,	//student对象内age字段声明结束，接逗号“,”
            grow: function() {	//student对象内name字段声明为一个函数/方法
                this.age = this.age+1;
            }	//对象最后一个字段不需要接逗号“,”
        }
    }	//对象最后一个字段不需要接逗号“,”
})

this—当前对象的引用

数组（Array）的基本操作

数组的概念详见JS入门与函数、数据绑定 | whaleghostの小窝的数组部分，此处不再赘述。

数组由[]包裹，各个元素间用,隔开。

数组元素访问

数组的下标从0开始，0表示第1个元素，1表示第2个元素，以此类推。

下标	位序
0	1
1	2
2	3
3	4
4	5

如果要访问第2个元素，则参考以下代码

示例代码

let arr = [1,"Bonjour",5,true,3.14];
console.log(arr[1]);	//控制台打印arr数组的第二个元素

运行结果

Bonjour

常见内置函数/方法

push()

将一个或多个元素添加到数组的末尾，并返回新数组的长度。

示例代码

let arr = [1,2,3,4];
arr.push(5);
console.log(arr);

运行结果

[1,2,3,4,5]

pop()

删除数组的最后一个元素，并返回被删除的元素。

示例代码

let arr = [1,2,3,4];
arr.pop();
console.log(arr);

运行结果

[1,2,3]

unshift()

将一个或多个元素添加到数组的开头，并返回新数组的长度。

注：不推荐使用，时间复杂度为O(n)，性能开销极大。

示例代码

let arr = [1,2,3,4];
arr.unshift(0);
console.log(arr);

运行结果

[0,1,2,3,4]

shift()

删除数组的第一个元素，并返回被删除的元素。

注：不推荐使用，时间复杂度为O(n)，性能开销极大。

示例代码

let arr = [1,2,3,4];
arr.shift();
console.log(arr);

运行结果

[2,3,4]