前端技術棧es6+promise

let入門使用、

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let 基本使用</title><script type="text/javascript">let name = "hspedu教育";//老韓解讀//1. console.log("name=", name); //使用, 可以輸出對象的完整信息// 使用+, 字符串的拼接, 如果name是一個對象, 會輸出object, 而不會輸出對象的完整信息//2. console.log("name="+ name);console.log("name=", name);</script>
</head>
<body></body>
</html>

const常量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>const常量/只讀變量的使用</title><script type="text/javascript">//const 基本使用 => 想一想java基礎[語言語法很多是相通]/**老韓解讀1. 常量在定義時，需要賦值2. 常量賦值后不能修改*///常量const PI = 3.14;//invalid assignment to const 'PI'//PI = 3.1415926;console.log("PI=", PI)</script>
</head>
<body></body>
</html>

聲明對象·

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>聲明對象的簡寫方式</title><script type="text/javascript">const age = 800;const name = "牛魔王";// 傳統 聲明/定義對象let monster = {name: name, age: age};// ES6 聲明/定義對象//老師解讀//1. {name, age} : 表示對象的屬性名是name和age//2. 屬性name的值是從變量/常量 name來的let monster02 = {name, age};console.log("monster02=>", monster02);</script>
</head>
<body></body>
</html>

模板字符串的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板字符串的使用</title><script type="text/javascript">//1、字符串，換行會原生輸出let str1 = `for(int i = 0;i < 10;i++){System.out.println("i="+i);}`;console.log("str1=", str1);//2. 字符串插入變量和表達式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式。let name = "hspedu教育";//老師解讀//(1) 當解析 ${name}, 就找最近的name遍歷, 進行替換//(2) 然后可以得到最后解析的字符串let str2 = `教育名稱=${name}`;let str3 = `1+2=${1 + 2}`;let n1 = 80;let n2 = 20;let str4 = `${n1}+${n2}=${n1 + n2}`;console.log("str2=", str2);console.log("str3=", str3);console.log("str4=", str4);//3. 字符串中調用函數function sayHi(name) {return "hi " + name;}let name2 = "tom";let str5 = `sayHi() 返回的結果是=${sayHi('jack')}`;let str6 = `sayHi() 返回的結果是=${sayHi(name2)}`;console.log("str5=", str5);console.log("str6=", str6);</script>
</head>
<body></body>
</html>

在這里插入圖片描述

對象方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對象方法的簡寫形式</title><script type="text/javascript">// 傳統-對象方法定義let monster = {name: "紅孩兒",age: 100,sayHi: function () {console.log("信息: name=", this.name, " age=", this.age);}}monster.f10 = function () {console.log("哈哈");};monster.sayHi();monster.f10();// ES6-對象方法定義let monster2 = {name: "紅孩兒~",age: 900,sayHi() {console.log("信息: name=", this.name, " age=", this.age);},f1() {console.log("f1()");}}monster2.sayHi();monster2.f1();</script>
</head>
<body></body>
</html>

對象運算符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對象運算符的擴展</title><script type="text/javascript">let cat = {name: "小花貓", age: 2};// let cat2 = cat;// cat2.name = "大花貓";// console.log("cat=>", cat);// console.log("cat2=>", cat2);//// 拷貝對象(深拷貝)let cat2 = {...cat};cat2.name = "中花貓";console.log("cat=>", cat);//小花貓console.log("cat2=>", cat2);//中花貓// 合并對象[深拷貝]let monster = {name: "白骨精", age: 100};let car = {brand: "奔馳", price: 800000};let monster_car = {...monster, ...car}monster_car.name = "狐貍精";console.log("monster=>", monster);console.log("monster_car=>", monster_car);</script>
</head>
<body></body>
</html>

