亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 48
粉絲 0
評論 0
訪問量 44706
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
let/const和模板解構(gòu)(0901)
丶久而舊之丶
原創(chuàng)
1440人瀏覽過

let/const模板和解構(gòu)

let聲明

  1. // 1.1var可以重復聲明,let不能重復聲明
  2. let a;
  3. let a;
  4. // 1.2var會有變量聲明提升,let不會,所以也會有可能出現(xiàn)暫時性死區(qū)
  5. console.log(username); //出錯,因為不會出現(xiàn)變量提升
  6. let username = "小明";
  7. function func() {
  8. let username = "小紅";
  9. console.log(username);
  10. }
  11. func();
  12. console.log(username);
  13. // 1.3支持塊作用域
  14. if (true) {
  15. let price = 30;
  16. }
  17. // 在外面訪問不到price
  18. console.log(price); //出錯

const聲明

  1. // 2.1常量在一個腳本的聲明周期內(nèi)禁止更新,所以聲明的時候必須初始化
  2. const APP_NAME = "管理系統(tǒng)";
  3. // 2.2和let一樣不允許重復聲明
  4. // 2.3和let一樣支持塊作用域
  5. // 以后聲明變量首選const,如果出現(xiàn)修改數(shù)據(jù)出現(xiàn)錯誤時在改為let
  6. // 如果聲明對象或者數(shù)組時強烈推薦const
  7. const arr = [10, 20, 30];
  8. arr[0] = 50;
  9. arr[1] = 40; //這樣更改不會出錯
  10. arr[2] = 60;
  11. arr = [10, 40, 70]; 這樣才會報錯
  12. console.log(arr);
  13. // 更改數(shù)組或?qū)ο笾械膶傩?,值不會報錯,只有重新賦值對象或數(shù)組會報錯
  14. const obj = { x: "admin", y: 123 };
  15. obj.y = 456;
  16. console.log(obj.x, obj.y);

模板解構(gòu)

  • 解構(gòu)對象

  1. // 解構(gòu)的功能--把集合數(shù)據(jù)按規(guī)則打散到獨立變量中
  2. const product = {
  3. name: "手機",
  4. price: 4999,
  5. };
  6. // 傳統(tǒng)方法
  7. let name1 = product.name;
  8. let price1 = product.price;
  9. console.log("%s: %c %d", name1, "color:lightgreen", price1);
  10. // 模板解構(gòu) (等號左邊為解構(gòu)變量聲明)--let { name, price }
  11. let { name, price } = product;
  12. console.log("%s: %c %d", name, "color:lightblue", price);
  13. // 沒有輸入別名的情況下,解構(gòu)對象時模板解構(gòu)變量名必須和對象屬性名相同
  14. // 解構(gòu)變量必須初始化,不能只聲明(let{a,b};這樣是錯誤的)
  15. // 解構(gòu)表達式
  16. // 場景1 更新變量數(shù)據(jù)
  17. let a = 10;
  18. let b = 20;
  19. console.log(a, b);
  20. // 用表達式更新數(shù)據(jù)
  21. let obj = {
  22. a: 100,
  23. b: 200,
  24. };
  25. ({ a, b } = obj);
  26. console.log(a, b);
  27. // 場景2
  28. function func({ a: x, b: y }) {
  29. console.log(x + y);
  30. }
  31. func(obj);
  32. // 解構(gòu)聲明中設置默認值
  33. const obj1 = {
  34. objName: "admin",
  35. objEmail: "adming@qq.com",
  36. };
  37. const { objName, objEmail = "aaa@qq.com", objAge = 20 } = obj1;
  38. // 有自定義的值則賦自定義值,沒有則賦默認值,自定義的值優(yōu)先級更高
  39. console.log(objName, objEmail, objAge);
  40. // 解構(gòu)聲明中的別名
  41. const obj2 = {
  42. objName: "小明",
  43. objEmail: "xiaoming@qq.com",
  44. };
  45. // 直接解構(gòu)的話會和上面同名報錯所以要用別名
  46. const { objName: objName1, objEmail: objEmail1, objAge: objAge1 = 20 } = obj2;
  47. console.log(objName1, objEmail1, objAge1);
  48. 嵌套對象解構(gòu)
  49. const obj = {
  50. name: "admin",
  51. course: {
  52. php: {
  53. level: "basis",
  54. grade: 80,
  55. },
  56. javascript: {
  57. level: "advance",
  58. grade: 70,
  59. },
  60. },
  61. };
  62. // 模板解構(gòu)
  63. const {
  64. course: { php },
  65. } = obj;
  66. console.log(php);
  67. // 嵌套對象的多次解構(gòu)
  68. const {
  69. name,
  70. course,
  71. course: { php: objphp },
  72. course: { php: { level } },
  73. } = obj;
  74. console.log(name, course, objphp, level);

對象的嵌套解構(gòu)

  • 數(shù)組解構(gòu)

  1. const arr = [1, "admin", "admin@qq.com"];
  2. // 模板解構(gòu)
  3. const [id, name, email] = arr;
  4. console.log(id, name, email);
  5. // 也可以只解構(gòu)其中一兩個值
  6. const arr1 = [2, "admin22", "admin22@qq.com"];
  7. const [, username, email1] = arr1;
  8. console.log(username, email1);
  9. // 數(shù)組解構(gòu)表達式
  10. // 更新數(shù)據(jù)
  11. let a = 10;
  12. let b = 20;
  13. let c = [5, 37];
  14. // 更新a和b的值
  15. [a, b] = c;
  16. console.log(a, b);
  17. // 設置默認值
  18. const arr2 = ["iPhone", "xmax"];
  19. // 和解構(gòu)對象一樣自定義的值優(yōu)先級更高,有自定義值就賦自定義的值
  20. let [brand, model, color = "green"] = arr2;
  21. console.log(brand, model, color);
  22. // 在函數(shù)參數(shù)中使用數(shù)組解構(gòu)
  23. function func([x, y]) {
  24. console.log(x + "*" + y + "=" + (x * y));
  25. }
  26. func(c);
  27. // 也可以在參數(shù)中設置默認值
  28. function func1([x, y, z = 6]) {
  29. console.log(x + "*" + y + "*" + z + "=" + (x * y * z));
  30. };
  31. func1(c);
  32. // 數(shù)組的嵌套解構(gòu)
  33. const arr3 = [10, [20, [30], 40], 50];
  34. // 解構(gòu)
  35. const [a1, [a2, [a3], a4], a5] = arr3;
  36. console.log(a1, a2, a3, a4, a5);

總結(jié)

1.了解let和const,var聲明間的區(qū)別
2.對于解構(gòu)的應用場景和使用有了些了解

批改老師:天蓬老師天蓬老師

批改狀態(tài):合格

老師批語:模板字符串并非新事物, 是對原js中不規(guī)范的字符串進行了規(guī)范化, 其實這些在其它語言中不是事
本博文版權(quán)歸博主所有,轉(zhuǎn)載請注明地址!如有侵權(quán)、違法,請聯(lián)系admin@php.cn舉報處理!
全部評論 文明上網(wǎng)理性發(fā)言,請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓,幫助PHP學習者快速成長!
關(guān)注服務號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學習!
    全站2000+教程免費學