HTML 前端学习（6）——JavaScript 学习（1）

JS 简单介绍

JS 是一种编程语言，也可以写后端代码
JS 是一种轻量级的脚本语言，是可插入HTML页面的编程代码，可由浏览器执行

JS 注释

单行注释

// 单行注释

多行注释

        /*
        多行注释
        多行注释
        多行注释
        多行注释
         */

JS 引入方式

1. <script> 标签内直接书写 JS 代码
2. <script> 标签内 src 属性引入 JS 文件

JS 代码结构

JS 以分号作为语句的结束
但不写分号不会报错，但相当于没有结束符

JS 变量

定义变量

 在 JS 中首次定义变量，需要使用关键词声明
        1. 关键词
            var name = 123;
        2. es6  推出的新语法
            let name = 456;

变量命名规范

命名规范
    JS 命名规范
        1. JS中变量命名可以是数字、字母或$
        2. JS中变量的命名方式采用驼峰命名，如：
                 userName
                 passWord
    而在python中采用下划线的命名，如：
         user_name
         pass_word

JS 中常量

     python 默认没有真正意义上的常量，默认用全大写的变量表示常量
     
     JS 中有真正意义上的常量
         const pi = 3.14

JS 书写位置

JS 代码的书写位置
     1. 单独写在 JS 文件中
     2. 使用浏览器提供的 console 页面书写
         在浏览器中书写 js 的时候 左上方的清空按钮只是清空当前页面 代码其实还在
          如果你想要重新来 最好重新开设一个 页面
         （在使用浏览器书写时 你自己书写的js代码推荐你在 自己的HTML页面打开）

JS 数值类型

数值类型（number）

    // 整型
    var num1 = 11;
    // 浮点型
    var num2 = 11.11;
    // 查看变量数据类型
    typeof num1;
    typeof num2;
    // 注意：NaN 虽然表示 “不是一个数字” 的意思，但是也是数值类型
    typeof NaN;

类型转换

    // 转换为浮点型
    var test1 = "123.12";
    parseFloat(test1);
    // 转换为整型
    parseInt(test1);
    // 只要字符串开头是数字就可以转化为 数值类型
    var test2 = "123abc456";
    parseInt(test2); // 结果是 123
    var test3 = "abc123456";
    parseInt(test3); // 结果是 NaN

注意

注意：name 属性在 JS 语法中比较特殊，不论 var name = 任何数据类型，最后的数据类型都是字符串

字符串类型

    var str1 = "奥特曼";
    typeof str1;
    // 多行文本，模板字符
    var str2 = `
    asd
    asd
    asd`
    // 格式化字符串
    var name = "奥特曼";
    var age = 18;
    var ss = `My name is ${name} and my age is ${age} !`;
    console.log(ss); // 打印 ss。结果是 My name is 奥特曼 and my age is 18 !

字符串拼接

        // python 中一般使用 join 拼接字符串，不推荐使用 +号
        // JS 推荐使用 +号
            var nameAge = name + age;
            console.log(nameAge);
            /* 注意：这里 name 是字符串类型，age 是 数值类型，却可以拼接
                    这是因为 JS 是弱相关的编程语言
                    在拼接时，不同的数据类型会自动转换成相同的数据类型操作
             */

