Lecture02-JavaScript 基础语法(用 node 运行)

文章目录

    [toc]

    单词词性音标含义
    JavaScriptn./ˈdʒɑːvə skrɪpt/一门可在浏览器和 Node 里运行的脚本语言,本节学习它的基础语法
    consolen./kənˈsəʊl/JS 内置的控制台对象,用 console.log() 直接把数据打印出来
    letn./let/声明可变变量的关键字,新语法标准推荐使用
    constn./ˈkɒnst/声明常量的关键字,值不可重新赋值,开发中优先使用
    varn./vɑː(r)/旧语法声明变量的关键字,存在诸多问题,不建议使用
    arrow functionn./ˈærəʊ ˈfʌŋkʃn/箭头函数,用 => 书写的简写函数,是一等公民,Vue 里到处都是它
    noden./nəʊd/Node.js 的命令行程序,可直接运行 .js 文件

    Lecture02-JavaScript 基础语法(用 node 运行)

    1、本节讲什么

    用 node 直接运行 .js 文件,把 JS 最常用的语法过一遍——变量、数组、函数。类比你已经会的 Python / Java,够读懂 AI 生成的代码即可。

    2、概念速览

    什么是 JavaScript:一门"能在浏览器和 Node 里跑"的脚本语言。你已会 Python/Java,JS 语法大同小异(变量、数组、函数、循环都有),只是更松——不强制类型、函数是一等公民。

    类比:JS 像"松一点的 Java",结构相像但更灵活。

    正确 vs 误区:别以为 JS 只是"给页面加效果",现在的 JS 能写后端、写工具,几乎啥都能干。

    3、先看效果

    在项目根目录(my-first-app 下)新建 hello.js,粘贴下面内容:

    // console 是 JavaScript 的一个内置对象,代表控制台标准输出,不需要创建就可以直接使用
    // console 对象的 log() 方法就可以在控制台打印数据
    console.log("HelloWorld……你好,JavaScript!");
    

    然后在终端运行:

    node hello.js
    

    看到打印——这就是"在命令行跑 JS"。

    4、照着做(4 个文件,一步步来)

    ① 变量:let / const / var

    建 variable.js,node variable.js:

    // JavaScript 声明变量
    // 1、旧的语法标准,var 关键词存在很多问题,不建议使用
    var age = 10;
    console.log("age = " + age);
    
    // 2、新的语法标准,建议使用 let 声明变量
    let message = "我是一个爱心人士,我很喜欢小动物,每顿饭都得有";
    console.log("message = " + message);
    
    // 3、JavaScript 是弱类型语言,变量声明时不需要指定类型,使用时可以赋值其它类型
    message = 10000;
    console.log("message = " + message);
    
    // 4、使用 const 声明常量
    const PI = 3.14;
    console.log("PI = " + PI);
    
    // PI = 6.28;
    
    // 5、JavaScript 标识符严格区分大小写
    let hello = "small hello";
    let HELLO = "BIG HELLO";
    console.log("大写:" + HELLO);
    console.log("小写:" + hello);
    
    // 6、开发建议:能用 const 就使用 const
    // 理由:当一个程序文件很长或引入很多其它文件,使用 const 声明变量可以防止它在别的地方被意外的改变
    

    要点:

    • 默认用 let,能不变就用 const;var 是旧写法、问题多,别用。
    • JS 是弱类型:变量不用写类型,还能中途换成别的类型(message 从字符串变数字)。
    • 大小写敏感:hello 和 HELLO 是两个不同的变量。

    ② 数组:下标读写、push/pop、遍历

    建 array.js,node array.js:

    // JavaScript 数组:可以存入不同类型数据、长度可以自动扩容
    const numberArr = [50, 88, 79, 26, 31, 24];
    
    // 用下标读写数组元素(下标从零开始)
    console.log("下标 3 位置的元素:" + numberArr[3]);
    
    numberArr[3] = 10000;
    console.log("下标 3 位置的元素:" + numberArr[3]);
    
    // 调用 push() 方法给数组末尾压入一个新的元素
    numberArr.push(999);
    console.log(numberArr);
    
    // 调用 pop() 方法把数组末尾元素弹出
    const finalData = numberArr.pop();
    console.log("弹出的元素:" + finalData);
    console.log(numberArr);
    
    // 遍历数组方式一:使用带循环变量的 for 循环
    for (let index = 0; index < numberArr.length; index++) {
        const number = numberArr[index];
        console.log("数组元素:" + number + " 循环变量是:" + index);
    }
    
    console.log("-----------------");
    
    // 遍历数组方式二:使用 for of 结构
    for (const number of numberArr) {
        console.log("数组元素:" + number);
    }
    

    要点:

    • 下标从 0 开始;push() 末尾加、pop() 末尾弹。
    • 遍历两种:for (let i = 0; i < arr.length; i++) 和 for (const x of arr)(后者更简洁,推荐)。

    ③ 函数:声明、赋值、箭头函数

    建 function.js,node function.js:

    // 声明一个函数
    function sum(i, j) {
        return i + j;
    }
    
    // JavaScript 中函数本身就是一个对象、一个数据、一个值,可以赋值给变量、可以作为参数传递给其它函数
    const showInfo = function() {
        console.log("Today is very good!");
    }
    
    // 调用已经声明的函数
    const sumResult = sum(100, 200);
    console.log("sumResult = " + sumResult);
    
    showInfo();
    
    // 新语法标准:箭头函数
    const printMsg = () => {
        console.log("今天太阳好大~~~");
    }
    printMsg();
    
    const printMsg02 = msg => {
        console.log("msg = " + msg);
    }
    printMsg02("AAA");
    
    const printMsg03 = msg => console.log("msg = " + msg);
    printMsg03("BBB");
    
    const doMulOperation = (i, j) => i * j;
    console.log("乘法操作:" + doMulOperation(5, 8));
    

    要点(箭头函数从"胖"到"瘦"):

    • 无参:() => {}
    • 一个参数:msg => {}(括号可省)
    • 一条语句:msg => console.log(...)(花括号和 return 可省)
    • 多参数、直接返回:(i, j) => i * j

    5、常见疑问

    • Q:let 和 const 到底用哪个? A:默认都用 const,确实要重新赋值才用 let。能防止意外改坏数据。
    • Q:箭头函数 => 是什么? A:就是函数。(a, b) => a + b 等于 function (a, b) { return a + b },只是更短。Vue 里到处是它。
    • Q:node 能跑所有 JS 吗? A:能跑绝大多数。只有用到浏览器专属能力(DOM、document)的代码不能跑,那部分我们放到第 7 节再用浏览器。
    • Q:.js 文件里能写 console.log 吗? A:能,而且这正是在命令行"看结果"的方式,代替浏览器里的 console。

    6、规范要点

    • 命名:变量/函数用驼峰(userName、getTotal),不用拼音、不用无意义名(a、data1)。
    • 优先 const:能 const 就 const。
    • 函数默认用箭头函数。
    • 这四条是第 32 节"编码规范提示词"的基石,从现在就养成。

    7、本节验证

    • 能建 hello.js 并用 node hello.js 在命令行打印出 HelloWorld ✅
    • 知道默认用 let、能不变就用 const,var 不用 ✅
    • 会声明数组并用下标、push()、pop() 读写元素 ✅
    • 会用 for (let i...) 和 for...of 两种方式遍历数组 ✅
    • 会写箭头函数(() => {}、msg => {}、(i, j) => i * j)并知道它就是函数 ✅
    end