日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

代碼水平暴增!掌握這五個JavaScript神技,讓你成為團隊最靚的仔

來源: 責編: 時間:2024-07-22 07:14:58 583觀看
導讀每種現代編程語言通常有兩個主要部分:詞法語法和標準庫。編程語言語法通過保留關鍵字和特殊 ASCII 字符構建了獨特的編程語法,供程序員編寫代碼。編程語言語法實現了一些語言特性,幫助開發者高效編寫自解釋的代碼以滿足

NnF28資訊網——每日最新資訊28at.com

每種現代編程語言通常有兩個主要部分:詞法語法和標準庫。編程語言語法通過保留關鍵字和特殊 ASCII 字符構建了獨特的編程語法,供程序員編寫代碼。編程語言語法實現了一些語言特性,幫助開發者高效編寫自解釋的代碼以滿足各種開發需求。同時,標準庫提供了訪問預先開發的通用編程功能(如字符串處理、數據結構、日期/時間處理等)的接口。NnF28資訊網——每日最新資訊28at.com

JavaScript 具有一個預先導入的功能齊全的標準庫,為開發者提供了各種預開發對象。例如,你可以使用標準的 ArrayBuffer 對象在 JavaScript 中處理原始二進制數據。JavaScript 語法提供了基本的標準編程語法和現代、高效的 JavaScript 專用語言特性,幫助開發者更快、更干凈地編寫代碼。NnF28資訊網——每日最新資訊28at.com

在這篇文章中,我將討論一些只有少數開發者知道的隱藏的 JavaScript 詞法語法特性。實踐并使用這些高級 JavaScript 語言特性,通過最大限度地利用 JavaScript 成為 JavaScript 專家!NnF28資訊網——每日最新資訊28at.com

標記模板字面量函數

現如今,開發者使用 ES6 模板字面量進行字符串插值,而不是舊式的字符串連接。模板字面量允許你通過在字符串段中嵌入表達式來構建字符串,語法簡潔易讀。JavaScript 模板字面量還支持使用標記模板函數來解析帶有自定義邏輯的模板字符串。NnF28資訊網——每日最新資訊28at.com

標記模板函數允許開發者訪問解析后的模板字符串的各個部分,因此你可以根據自定義解析需求輕松處理它。例如,以下 cap 標記模板函數將每個表達式結果大寫:NnF28資訊網——每日最新資訊28at.com

function cap(strings, ...exps) {   return strings.reduce((acc, str, i) =>     (acc + str + (exps[i]?.toString()?.toUpperCase() ?? '')), '');}let str = cap`Hello ${'JavaScript'}... Hello ${'everyone'}...`; console.log(str);   // Hello JAVASCRIPT... Hello EVERYONE...

如上面的代碼片段所示,你可以使用傳遞給標記函數的參數處理評估后的模板字符串。你甚至可以從標記函數返回對象。因此,使用標記函數進行字符串到對象數據轉換是標記模板字面量的一個很好的用例。以下 json 標記函數實現了一種更好的語法方法來解析代碼中的 JSON 字符串:NnF28資訊網——每日最新資訊28at.com

function json(strings, ...exps) {   return JSON.parse(strings.reduce((acc, str, i) =>     (acc + str + (exps[i] ?? '')), ''));}let obj = json`{    "msg": "Hello JavaScript",    "code": ${1000}}`; console.log(obj);   // {msg: 'Hello JavaScript', code: 1000}

類似地,你可以開發標簽來轉換 YAML 和 HTML 格式:NnF28資訊網——每日最新資訊28at.com

let yamlObj = yaml`...`;let htmlObj = html`...`;

流行的 Google 開源庫 zx 讓你可以使用標記模板字面量特性在 Node.js 中編寫類似 Bash 的腳本。NnF28資訊網——每日最新資訊28at.com

原生非十進制數字字面量

人類通常使用十進制數系統,因此每種編程語言都將數字字面量視為十進制數。但在某些開發場景中,我們必須在源代碼中使用其他數制。例如,我們應該使用八進制數來通過 Node.js API 更改文件系統訪問權限。任何現代編程語言,包括 JavaScript,使用一組通用前綴來表示非十進制數字字面量。NnF28資訊網——每日最新資訊28at.com

