深入理解JavaScript | 青训营笔记

102 阅读5分钟

深入理解JavaScript

JavaScript是一门动态语言,可以应用于前端开发和后端开发。在学习JavaScript的过程中,需要掌握基本语法、数据类型、变量、运算符、流程控制、函数、对象、数组等知识点,并深入理解JavaScript的核心概念。

基础知识点

1. 基本语法

JavaScript代码由语句和注释组成,每个语句以分号结尾。注释有单行注释和多行注释两种形式,单行注释以//开头,多行注释以/**/包围。

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

2. 数据类型

JavaScript有七种内置数据类型,包括数字(Number)、字符串(String)、布尔(Boolean)、空值(null)、未定义(undefined)、对象(Object)和符号(Symbol)。

let num = 123; // 数字类型
let str = "hello"; // 字符串类型
let bool = true; // 布尔类型
let empty = null; // 空值
let undef = undefined; // 未定义
let obj = {name: "Tom", age: 18}; // 对象类型
let sym = Symbol("symbol"); // 符号类型

3. 变量

使用var、let或const关键字声明变量,其中var是ES5标准,let和const是ES6标准。var声明的变量作用域为函数作用域,let和const声明的变量作用域为块级作用域。

var num1 = 123;
let num2 = 456;
const num3 = 789;

4. 运算符

JavaScript支持算术运算符、比较运算符、逻辑运算符、位运算符等。其中算术运算符包括加(+)、减(-)、乘(*)、除(/)、取模(%)等;比较运算符包括等于(==)、不等于(!=)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)等;逻辑运算符包括与(&&)、或(||)、非(!)等;位运算符包括按位与(&)、按位或(|)、按位异或(^)、左移(<<)、右移(>>)等。

let a = 10, b = 5;
console.log(a + b); // 加
console.log(a - b); // 减
console.log(a * b); // 乘
console.log(a / b); // 除
console.log(a % b); // 取模

console.log(a == b); // 等于
console.log(a != b); // 不等于
console.log(a > b); // 大于
console.log(a < b); // 小于
console.log(a >= b); // 大于等于
console.log(a <= b); // 小于等于

console.log(a && b); // 与
console.log(a || b); // 或
console.log(!a); // 非

console.log(a & b); // 按位与
console.log(a | b); // 按位或
console.log(a ^ b); // 按位异或
console.log(a << 1); // 左移
console.log(a >> 1); // 右移

5. 流程控制

JavaScript有if语句、switch语句、for循环、while循环等控制流语句。

let score = 90;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

switch (score) {
    case 90:
        console.log("优秀");
        break;
    case 80:

函数

1. 定义函数

JavaScript中的函数可以使用function关键字定义。函数可以有返回值,也可以没有返回值。

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

let sum = add(1, 2);
console.log(sum); // 3

2. 匿名函数

JavaScript中的匿名函数是一种没有名称的函数,通常用作回调函数或自执行函数。

let func = function() {
    console.log("hello");
};

func(); // hello

(function() {
    console.log("world");
})(); // world

3. 箭头函数

ES6标准引入了箭头函数,箭头函数是一种简化版的函数定义。

let add = (a, b) => a + b;

let sum = add(1, 2);
console.log(sum); // 3

对象

1. 创建对象

JavaScript中的对象是一种复合数据结构,可以包含多个属性和方法。创建对象有两种方式,一种是使用对象字面量,另一种是使用构造函数。

// 使用对象字面量创建对象
let obj = {
    name: "Tom",
    age: 18,
    sayHi: function() {
        console.log("hi");
    }
};

// 使用构造函数创建对象
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        console.log("hi");
    };
}

let person = new Person("Tom", 18);

2. 访问对象属性

可以使用.[]运算符访问对象的属性,.运算符适用于已知属性名的情况,[]运算符适用于动态属性名的情况。

let obj = {
    name: "Tom",
    age: 18
};

console.log(obj.name); // Tom
console.log(obj["age"]); // 18

数组

1. 创建数组

JavaScript中的数组是一种有序集合,可以包含多个元素。创建数组有两种方式,一种是使用数组字面量,另一种是使用Array构造函数。

// 使用数组字面量创建数组
let arr1 = [1, 2, 3];

// 使用Array构造函数创建数组
let arr2 = new Array(1, 2, 3);

2. 访问数组元素

可以使用[]运算符访问数组的元素,数组下标从0开始。

let arr = [1, 2, 3];

console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

自己的思考

  1. JavaScript的动态特性有哪些优点和缺点?

JavaScript是一种动态语言,具有灵活、方便的特点。优点包括:

  • 代码简洁易读:JavaScript的动态特性使得代码编写更加简单,不需要像静态语言那样声明变量类型。
  • 灵活性高:JavaScript的动态特性允许开发者随时修改变量类型、对象属性等。
  • 快速迭代:JavaScript的动态特性使得开发者可以快速迭代代码,节约开发时间。

缺点包括:

  • 难以调试:JavaScript的动态特性导致错误难以发现和调试。
  • 性能较低:JavaScript的动态特性可能会影响代码性能。
  1. JavaScript中的闭包是什么?有什么作用?

闭包是指一个函数内部定义了另一个函数,并且内部函数可以访问外部函数的变量。在JavaScript中,每个函数都是一个闭包。闭包的作用包括:

  • 保护变量:将变量封装在函数内部,避免被外部访问和修改。
  • 实现私有化:通过闭包可以模拟类似于Java中的private访问权限,保证数据安全。
  • 延长变量生命周期:当函数执行完毕后,闭包仍然可以访问函数内部的变量,因此可以延长变量的生命周期。

总结

JavaScript是一种动态语言,具有灵活、方便的特点。在学习JavaScript的过程中,需要掌握基本语法、数据类型、变量、运算符、流程控制、函数、对象、数组等知识点,并深入理解JavaScript的核心概念。同时,需要理解JavaScript的动态特性、闭包等高级特性,以便更好地应用JavaScript进行开发。