亚洲精品成人片在线观看精品字幕,亚洲a∨无码男人的天堂,新婚少妇无套内谢国语播放,亚欧免费无码aⅴ在线观看,销魂老女人老熟妇69xx

碼上未來IT培訓(xùn)老師直接接聽

400-029-09** 400-029-0997 轉(zhuǎn) 36015
查看完整號碼
掃碼撥號
微信掃碼撥號

AI大模型全棧開發(fā)|前端基礎(chǔ)：JavaScript基礎(chǔ)-ES6

2025/7/3 0:24:25

前端基礎(chǔ)JavaScript基礎(chǔ)ES6課程前言Course...

前端基礎(chǔ)JavaScript基礎(chǔ)ES6

課程前言Course Introduction本課程聚焦于 JavaScript 進(jìn)階語法，系統(tǒng)講解 ES5 新增數(shù)組方法與 ES6 核心特性。從 ES5 的 forEach 遍歷、filter 過濾、some 查找等數(shù)組操作方法，到 ES6 的變量聲明（let/const）、解構(gòu)賦值、箭頭函數(shù)、擴(kuò)展運(yùn)算符等革命性語法升級，全面覆蓋現(xiàn)代前端開發(fā)必備的語法知識。課程結(jié)合代碼實(shí)例與面試場景，不僅幫助開發(fā)者提升編碼效率，更針對 this 指向、作用域差異等高頻面試考點(diǎn)進(jìn)行深入解析，助力學(xué)習(xí)者夯實(shí)基礎(chǔ)并突破技術(shù)瓶頸。一ES5 數(shù)組新方法與對象操作

CodingFuture

1.1forEach 數(shù)組遍歷

forEach 方法用于遍歷數(shù)組，對每個元素執(zhí)行回調(diào)函數(shù)，無返回值但可修改外部變量。// 案例：計(jì)算數(shù)組元素累加和var arr = [1, 2, 3, 4, 5];var sum = 0;arr.forEach(function(value, index, arr) {    console.log("當(dāng)前元素：" + value);    console.log("索引：" + index);    console.log("數(shù)組本身：" + arr);    sum += value;});console.log("總和：" + sum); // 輸出 15關(guān)鍵點(diǎn)：回調(diào)函數(shù)接收三個參數(shù)：當(dāng)前元素 value、索引 index、原數(shù)組 arr無法通過 return 終止遍歷，必須遍歷完所有元素1.2 filter 數(shù)組過濾

filter 方法根據(jù)條件過濾數(shù)組，返回滿足條件的新數(shù)組。// 案例：篩選大于等于20的元素var arr = [12, 66, 4, 88, 3, 7];var newArr = arr.filter(function(value) {    return value >= 20;});console.log(newArr); // 輸出 [66, 88]應(yīng)用場景：數(shù)據(jù)篩選（如從用戶列表中篩選活躍用戶）去重（結(jié)合其他方法）1.3some 查找符合條件的元素

some 方法檢查數(shù)組中是否存在滿足條件的元素，返回布爾值，找到第*個符合條件的元素后立即終止遍歷。// 案例：檢查數(shù)組中是否有小于3的元素var arr = [10, 30, 4];var hasSmall = arr.some(function(value) {return value < 3;});console.log(hasSmall); // 輸出 false與 forEach/filter 的區(qū)別：some：短路特性（找到即停），返回布爾值forEach：無返回值，必須遍歷所有元素filter：返回新數(shù)組，包含所有滿足條件的元素1.4find 與 findIndex

find 返回第*個符合條件的元素，findIndex 返回其索引，未找到分別返回 undefined 和 -1。// 案例：查找對象數(shù)組中名為"李四"的元素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 核心語法進(jìn)階

CodingFuture

2.1ES6 概述與優(yōu)勢

ES6（ECMAScript 2015）是 JavaScript 的重要升級，解決了 ES5 的痛點(diǎn)：變量提升導(dǎo)致的作用域混亂語法松散（如函數(shù)作用域）缺乏模塊化和類機(jī)制2.2變量聲明：let 與 const

let：塊級作用域變量// 1. 塊級作用域if (true) {    let a = 10;    console.log(a); // 10}console.log(a); // 報(bào)錯：a is not defined// 2. 無變量提升console.log(b); // 報(bào)錯：b is not definedlet b = 20;// 3. 禁止重復(fù)聲明let c = 1;let c = 2; // 報(bào)錯：Identifier "c" has already been declaredconst：常量聲明// 1. 必須初始化const PI; // 報(bào)錯：Missing initializer in const declaration// 2. 值不可修改const URL = "https://example.com";URL = "https://new.com"; // 報(bào)錯：Assignment to constant variable// 3. 塊級作用域if (true) {const MAX = 100;}console.log(MAX); // 報(bào)錯：MAX is not definedlet/const/var 對比表特性varletconst作用域函數(shù)作用域塊級作用域塊級作用域變量提升有無無重復(fù)聲明允許禁止禁止值修改允許允許禁止2.3解構(gòu)賦值：簡化數(shù)據(jù)提取

數(shù)組解構(gòu)// 基礎(chǔ)用法let [a, b, c] = [1, 2, 3];console.log(a, b, c); // 1 2 3// 默認(rèn)值let [x = 0, y = 0] = [1];console.log(x, y); // 1 0// 忽略值let [, , z] = [1, 2, 3];console.log(z); // 3對象解構(gòu)// 基礎(chǔ)用法（屬性名與變量名一致）let { name, age } = { name: "張三", age: 20 };console.log(name, age); // 張三 20// 自定義變量名let { name: userName, age: userAge } = { name: "李四", age: 25 };console.log(userName, userAge); // 李四 25// 默認(rèn)值let { sex = "男" } = { name: "王五" };console.log(sex); // 男字符串解構(gòu)let [first, second, ...rest] = "hello";console.log(first, second, rest); // "h" "e" ["l", "l", "o"]2.4函數(shù)擴(kuò)展：參數(shù)與運(yùn)算符

