add: 内置对象 Number

This commit is contained in:
qianguyihao 2020-06-12 15:51:38 +08:00
parent fa7fc16682
commit b6634a5bfe
14 changed files with 430 additions and 295 deletions

View File

@ -244,147 +244,6 @@ document.body.innerHTML = myTemplate();
![](http://img.smyhvae.com/20200607_2118.png) ![](http://img.smyhvae.com/20200607_2118.png)
## 数值型Number
在JS中所有的数值都是 Number 类型包括整数和浮点数小数
```javascript
var a = 100; // 定义一个变量 a并且赋值整数100
console.log(typeof a); // 输出变量 a 的类型
var b = 12.3; // 定义一个变量 b并且赋值浮点数 12.3
console.log(typeof a);
```
上方代码的输出结果为
```
number
number
```
再次补充 JS 只要是数就是 Number 数值型的无论整浮浮点数即小数无论大小无论正负都是 Number 类型的
### 数值范围
由于内存的限制ECMAScript 并不能保存世界上所有的数值
- 最大值`Number.MAX_VALUE`这个值为 1.7976931348623157e+308
- 最小值`Number.MIN_VALUE`这个值为 5e-324
如果使用 Number 表示的变量超过了最大值则会返回Infinity
- 无穷大正无穷Infinity
- 无穷小负无穷-Infinity
注意`typeof Infinity`的返回结果是number
### NaN
**NaN**是一个特殊的数字表示Not a Number非数值比如
```javascript
console.log("abc" / 18); //结果是NaN
console.log("abc" * "abcd"); //按理说字符串相乘是没有结果的但如果你非要让JS去算它就一定会给你一个结果。结果是NaN
```
注意`typeof NaN`的返回结果是 number
Undefined和任何数值计算的结果为 NaNNaN 与任何值都不相等包括 NaN 本身
另外关于 isNaN() 函数可以看下一篇文章
### 浮点数的运算
在JS中整数的运算**基本**可以保证精确但是**小数的运算可能会得到一个不精确的结果**所以千万不要使用JS进行对精确度要求比较高的运算
如下
```javascript
var a = 0.1 + 0.2;
console.log(a); //打印结果0.30000000000000004
```
上方代码中打印结果并不是0.3而是0.30000000000000004
我们知道所有的运算都要转换成二进制去计算然而二进制是无法精确表示1/10因此存在小数的计算不精确的问题
### 连字符和加号的区别
键盘上的`+`可能是连字符也可能是数字的加号如下
```
console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
```
输出
```
我爱你
++
6
```
**总结**如果加号两边**都是** Number 类型此时是数字相加否则就是连字符用来连接字符串
举例1
```javascript
var a = "1";
var b = 2;
console.log(a + b);
```
控制台输出
```
12
```
举例2
```
var a = 1;
var b = 2;
console.log("a" + b); //"a"就不是变量了!所以就是"a"+2 输出a2
```
控制台输出
```
a2
```
于是我们明白了在变量中加入字符串进行拼接可以被同化为字符串重要
### 隐式转换
我们知道`"2"+1`得到的结果其实是字符串但是`"2"-1`得到的结果却是数值1这是因为计算机自动帮我们进行了**隐式转换**
也就是说`-``*``/``%`这几个符号会自动进行隐式转换例如
```javascript
var a = "4" + 3 - 6;
console.log(a);
```
输出结果
```javascript
37
```
虽然程序可以对`-``*``/``%``这几个符号自动进行“隐式转换”;但作为程序员,我们最好自己完成转换,方便程序的可读性。
## 布尔值Boolean ## 布尔值Boolean
@ -408,121 +267,6 @@ boolean
布尔型和数字型相加时 true 1 来算 false 0 来算 布尔型和数字型相加时 true 1 来算 false 0 来算
## 变量值的传递赋值
语句
```
a = b;
```
把b的值赋给ab不变
将等号右边的值赋给左边的变量等号右边的变量值不变
来做几个题目
举例1
```js
//a b c
var a = 1; //1
var b = 2; //1 2
var c = 3; //1 2 3
a = b + c; //5 2 3
b = c - a; //5 -2 3
c = a * b; //5 -2 -10
console.log(a);
console.log(b);
console.log(c);
```
输出
```
5
-2
-10
```
举例2
```js
//a b c
var a = 1;
var b = 2;
var c = 3; //1 2 3
a = a + b; //3 2 3
b = b + a; //3 5 3
c = c + b; //3 5 8
console.log(a); //3
console.log(b); //5
console.log(c); //8
```
输出
```
3
5
8
```
举例3
```js
//a b
var a = "1";
var b = 2; //"1" 2
a = a + b; //"12" 2
b = b + a; //"12" "212"
console.log(a); //输出12
console.log(b); //输出212
```
输出
```
12
212
```
举例4
```js
//a b
var a = "1";
var b = 2;
a = b + a; //"21" 2
b = b + a; //"21" "221"
console.log(a); //21
console.log(b) //221
```
效果
```
21
221
```
举例5这个例子比较特殊字符串减去数字
```js
var a = "3";
var b = 2;
console.log(a-b);
```
效果注意字符串 - 数值 = 数值
```
1
```
## 我的公众号 ## 我的公众号

View File

@ -0,0 +1,344 @@
## 数值型Number
在JS中所有的数值都是 Number 类型包括整数和浮点数小数
```javascript
var a = 100; // 定义一个变量 a并且赋值整数100
console.log(typeof a); // 输出变量 a 的类型
var b = 12.3; // 定义一个变量 b并且赋值浮点数 12.3
console.log(typeof a);
```
上方代码的输出结果为
```
number
number
```
再次补充 JS 只要是数就是 Number 数值型的无论整浮浮点数即小数无论大小无论正负都是 Number 类型的
### 数值范围
由于内存的限制ECMAScript 并不能保存世界上所有的数值
- 最大值`Number.MAX_VALUE`这个值为 1.7976931348623157e+308
- 最小值`Number.MIN_VALUE`这个值为 5e-324
如果使用 Number 表示的变量超过了最大值则会返回Infinity
- 无穷大正无穷Infinity
- 无穷小负无穷-Infinity
注意`typeof Infinity`的返回结果是number
### NaN
**NaN**是一个特殊的数字表示Not a Number非数值比如
```javascript
console.log("abc" / 18); //结果是NaN
console.log("abc" * "abcd"); //按理说字符串相乘是没有结果的但如果你非要让JS去算它就一定会给你一个结果。结果是NaN
```
注意`typeof NaN`的返回结果是 number
Undefined和任何数值计算的结果为 NaNNaN 与任何值都不相等包括 NaN 本身
另外关于 isNaN() 函数可以看下一篇文章
### 连字符和加号的区别
键盘上的`+`可能是连字符也可能是数字的加号如下
```
console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
```
输出
```
我爱你
++
6
```
**总结**如果加号两边**都是** Number 类型此时是数字相加否则就是连字符用来连接字符串
举例1
```javascript
var a = "1";
var b = 2;
console.log(a + b);
```
控制台输出
```
12
```
举例2
```
var a = 1;
var b = 2;
console.log("a" + b); //"a"就不是变量了!所以就是"a"+2 输出a2
```
控制台输出
```
a2
```
于是我们明白了在变量中加入字符串进行拼接可以被同化为字符串重要
### 隐式转换
我们知道`"2"+1`得到的结果其实是字符串但是`"2"-1`得到的结果却是数值1这是因为计算机自动帮我们进行了**隐式转换**
也就是说`-``*``/``%`这几个符号会自动进行隐式转换例如
```javascript
var a = "4" + 3 - 6;
console.log(a);
```
输出结果
```javascript
37
```
虽然程序可以对`-``*``/``%``这几个符号自动进行“隐式转换”;但作为程序员,我们最好自己完成转换,方便程序的可读性。
## 浮点数的运算
### 运算精度问题
在JS中整数的运算**基本**可以保证精确但是**小数的运算可能会得到一个不精确的结果**所以千万不要使用JS进行对精确度要求比较高的运算
如下
```javascript
var a = 0.1 + 0.2;
console.log(a); //打印结果0.30000000000000004
```
上方代码中打印结果并不是0.3而是0.30000000000000004
这是因为计算机在做运算时所有的运算都要转换成二进制去计算然而有些数字转换成二进制之后无法精确表示比如说0.1和0.2转换成二进制之后是无穷的因此存在浮点数的计算不精确的问题
### 处理数学运算的精度问题
如果只是一些简单的精度问题可以使用 `toFix()` 方法进行小数的截取备注关于 `toFixed()`方法 详见JavaScript基础/内置对象Number Math
在实战开发中关于浮点数计算的精度问题往往比较复杂市面上有很多针对数学运算的开源库比如[decimal.js](https://github.com/MikeMcl/decimal.js/)、 [Math.js](https://github.com/josdejong/mathjs)。这些开源库都比较成熟,我们可以直接拿来用。
- Math.js属于很全面的运算库文件很大压缩后的文件就有500kb如果你的项目涉及到大型的复杂运算可以使用 Math.js
- decimal.js属于轻量的运算库压缩后的文件只有32kb大多数项目的数学运算使用 decimal.js 足够了
在使用这几个开源库时既可以用 cdn 的方式引入也可以用 npm 包的方式引入
比如说通过 cdn 的方式引入 decimal.js 可以这样用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/decimal.js/10.2.0/decimal.min.js"></script>
<script>
console.log('加法:');
var a = 0.1;
var b = 0.2;
console.log(a + b);
console.log(new Decimal(a).add(new Decimal(b)).toNumber());
console.log('减法:');
var a = 1.0;
var b = 0.7;
console.log(a - b);
console.log(new Decimal(a).sub(new Decimal(b)).toNumber());
console.log('乘法:');
var a = 1.01;
var b = 1.003;
console.log(a * b);
console.log(new Decimal(a).mul(new Decimal(b)).toNumber());
console.log('除法:');
var a = 0.029;
var b = 10;
console.log(a / b);
console.log(new Decimal(a).div(new Decimal(b)).toNumber());
</script>
</body>
</html>
```
打印结果
```
加法
0.30000000000000004
0.3
减法
0.30000000000000004
0.3
乘法
1.0130299999999999
1.01303
除法
0.0029000000000000002
0.0029
```
参考链接
- <https://www.bloghome.com.cn/post/nodejsxue-xi-bi-ji-shi-qi-fu-dian-yun-suan-decimal-js.html>
- <https://zhuanlan.zhihu.com/p/62381711>
## 变量值的传递赋值
语句
```
a = b;
```
把b的值赋给ab不变
将等号右边的值赋给左边的变量等号右边的变量值不变
来做几个题目
举例1
```js
//a b c
var a = 1; //1
var b = 2; //1 2
var c = 3; //1 2 3
a = b + c; //5 2 3
b = c - a; //5 -2 3
c = a * b; //5 -2 -10
console.log(a);
console.log(b);
console.log(c);
```
输出
```
5
-2
-10
```
举例2
```js
//a b c
var a = 1;
var b = 2;
var c = 3; //1 2 3
a = a + b; //3 2 3
b = b + a; //3 5 3
c = c + b; //3 5 8
console.log(a); //3
console.log(b); //5
console.log(c); //8
```
输出
```
3
5
8
```
举例3
```js
//a b
var a = "1";
var b = 2; //"1" 2
a = a + b; //"12" 2
b = b + a; //"12" "212"
console.log(a); //输出12
console.log(b); //输出212
```
输出
```
12
212
```
举例4
```js
//a b
var a = "1";
var b = 2;
a = b + a; //"21" 2
b = b + a; //"21" "221"
console.log(a); //21
console.log(b) //221
```
效果
```
21
221
```
举例5这个例子比较特殊字符串减去数字
```js
var a = "3";
var b = 2;
console.log(a-b);
```
效果注意字符串 - 数值 = 数值
```
1
```

View File

@ -1,4 +1,35 @@
## 前言
## 内置对象简介
> JavaScript 中的对象分为3种自定义对象 内置对象 浏览器对象
> 前面两种对象是JS的基础内容属于 ECMAScript 第三个浏览器对象属于JS独有 JS 内置的API
**内置对象**就是指这个语言自带的一些对象供开发者使用这些对象提供了一些常用或者最基本而必要的功能属性和方法
内置对象最大的优点就是帮助我们快速开发
**JavaScript的内置对象**
| 内置对象 | 对象说明 |
|:-------------|:-------------|
| Arguments | 函数参数集合|
| Array | 数组|
| Boolean | 布尔对象|
| Math | 数学对象|
| Date | 日期时间|
| Error | 异常对象|
| Function | 函数构造器|
| Number | 数值对象|
| Object | 基础对象|
| RegExp | 正则表达式对象|
| String | 字符串对象|
前面的几篇文章中我们专门讲到了数组 Array今天这篇文章我们先来讲一下内置对象 Math
## 字符串前言
> 在日常开发中String 对象字符串对象的使用频率是非常高的所以有必要详细介绍 > 在日常开发中String 对象字符串对象的使用频率是非常高的所以有必要详细介绍

View File

@ -1,32 +1,43 @@
## 内置对象简介
> JavaScript 中的对象分为3种自定义对象 内置对象 浏览器对象 ## 内置对象 Number 的常见方法
> 前面两种对象是JS的基础内容属于 ECMAScript 第三个浏览器对象属于JS独有 JS 内置的API
**内置对象**就是指这个语言自带的一些对象供开发者使用这些对象提供了一些常用或者最基本而必要的功能属性和方法 ### Number.isInteger() 判断是否为整数
内置对象最大的优点就是帮助我们快速开发 语法
**JavaScript的内置对象** ```
布尔值 = Number.isInteger(数字);
```
| 内置对象 | 对象说明 |
|:-------------|:-------------|
| Arguments | 函数参数集合|
| Array | 数组|
| Boolean | 布尔对象|
| Math | 数学对象|
| Date | 日期时间|
| Error | 异常对象|
| Function | 函数构造器|
| Number | 数值对象|
| Object | 基础对象|
| RegExp | 正则表达式对象|
| String | 字符串对象|
前面的几篇文章中我们专门讲到了数组 Array今天这篇文章我们先来讲一下内置对象 Math ### toFixed() 小数点后面保留多少位
语法
```js
字符串 = myNum.toFixed(num);
```
解释将数字 myNum 的小数点后面保留 num 位小数四舍五入并返回不会改变原数字注意**返回结果是字符串**
参数 num指定了小数点后面的位数
举例
```js
let num = 3.456;
let num2 = num.toFixed(2);
console.log(num); // 打印结果3.456
console.log(num2); // 打印结果3.47
console.log(typeof num); // number
console.log(typeof num2); // string
```
上方代码中`num2`的结果是0.12但是请注意`num`的类型Number型`num`的类型却是String型
## 内置对象 Math 的常见方法 ## 内置对象 Math 的常见方法
@ -39,14 +50,15 @@ Math属于一个工具类里面封装了数学运算相关的属性和方法
|:-------------|:-------------|:-------------| |:-------------|:-------------|:-------------|
| Math.PI | 圆周率 | Math对象的属性 | | Math.PI | 圆周率 | Math对象的属性 |
| Math.abs() | **返回绝对值** | | | Math.abs() | **返回绝对值** | |
| Math.random() | 生成0-1之间的**随机浮点数** | 取值范围是 [01) |
| Math.floor() | **向下取整**往小取值 | | | Math.floor() | **向下取整**往小取值 | |
| Math.ceil() | **向上取整**往大取值 | | | Math.ceil() | **向上取整**往大取值 | |
| Math.round() | 四舍五入取整正数四舍五入负数五舍六入 | | | Math.round() | 四舍五入取整正数四舍五入负数五舍六入 | |
| Math.random() | 生成0-1之间的**随机浮点数** | 取值范围是 [01) |
| Math.max(x, y, z) | 返回多个数中的最大值 | | | Math.max(x, y, z) | 返回多个数中的最大值 | |
| Math.min(x, y, z) | 返回多个数中的最小值 | | | Math.min(x, y, z) | 返回多个数中的最小值 | |
| Math.pow(x,y) | 返回 x y 次幂 | | | Math.pow(x,y) | 乘方返回 x y 次幂 | |
| Math.sqrt() | 对一个数进行开方运算 | | | Math.sqrt() | 开方对一个数进行开方运算 | |
**举例** **举例**
@ -79,7 +91,7 @@ Math属于一个工具类里面封装了数学运算相关的属性和方法
0.6453756205275165 0.6453756205275165
``` ```
## Math.abs() 方法 ## Math.abs()获绝对值
方法定义返回绝对值 方法定义返回绝对值
@ -99,7 +111,7 @@ Math属于一个工具类里面封装了数学运算相关的属性和方法
console.log(Math.abs('hello')); // NaN console.log(Math.abs('hello')); // NaN
``` ```
## Math.random() 方法 ## Math.random() 方法生成随机数
方法定义生成 [0, 1) 之间的**随机浮点数** 方法定义生成 [0, 1) 之间的**随机浮点数**
@ -135,7 +147,7 @@ Math属于一个工具类里面封装了数学运算相关的属性和方法
console.log(getRandom(1, 10)); console.log(getRandom(1, 10));
``` ```
### 随机点名 ### 举例随机点名
根据上面的例子我们还可以再延伸一下来看看随机点名的例子 根据上面的例子我们还可以再延伸一下来看看随机点名的例子
@ -153,12 +165,7 @@ Math属于一个工具类里面封装了数学运算相关的属性和方法
``` ```
## pow()乘方
## 乘方
如果想计算 `a 的 b 次方`可以使用如下函数 如果想计算 `a 的 b 次方`可以使用如下函数
@ -166,7 +173,7 @@ Math属于一个工具类里面封装了数学运算相关的属性和方法
Math.pow(a, b); Math.pow(a, b);
``` ```
Math的中文是数学pow是power Math的中文是数学pow是
**举例1** **举例1**
@ -190,7 +197,7 @@ Math的中文是“数学”pow是“power 幂”。
console.log(a); console.log(a);
``` ```
## 开方 ## sqrt()开方
如果想计算数值a的开二次方可以使用如下函数 如果想计算数值a的开二次方可以使用如下函数
@ -205,7 +212,6 @@ sqrt即“square 开方”。比如:
``` ```
## url 编码和解码 ## url 编码和解码
URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码以便发送给浏览器有效的URI中不能包含某些字符例如空格而这URI编码方法就可以对URI进行编码它们用特殊的UTF-8编码替换所有无效的字符从而让浏览器能够接受和理解 URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码以便发送给浏览器有效的URI中不能包含某些字符例如空格而这URI编码方法就可以对URI进行编码它们用特殊的UTF-8编码替换所有无效的字符从而让浏览器能够接受和理解
@ -213,7 +219,6 @@ URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发
```javascript ```javascript
encodeURIComponent(); //把字符串作为 URI 组件进行编码 encodeURIComponent(); //把字符串作为 URI 组件进行编码
decodeURIComponent(); //把字符串作为 URI 组件进行解码 decodeURIComponent(); //把字符串作为 URI 组件进行解码
``` ```
举例 举例

View File

@ -16,6 +16,11 @@
- TypeScript 教程<https://github.com/xcatliu/typescript-tutorial> - TypeScript 教程<https://github.com/xcatliu/typescript-tutorial>
## Node.js
Node.js学习<https://blog.poetries.top/node-learning-notes/>
## 算法类 ## 算法类
- 数据结构和算法<https://github.com/trekhleb/javascript-algorithms> - 数据结构和算法<https://github.com/trekhleb/javascript-algorithms>
@ -42,16 +47,22 @@
- 单元测试<https://github.com/goldbergyoni/javascript-testing-best-practices> - 单元测试<https://github.com/goldbergyoni/javascript-testing-best-practices>
## 面试 ## 前端面试
- 前端面试常考问题整理按模块知识点分类<https://blog.poetries.top/FE-Interview-Questions/>
- 前端开发面试题: <https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions> - 前端开发面试题: <https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions>
- web前端面试宝典<https://github.com/h5bp/Front-end-Developer-Interview-Questions/> - web前端面试宝典<https://github.com/h5bp/Front-end-Developer-Interview-Questions/>
- 反向面试反问面试官的问题<https://github.com/yifeikong/reverse-interview-zh>
- 掘金前端面试题合集<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md> - 掘金前端面试题合集<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md>
## 综合面试
- 反向面试反问面试官的问题<https://github.com/yifeikong/reverse-interview-zh>
## 博客 ## 博客
- 收集优质的中文前端博客<https://github.com/FrankFang/best-chinese-front-end-blogs> - 收集优质的中文前端博客<https://github.com/FrankFang/best-chinese-front-end-blogs>