ES6开发实案例

ES6基础实操练习

案例1：变量声明与作用域练习

需求描述：创建一个程序，使用let和const声明不同类型的变量，展示它们的作用域特性，并比较与var的区别。

// 变量声明练习
function variableDemo() {// 使用var声明变量（函数作用域）var varVar = "我是var声明的变量";// 使用let声明变量（块级作用域）let letVar = "我是let声明的变量";// 使用const声明常量const constVar = "我是const声明的常量";console.log("常量初始值:", constVar);// 尝试修改const变量（会报错）// constVar = "尝试修改常量";// 块级作用域演示if (true) {var varBlock = "var在块内声明";let letBlock = "let在块内声明";console.log("块内访问letBlock:", letBlock);}console.log("块外访问varBlock:", varBlock); // 可以访问// console.log("块外访问letBlock:", letBlock); // 不能访问，会报错// 循环中的作用域for (var i = 0; i < 3; i++) {// var声明的i在循环外仍可访问}console.log("var声明的i在循环后的值:", i);for (let j = 0; j < 3; j++) {// let声明的j只在循环内有效}// console.log("let声明的j在循环后的值:", j); // 不能访问，会报错
}// 调用函数执行演示
variableDemo();

案例2：解构赋值应用

需求描述：创建一个程序，演示数组和对象的解构赋值，包括基本用法、默认值设置和嵌套解构。

// 解构赋值练习
function destructuringDemo() {// 1. 数组解构const fruits = ['苹果', '香蕉', '橙子', '葡萄'];// 基本数组解构const [first, second] = fruits;console.log("数组前两个元素:", first, second);// 跳过元素const [, , third, fourth] = fruits;console.log("数组第三、四个元素:", third, fourth);// 剩余元素const [f1, ...rest] = fruits;console.log("第一个元素:", f1);console.log("剩余元素:", rest);// 默认值const [a, b, c, d, e = '西瓜'] = fruits;console.log("带默认值的解构:", e);// 2. 对象解构const person = {name: '张三',age: 25,gender: '男',address: {city: '北京',district: '海淀区'}};// 基本对象解构const { name, age } = person;console.log("对象属性:", name, age);// 重命名属性const { name: personName, age: personAge } = person;console.log("重命名后的属性:", personName, personAge);// 默认值const { job = '未知' } = person;console.log("带默认值的对象解构:", job);// 嵌套对象解构const { address: { city, street = '未知街道' } } = person;console.log("嵌套解构:", city, street);// 3. 函数参数解构function printPersonInfo({ name, age, address: { city } }) {console.log(`姓名: ${name}, 年龄: ${age}, 城市: ${city}`);}printPersonInfo(person);
}// 调用函数执行演示
destructuringDemo();

案例3：箭头函数与this绑定

需求描述：创建一个程序，对比普通函数和箭头函数的this指向差异，展示箭头函数的特点和适用场景。

// 箭头函数练习
function arrowFunctionDemo() {// 1. 箭头函数基本语法const add = (a, b) => a + b;console.log("两数之和:", add(3, 5));// 2. 箭头函数与thisconst obj = {name: "示例对象",normalFunction: function() {console.log("普通函数中的this:", this); // 指向obj// 普通函数中的嵌套函数setTimeout(function() {console.log("普通函数中的嵌套函数this:", this); // 指向window/global}, 0);// 箭头函数作为嵌套函数setTimeout(() => {console.log("箭头函数作为嵌套函数this:", this); // 继承自外层作用域，指向obj}, 0);},arrowFunction: () => {console.log("箭头函数中的this:", this); // 指向外层作用域（这里是全局）}};console.log("调用普通函数:");obj.normalFunction();console.log("\n调用箭头函数:");obj.arrowFunction();// 3. 不适用箭头函数的场景const person = {name: "张三",// 不应该使用箭头函数的情况：对象方法getName: () => {return this.name; // 这里会出错，this不指向person},// 正确的做法getRealName: function() {return this.name;}};console.log("\n箭头函数作为对象方法:", person.getName()); // undefinedconsole.log("普通函数作为对象方法:", person.getRealName()); // 张三
}// 调用函数执行演示
arrowFunctionDemo();

案例4：剩余参数与扩展运算符

需求描述：创建一个程序，演示剩余参数和扩展运算符的用法，包括函数参数处理、数组操作等。

// 剩余参数与扩展运算符练习
function restAndSpreadDemo() {// 1. 剩余参数function sum(...numbers) {console.log("剩余参数:", numbers);return numbers.reduce((total, num) => total + num, 0);}console.log("求和结果:", sum(1, 2, 3, 4, 5));// 剩余参数与普通参数结合function multiply(multiplier, ...numbers) {return numbers.map(num => num * multiplier);}console.log("乘法结果:", multiply(2, 1, 2, 3, 4));// 2. 扩展运算符const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];// 数组合并const mergedArr = [...arr1, ...arr2];console.log("合并数组:", mergedArr);// 数组复制const arrCopy = [...arr1];console.log("复制的数组:", arrCopy);// 扩展运算符作为函数参数console.log("使用扩展运算符求和:", sum(...arr1));// 3. 伪数组转换为真数组function convertToArray() {// arguments是伪数组const args = [...arguments];console.log("转换后的数组:", args);console.log("是否为数组:", Array.isArray(args));}convertToArray('a', 'b', 'c', 'd');// 4. 对象的扩展运算符const obj1 = { a: 1, b: 2 };const obj2 = { c: 3, d: 4 };const mergedObj = { ...obj1, ...obj2, e: 5 };console.log("合并对象:", mergedObj);// 对象复制const objCopy = { ...obj1 };console.log("复制的对象:", objCopy);
}// 调用函数执行演示
restAndSpreadDemo();

案例5：Set数据结构与数组扩展

需求描述：创建一个程序，演示Set数据结构的用法和ES6中数组的扩展方法，实现数据去重、交集、并集等操作。

案例6：模板字符串与字符串扩展

需求描述：创建一个程序，演示模板字符串的用法和ES6中字符串的扩展方法，实现字符串拼接、格式化等操作。

// 模板字符串与字符串扩展练习
function stringDemo() {// 1. 模板字符串基本用法const name = "张三";const age = 25;// 多行字符串const multiLineStr = `姓名: ${name}
年龄: ${age}
职业: 程序员`;console.log("多行字符串:");console.log(multiLineStr);// 变量插值const info = `${name}今年${age}岁，${age > 18 ? '已成年' : '未成年'}`;console.log("带表达式的模板字符串:", info);// 2. 模板字符串中调用函数function greeting() {return "欢迎来到ES6的世界";}const welcomeMsg = `消息: ${greeting()}时间: ${new Date().toLocaleString()}`;console.log("模板字符串中调用函数:");console.log(welcomeMsg);// 3. 字符串扩展方法const str = "Hello, ES6!";// includes方法console.log("是否包含'ES6':", str.includes('ES6'));// startsWith方法console.log("是否以'Hello'开头:", str.startsWith('Hello'));// endsWith方法console.log("是否以'!'结尾:", str.endsWith('!'));// repeat方法console.log("重复3次:", "Hi ".repeat(3));// padStart和padEnd方法const num = "123";console.log("补全长度到6:", num.padStart(6, '0'));console.log("补全长度到6:", num.padEnd(6, '0'));// 4. 字符串遍历console.log("\n字符串遍历:");for (const char of str) {console.log(char);}
}// 调用函数执行演示
stringDemo();