JavaScript语句、变量、表达式与函数-CSDN博客

本文链接：https://blog.csdn.net/2403_89524622/article/details/147719592

一、JavaScript基本语句

1.1 核心语句类型

// 条件语句
if (score > 90) {
    console.log("优秀");
} else if (score > 60) {
    console.log("合格");
} else {
    console.log("不合格");
}

// 循环语句
for (let i = 0; i < 5; i++) {
    console.log(`当前循环次数：${i}`);
}

// 跳转语句
while (num < 10) {
    if (num === 5) break;
    num++;
}

1.2 重点注意

严格模式：建议始终使用'use strict'
分号使用：虽然ASI存在，但显式添加更安全
代码块：即使单行语句也建议使用大括号

1.3 易错点分析

// 错误示例
if (x = 10) { /* 应使用 === */ }

// 正确写法
if (x === 10) { /* ... */ }

二、JavaScript变量

2.1 变量声明方式对比

关键字	作用域	提升	重复声明	暂时性死区
var	函数级	✅	✅	❌
let	块级	❌	❌	✅
const	块级	❌	❌	✅

2.2 变量提升示例

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError
let b = 20;

2.3 案例分析

function variableTest() {
    var x = 10;
    if (true) {
        let x = 20;
        console.log(x); // 20
    }
    console.log(x); // 10
}

2.4 练习题

let arr = [];
for (var i = 0; i < 3; i++) {
    arr.push(() => console.log(i));
}
arr[0](); // 输出结果是什么？为什么？

三、JavaScript表达式

3.1 表达式类型树

表达式
├── 算术表达式
├── 关系表达式
├── 逻辑表达式
├── 赋值表达式
├── 条件表达式
└── 函数表达式

3.2 特殊表达式示例

// 立即执行函数表达式
(function() {
    console.log('IIFE');
})();

// 可选链操作符
const street = user?.address?.street;

// 空值合并运算符
const defaultValue = input ?? 'default';

3.3 类型转换矩阵

原始值	转换为Number	转换为Boolean	转换为String
0	0	false	"0"
"5"	5	true	"5"
undefined	NaN	false	"undefined"
null	0	false	"null"
{}	NaN	true	"[object Object]"

四、JavaScript函数

4.1 函数定义方式对比

// 函数声明
function add(a, b) { return a + b }

// 函数表达式
const multiply = function(a, b) { return a * b }

// 箭头函数
const square = x => x * x

// 构造函数
const divide = new Function('a', 'b', 'return a / b')

4.2 作用域链示意图

全局作用域
  ↑
函数作用域A
  ↑
闭包作用域B

4.3 闭包案例分析

function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        getCount: () => count
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.getCount());  // 1

4.4 高阶函数示例

function compose(...fns) {
    return x => fns.reduceRight((v, f) => f(v), x);
}

const add5 = x => x + 5;
const double = x => x * 2;
const operation = compose(double, add5);
console.log(operation(10)); // (10 + 5) * 2 = 30

五、综合测试题

1.写出以下代码输出结果：

let a = 10;
(function() {
    console.log(a);
    let a = 20;
})();

2.实现一个记忆函数：

function memoize(fn) {
    // 补全代码
}

3.解释以下代码的执行过程：

const arr = [1, 2, 3];
const result = arr
    .map(x => x * 2)
    .filter(x => x > 3)
    .reduce((a, b) => a + b);

总结

概念	重点	难点
变量	声明方式选择、作用域、提升机制	暂时性死区
函数	定义方式、作用域链、闭包	执行上下文
表达式	类型转换规则、短路求值	运算符优先级
控制语句	流程控制、循环机制	异步控制流