ES6學習筆記(二)【數值，陣列】

簡介

number是JavaScript基本型別之一

ES6中提供了新的八進位制，十六進位制數值表示方法，但是我們基本不會用到，下面將不會介紹這一知識點

ES6主要對Math物件做了一些擴充套件，新增了一些和數學關係密切的API

正文

在ES6以前，我們使用isNaN這個全域性方法判斷一個值或者變數是否是NaN

ES6中，Number物件上也新增了isNaN方法,並且與以前的isNaN有重要的區別

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false

顯然，以前的isNaN方法在判斷之前，先對不是number型別的"NaN"做了隱式轉換，變成了NaN，而Number.isNaN不會轉換

可以簡單的理解成 == 和 === 的區別

和isNaN類似，isFinite方法也被新增到Number物件上，而且判斷也變得嚴格了

還有一些全域性方法也被新增到Number物件上，但是使用起來沒有任何變化，這裡不做介紹

ES6在Number物件上面，新增了一些常量，如js能表達的最大值和最小值等

我們不必關心這些，正常書寫程式碼不會用到，不過我們需要注意一個關於小數運算的問題

0.1 + 0.2
// 0.30000000000000004

為什麼會不準確？

這是因為一些有限小數轉化成二進位制卻是無限迴圈，js解析器只能取一個近似值來做計算，所以得到的結果也有偏差

ES6新增了一個常量 Number.EPSILON 來表示小數運算時的誤差範圍

ES6在Math物件上新增了17個與數學相關的方法，比如三角函式，對數，冪運算等等，需要用到的時候查閱文件即可

另外，ES7中新增了一個指數運算子（**）

2 ** 2 // 4
2 ** 3 // 8

思考

這部分內容希望你都可以手動敲一遍，獨立思考

Number.isNaN(15) 
Number.isNaN('15') 
Number.isNaN(true) 
Number.isNaN(9/NaN) 
Number.isNaN('true'/0) 
Number.isNaN('true'/'true') 

上面的程式碼分別都輸出什麼？

對隱式轉換熟悉嗎？不熟悉的話不如Google一下，這個概念很重要

ES6中把一些全域性方法加到Number物件上了，即使他們沒有任何變化，這樣做有什麼好處？

---

0.1 + 0.2
// 0.30000000000000004

如何讓上面的小數運算變的精準？

試試寫出一個函式，它接收兩個引數，並返回他們精準的和，無論這兩個引數是否是小數

---

Math.pow(99, 99)
// 3.697296376497263e+197

99 ** 99
// 3.697296376497268e+197

注意結果的最後一位不同，猜猜為什麼？

---

簡介

ES6中，陣列新增了一系列好用的API

還有一個非常重要而且常用的語法：擴充套件運算子

正文

擴充套件運算子寫作三個點（…），可以把一個可遍歷的物件解開，轉為用逗號分隔的序列

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

[...'abc']
// ["a", "b", "c"]

注意後面兩個例子都不是陣列，但是擴充套件運算子依然可用，這是因為它們都擁有遍歷器介面（iterator），我們後面章節會詳細介紹

擴充套件運算子一般用於函式傳參，我們後面函式章節會詳細說明

ES6新增了很多陣列相關的API，這些API中大多數與遍歷相關

Array.from方法用於將可遍歷的物件轉化為陣列

// NodeList物件
let ps = document.querySelectorAll('p')
console.log(Array.from(ps))
// [p, p]

// arguments物件
function foo() {
  console.log(Array.from(arguments))
}
foo(1, 2, 3)
// [1, 2, 3]

Array.prototype.find方法用於查詢陣列中第一個符合要求的值，

[1, 4, -5, 10].find(function (x) {
  return x > 3
 })
// 4

注意返回第一個滿足要求的值，如果想知道這個值對應的位置，可以把find換成findIndex

Array.prototype.includes方法用來判斷陣列中是否含有某個值，含有就返回true，否則返回false

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false

還有一些新的API因為不常用，不再介紹，想了解全部新增API請檢視官方文件

思考

這部分內容希望你都可以手動敲一遍，獨立思考

let arr = [1, 2, 3]
let a = arr
let b = [...arr]

a和b有什麼區別？

對b賦值的這種寫法有什麼實際作用？

如何在ES5中實現Array.from的效果？

---

Array.prototype.find方法只能查詢到第一個符合要求的值，如何查詢第二個符合要求的值？

試試寫一個function實現它

---

[1, 2, NaN].includes(NaN)

會返回什麼？

使用怎樣的回撥函式可以讓find方法找出陣列中的NaN？