字符串中常用方法

 ------------------------------------------------------------------
            字符串长度                    .length()
            消除字符串的空格               .trim()  .trimleft()  .trimeright()
            返回第 N 个字符,索引从0开始     .chartAt(n)
            拼接字符串                    .concat()
            子序列在字符串的索引            .indexOf()
            根据索引取字符串子序列          .substring()
            切片                        .slice()
            字符串全小写                  .toLowerCase()
            字符串全大写                  .toUpperCase()
            切割                        .split()
            -------------------------------------------------------------------

            // 计算字符串长度 .length
                var test4 = "aoteman";
                test4.length;
                
            // 移除字符串的空白 .trim，只移除空白，不能移除指定的符号
                var test5 = "  aoteman  ";
                test5.trim();
                // 移除字符串左边空白 .trimleft()
                var test6 = "  aoteman  ";
                test6.trimLeft();
                // 移除字符串右边空白 .trimright()
                // 只移除空白，不能传入参数
                var test7 = "ao|te|man|";
                test7.trim("|"); // 'ao|te|man|'
                
            // 返回第 N 个字符 .charAt(n)
                test7.charAt(7);
                
            // 拼接，.concat()
                test7.concat("a"); // 'ao|te|man|a'
                
            // 子序列的位置，.indexOf()
                test7.indexOf("|"); // 2
                test7.indexOf("|te|m"); // 返回第一个字母的位置
                
            // 根据索引获取子序列，.substring(from, to)
                test7.substring(2, 7); // '|te|m'
                
            // 切片, .slice(start, end)
                test7.slice(2,7); // '|te|m'
                
            // 字符串小写, .toLowerCase()
                var test8 = "abcABC";
                test8.toLowerCase();
                
            // 字符串大写，.toUperCase();
                test8.toUpperCase();
                
            // 分割，.split()
                test7.split("|"); // (4)?['ao', 'te', 'man', '']
                // 取切割后的前两个元素
                test7.split("|", 2); // (2)?['ao', 'te']

布尔值

    // 跟 python 不同，在 JS 中布尔值都是小写的值，如：false, true
    // 在 JS 中表示 布尔值的值
        /*
        0、null、undefined、NaN
         */

null 和 undefined 的区别

     null 表示 值为空 一般指定或者情况一个变量时使用
        name = 'json'
        name= null
        
     undefined
         表示声明了一个变量但是没有做初始化操作（没有赋值）
         函数没有指定返回值的时候 返回的也是 undefined

对象

数组

    var lst = [1, "123", "abc", true];
    typeof lst; // object

数组常见方法

---------------------------------------------
        数组长度                                .length
        尾部插入                                  .push
        尾部移除元素                                .pop
        头部添加元素                            .unshift
        头部移除元素                              .shift
        切片                                    .slice
        反转                                  .reverse
        拼接成字符串                               .join
        连接成数组                               .concat
        排序                                      .sort
        数组所有元素                             .forEach
        从索引 N 往后删除 M 个元素            .splice(N, M)
        ----------------------------------------------

            // 数组长度 .length
            lst.length; // 4
            
            // 尾部追加元素 .push
            lst.push(false);
            lst; // (5) [1, '123', 'abc', true, false]
            
            // 弹出尾部元素
            lst.pop(); // false
            lst; // (4) [1, '123', 'abc', true]
            
            // 头部插入元素
            lst.unshift("asd"); // 5
            lst; // (5) ['asd', 1, '123', 'abc', true]
            
            // 头部移除元素
            lst.shift(); // "asd"
            lst; // (4)?[1, '123', 'abc', true]
            
            // 切片
            lst.slice(3); // [true]
            
            // 反转
            lst.reverse(); // (4)?[true, 'abc', '123', 1]
            
            // 连接成字符串
            lst.join(); // 'true,abc,123,1';
            
            // 连接成数组
            lst.concat([111,222]); // (6)?[true, 'abc', '123', 1, 111, 222]
            
            // 排序
            var lst1 = [1,3,2,9,5];
            lst1.sort(); // (5)?[1, 2, 3, 5, 9]
            
            // 数组内部所有参数
            lst1.forEach( function (value) {
                console.log(value)}, lst1);
                // 一个参数就是数组里面每一个元素对象
                l.forEach(function (value) {
                console.log(value)}, l);
                // 第二个参数是 索引
                l.forEach(function (value,index) {
                console.log(value,index)}, l);
                // 第三个参数表示 参数来自于哪个数组
                l.forEach(function (value,index,arr) {
                console.log(value, index, arr)}, l);
                
            // 从索引 0 往后删除 3 个元素
            l.splice(0,3);
            // 先删除从索引 0 往后的 3 个元素，再增加一个元素 777
            l.splice(0,3,777);

自定义对象

字典形式

        var obj1 = {"name": "aoteman", "age":18};
        typeof obj1; // 'object'
        obj1.name;  // 'aoteman'
        obj1.age;  // 18

关键词声明

        var obj2 = new Object();
        obj2.name = "123";
        obj2.age = 18;
        obj2; // {name: '123', age: 18}

其他 JS 内部对象