對象解構

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對象解構</title><script type="text/javascript">//對象解構/*** let monster = {name: '牛魔王', age: 800}* 細節說明* 1. 對象解構時，let{name, age} 中的 name 和 age 名稱需要和對象屬性名保持一致* 2. 也可解構對象部分屬性，比如 let{age} 這樣就只取出age 屬性* 3. 還有其它的形式,比如方法上使用對象解構*///monster是一個對象let monster = {name: '牛魔王', age: 800};//傳統方式取出屬性-解構 對象名.屬性名console.log(monster.name, " ", monster.age);//ES6對象解構//老韓解讀//1. 把monster對象的屬性, 賦值給{name,age}//2. {name,age} 的取名name 和 age 要和monster對象的屬性名保持一致//3. 使用{} 包括, 不要使用[]//4. {name,age} 順序是無所謂let {name, age} = monster;console.log("========================");console.log("name=", name, " age=", age);//下面這個寫法也可以//let {name, age} = {name: '牛魔王', age: 800};//還有其它的形式,比如方法上使用對象解構//如果這樣使用，仍然要保證名稱和對象的屬性名一致function f1({name, age}) {console.log("f1-name=", name, " ", "f1-age=", age)}f1(monster);</script>
</head>
<body></body>
</html>

let細節

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let 使用注意事項和細節</title><script type="text/javascript">// let 細節1// (1) let 聲明的變量, 在代碼塊中，則作用域在代碼塊中// (2) var聲明的變量, 在代碼塊中，作用域沒有限制{var name = "韓順平教育";let job = "java工程師";console.log("name=", name);console.log("job=", job);}console.log("name=", name);//console.log("job=", job);//job is not defined// let 細節2// 1. var 可以聲明多次// 2. let 只能聲明一次var num1 = 100;var num1 = 200;console.log(num1);let num2 = 600;//Syntax => 語法//let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2console.log(num2);// let 細節3// 1. let 不存在變量提升// 2. var 存在變量提升console.log("x=", x);//undefinedvar x = "tom";//can't access lexical declaration 'z'console.log("z=", z);let  z = "mary";</script>
</head>
<body></body>
</html>

數組賦值解構

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>數組解構賦值</title><script type="text/javascript">let arr = [1, 2, 3];//如果要看某個變量的類型console.log("arr=>", arr);//數組解構[取出元素]//1.傳統let x = arr[0], y = arr[1], z = arr[2];console.log(x, y, z);//2. ES6風格let [a, b, c] = arr;console.log("==================================");console.log(a, b, c);let [num1, num2, num3] = [100, 200, 300];console.log(num1, num2, num3);</script>
</head>
<body></body>
</html>

箭頭函數

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭頭函數的使用</title><script type="text/javascript">// 傳統定義函數var f1 = function (n) {return n * 2}console.log("傳統= " + f1(2))// ES6 , 箭頭函數使用let f2 = (n) => {return n * 2;}console.log("f2() 結果= ", f2(100));//200//上面的es6 函數寫法，還可以簡化let f3 = n => n * 3;console.log("f3() 結果=", f3(100));//300//函數也可以傳給一個變量=> 看看java基礎匿名內部類function hi(f4) {console.log(f4(900));}hi((n) => {return n + 100});hi((n) => {return n - 100});</script>
</head>
<body></body>
</html>

在這里插入圖片描述

箭頭函數2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭頭函數使用案例2</title><script type="text/javascript">// 傳統var f1 = function (n, m) {var res = 0for (var i = n; i <= m; i++) {res += i}return res}console.log("傳統= " + f1(1, 10))// ES6 , 箭頭函數使用let f2 = (n, m) => {var res = 0for (var i = n; i <= m; i++) {res += i}return res};console.log(f2(1, 10));</script>
</head>
<body></body>
</html>

箭頭函數與對象解構

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭頭函數+對象解構</title><script type="text/javascript">const monster = {name: "紅孩兒",age: 1000,skill: ['紅纓槍', '三位真火']}//要求：在方法形參取出monster對象的skill屬性//傳統方式function f1(monster) {console.log("skill=", monster.skill);}f1(monster);//箭頭函數let f2 = ({skill}) => {console.log("skill=", skill);}//老韓解讀//1. f2 傳入對象 monster//2. f2形參是 {skill} , 所以es6的對象解構特性, 會把monster對象的 skill屬性賦給//   skill//3. 對象解構的前提就是 {skill}的skill 和 monster的 skill屬性是一致f2(monster);//箭頭函數+解構, 注意有{}, skill 名稱需要和對象屬性名一致.let f3 = ({age, name, skill}) => {console.log("skill=", skill, " age=", age, " name=", name);}f3(monster);</script>
</head>
<body></body>
</html>

