日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
十個你應(yīng)該學會使用的現(xiàn)代JavaScript技巧

 [[427748]]

1、有條件地向?qū)ο筇砑訉傩?/h3>

我們可以使用擴展運算符 ... 來有條件地向 JavaScript 對象快速添加屬性。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),鶴崗企業(yè)網(wǎng)站建設(shè),鶴崗品牌網(wǎng)站建設(shè),網(wǎng)站定制,鶴崗網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鶴崗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

 
 
 
      
  
  
  1. const condition = true; 
    2.   
  
  
  2. const person = { 
    3.   
  
  
  3.   id: 1, 
    4.   
  
  
  4.   name: 'John Doe', 
    5.   
  
  
  5.   ...(condition && { age: 16 }), 
    6.   
  
  
  6. }; 
    7.

如果每個操作數(shù)的計算結(jié)果都為真， && 運算符將返回最后計算的表達式。因此返回一個對象 { age: 16 }，然后，將其擴展為 person 對象的一部分。

如果condition為 false，則 JavaScript 將執(zhí)行以下操作：

 
 
 
      
  
  
  1. const person = { 
    2.   
  
  
  2.   id: 1, 
    3.   
  
  
  3.   name: 'John Doe', 
    4.   
  
  
  4.   ...(false), // evaluates to false 
    5.   
  
  
  5. }; 
    6.   
  
  
  6. // spreading false has no effect on the object 
    7.   
  
  
  7. console.log(person); // { id: 1, name: 'John Doe' } 
    8.

2、檢查一個屬性是否存在于一個對象中

你知道我們可以使用 in 關(guān)鍵字來檢查 JavaScript 對象中是否存在屬性嗎?

 
 
 
      
  
  
  1. const person = { name: 'John Doe', salary: 1000 }; 
    2.   
  
  
  2. console.log('salary' in person); // returns true 
    3.   
  
  
  3. console.log('age' in person); // returns false 
    4.

3、對象中的動態(tài)屬性名稱

使用動態(tài)鍵設(shè)置對象屬性很簡單。只需使用 ['key_name'] 符號添加屬性：

 
 
 
      
  
  
  1. const dynamic = 'flavour'; 
    2.   
  
  
  2. var item = { 
    3.   
  
  
  3.   name: 'Biscuit', 
    4.   
  
  
  4.   [dynamic]: 'Chocolate' 
    5.   
  
  
  5. } 
    6.   
  
  
  6. console.log(item); // { name: 'Biscuit', flavour: 'Chocolate' } 
    7.

同樣的技巧也可用于使用動態(tài)鍵引用對象屬性：

 
 
 
      
  
  
  1. const keyName = 'name'; 
    2.   
  
  
  2. console.log(item[keyName]); // returns 'Biscuit' 
    3.

4、使用動態(tài)鍵進行對象解構(gòu)

你知道可以解構(gòu)一個變量并立即用 : 符號重命名它。但是，當你不知道鍵名或鍵名是動態(tài)的時，你也可以解構(gòu)對象的屬性嗎?

首先，讓我們看看如何在解構(gòu)(使用別名解構(gòu))時重命名變量。

 
 
 
      
  
  
  1. const person = { id: 1, name: 'John Doe' }; 
    2.   
  
  
  2. const { name: personName } = person; 
    3.   
  
  
  3. console.log(personName); // returns 'John Doe' 
    4.

現(xiàn)在，讓我們使用動態(tài)鍵來解構(gòu)屬性：

 
 
 
      
  
  
  1. const templates = { 
    2.   
  
  
  2.   'hello': 'Hello there', 
    3.   
  
  
  3.   'bye': 'Good bye' 
    4.   
  
  
  4. }; 
    5.   
  
  
  5. const templateName = 'bye'; 
    6.   
  
  
  6. const { [templateName]: template } = templates; 
    7.   
  
  
  7. console.log(template) // returns 'Good bye' 
    8.

5、空合并，?? 運算符

當你要檢查變量是 null 還是 undefined 時，此?運算符很有用。當左側(cè)為null或者undefined時，它返回右側(cè)值，否則返回其左側(cè)操作數(shù)。

 
 
 
      
  
  
  1. const foo = null ?? 'Hello'; 
    2.   
  
  
  2. console.log(foo); // returns 'Hello' 
    3.   
  
  
  3. const bar = 'Not null' ?? 'Hello'; 
    4.   
  
  
  4. console.log(bar); // returns 'Not null' 
    5.   
  
  
  5. const baz = 0 ?? 'Hello'; 
    6.   
  
  
  6. console.log(baz); // returns 0 
    7.

在第三個示例中，返回 0 是因為即使 0 在 JavaScript 中被認為是假的，它不是 null ，也不是undefined。你可能認為我們可以使用 || 運算符在這里，但這兩者之間存在差異：

 
 
 
      
  
  
  1. const cannotBeZero = 0 || 5; 
    2.   
  
  
  2. console.log(cannotBeZero); // returns 5 
    3.   
  
  
  3. const canBeZero = 0 ?? 5; 
    4.   
  
  
  4. console.log(canBeZero); // returns 0 
    5.

6、可選鏈接 (?.)

