JS进阶笔记1

请你喝杯Java
67 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

一、JavaScript代码调试

  • 代码调试：检查代码的执行路径和变量的值与你设计程序时期望的是否一致。

  • 在Chrome、Edge浏览器中调试

    • alert()
    • console.log()：常用，Ctrl+Shift+I -> Console
    • 开发者工具：设断点， Ctrl+Shift+I -> Sourcesimage-20220925141940594

  • debugger 关键词

    • debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。image-20220925142106067

二、JavaScript语言

2.1 语法特点

  • 弱类型语言：变量声明时不指定类型，一个变量可以赋不同数据类型的值
  • 区分大小写：Student与student是两个不同的标识符
  • 变量命名规范：一般全部小写，多个单词，从第二个单词开始首字母大写
  • 关于语句结束后的分号：可选，但建议加上

2.2 变量的声明

  • 使用var或let关键字

    • var关键字：传统方式，只有全局作用域和函数作用域
    • let关键字：现代JavaScript中的方式

  • 两者的区别：

    • let声明的变量只在代码块内有效，实现块级作用域，而var声明的变量没有块级作用域，只有函数作用域和全局作用域
    • var声明的变量存在变量提升，而let声明的变量不存在变量提升

  • 作用域

    • 变量的作用域（Scope），指变量在脚本代码中可读、写的有效范围
    • ECMAScript 6之后，变量的作用域有全局作用域、函数作用域和块级作用域，ECMAScript 6之前，无块级作用域
    • var声明的变量只有全局作用域和函数作用域，let声明的变量有全局作用域、函数作用域和块级作用域
    • 因var存在变量提升，所以var变量的全局作用域指整个页面的JavaScript代码，函数作用域指整个函数；而let和const不存在变量提升，故全局作用域指声明语句开始到整个页面脚本代码，函数和块级作用域指从声明语句到函数/块结束

  • 块级作用域例子

    {
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
---
if (true) {
  let test = true; // 使用 "let"
}
alert(test);       // Error: test is not defined
---
if (true) {
  var test = true; // 使用 "var" 而不是 "let"
}
alert(test);       // true，变量在 if 结束后仍存在

  • 函数作用域例子

    function f1() {
    var a = 1;
    let b = 2;
}
console.log(a);
console.log(b);
// 报错，a和b均未定义

  • 变量提升：即变量可以在声明之前使用，值为undefined。

    // 未声明变量，直接使用
console.log(foo); // 报错ReferenceError
---
// 使用var，先使用变量，后声明并赋值
console.log(foo); // 输出undefined
var foo = 2;
---
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
    • var声明提高到所属作用域的顶端：如var声明变量在任何函数之外，则变量的作用域会提升到整个代码的最高处（全局变量）；在函数体内使用var声明变量，其作用域会被提升至所在函数。
    • 注意：
      • 1.仅声明被提升，赋初值仍在原位置
      • 2.变量提升不会跨script块
    • let声明的变量不存在变量提升

  • 使用const声明常量

    • 常量在脚本代码整个运行过程中保持不变

    • 使用const声明常量时，必需赋初值

    • const 常量名 = 值

    • 常量不能重复声明

      const pi = 3.1415926;
avatar
文章
阅读
粉丝