JavaScript课件内容

JavaScript常用语法

一、变量声明：const与let

1. 作用域差异
   • let和const具有块级作用域（如if、for代码块），而var是函数作用域。

   • 示例：

   if (true) {
     let a = 5;   // 仅在块内有效
     const b = 10;// 同上
   }
   

2. const的特殊性
   • 声明后不可重新赋值（但对象/数组内容可修改）。

   • 适合声明常量或引用类型（如函数、对象）。

二、函数定义方式

1. 函数声明（Hoisting）
   • 会被提升到作用域顶部，可先调用后定义。

• 语法：

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

2. 函数表达式
   • 不会提升，需先定义后调用。

• 语法：

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

3. 箭头函数（ES6）
   • 简洁性：省略function和return（单行表达式）。

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

• 参数规则：

• 单参数可省略括号：n => n * 2

• 无参数需保留括号：() => 5

三、函数返回值与对象返回

1. 显式与隐式返回
   • 普通函数必须用return；箭头函数单行可隐式返回。

   • 多语句箭头函数需{}和return。

2. 返回对象的特殊处理
   • 箭头函数返回对象时需用()包裹，避免被解析为代码块：

   const createObj = () => ({ key: 'value' });
   

四、箭头函数作用域与this

1. 作用域继承
   • 箭头函数无自己的this，继承外层非箭头函数的this。

   • 示例（对比传统函数）：

   function Car() {
     this.speed = 0;
     // 箭头函数继承Car的this
     setTimeout(() => console.log(this.speed), 100);
   }
   

2. 限制
   • 不能用作构造函数（new会报错）。

   • 无arguments对象，需用剩余参数...args。

五、对象与数组操作

1. 对象字面量
   • 属性简写：{ id, name }等价于{ id: id, name: name }。

   • 动态属性名：{ [key]: value }。

2. 数组方法
   • 常用高阶函数（结合箭头函数）：

   [1, 2, 3].filter(n => n % 2 === 0); // 返回[2]
   [1, 2, 3].map(n => n * 2);         // 返回[2,4,6]
   

六、综合示例

// 函数声明与箭头函数结合
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
];

// 返回年龄大于28的用户名数组
const names = users
  .filter(user => user.age > 28)
  .map(user => user.name); // ["Bob"]

附：常见错误与解决

1. 箭头函数返回对象未加括号

   // 错误
   const getObj = () => { key: 'value' }; // 返回undefined
   // 正确
   const getObj = () => ({ key: 'value' });
   

2. 误用箭头函数作为构造函数

   const Person = (name) => { this.name = name; };
   new Person('Alice'); // 报错：Person不是构造函数
   

课件内容整合自：