在這里插入圖片描述

作業1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 給你一個對象let cat = {name: 'jack', age: 10}; 要求使用模板字符串顯示cat的信息let cat = {name: 'jack', age: 10};let str = `cat的信息為 name=${cat.name} age=${cat.age}`;console.log(str);</script>
</head>
<body></body>
</html>

作業2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//看下面的代碼, 請問輸出什么， 并分析原因let dog = {name: "大黃", age: 3};//老師分析//1. 使用對象解構//2. namex  undefined//3. age 3let {namex, age} = dog;console.log("namex=", namex, " age=", age);</script>
</head>
<body></body>
</html>

作業3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//根據給出的數據, 用ES6的方式, 構建對象person, 并提供方法(用最簡潔的方式), 可以輸出信息const name = "周星馳";const job = "演員";let person = {name,job,show() {console.log("person信息 name=", this.name, " job=", this.job);}}person.show();</script>
</head>
<body></body>
</html>

作業4

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//根據給出的數據, 用ES6的方式, 編寫方法, 使用對象解構的方式, 得到 oper 和 arr, 并根據oper的值 , oper可以是+、-、*、/  來計算結果var cal = {oper: "/",arr: [1, 2, 3, 5]}function f1({oper, arr}) {let res = 0;//初始化的值，要分析考慮//這里小伙伴們可以考慮arr的傳入，并且做分析//判斷arr 是不是null, 并且arr.length <=1 , 就直接返回arr[0]if ("+" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res += arr[i];}} else if ("-" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res -= arr[i];}} else if ("*" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res *= arr[i];}} else if ("/" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res /= arr[i];}} else {console.log("oper輸入不正確..")}return res;}console.log("f1運算的結果=", f1(cal))</script>
</head>
<body></body>
</html>

作業5

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//調用f8 函數, arr是數組, fun傳入箭頭函數, 可以計算 arr的和, 并寫出調用方法function f8(arr, fun) {console.log(fun(arr));//調用模板}f8([1, 2, 3, 4, 5], (arr) => {let res = 0;for (let i = 0; i < arr.length; i++) {res += arr[i];}return res;})</script>
</head>
<body></body>
</html>

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/38541.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/38541.shtml
英文地址，請注明出處：http://en.pswp.cn/news/38541.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

蘋果Mac像Windows一樣使用

蘋果Mac像Windows一樣使用

一、將磁盤訪問設置的像Windows一樣&#xff1a; 1.1、點擊任務欄第一個按鈕打開“訪達”&#xff0c;點擊菜單欄上的訪達-偏好設置&#xff1a; 1.2、勾選“硬盤”&#xff0c;這樣macOS的桌面上就會顯示一個本地磁盤&#xff0c;之后重命名為磁盤根&#xff0c;相當于window…
閱讀更多...
SPF9139全力適配ios16與鴻蒙3.0，超實用數據提取、分析、恢復能力UP！

SPF9139全力適配ios16與鴻蒙3.0，超實用數據提取、分析、恢復能力UP！

? 如今&#xff0c;群聊已成為人們必不可少的溝通窗口 家人群&#xff0c;好友群&#xff0c;班級群 粉絲群&#xff0c;交友群&#xff0c;工作群 …… 各類群聊鋪天蓋地般涌來的同時 也有一些群聊淪為了 賭博、傳播淫穢視頻、發表不當言論 等違法犯罪行為滋生之地 與…
閱讀更多...
mac 可以進行單片機（stm32）的開發嗎？

mac 可以進行單片機（stm32）的開發嗎？

當涉及到在Mac上進行單片機開發時&#xff0c;是完全可行的。以下是為什么Mac適合單片機開發的解釋&#xff1a;開發工具&#xff1a;針對STM32單片機&#xff0c;你可以使用多種開發工具。一個常用的選擇是Segger Embedded Studio&#xff0c;它是一個功能強大的集成開發環境&…
閱讀更多...
ClickHouse（十八）：Clickhouse Integration系列表引擎