看看如何使用標準前綴在 JavaScript 中使用二進制、八進制和十六進制數字字面量:NnF28資訊網——每日最新資訊28at.com

let n1 = 0b101;let n2 = 0o21;let n3 = 0xff;console.log(n1);  // 5console.log(n2);  // 17console.log(n3);  // 255

如你所見,每個非十進制數字立即轉換為十進制數字,這意味著 JavaScript 在解析源文件時實現了這種非十進制數字支持,并在運行時使用通用的 Number 對象。NnF28資訊網——每日最新資訊28at.com

然而,內置的 toString() 方法和 parseInt() 函數幫助開發者通過將非十進制數字存儲為字符串來處理它們:NnF28資訊網——每日最新資訊28at.com

let n1 = '0xff';let n2 = parseInt(n1, 16);console.log(n2);   // 255 (decimal)let n3 = n2.toString(2);console.log(n3);   // 11111111 (binary)

使用字符串格式顯示二進制數字并不是大問題,但在字符串中存儲大量二進制數據不是性能友好的方法,因此你可以改用類型化數組。NnF28資訊網——每日最新資訊28at.com

使用對象方法防止 JavaScript 對象修改

默認情況下,JavaScript 不會對對象進行嚴格檢查——它允許你隨意操作任何對象。你甚至可以操作內置對象:NnF28資訊網——每日最新資訊28at.com

JSON.parse = (str) => console.log(str);

例如,你可以通過在瀏覽器控制臺中覆蓋內置對象方法來破壞生產網站(僅限當前瀏覽器標簽頁),如上面的代碼片段所示。NnF28資訊網——每日最新資訊28at.com

JavaScript 允許你使用 Object.seal() 和 Object.freeze() 方法防止對象修改。例如,seal() 方法通過允許現有屬性值修改來防止新屬性添加:NnF28資訊網——每日最新資訊28at.com

const obj = {  a: 100,  f: () => console.log('Hello...')};Object.seal(obj);obj.a = 1000;   // worksobj.b = 100;    // doesn't workdelete obj.a;   // doesn't work

Object.freeze() 防止添加新屬性并阻止現有屬性修改,如下代碼片段所示:NnF28資訊網——每日最新資訊28at.com

Object.freeze(obj);obj.a = 1000;   // doesn't workobj.b = 100;    // doesn't workdelete obj.a;   // doesn't work

默認情況下,密封和凍結對象不會因無效操作而拋出錯誤,因此你必須啟用 JavaScript 嚴格模式才能實現這一點。NnF28資訊網——每日最新資訊28at.com

嵌套解構和重命名

現如今,由于 React 等庫教程的影響,開發者經常使用 ES6 解構特性與對象和數組。解構特性提供了一種更好的語法糖,用于通過從數組和對象中提取字段來創建新變量/常量。基本對象解構通常從第一級屬性提取屬性,如下所示:NnF28資訊網——每日最新資訊28at.com

const obj = {  a: 10,  b: 20,  c: 30};let {a, b, c} = obj;console.log(a, b, c);   // 10 20 30

如果你需要重命名變量名,可以使用解構重命名語法,如下所示:NnF28資訊網——每日最新資訊28at.com

let {a: A, b: B, c: C} = obj;console.log(A, B, C);   // 10 20 30

我們看看一個高級對象解構示例。我們可以從嵌套屬性中提取數據并使用重命名語法,如下代碼片段所示NnF28資訊網——每日最新資訊28at.com

const customer = {  info: {    name: 'John',    score: 80,    address: {postalCode: 2000}  }};let {  info: {     name: customerName,    address: {postalCode: postCode }   }} = customer;console.log(customerName, postCode);   // John 2000

在這里,我們通過結合解構和重命名特性提取嵌套屬性,創建了兩個變量。你甚至可以使用剩余參數語法獲取解構過程中未解包的對象屬性:NnF28資訊網——每日最新資訊28at.com

let {  info: {     name: customerName,    address: { postalCode: postCode },    ...rest    }} = customer;

