码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

AI大模型全栈开发|前端基础：JavaScript基础-ES6

2025/7/3 0:24:25

前端基础JavaScript基础ES6课程前言Course...

前端基础JavaScript基础ES6

课程前言Course Introduction本课程聚焦于 JavaScript 进阶语法，系统讲解 ES5 新增数组方法与 ES6 核心特性。从 ES5 的 forEach 遍历、filter 过滤、some 查找等数组操作方法，到 ES6 的变量声明（let/const）、解构赋值、箭头函数、扩展运算符等革命性语法升级，全面覆盖现代前端开发必备的语法知识。课程结合代码实例与面试场景，不仅帮助开发者提升编码效率，更针对 this 指向、作用域差异等高频面试考点进行深入解析，助力学习者夯实基础并突破技术瓶颈。一ES5 数组新方法与对象操作

CodingFuture

1.1forEach 数组遍历

forEach 方法用于遍历数组，对每个元素执行回调函数，无返回值但可修改外部变量。// 案例：计算数组元素累加和var arr = [1, 2, 3, 4, 5];var sum = 0;arr.forEach(function(value, index, arr) {    console.log("当前元素：" + value);    console.log("索引：" + index);    console.log("数组本身：" + arr);    sum += value;});console.log("总和：" + sum); // 输出 15关键点：回调函数接收三个参数：当前元素 value、索引 index、原数组 arr无法通过 return 终止遍历，必须遍历完所有元素1.2 filter 数组过滤

filter 方法根据条件过滤数组，返回满足条件的新数组。// 案例：筛选大于等于20的元素var arr = [12, 66, 4, 88, 3, 7];var newArr = arr.filter(function(value) {    return value >= 20;});console.log(newArr); // 输出 [66, 88]应用场景：数据筛选（如从用户列表中筛选活跃用户）去重（结合其他方法）1.3some 查找符合条件的元素

some 方法检查数组中是否存在满足条件的元素，返回布尔值，找到第*个符合条件的元素后立即终止遍历。// 案例：检查数组中是否有小于3的元素var arr = [10, 30, 4];var hasSmall = arr.some(function(value) {return value < 3;});console.log(hasSmall); // 输出 false与 forEach/filter 的区别：some：短路特性（找到即停），返回布尔值forEach：无返回值，必须遍历所有元素filter：返回新数组，包含所有满足条件的元素1.4find 与 findIndex

find 返回第*个符合条件的元素，findIndex 返回其索引，未找到分别返回 undefined 和 -1。// 案例：查找对象数组中名为"李四"的元素var arr = [    { id: 1, name: "张三" },    { id: 2, name: "李四" },    { id: 3, name: "王五" }];var person = arr.find(item => item.name === "李四");var index = arr.findIndex(item => item.name === "李四");console.log(person); // 输出 { id: 2, name: "李四" }console.log(index);   // 输出 11.5字符串与对象操作

trim () 去除两端空格var str = "  hello world  ";console.log(str.trim()); // 输出 "hello world"Object.keys 获取对象属性名var obj = { id: 1, name: "小米", price: 1999 };var keys = Object.keys(obj); // ["id", "name", "price"]keys.forEach(key => console.log(key));Object.defineProperty 定义属性var obj = { id: 1, name: "小米" };// 修改属性值Object.defineProperty(obj, "name", { value: "华为" });// 新增属性（不可修改）Object.defineProperty(obj, "price", {    value: 4999,    writable: false, // 禁止修改    configurable: false// 禁止删除});obj.price = 5999; // 修改失败delete obj.price; // 删除失败二ES6 核心语法进阶

CodingFuture

2.1ES6 概述与优势

ES6（ECMAScript 2015）是 JavaScript 的重要升级，解决了 ES5 的痛点：变量提升导致的作用域混乱语法松散（如函数作用域）缺乏模块化和类机制2.2变量声明：let 与 const

let：块级作用域变量// 1. 块级作用域if (true) {    let a = 10;    console.log(a); // 10}console.log(a); // 报错：a is not defined// 2. 无变量提升console.log(b); // 报错：b is not definedlet b = 20;// 3. 禁止重复声明let c = 1;let c = 2; // 报错：Identifier "c" has already been declaredconst：常量声明// 1. 必须初始化const PI; // 报错：Missing initializer in const declaration// 2. 值不可修改const URL = "https://example.com";URL = "https://new.com"; // 报错：Assignment to constant variable// 3. 块级作用域if (true) {const MAX = 100;}console.log(MAX); // 报错：MAX is not definedlet/const/var 对比表特性varletconst作用域函数作用域块级作用域块级作用域变量提升有无无重复声明允许禁止禁止值修改允许允许禁止2.3解构赋值：简化数据提取