你是否也討厭像TypeError：無法讀取 null 的屬性“foo”之類的錯誤。這對每個 JavaSript 開發(fā)人員來說都是頭疼的問題。引入了可選鏈就是為了解決這個問題。讓我們來看看：

 
 
 
      
  
  
  1. const book = { id:1, title: 'Title', author: null }; 
    2.   
  
  
  2. // normally, you would do this 
    3.   
  
  
  3. console.log(book.author.age) // throws error 
    4.   
  
  
  4. console.log(book.author && book.author.age); // returns null (no error) 
    5.   
  
  
  5. // with optional chaining 
    6.   
  
  
  6. console.log(book.author?.age); // returns undefined 
    7.   
  
  
  7. // or deep optional chaining 
    8.   
  
  
  8. console.log(book.author?.address?.city); // returns undefined 
    9.

你還可以使用具有以下功能的可選鏈接：

 
 
 
      
  
  
  1. const person = { 
    2.   
  
  
  2.   firstName: 'Haseeb', 
    3.   
  
  
  3.   lastName: 'Anwar', 
    4.   
  
  
  4.   printName: function () { 
    5.   
  
  
  5.     return `${this.firstName} ${this.lastName}`; 
    6.   
  
  
  6.   }, 
    7.   
  
  
  7. }; 
    8.   
  
  
  8. console.log(person.printName()); // returns 'Haseeb Anwar' 
    9.   
  
  
  9. console.log(persone.doesNotExist?.()); // returns undefined 
    10.

7、使用 !! 運算符進行布爾轉(zhuǎn)換

該 !! 運算符可用于將表達式的結(jié)果快速轉(zhuǎn)換為布爾值 true 或 false。就是這樣：

 
 
 
      
  
  
  1. const greeting = 'Hello there!'; 
    2.   
  
  
  2. console.log(!!greeting) // returns true 
    3.   
  
  
  3. const noGreeting = ''; 
    4.   
  
  
  4. console.log(!!noGreeting); // returns false 
    5.

8、字符串和整數(shù)轉(zhuǎn)換

使用 + 運算符快速將字符串轉(zhuǎn)換為數(shù)字，如下所示：

 
 
 
      
  
  
  1. const stringNumer = '123'; 
    2.   
  
  
  2. console.log(+stringNumer); // returns integer 123 
    3.   
  
  
  3. console.log(typeof +stringNumer); // returns 'number' 
    4.

要將數(shù)字快速轉(zhuǎn)換為字符串，請使用 + 運算符后跟空字符串 ""：

 
 
 
      
  
  
  1. const myString = 25 + ''; 
    2.   
  
  
  2. console.log(myString); // returns '25' 
    3.   
  
  
  3. console.log(typeof myString); // returns 'string' 
    4.

這些類型轉(zhuǎn)換非常方便，但它們的清晰度和代碼可讀性較差。因此，在生產(chǎn)中使用它們之前，你可能需要考慮一下。但是，不要猶豫在代碼中使用它們。

9、檢查數(shù)組中的假值

你必須熟悉 filter、some 和 every 數(shù)組方法。但是，你也應(yīng)該知道你可以只使用Boolean方法來測試真值：

 
 
 
      
  
  
  1. const myArray = [null, false, 'Hello', undefined, 0]; 
    2.   
  
  
  2. // filter falsy values 
    3.   
  
  
  3. const filtered = myArray.filter(Boolean); 
    4.   
  
  
  4. console.log(filtered); // returns ['Hello'] 
    5.   
  
  
  5. // check if at least one value is truthy 
    6.   
  
  
  6. const anyTruthy = myArray.some(Boolean); 
    7.   
  
  
  7. console.log(anyTruthy); // returns true 
    8.   
  
  
  8. // check if all values are truthy 
    9.   
  
  
  9. const allTruthy = myArray.every(Boolean); 
    10.   
  
  
  10. console.log(allTruthy); // returns false 
    11.

這是它的工作原理。正如我們所知，這些數(shù)組方法采用回調(diào)函數(shù)，因此我們將 Boolean方法作為回調(diào)函數(shù)傳遞。Boolean本身接受一個參數(shù)并根據(jù)參數(shù)的真實性返回 true 或 false。所以我們可以這樣說：

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

是不是和這個一樣：

 
 
 
      
  
  
  1. myArray.filter(Boolean); 
    2.

10、扁平化數(shù)組

原型 Array 上有一個方法 flat 可以讓你從數(shù)組的數(shù)組中創(chuàng)建一個數(shù)組：

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

你還可以定義一個深度級別，指定嵌套數(shù)組結(jié)構(gòu)應(yīng)展平的深度。例如：

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

 【編輯推薦】

  1. Java 開發(fā)中十個讓人頭疼的 Bug
  2. 盤點JavaScript中BigIn函數(shù)常見的屬性
  3. JavaScript 奇怪又實用的姿勢又增加了六個
  4. Facebook封殺"取消所有關(guān)注"工具背后的開發(fā)者
  5. 盤點JavaScript中5個常用的對象

當前標題：十個你應(yīng)該學會使用的現(xiàn)代JavaScript技巧
本文來源：http://www.dlmjj.cn/article/dpohgeg.html