ES6学习笔记(二)【数值，数组】

逃离我推掉我的手 2021-06-26 16:06 443阅读 0赞

### 简介 ###

`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`的效果？