Date 对象

            var d1 = new Date();
            d1.toLocaleString();
            d6.getDate(); // 日
            d6.getDay(); // 星期
            d6.getMonth(); // 月，0~11月
            d6.getFullYear(); //完整年份
            d6.getHours(); // 小时
            d6.getMinutes(); // 分钟
            d6.getSeconds(); // 秒
            d6.getMilliseconds(); // 毫秒
            d6.getTime(); // 时间戳

JSON 对象

            // 在 python 中 序列化和反序列化
                /*
                ----------------------------------
                dumps                       序列化
                loads                      反序列化
                ----------------------------------
                 */

        // 在js中也有序列化、反序列化
            JSON.stringify(); // dumps
            JSON.parse(); // loads

            let obj3 = {"name": 123, "age":456};
            res = JSON.stringify(obj3);
            JSON.parse(obj3);

比较运算符

/*
判断
==，弱等于，内部自动转化为相同的数据类型并进行比较
===，强等于，内部数据类型不会自动转换
 */
1 == "1"; // true
1 === "1"; // false

逻辑运算符

// python 中 and, or, not
// 在 JS 中
    /*
    ----------------------
    和                  &&
    或                  ||
    非                   ！
    ----------------------
     */
    5 && "5"; // "5"
    0 || 1; // 1
    !5 && "5"; // false

赋值运算符

// + -= += *=

运算符

    var x = 10;
    // 加号在后面，先赋值再自增 +1
    var res1 = x++;
    res1; // 10
    var res2 = ++x; // 加号在前面，先自增再赋值
    res2; // 12

流程控制

if 判断

    /*
    if (条件) {代码块}
     */
    if (age>18) {
        console.log("来啊 来啊")
    };

    if (age>18){
        console.log("123")
    }else{
        console.log("456")
    }
    //if else if else
    if (age<18){
        console.log("123")
    }else if(age<24){
        console.log("456")
    }else {
        console.log("789")
    };

for 循环

    /*
    for (开始条件；循环条件；每次循坏之后的操作) {代码块}
     */
    for (let i=0;i<10;i++) {
        conlose.log(i);
    }

while 循环

    /*
    while (循环条件) {代码块}
     */
    var i = 0;
    while (i<100) {
        conlose.log(i);
        i++;
    }

switch 语句

        // 提前列举好可能出现的条件和解决方式，之后来匹配
        // 不加 break，匹配到一个之后 就一直往下执行
        // default —- 条件没有匹配上，默认走的流程
        var num = 2;
        switch (num) {
                case 0:
                    console.log("喝酒");
                    break;
                case 1:
                    console.log("唱歌");
                    break;
                case 2:
                    console.log("再见");
                    break;
                default:
                    console.log("条件没有匹配上，默认走的流程")
        }

三元运算符

        // 在 python 中 三元运算符
            // res = 1 if 1>2 else 3
        // 在 JS 中 三元运算符
            // 条件成立取 ?后的值 ，否则取 :后的值
            var res = 1>2?1:3; // res 的值为 3

函数

在python中定义函数需要 def
在 js 中定义函数需要 function
格式
function (形参1，形参2......) {函数体代码}

无参函数

function func1() {
    console.log("hello world")
}
func1()  //调用 加括号调用，跟 python 一样

有参函数

function func2(a,b) {
    console.log(arguments) // argumes 能够获取函数接收到的所有参数
    if (arguments.length < 2){
        console.log("传少了")
    }else if (arguments.length>2) {
        console.log("传多了")
    }else{
        console.log(a,b)
    }
}
func2(1,2) // 传多了没关系，只要对应的数据；少了也没关系

函数返回

function index() {
    return 666 // 如果返回多个，只能拿到最后一个，所以应该返回一个元组或数组
}

匿名函数

// 匿名函数 就是没有名字
function () {
    console.log("hello world")
}

箭头函数

// 箭头函数（要了解一下）,主要用于处理简单的业务逻辑
// 箭头左边是形参，右边是返回值
var func3 = v => v;
// 等价于
var func3 = function (v) {
    return v
}

var func4 = (arg1,arg2) => arg1+arg2
// 等价于
var fun4 = function (arg1,arg2) {
    return arg1+arg2
}