參數(shù)默認(rèn)值// ES6 寫法function greet(name = "訪客"){return `Hello, ${name}!`;}console.log(greet()); // Hello, 訪客!console.log(greet("張三")); // Hello, 張三!// ES5 等效寫法function greetES5(name){    name = name || "訪客";return"Hello, " + name + "!";}剩余參數(shù)（...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擴(kuò)展運(yùn)算符（...）// 合并數(shù)組let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];let merged = [...arr1, ...arr2]; // [1,2,3,4,5,6]// 函數(shù)調(diào)用function max(a, b, c){return Math.max(a, b, c);}let numbers = [5, 10, 3];console.log(max(...numbers)); // 10// 類數(shù)組轉(zhuǎn)數(shù)組let divs = document.querySelectorAll("div");let divArray = [...divs];2.5箭頭函數(shù)：簡潔語法與 this 綁定

基礎(chǔ)語法// 無參數(shù)let sayHi = () => console.log("Hi!");// 單個參數(shù)let double = x => x * 2;// 多個參數(shù)let sum = (a, b) => a + b;// 函數(shù)體多行代碼let greet = name => {    let message = `Hello, ${name}`;return message;};this 指向特性箭頭函數(shù)的 this 指向定義時(shí)的作用域，而非調(diào)用時(shí)：var age = 100;var obj = {    age: 20,    // 箭頭函數(shù)的this指向全局作用域    say: () => {        alert(this.age); // 輸出 100    },    // 普通函數(shù)的this指向obj    sayNormal: function() {        alert(this.age); // 輸出 20    }};obj.say(); // 100obj.sayNormal(); // 202.6字符串?dāng)U展：模板與功能增強(qiáng)

模板字符串// 變量解析let name = "張三";let msg = `你好，我是${name}，今年${20 + 5}歲。`;console.log(msg); // 你好，我是張三，今年25歲。// 多行文本let html = `<div>    <h1>${name}</h1>    <p>歡迎訪問</p></div>`;console.log(html);// 函數(shù)調(diào)用function getTime(){returnnew Date().toLocaleTimeString();}let timeMsg = `當(dāng)前時(shí)間：${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 數(shù)據(jù)結(jié)構(gòu)：值集合

Set 是一種成員的集合，常用于數(shù)組去重：// 初始化let set = new Set([1, 2, 3, 3, 4]); // {1, 2, 3, 4}// 實(shí)例方法set.add(5);         // 添加元素set.delete(3);      // 刪除元素console.log(set.has(2)); // 檢查是否存在console.log(set.size);   // 獲取大小set.clear();        // 清空集合// 數(shù)組去重let arr = [1, 2, 2, 3, 4, 4];let uniqueArr = [...new Set(arr)]; // [1, 2, 3, 4]

結(jié)言陳詞Closing statement通過本課程的學(xué)習(xí)，我們深入掌握了 ES5 與 ES6 的核心語法特性：從 ES5 數(shù)組方法的靈活運(yùn)用到 ES6 在變量作用域、函數(shù)定義、數(shù)據(jù)結(jié)構(gòu)等方面的優(yōu)化，這些知識構(gòu)成了現(xiàn)代 JavaScript 開發(fā)的重要基礎(chǔ)。無論是 let 與 const 的塊級作用域特性，還是箭頭函數(shù)對 this 綁定機(jī)制的簡化，亦或是 Set 數(shù)據(jù)結(jié)構(gòu)與模板字符串帶來的開發(fā)效率提升，都已成為前端工程師必備的技能。建議學(xué)習(xí)者結(jié)合實(shí)例反復(fù)練習(xí)，尤其關(guān)注 some 與 filter 的性能差異、箭頭函數(shù) this 指向等易混點(diǎn)，將理論知識轉(zhuǎn)化為實(shí)際開發(fā)能力，為應(yīng)對復(fù)雜項(xiàng)目需求與技術(shù)面試奠定堅(jiān)實(shí)基礎(chǔ)。下期課程預(yù)告：JavaScript基礎(chǔ)-jQuery碼上未來為同學(xué)們安排統(tǒng)一答疑掃碼添加微信領(lǐng)取詳細(xì)課程大綱

微信號:CodingFuture2020

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

添加微信咨詢
夏老師 @大連碼上未來IT培訓(xùn)

資深職業(yè)咨詢規(guī)劃師

微信號：155******12

立即咨詢

“大連碼上未來IT培訓(xùn)”是碼上未來科技(大連)有限公司在教育寶平臺開設(shè)的店鋪，若該店鋪內(nèi)信息涉嫌虛假或違法，請點(diǎn)擊這里向教育寶反饋，我們將及時(shí)進(jìn)行處理。

機(jī)構(gòu)評分

環(huán)境：5.0師資：5.0服務(wù)：5.0效果：5.0

公示信息

店鋪名稱：大連碼上未來IT培訓(xùn)

單位名稱：碼上未來科技(大連)有限公司

賬號名稱：mswl（158******92）

所屬城市：遼寧大連

入駐時(shí)長：6年

在線客服：在線聊

微信咨詢

返回頂部