[[427748]]

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

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

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

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

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

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

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

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

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

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

使用動態鍵設置對象屬性很簡單。只需使用 ['key_name'] 符號添加屬性： 

const dynamic = 'flavour'; 
var item = { 
  name: 'Biscuit', 
  [dynamic]: 'Chocolate' 
} 
console.log(item); // { name: 'Biscuit', flavour: 'Chocolate' } 

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

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

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

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

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

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

現在，讓我們使用動態鍵來解構屬性： 

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

5、空合并，?? 運算符

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

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

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

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

6、可選鏈接 (?.)

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

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

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

const person = { 
  firstName: 'Haseeb', 
  lastName: 'Anwar', 
  printName: function () { 
    return `${this.firstName} ${this.lastName}`; 
  }, 
}; 
console.log(person.printName()); // returns 'Haseeb Anwar' 
console.log(persone.doesNotExist?.()); // returns undefined 

7、使用 !! 運算符進行布爾轉換

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

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

8、字符串和整數轉換

使用 + 運算符快速將字符串轉換為數字，如下所示： 

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

要將數字快速轉換為字符串，請使用 + 運算符后跟空字符串 ""： 

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

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

9、檢查數組中的假值

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

const myArray = [null, false, 'Hello', undefined, 0]; 
// filter falsy values 
const filtered = myArray.filter(Boolean); 
console.log(filtered); // returns ['Hello'] 
// check if at least one value is truthy 
const anyTruthy = myArray.some(Boolean); 
console.log(anyTruthy); // returns true 
// check if all values are truthy 
const allTruthy = myArray.every(Boolean); 
console.log(allTruthy); // returns 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();  
// returns [ { id: 1 }, { id: 2 }, { id: 3 } ] 

你還可以定義一個深度級別，指定嵌套數組結構應展平的深度。例如： 

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

 【編輯推薦】