站長資訊網
        最全最豐富的資訊網站

        總結15個JavaScript開發技巧(整理分享)

        本篇文章給大家分享一些經常在項目中使用一些技巧,JavaScript 有很多很酷的特性,大多數初學者和中級開發人員都不知道。希望對大家有幫助。

        總結15個JavaScript開發技巧(整理分享)

        1. 有條件地向對象添加屬性

        我們可以使用展開運算符號(…)來有條件地向 JS 對象快速添加屬性。

        const condition = true; const person = {   id: 1,   name: 'John Doe',   ...(condition && { age: 16 }), };

        如果每個操作數的值都為 true,則 && 操作符返回最后一個求值表達式。因此返回一個對象{age: 16},然后將其擴展為person對象的一部分。

        如果 condition 為 false,JavaScript 會做這樣的事情:

        const person = {   id: 1,   name: '前端小智',   ...(false),  }; // 展開 `false` 對對象沒有影響 console.log(person); // { id: 1, name: 'John Doe' }

        2.檢查屬性是否存在對象中

        可以使用 in 關鍵字來檢查 JavaScript 對象中是否存在某個屬性。

        const person = { name: '前端小智', salary: 1000 }; console.log('salary' in person); // true console.log('age' in person); // false

        3.對象中的動態屬性名稱

        使用動態鍵設置對象屬性很簡單。只需使用['key name']來添加屬性:

        const dynamic = 'flavour'; var item = {   name: '前端小智',   [dynamic]: '巧克力' } console.log(item); // { name: '前端小智', flavour: '巧克力' }

        同樣的技巧也可用于使用動態鍵引用對象屬性:

        const keyName = 'name'; console.log(item[keyName]); // returns '前端小智'

        4. 使用動態鍵進行對象解構

        我們知道在對象解構時,可以使用 : 來對解構的屬性進行重命名。但,你是否知道鍵名是動態的時,也可以解構對象的屬性?

        const person = { id: 1, name: '前端小智' }; const { name: personName } = person; console.log(personName); // '前端小智'

        現在,我們用動態鍵來解構屬性:

        const templates = {   'hello': 'Hello there',   'bye': 'Good bye' }; const templateName = 'bye'; const { [templateName]: template } = templates; console.log(template); // Good bye

        5. 空值合并 ?? 操作符

        當我們想檢查一個變量是否為 null 或 undefined 時,??操作符很有用。當它的左側操作數為null 或 undefined時,它返回右側的操作數,否則返回其左側的操作數。

        const foo = null ?? 'Hello'; console.log(foo); // 'Hello' const bar = 'Not null' ?? 'Hello'; console.log(bar); // 'Not null' const baz = 0 ?? 'Hello'; console.log(baz); // 0

        在第三個示例中,返回 0,因為即使 0 在 JS 中被認為是假的,但它不是null的或undefined的。你可能認為我們可以用||算子但這兩者之間是有區別的

        你可能認為我們可以在這里使用 || 操作符,但這兩者之間是有區別的。

        const cannotBeZero = 0 || 5; console.log(cannotBeZero); // 5 const canBeZero = 0 ?? 5; console.log(canBeZero); // 0

        6.可選鏈 ?.

        我們是不是經常遇到這樣的錯誤: TypeError: Cannot read property ‘foo’ of null。這對每一個毅開發人員來說都是一個煩人的問題。引入可選鏈就是為了解決這個問題。一起來看看:

        const book = { id:1, title: 'Title', author: null }; // 通常情況下,你會這樣做 console.log(book.author.age) // throws error console.log(book.author && book.author.age); // null // 使用可選鏈 console.log(book.author?.age); // undefined // 或深度可選鏈 console.log(book.author?.address?.city); // undefined

        還可以使用如下函數可選鏈:

        const person = {   firstName: '前端',   lastName: '小智',   printName: function () {     return `${this.firstName} ${this.lastName}`;   }, }; console.log(person.printName()); // '前端 小智' console.log(persone.doesNotExist?.()); // undefined

        7. 使用 !! 操作符

        !! 運算符可用于將表達式的結果快速轉換為布爾值(true或false):

        const greeting = 'Hello there!'; console.log(!!greeting) // true const noGreeting = ''; console.log(!!noGreeting); // false

        8. 字符串和整數轉換

        使用 + 操作符將字符串快速轉換為數字:

        const stringNumer = '123'; console.log(+stringNumer); //123 console.log(typeof +stringNumer); //'number'

        要將數字快速轉換為字符串,也可以使用 + 操作符,后面跟著一個空字符串:

        const myString = 25 + ''; console.log(myString); //'25' console.log(typeof myString); //'string'

        這些類型轉換非常方便,但它們的清晰度和代碼可讀性較差。所以實際開發,需要慎重的選擇使用。

        9. 檢查數組中的假值

        大家應該都用過數組方法:filter、some、every,這些方法可以配合 Boolean 方法來測試真假值。

        const myArray = [null, false, 'Hello', undefined, 0]; // 過濾虛值 const filtered = myArray.filter(Boolean); console.log(filtered); // ['Hello'] // 檢查至少一個值是否為真 const anyTruthy = myArray.some(Boolean); console.log(anyTruthy); // true // 檢查所有的值是否為真 const allTruthy = myArray.every(Boolean); console.log(allTruthy); // false

        下面是它的工作原理。我們知道這些數組方法接受一個回調函數,所以我們傳遞 Boolean 作為回調函數。Boolean 函數本身接受一個參數,并根據參數的真實性返回 true 或 false。所以:

        myArray.filter(val => Boolean(val));

        等價于:

        myArray.filter(Boolean);

        10. 扁平化數組

        在原型 Array 上有一個方法 flat,可以從一個數組的數組中制作一個單一的數組。

        const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]]; const flattedArray = myArray.flat();  //[ { id: 1 }, { id: 2 }, { id: 3 } ]

        你也可以定義一個深度級別,指定一個嵌套的數組結構應該被扁平化的深度。例如:

        const arr = [0, 1, 2, [[[3, 4]]]]; console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

        11.Object.entries

        大多數開發人員使用 Object.keys 方法來迭代對象。 此方法僅返回對象鍵的數組,而不返回值。 我們可以使用 Object.entries 來獲取鍵和值。

        const person = {   name: '前端小智',   age: 20 }; Object.keys(person); // ['name', 'age'] Object.entries(data); // [['name', '前端小智'], ['age', 20]]

        為了迭代一個對象,我們可以執行以下操作:

        Object.keys(person).forEach((key) => {   console.log(`${key} is ${person[key]}`); }); // 使用 entries 獲取鍵和值 Object.entries(person).forEach(([key, value]) => {   console.log(`${key} is ${value}`); }); // name is 前端小智 // age is 20

        上述兩種方法都返回相同的結果,但 Object.entries 獲取鍵值對更容易。

        12.replaceAll 方法

        在 JS 中,要將所有出現的字符串替換為另一個字符串,我們需要使用如下所示的正則表達式:

        const str = 'Red-Green-Blue'; // 只規制第一次出現的 str.replace('-', ' '); // Red Green-Blue // 使用 RegEx 替換所有匹配項 str.replace(/-/g, ' '); // Red Green Blue

        但是在 ES12 中,一個名為 replaceAll 的新方法被添加到 String.prototype 中,它用另一個字符串值替換所有出現的字符串。

        str.replaceAll('-', ' '); // Red Green Blue

        13.數字分隔符

        可以使用下劃線作為數字分隔符,這樣可以方便地計算數字中0的個數。

        // 難以閱讀 const billion = 1000000000; // 易于閱讀 const readableBillion = 1000_000_000; console.log(readableBillion) //1000000000

        下劃線分隔符也可以用于BigInt數字,如下例所示

        const trillion = 1000_000_000_000n; console.log(trillion); // 1000000000000

        14.document.designMode

        與前端的JavaScript有關,設計模式讓你可以編輯頁面上的任何內容。只要打開瀏覽器控制臺,輸入以下內容即可。

        document.designMode = 'on';

        15.邏輯賦值運算符

        邏輯賦值運算符是由邏輯運算符&&、||、??和賦值運算符=組合而成。

        const a = 1; const b = 2; a &&= b; console.log(a); // 2 // 上面等價于 a && (a = b); // 或者 if (a) {   a = b }

        檢查a的值是否為真,如果為真,那么更新a的值。使用邏輯或 ||操作符也可以做同樣的事情。

        const a = null; const b = 3; a ||= b; console.log(a); // 3 // 上面等價于 a || (a = b);

        使用空值合并操作符 ??:

        const a = null; const b = 3; a ??= b; console.log(a); // 3 // 上面等價于 if (a === null || a === undefined) {   a = b; }

        注意:??操作符只檢查 null 或 undefined 的值。

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品久久久久久| 国产精品99久久久久久猫咪| 国内精品久久久久久野外| 日本欧美国产精品第一页久久| 精品日产一区二区三区手机| 亚洲国产精品无码久久98| 九九久久精品无码专区| 亚洲国产精品婷婷久久| 国产午夜福利精品久久2021| 亚洲性日韩精品国产一区二区| 国产精品美女网站| 久久精品免费观看| 97久久久精品综合88久久| 亚洲av无码乱码国产精品| 无码精品人妻一区二区三区影院| 精品免费久久久久国产一区 | 国产三级国产精品国产普男人| 99精品视频在线| 国产国产精品人在线视| 国产美女久久精品香蕉69| 亚洲国产精品无码久久久不卡| 亚洲无码精品浪潮| 欧洲精品码一区二区三区免费看| 国产精品亚洲综合一区| 国产91在线精品| 国产A级毛片久久久精品毛片| 五月花精品视频在线观看| 欧美精品免费观看二区| 免费欧美精品a在线| 日韩精品一区二区三区大桥未久| 99免费精品视频| 国产精品毛片久久久久久久| 国产精品嫩草影院一二三区入口| 成人伊人精品色XXXX视频| 国产99视频精品免视看7| 国产精品55夜色66夜色| 国产成人精品免费视频网页大全| 国产精品99久久久久久人| 国产精品日本欧美一区二区| 久久精品免费一区二区三区| 国产观看精品一区二区三区|