Js 的使用

🍹 JavaScript是一门严格区分大小写、面向对象的动态解释型语言，诞生于1995年，主要用于处理网页中的前端验证。

1 标签引用

<script>
    alert("Hello world~")
</script>

2 文件引用

• 文件引用
  • 在一个单独的Js文件中也可编写JavaScript代码。
  • 然后在HTML文件中使用script标签来进行引用。

2-1 main.js

alert("Hello, World!");

2-2 main.html

<script src="main.js"></script>

3 输出注释

<script>
    // 页面弹窗
    alert("Hello world~");

    // 页面输出
    document.write("Hello world~");

    // 控制台输出
    console.log("日志");
    console.info("信息");
    console.warn("警告");
    console.error("错误");

    // 单行注释
    /**
     * 多行注释
     */
</script>

4 基本使用

• 基本使用
  • 标识符：给变量、函数、属性或函数的参数起名。
  • 字面量：一些固定值，不可改变，很少直接使用。
  • 变量：作用是给某一个值或对象标注名称，值可反复使用。

4-1 变量声明

<script>
    // 变量声明
    var a;
    // 变量赋值
    a = 123;
    // 同时声明和赋值
    var b = 456;
</script>

4-2 数据类型

• 数据类型
  • 五种基本数据类型
    • 字符串型：String
    • 数值型：Number
    • 布尔型：Boolean
    • undefined型：Undefined
    • null型：Null
  • 这五种之外的类型都称为Object，所以总共有六种数据类型。

<script>
    // typeof：检查变量的数据类型
    console.log(typeof 123);
    // 从语义上看null表示一个空对象，所以使用typeof检查null会返回一个Object
    console.log(typeof null);
    console.log(typeof "Hi~");
    console.log(typeof false);
    console.log(typeof undefined);
</script>

(1) 转为String类型

<script>
    // toString()：转换为String类型，该方法不会影响到原变量，会将转换结果返回
    // null和undefined这两个值没有toString()方法，调用会报错
    var a = 123456;
    a = a.toString();
    console.log(a);
    console.log(typeof a);

    // 为任意数据类型加""：转换为String类型
    var e = 123456;
    e = e + "";
    console.log(e);
    console.log(typeof e);

    // String()：转换为String类型，对于Number和Boolean实际就是调用的toString()方法
    var b = 123456;
    b = String(b);
    console.log(b);
    console.log(typeof b);

    // 对于null和undefined，就不会调用toString()方法
    // 而是将null直接转换为“null”，将undefined直接转换为“undefined”
    var d = null;
    d = String(d);
    // console.log(d);
    console.log(typeof d);

    var c = undefined;
    c = String(c);
    // console.log(c);
    console.log(typeof c);
</script>

(2) 转Number类型

<script>
    // Number()：字符串是空串，转换为0
    var c = "   ";
    c = Number(c);
    console.log(c);

    // Number()：布尔true转1，false转0
    var d = false;
    d = Number(d);
    console.log(d);

    // Number()：null转0
    var e = null;
    e = Number(e);
    console.log(e);
    
    // Number()：纯数字的字符串，直接转为数字
    var a = "123";
    a = Number(a);
    console.log(a);

    // Number()：字符串含非数字，转换为NaN
    var b = "12a";
    b = Number(b);
    console.log(b);

    // Number()：undefined转NaN
    var f = undefined;
    f = Number(f);
    console.log(f);

    // parseInt()：字符串转为整数
    var g = "123abc";
    g = parseInt(g);
    console.log(g);
    console.log(typeof g);

    // parseFloat()：字符串转为浮点数
    var h = "123.45";
    h = parseFloat(h);
    console.log(h);
    console.log(typeof h);

    // 对非String使用parseInt()或parseFloat()，会先转为String，然后再进行操作
</script>

(3) 转Boolean类型

<script>
    // Boolean()：数字转布尔，除了0和NaN，其余的都是true
    var a = 0;
    a = Boolean(a);
    console.log(a);

    var b = NaN;
    b = Boolean(b);
    console.log(b);

    // Boolean()：字符串转布尔，除了空串，其余的都是true
    // 注意这里的空串，非全部空格的字符串(不是完全空的)
    var c = "";
    c = Boolean(c);
    console.log(c);

    // Boolean()：null和undefined都会转为false
    var d = null;
    d = Boolean(d);
    console.log(d);

    var e = undefined;
    e = Boolean(e);
    console.log(e);

    // Boolean()：对象也会转为true
    var f = Object;
    f = Boolean(f);
    console.log(f);
</script>

5 条件语句

