[[427748]]

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

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

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

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

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

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

 
 
 
  
  
  
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、檢查一個(gè)屬性是否存在于一個(gè)對象中

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

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

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

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

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

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

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

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

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

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

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

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

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

5、空合并，?? 運(yùn)算符

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

 
 
 
  
  
  
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 
 
 

在第三個(gè)示例中，返回 0 是因?yàn)榧词?0 在 JavaScript 中被認(rèn)為是假的，它不是 null ，也不是undefined。你可能認(rèn)為我們可以使用 || 運(yùn)算符在這里，但這兩者之間存在差異：

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

6、可選鏈接 (?.)

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

 
 
 
  
  
  
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、使用 !! 運(yùn)算符進(jìn)行布爾轉(zhuǎn)換

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

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

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

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

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

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

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

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

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

你必須熟悉 filter、some 和 every 數(shù)組方法。但是，你也應(yīng)該知道你可以只使用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 
 
 

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

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

是不是和這個(gè)一樣：

 
 
 
  
  
  
myArray.filter(Boolean); 
 
 

10、扁平化數(shù)組

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

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

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

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

 【編輯推薦】

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

分享題目：十個(gè)你應(yīng)該學(xué)會使用的現(xiàn)代JavaScript技巧
地址分享：http://uogjgqi.cn/article/dpohgeg.html