ClickHouse（十八）：Clickhouse Integration系列表引擎

進入正文前&#xff0c;感謝寶子們訂閱專題、點贊、評論、收藏&#xff01;關注IT貧道&#xff0c;獲取高質量博客內容&#xff01; &#x1f3e1;個人主頁&#xff1a;含各種IT體系技術&#xff0c;IT貧道_Apache Doris,大數據OLAP體系技術棧,Kerberos安全認證-CSDN博客 &…
閱讀更多...
IDEA常用設置與maven項目部署

IDEA常用設置與maven項目部署

目錄 前言 一、Idea是什么 二、Idea的優點 三、Idea的常用設置 主題設置 設置鼠標懸浮提示 忽略大小寫提示 自動導包 取消單行顯示Tabs 設置字體 配置類文檔注釋信息模版 設置文件編碼 設置自動編譯 水平或者垂直顯示代碼 快捷方式改成eclipse 設置默認瀏覽器…
閱讀更多...
Java并發編程（六）線程池[Executor體系]

Java并發編程（六）線程池[Executor體系]

概述 在處理大量任務時,重復利用線程可以提高程序執行效率,因此線程池應運而生。 它是一種重用線程的機制,可以有效降低內存資源消耗提高響應速度。當任務到達時&#xff0c;任務可以不需要的等到線程創建就能立即執行線程池可以幫助我們更好地管理線程的生命周期和資源使用,…
閱讀更多...
Jmeter - 函數助手

Jmeter - 函數助手

目錄 __StringFromFile __CSVRead __counter __RandomString __StringFromFile StringFromFile函數用于獲取文本文件的值&#xff0c;一次讀取一行 1、輸入文件的全路徑&#xff1a;填入文件路徑 2、存儲結果的變量名&#xff08;可選&#xff09; 3、Start file sequence …
閱讀更多...
Tomcat+Http+Servlet

Tomcat+Http+Servlet

文章目錄 1.HTTP1.1 請求和響應HTTP請求&#xff1a;請求行請求頭請求體HTTP響應&#xff1a;響應行&#xff08;狀態行&#xff09;響應頭響應體 2. Apache Tomcat2.1 基本使用2.2 IDEA中創建 Maven Web項目2.3 IDEA中使用Tomcat 3. Servlet3.1 Servlet快速入門3.2 Servlet執行…
閱讀更多...
游戲中的UI適配

游戲中的UI適配

引用參考&#xff1a;感謝GPT UI適配原理以及常用方案 游戲UI適配是確保游戲界面在不同設備上以不同的分辨率、屏幕比例和方向下正常顯示的關鍵任務。下面是一些常見的游戲UI適配方案&#xff1a; 1.分辨率無關像素&#xff08;Resolution-Independent Pixels&#xff09;&a…
閱讀更多...
CentOS 8 安裝 oracle 23c CentOS9 Error deal

CentOS 8 安裝 oracle 23c CentOS9 Error deal

1.環境準備 軟件準備 序號 軟件 下載地址 1 VirtualBox https://www.virtualbox.org/wiki/Downloads2 CentOS Stream 8 https://mirrors.tuna.tsinghua.edu.cn/centos/8-stream/isos/x86_64/CentOS-Stream-8-x86_64-latest-dvd1.iso3 oracle-database-free-23c # cd ~/Down…
閱讀更多...
Vue 3 中定義組件常用方法

Vue 3 中定義組件常用方法

在Vue 3 中有多種定義組件的方法。從選項到組合再到類 API&#xff0c;情況大不相同 1、方式一&#xff1a;Options API 這是在 Vue 中聲明組件的最常見方式。從版本 1 開始可用&#xff0c;您很可能已經熟悉它。一切都在對象內聲明&#xff0c;數據在幕后由 Vue 響應。它不是…
閱讀更多...
C語言實現快速排序

C語言實現快速排序

什么是快速排序&#xff1f; 快速排序&#xff08;Quick Sort&#xff09; 是一種高效的分治法排序算法。它通過選擇一個基準元素&#xff0c;將數組分成小于基準的部分和大于基準的部分&#xff0c;然后遞歸地對這些部分進行排序&#xff0c;最終將它們合并起來&#xff0c;完…
閱讀更多...
【廣州華銳視點】VR警務教育實訓系統模擬真實場景進行實踐訓練