上面的 ...rest 對象包含 { score: 80 } 對象,因為 score 屬性未被解包到單獨的變量中。NnF28資訊網——每日最新資訊28at.com

使用計算屬性創建鍵值對象

在某些開發場景中,我們需要動態訪問對象屬性。我們可以輕松地使用括號語法動態設置/獲取屬性,但使用多個重復的設置/獲取語句無疑會影響代碼可讀性。NnF28資訊網——每日最新資訊28at.com

看看以下代碼片段,使用括號語法設置動態屬性名:NnF28資訊網——每日最新資訊28at.com

function createElement(tag, score) {    let doc = {        id: 100,        tag,    };    doc[tag + 'Score'] = score * 100;    doc[tag + 'Type'] = 'internal';    return doc;}console.log(createElement('box', 50));// {id: 100, boxScore: 5000, boxType: 'internal'}

我們可以使用計算屬性語法簡化上述函數,如下所示:NnF28資訊網——每日最新資訊28at.com

const createElement = (tag, score) => ({    id: 100,    tag,    [tag + 'Score']: score * 100,    [tag + 'Type']: 'internal'});

現代 JavaScript 語法是如此富有成效--它甚至支持對象重構語法中的計算屬性,因此您可以使用動態生成的屬性名來解包屬性。例如,下面的代碼片段使用對象重構和計算屬性語法,找到了使用上述 createElement() 函數生成的特定對象的分數字段:NnF28資訊網——每日最新資訊28at.com

let obj = {     id: 100,     tag: 'box',    boxScore: 5000,     boxType: 'internal' };let {[obj.tag + 'Score']: score} = obj;console.log(score); // 5000

總結

這篇文章探討了一些鮮為人知的 JavaScript 語言特性,這些特性可以幫助你通過編寫簡潔的代碼塊來提高編碼效率。除了這些特性之外,指數運算符、類似逗號運算符的語法增強功能也可以幫助你以專家的方式編寫 JavaScript 代碼,并保持最新的知識!NnF28資訊網——每日最新資訊28at.com

ECMAScript 通過討論社區提案積極改進標準的 JavaScript 規范。ECMAScript TC39 小組維護了一個 GitHub 倉庫,列出了最新的 JavaScript 增強提案。其中一些提案試圖擴展 JavaScript 語法以提高開發者的生產力。例如,一些提案嘗試標準化 function.sent 元屬性、為 throw 關鍵字支持表達式以及類似函數管道的語言修改,適用于所有流行的網頁瀏覽器。NnF28資訊網——每日最新資訊28at.com

本文鏈接:http://m.www897cc.com/showinfo-26-102777-0.html代碼水平暴增!掌握這五個JavaScript神技,讓你成為團隊最靚的仔

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 基于Apify+node+react/vue搭建一個有點意思的爬蟲平臺

下一篇: 腦洞大開! 22 個極具創意的 Tooltip 提示框