数组解构// 基础用法let [a, b, c] = [1, 2, 3];console.log(a, b, c); // 1 2 3// 默认值let [x = 0, y = 0] = [1];console.log(x, y); // 1 0// 忽略值let [, , z] = [1, 2, 3];console.log(z); // 3对象解构// 基础用法（属性名与变量名一致）let { name, age } = { name: "张三", age: 20 };console.log(name, age); // 张三 20// 自定义变量名let { name: userName, age: userAge } = { name: "李四", age: 25 };console.log(userName, userAge); // 李四 25// 默认值let { sex = "男" } = { name: "王五" };console.log(sex); // 男字符串解构let [first, second, ...rest] = "hello";console.log(first, second, rest); // "h" "e" ["l", "l", "o"]2.4函数扩展：参数与运算符

参数默认值// ES6 写法function greet(name = "访客"){return `Hello, ${name}!`;}console.log(greet()); // Hello, 访客!console.log(greet("张三")); // Hello, 张三!// ES5 等效写法function greetES5(name){    name = name || "访客";return"Hello, " + name + "!";}剩余参数（...rest）function sum(a, b, ...nums){return a + b + nums.reduce((total, num) => total + num, 0);}console.log(sum(1, 2, 3, 4)); // 1+2+3+4=10扩展运算符（...）// 合并数组let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];let merged = [...arr1, ...arr2]; // [1,2,3,4,5,6]// 函数调用function max(a, b, c){return Math.max(a, b, c);}let numbers = [5, 10, 3];console.log(max(...numbers)); // 10// 类数组转数组let divs = document.querySelectorAll("div");let divArray = [...divs];2.5箭头函数：简洁语法与 this 绑定

基础语法// 无参数let sayHi = () => console.log("Hi!");// 单个参数let double = x => x * 2;// 多个参数let sum = (a, b) => a + b;// 函数体多行代码let greet = name => {    let message = `Hello, ${name}`;return message;};this 指向特性箭头函数的 this 指向定义时的作用域，而非调用时：var age = 100;var obj = {    age: 20,    // 箭头函数的this指向全局作用域    say: () => {        alert(this.age); // 输出 100    },    // 普通函数的this指向obj    sayNormal: function() {        alert(this.age); // 输出 20    }};obj.say(); // 100obj.sayNormal(); // 202.6字符串扩展：模板与功能增强

模板字符串// 变量解析let name = "张三";let msg = `你好，我是${name}，今年${20 + 5}岁。`;console.log(msg); // 你好，我是张三，今年25岁。// 多行文本let html = `<div>    <h1>${name}</h1>    <p>欢迎访问</p></div>`;console.log(html);// 函数调用function getTime(){returnnew Date().toLocaleTimeString();}let timeMsg = `当前时间：${getTime()}`;console.log(timeMsg);新增方法// startsWith/endsWithlet str = "Hello ES6";console.log(str.startsWith("Hello")); // trueconsole.log(str.endsWith("ES6")); // true// includesconsole.log(str.includes("ES")); // true// repeatlet repeated = "*-".repeat(3); // "*-*-*-"console.log(repeated);2.7Set 数据结构：值集合

Set 是一种成员的集合，常用于数组去重：// 初始化let set = new Set([1, 2, 3, 3, 4]); // {1, 2, 3, 4}// 实例方法set.add(5);         // 添加元素set.delete(3);      // 删除元素console.log(set.has(2)); // 检查是否存在console.log(set.size);   // 获取大小set.clear();        // 清空集合// 数组去重let arr = [1, 2, 2, 3, 4, 4];let uniqueArr = [...new Set(arr)]; // [1, 2, 3, 4]

结言陈词Closing statement通过本课程的学习，我们深入掌握了 ES5 与 ES6 的核心语法特性：从 ES5 数组方法的灵活运用到 ES6 在变量作用域、函数定义、数据结构等方面的优化，这些知识构成了现代 JavaScript 开发的重要基础。无论是 let 与 const 的块级作用域特性，还是箭头函数对 this 绑定机制的简化，亦或是 Set 数据结构与模板字符串带来的开发效率提升，都已成为前端工程师必备的技能。建议学习者结合实例反复练习，尤其关注 some 与 filter 的性能差异、箭头函数 this 指向等易混点，将理论知识转化为实际开发能力，为应对复杂项目需求与技术面试奠定坚实基础。下期课程预告：JavaScript基础-jQuery码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲

微信号:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部