【廣州華銳視點】VR警務教育實訓系統模擬真實場景進行實踐訓練

隨著科技的發展&#xff0c;虛擬現實技術在教育領域得到了廣泛的應用。VR警務教育實訓系統就是其中的一種應用&#xff0c;該系統由廣州華銳互動開發&#xff0c;可以模擬真實的警務場景&#xff0c;讓學生通過虛擬現實技術進行實踐訓練&#xff0c;提高學生的實踐能力和技能水…
閱讀更多...
.NET6使用微信小程序授權登錄,獲取手機號

.NET6使用微信小程序授權登錄,獲取手機號

1.在appsettings配置你的小程序配置信息 //微信小程序信息配置"WechatConfig": {"appid": "", //小程序ID"secret": "" //小程序秘鑰},2.請求接口時先獲取Access_token #region 獲取小程序的Access_tokenpublic object GetA…
閱讀更多...
Linux：shell腳本循環語句

Linux：shell腳本循環語句

目錄 一、循環含義 二、echo命令 三、for 3.1.將1到100累加求和 3.2批量添加用戶 3.3 根據IP地址檢查主機狀態 四、 while 和 until 4.1 猜價格 4.2 1-100求和 一、循環含義 循環含義 將某代碼段重復運行多次&#xff0c;通常有進入循環的條件和退出循環的條件 重復…
閱讀更多...
視頻匯聚平臺EasyCVR視頻監控播放平臺WebRTC流地址無法播放的問題解決方案

視頻匯聚平臺EasyCVR視頻監控播放平臺WebRTC流地址無法播放的問題解決方案

開源EasyDarwin視頻監控TSINGSEE青犀視頻平臺EasyCVR能在復雜的網絡環境中&#xff0c;將分散的各類視頻資源進行統一匯聚、整合、集中管理&#xff0c;在視頻監控播放上&#xff0c;TSINGSEE青犀視頻安防監控匯聚平臺可支持1、4、9、16個畫面窗口播放&#xff0c;可同時播放多…
閱讀更多...
Linux的ln命令

Linux的ln命令

ln是link的縮寫,在Linux中 ln 命令的功能是為某一個文件在另外一個位置建立一個同步的鏈接&#xff0c;當我們需要在不同的目錄&#xff0c;用到相同的文件時&#xff0c;我們不需要在每一個需要的目錄下都放一個必須相同的文件&#xff0c;我們只要在某個固定的目錄&#xff0…
閱讀更多...
Ubuntu18.04.4裸機配置

Ubuntu18.04.4裸機配置

下載虛擬機Ubuntu18.04.4 鏈接&#xff1a;https://pan.baidu.com/s/1jyucyUSXa9-Fw9ctuU87hA 提取碼&#xff1a;o42a –來自百度網盤超級會員V5的分享 VMware選擇鏡像安裝 設置你的用戶名&#xff0c;就像windows上登錄用戶一樣簡單 下一步……下一步……如此簡單 下載…
閱讀更多...
Floyd(多源匯最短路)

Floyd(多源匯最短路)

Floyd求最短路 給定一個 n 個點 m 條邊的有向圖&#xff0c;圖中可能存在重邊和自環&#xff0c;邊權可能為負數。 再給定 k 個詢問&#xff0c;每個詢問包含兩個整數 x 和 y&#xff0c;表示查詢從點 x 到點 y 的最短距離&#xff0c;如果路徑不存在&#xff0c;則輸出 impo…
閱讀更多...
每日一題 33搜素旋轉排序數組（二分）

每日一題 33搜素旋轉排序數組（二分）

題目 整數數組 nums 按升序排列&#xff0c;數組中的值 互不相同 。 在傳遞給函數之前&#xff0c;nums 在預先未知的某個下標 k&#xff08;0 < k < nums.length&#xff09;上進行了 旋轉&#xff0c;使數組變為 [nums[k], nums[k1], ..., nums[n-1], nums[0], nums[…
閱讀更多...
最新文章

Copyright @ 2022~2023