標簽:
  • 熱門焦點
  • K60 Pro官方停產 第三方瞬間漲價

    雖然沒有官方宣布,但Redmi的一些高管也已經透露了,Redmi K60 Pro已經停產且不會補貨,這一切都是為了即將到來的K60 Ultra鋪路,屬于廠家的正常操作。但有意思的是該機在停產之后
  • 跑分安卓第一!Redmi K60至尊版8月發布!盧偉冰:目標年度性能之王

    8月5日消息,Redmi K60至尊版將于8月發布,在此前舉行的戰略發布會上,官方該機將搭載搭載天璣9200+處理器,安兔兔V10跑分超177萬分,是目前安卓陣營最高的分數
  • 如何正確使用:Has和:Nth-Last-Child

    我們可以用CSS檢查,以了解一組元素的數量是否小于或等于一個數字。例如,一個擁有三個或更多子項的grid。你可能會想,為什么需要這樣做呢?在某些情況下,一個組件或一個布局可能會
  • 使用LLM插件從命令行訪問Llama 2

    最近的一個大新聞是Meta AI推出了新的開源授權的大型語言模型Llama 2。這是一項非常重要的進展:Llama 2可免費用于研究和商業用途。(幾小時前,swyy發現它已從LLaMA 2更名為Lla
  • 年輕人的“職場羞恥感”,無處不在

    作者:馮曉亭 陶 淘 李 欣 張 琳 馬舒葉來源:燃次元“人在職場,應該選擇什么樣的著裝?”近日,在網絡上,一個與著裝相關的帖子引發關注,在該帖子里,一位在高級寫字樓亞洲金
  • 三星Galaxy Z Fold5今日亮相:厚度縮減但仍略顯厚重

    據官方此前宣布,三星將于7月26日也就是今天在韓國首爾舉辦Unpacked活動,屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
  • Android 14發布:首批適配機型公布

    5月11日消息,谷歌在今天凌晨舉行了I/O大會,本次發布會谷歌帶來了自家的AI語言模型PaLM 2、谷歌Pixel Fold折疊屏、谷歌Pixel 7a手機,同時發布了Androi
  • 回歸OPPO兩年,一加贏了銷量,輸了品牌

    成為OPPO旗下主打性能的先鋒品牌后,一加屢創佳績。今年618期間,一加手機全渠道銷量同比增長362%,憑借一加 11、一加 Ace 2、一加 Ace 2V三款爆品,一加
  • 聯想小新Pad Pro 12.6將要推出,搭載高通驍龍 870 處理器

    聯想小新Pad Pro 12.6將于秋季新品會上推出,官方按照慣例直接在發布會前給出了機型的所有參數。聯想小新 Pad Pro 12.6 將搭載高通驍龍 870 處理器,重量為 5
Top 日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不
91久久久亚洲精品| 欧美激情二区三区| 亚洲性图久久| 亚洲在线国产日韩欧美| 午夜久久久久久| 久久露脸国产精品| 欧美成人dvd在线视频| 欧美电影免费观看大全| 欧美私人啪啪vps| 国产午夜精品一区二区三区视频| 激情久久影院| 亚洲一区二区不卡免费| 久久久久一本一区二区青青蜜月| 免费视频久久| 国产伦精品免费视频| 亚洲黄色免费| 性欧美大战久久久久久久免费观看 | 99精品视频一区| 欧美一区亚洲一区| 欧美三级电影大全| 亚洲第一页中文字幕| 亚洲欧美在线aaa| 欧美国产综合视频| 国内精品久久久久影院色| 一区二区三区波多野结衣在线观看| 久久国产精品久久久久久电车| 欧美日韩精品一区| 亚洲黄页视频免费观看| 久久精品一区二区国产| 国产精品国产三级国产a| 亚洲精品视频在线播放| 久久伊人精品天天| 国产亚洲精品久| 久久综合伊人| 久久综合色播五月| 欧美日韩影院| 国产精品欧美日韩一区| 久久精品水蜜桃av综合天堂| 国产精品免费区二区三区观看| 久久在线免费观看| 国产欧美精品一区二区色综合| 欧美在线免费视屏| 亚洲黄色影院| 国产精品久久久久久久久免费樱桃| 欧美一级欧美一级在线播放| 在线观看国产精品网站| 欧美日韩国产综合一区二区| 久久er99精品| 亚洲精品日韩久久| 国产一区二区三区在线观看精品 | 久久精品一区二区三区不卡牛牛| 欧美福利视频| 亚洲国产裸拍裸体视频在线观看乱了| 亚洲欧美在线高清| 国产精品欧美在线| 亚洲自拍16p| 国产精品毛片在线| 亚洲女人av| 国产欧美一区视频| 久久不射中文字幕| 韩日视频一区| 欧美 日韩 国产在线| 亚洲精品视频啊美女在线直播| 欧美激情视频一区二区三区免费 | 国产精品自在欧美一区| 亚洲免费在线播放| 国产一区二区三区观看| 蜜桃视频一区| 中文一区在线| 国产日韩视频| 噜噜噜在线观看免费视频日韩| 91久久极品少妇xxxxⅹ软件| 欧美私人网站| 久久免费观看视频| 亚洲看片一区| 国产亚洲成精品久久| 欧美精品久久99久久在免费线| 亚洲欧美国产毛片在线| …久久精品99久久香蕉国产| 欧美午夜片欧美片在线观看| 久久全国免费视频| 亚洲特色特黄| 亚洲成人在线网站| 国产精品久久久久久久午夜 | 久久久夜色精品亚洲| 一本色道久久综合亚洲精品小说 | 国产欧美一区二区白浆黑人| 欧美成人精品一区二区| 夜夜嗨网站十八久久| 亚洲第一在线| 亚洲第一色在线| 在线观看一区二区精品视频| 国产一在线精品一区在线观看| 国产精品久久97| 欧美午夜精品久久久久久人妖| 欧美大片免费观看| 美女黄色成人网| 久久男女视频| 老牛影视一区二区三区| 久久午夜av| 免费日韩视频| 欧美另类99xxxxx| 欧美啪啪一区| 欧美午夜免费| 国产一区二区成人久久免费影院| 国产亚洲欧美一区二区| 狠狠色狠狠色综合| 亚洲激情视频在线| 99国产精品久久久久久久成人热 | 亚洲欧美日韩一区二区三区在线观看 | 亚洲第一福利在线观看| 在线精品亚洲| 日韩视频一区二区| 亚洲一二三级电影| 欧美在线地址| 欧美成人在线网站| 欧美日韩中文在线观看| 国产精品久久久久久久久久免费| 国产精品久久久久国产精品日日 | 亚洲国产一区视频| 亚洲精品一区二区三| 亚洲尤物精选| 欧美 日韩 国产 一区| 欧美日韩精品一本二本三本| 国产性猛交xxxx免费看久久| 亚洲人成亚洲人成在线观看| 亚洲欧美国产高清| 欧美第一黄网免费网站| 国产一区二区0| 亚洲少妇中出一区| 女人天堂亚洲aⅴ在线观看| 国产精品视频999| 亚洲欧洲视频| 久久精品成人欧美大片古装| 欧美日本国产| 狠狠色香婷婷久久亚洲精品| 亚洲午夜视频在线观看| 欧美成人资源| 亚洲第一精品夜夜躁人人躁| 久久成人亚洲| 国产精品一区二区久久久| 99精品国产在热久久婷婷| 免费日本视频一区| 在线不卡欧美| 久久精品国产亚洲一区二区| 国产精品网站视频| 一区二区免费看| 欧美国产视频一区二区| 激情欧美国产欧美| 久久激情综合网| 国产精品自在线| 亚洲欧美在线播放| 国产精品入口夜色视频大尺度| 日韩视频三区| 欧美乱妇高清无乱码| 亚洲免费观看在线视频| 欧美日韩大片| 一区二区三区蜜桃网| 欧美日韩在线观看视频| 亚洲天堂成人在线观看| 国产精品高潮粉嫩av| 欧美一区二区三区在线观看视频| 欧美激情视频给我| 欧美三级日韩三级国产三级| 亚洲一品av免费观看| 国产亚洲视频在线观看| 另类天堂视频在线观看| 亚洲精品一区二区三区av| 欧美无砖砖区免费| 久久av一区二区| 亚洲剧情一区二区| 国产精品五区| 欧美成人精品在线观看| 中日韩男男gay无套| 国外视频精品毛片| 欧美日韩欧美一区二区| 欧美自拍偷拍| 一区二区动漫| 激情自拍一区| 国产精品久久久久久亚洲调教 | 亚洲免费在线看| 尤物在线精品| 国产精品日韩一区二区| 老司机午夜精品视频| 亚洲欧美日韩国产一区二区三区| 亚洲国产导航| 黄色成人av| 国产美女一区二区| 欧美色精品天天在线观看视频 | 亚洲免费一区二区| 亚洲精品久久久久久下一站| 国产日韩欧美在线视频观看| 欧美日韩国产小视频在线观看| 亚洲午夜电影网| 亚洲二区免费| 国产精品一二三视频| 欧美激情一区二区三区在线视频观看 | 亚洲福利视频专区| 国产精品视频免费在线观看| 免费亚洲一区二区| 欧美在线看片a免费观看| 夜夜夜精品看看| 亚洲高清在线播放| 国产主播精品|