JavaScript中的基础知识点

“虽千万人吾往矣”

写在前面：

我们如何查看纯js程序的输出结果呢，打开我们文件所生成的虚拟网页，然后单击F12，点击控制台即可查看运行结果。

js的调用方式与执行顺序

定义方式属于标签，可定义在HTML中的任意位置，具体语法：

<script type="module"></script>

三种使用方法：

---直接在js标签内写代码：一段输出变量的js代码。

写入位置也是任意的，不过最好写在head标签里面。

<script type="module">
    let x = 5;
    console.log(x);
</script>

---类似于CSS，引入js文件：

<script type="module" src="/static/new_study.js"></script>
<!--自己创建一个js文件-->

 然后再js文件中写入内容即可调用。

---*将需要的某些代码通过关键字import引入相关作用域：

需要一个暴露export函和自己定义一个函数数操作，在js文件中首先先定义需要的变量，之后创建一个函数，最后使用export将需要的函数及变量放入之中。

函数的定义方式为function。例如：js文件中的代码

let name = "历历越越程序员"
let age = 18

function print() {
    console.log("my name is " + name + " i am " + age + " years old");
}

export {
    name,
    age,
    print

}

HTML中的代码

<script type="module">
    import { name, print, age } from "/static/new_study.js";
    print();
</script>

记住格式即可。

这里需要注意的是在HTML中import中引用的变量或函数只能是export中所暴露的，只

引用没有的将会报错。

文件的执行顺序

类似于HTML与CSS，按从上到下的顺序执行；事件驱动执行。

变量与运算符

变量的定义统一使用“let”，常量的定义使用“const”，从这里我们可以发现js定义变量时不需要我们指定数据类型，类似于python。“let”同时可以定义对象，类似于python中的字典，c++里的map

let x = { name:"dly",age:18 }

五种常见的变量类型

我们可以通过 console.log(typeof x) 操作查看相关数据类型。

number：数值变量，例如1, 2.589
string：字符串，例如"SDUT"， 'dly'，单引号与双引号均可。字符串中的每个字符为只读类型。js中的字符串也是只读变量不可改变，可以看成数组进行逐个输出例如：

let asd = "dly"
console.log(asd[0])

输出结果为：d

如果我们要强制改变某一个字符使用如下操作（了解即可）：

let asd_1 = asd.substr(0, 0) + 'j' + asd.substr(1);

 输出结果：jly

boolean：布尔值，例如true，false
object：对象，类似于C++中的指针，例如[1, 2, 3]，{name: "dly", age: 18}，null
undefined：未定义的变量
类似于Python，JavaScript中的变量类型可以动态变化。

运算

与c++、python类似，只说几个特殊点：

---除数取整操作 parseInt() 括号里面放式子。

---乘方运算，2***3 的含义为2的3次方。

---等于与不等于用===和!==

输入与输出

这里的输出输出不只是从键盘获取内容。既然是web工程语言，它还可以实现从页面通过用户获取，例如我们前面学到的通过input、textarea等标签获取用户的键盘输入；通过click、hover等事件获取用户的鼠标输入，之后我们还将学到通过Ajax与WebSocket从服务器端获取输入。

输出的效果将影响当前页面的HTML与CSS并通过Ajax与WebSocket将结果返回到服务器。

---保留小数位数操作 .toFixed(位数)

格式化字符串

类似与使用c++中printf、cout操作，进行格式化输出。关键操作 ：${变量名} 

function main() {
    let name = "dly", age = 18;
    let s = `my name is ${name}. i am ${age} years old.`;
    console.log(s);
}

判断操作与循环等语法与c/c++相同不再解释。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

对象

前面说到过类似于c/c++中的map和python中的字典，也是由键值对构成，其中的值可以是变量，数组，对象和函数等。例如我们定义一个人的对象，里面有若干属性：

let person = {
    name: "dly",
    age: 18,
    gender: 'man',
    money: 0,
    friend: ['jiaohongli', 'feidao'],
    clothes: {
        size: 'L',
        price: 200,
    },
    do_money: function (x) {
        this.money += x;//相当于import
    }
};

function main() {
    console.log(person.money);
    person.do_money(10);
    person.do_money(10);
    console.log(person.money);
    console.log(person["age"]);
    person['do_money'](10);
}

export {
    main
}

访问对象里面的参数可以用‘.’；也可以用[]来访问，访问的内容用“”括起来。

函数的调用方法用‘.’即可；也可以加[]，里面写入函数名添加参数即可。其中用[]访问的方法都是动态的，即里面的关键字是可变的。

输出结果为：0              20。

数组

数组是一种特殊的对象，类似于C++中的数组，但是数组中的元素类型可以不同。数组中的元素可以是变量、数组、对象、函数。例如：

let a = [1, 2, 'a', [4, 5, 6],
    function () {
        console.log("hello");
    }
];

访问数组里的元素与c++类似，使用下标访问。如果我们访问的元素是一个数组的话，可以再加一个[]，类似于二维数组的方式访问数组元素的元素，假设我们要访问5，写法：

console.log(a[3][1]);

访问函数的写法：元素位置加括号：

console.log(a[4]());

里面元素重新赋值的方法与c++相同，而且js里的数组没有越界的概念，假设上面的a数组我们只定义了5个元素，但这个数组并不是五个元素长度，我们还可以定义第十个位置，给这个位置的元素赋值，中间没赋值的元素为“undefine”。

数组的常见操作

属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()。
函数push()：向数组末尾添加元素。
函数pop()：删除数组末尾的元素。
函数splice(a, b)：删除从a开始的b个元素。
函数sort()：将整个数组从小到大排序，自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。

函数

前面能用到好多次了不做过多解释，要注意的是上面说到的“undefine”，如果函数没有返回值，函数就会输出“undefine”。这里再做一遍总结：

function add(a, b) {
    return a + b;
}

let add = function (a, b) {
    return a + b;
}

let add = (a, b) => {
    return a + b;
}

类

与C++中的Class类似。但是不存在私有成员，this指向类的实例。实例的定义方式类似于python。

class point{
    constructor(x,y){
        this.x = x;// 成员变量
        this.y = y;
    }
    add(){
        this.sum = this.x + this.y;// 成员变量可以在任意的成员函数中定义
    }
    toString(){
        return `(${this.x} + ${this.y})`;
    }
}

let main = function () {
    let p = new point(3,4);
    console.log(p.x,p.y);
    console.log(p.toString())
}

export {
    main
}

主要作用：对应前端的每一个组件。

继承

class Colorpoint extends point {
    constructor(x, y, color) {
        super(x, y); // 这里的super表示父类的构造函数,类似于父类中的constructor
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

let main = function () {
    let p = new Colorpoint(3, 4, 'red');
    console.log(p.toString());
}

super这个关键字，既可以当作函数使用，也可以当作对象使用。作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。super作为对象时，指向父类的原型对象。在子类的构造函数中，只有调用super之后，才可以使用this关键字。

性质：如果子类成员与父类成员有相同名称时，子类会覆盖父类。例如子类父类都有toString，输出结果：red (3 + 4)

静态方法

在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类来调用。例如：

class point {
    constructor(x, y) {
        this.x = x;// 成员变量
        this.y = y;
    }
    toString() {
        return `(${this.x} + ${this.y})`;
    }
    static print_class_name() {
        console.log("Point");
    }
}

let main = function () {
    let p = new point(3, 4);
    point.print_class_name();//正确调用方式
}

export {
    main
}