<script>
    var age = 28;
    if (age < 30) {
        console.log("不想长大");
    }

    if (age < 30) {
        console.log("不想长大");
    } else {
        console.log("该长大啦");
    }

    if (age < 30) {
        console.log("不想长大");
    } else if (age == 30) {
        console.log("而立之年");
    } else {
        console.log("该长大啦");
    }

    var today = 5;
    switch (today) {
        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("你输错啦");
    }
</script>

6 循环语句

<script>
    var a = 1;
    while (a <= 3) {
        console.log(a);
        a++;
    }
    console.log("*")

    var b = 1;
    do {
        console.log(b);
        b++;
    } while (b <= 3);
    console.log("*")

    for (var c = 1; c <= 3; c++) {
        console.log(c);
    }
</script>

7 跳转控制

<script>
    // break：结束最近的一次循环，可以在循环和switch语句中使用
    // continue：结束本次循环，执行下一次循环，只能在循环中使用
    outer: for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (j == 5) {
                break outer;
            }
            console.log(j);
        }
    }
</script>

8 对象基础

<script>
    // 除字符串、数字、布尔、null和undefined外，JavaScript中的值都是对象。

    // 创建对象
    var person = new Object();
    person.name = "刘一";
    person.food = "蛋糕";
    console.log(person);

    var animal = {
        name: "咪咪",
        type: "猫咪"
    };
    console.log(animal);

    // 访问属性
    console.log("name：", person.name);
    console.log("name：", animal["name"]);

    // 删除属性
    delete person.food
    console.log(person);

    // 遍历对象
    for (var animalKey in animal) {
        var animalVal = animal[animalKey];
        console.log(animalKey + "： " + animalVal);
    }

    // 栈的特点：先进后出，后进先出
</script>

9 函数使用

<script>
    // 使用函数对象创建一个函数(几乎不用)
    var fun1 = new Function("console.log('函数创建1')");

    // 使用函数声明创建一个函数(比较常用)
    function fun2() {
        console.log("函数创建2");
    };

    // 使用函数表达式创建一个函数(比较常用)
    var fun3 = function() {
        console.log("函数创建3");
    }

    // 无参函数调用
    fun1();
    fun2();
    fun3();

    // 有参函数调用
    var sum1 = function(num1, num2) {
        var result = num1 + num2;
        console.log("num1 + num2 = " + result);
    }
    sum1(10, 20);

    // 使用return设置函数的返回值
    function sum2(num1, num2) {
        // return后的语句都不会执行
        // 如果不跟任何值，相当于返回一个undefined
        // 如果函数中不写return，也会返回undefined
        return num1 + num2;
    }
    var result = sum2(30, 40);
    console.log("num1 + num2 =", result);
</script>

9-1 this对象

• this对象
  • JavaScript中，解析器在调用函数时，每次都会向函数内部传递一个隐含的参数。
  • 该隐含参数就是this，this指向一个对象，这个对象称为函数执行的上下文对象。
  • 根据函数调用方式的不同，this会指向不同的对象。
    • 以函数的形式调用时，this永远都是指window。
    • 以方法的形式调用时，this则是调用方法的那个对象。

<script>
    // 创建一个全局变量
    var name = "全局变量";

    // 创建一个函数
    function fun() {
        console.log(this.name);
    }

    // 创建一个对象
    var obj = {
        name: "张三",
        sayName: fun,
    };

    // 调用obj.sayName()时可以输出对象的名字，而非全局变量的名字
    obj.sayName();
</script>

9-2 嵌套函数

<script>
    // 嵌套函数只能在当前函数中访问，在当前函数外无法访问
    function one() {
        function two() {
            console.log("嵌套函数");
        }
        two();
    }
    one();
</script>

9-3 匿名函数

<script>
    // 匿名函数：没有名字的函数，用“函数表达式”方式创建和接收
    var fun = function() {
        alert("匿名函数");
    }
    fun();
</script>

9-4 立即执行函数

<script>
    // 立即执行函数：函数定义完，立即被调用，只会执行一次
    (function() {
        alert("立即执行函数");
    })();
</script>

9-5 对象中的函数

<script>
    // 对象的属性值可以是任何数据类型，也可以是函数
    // 如果一个函数作为一个对象的属性保存，那么称这个函数是这个对象的方法
    // 调用该函数即调用对象的方法，方法和函数只是名称上的区别，没其他区别
    var person = {
        name: "刘一",
        food: "樱桃",
        sayHello: function() {
            console.log(person.name + "，你好呀！")
        }
    }
    person.sayHello();
</script>