开发中,我们常常需要处理大量的数字计算,但是JavaScript中的数字类型有一个固有的问题,即它们的精度是有限的。当数字变得过大或过小时,就会出现精度丢失的问题。为了解决这个问题,一个很有用的库就是bignumber.js。
bignumber.js是一个用于处理大数和小数的库,它可以处理任意长度和精度的数字,支持所有的基本数学运算以及一些高级功能。在本文中,我们将对bignumber.js进行详解。
bignumber.js可以通过npm或者直接引入到项目中。通过npm安装:
npm install bignumber.js
使用bignumber.js创建一个大数对象非常简单,可以使用Big或BigDecimal两个类来创建。其中Big类用于处理任意精度的十进制数,而BigDecimal类用于处理任意精度的十进制数,同时支持小数点后的特定位数。
下面是一个使用Big类的示例:
const Big=require('bignumber.js');
const num=new Big(1234567890);
console.log(num.toString()); // 输出:1234567890
在上面的示例中,我们首先引入了bignumber.js库,然后使用Big类创建了一个大数对象,并调用了toString()方法将其转换为字符串。
下面是一个使用BigDecimal类的示例:
const Big=require('bignumber.js');
const num=new Big.BigDecimal(1234567890, 10);
console.log(num.toString()); // 输出:1.234567890E10
在上面的示例中,我们使用BigDecimal类创建了一个大数对象,并指定了小数点后的位数为10。 bignumber.js支持所有的基本数学运算,包括加减乘除和取余。
下面是一个使用加法运算的示例:
const Big=require('bignumber.js');
const num1=new Big(1234567890);
const num2=new Big(9876543210);
const sum=num1.add(num2);
console.log(sum.toString()); // 输出:11111111110
在上面的示例中,我们使用add()方法对两个大数进行相加操作。
除了基本的数学运算,bignumber.js还支持一些高级功能,例如比较大小、四舍五入和转换进制等。下面是一个使用比较大小的示例:
const Big=require('bignumber.js');
const num1=new Big(1234567890);
const num2=new Big(9876543210);
const comparison=num1.comparedTo(num2);
console.log(comparison); // 输出:-1
在上面的示例中,我们使用comparedTo()方法比较两个大数的大小关系。
bignumber.js是一个功能强大且易于使用的库,可以处理任意精度的数字计算。它支持所有的基本数学运算以及一些高级功能,可以解决JavaScript数字精度丢失的问题。如果你需要处理大数或小数的计算,那么bignumber.js将是一个不错的选择。
avaScript 数字
JavaScript 只有一种数值类型。
书写数值时带不带小数点均可。
书写 JavaScript 数值既可以带小数点,也可以不带:
var x=3.14; // 带小数点的数值
var y=3; // 不带小数点的数值
亲自试一试
超大或超小的数可通过科学计数法来写:
var x=123e5; // 12300000
var y=123e-5; // 0.00123
与许多其他编程语言不同,JavaScript 不会定义不同类型的数,比如整数、短的、长的、浮点的等等。
JavaScript 数值始终以双精度浮点数来存储,根据国际 IEEE 754 标准。
此格式用 64 位存储数值,其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号:
值(aka Fraction/Mantissa)指数符号52 bits(0 - 51)11 bits (52 - 62)1 bit (63)
整数(不使用指数或科学计数法)会被精确到 15 位。
var x=999999999999999; // x 将是 999999999999999
var y=9999999999999999; // y 将是 10000000000000000
小数的最大数是 17 位,但是浮点的算数并不总是 100% 精准:
var x=0.2 + 0.1; // x 将是 0.30000000000000004
使用乘除法有助于解决上面的问题:
var x=(0.2 * 10 + 0.1 * 10) / 10; // x 将是 0.3
亲自试一试
JavaScript 的加法和级联(concatenation)都使用 + 运算符。
数字用加法。字符串用级联。
如果您对两个数相加,结果将是一个数:
var x=10;
var y=20;
var z=x + y; // z 将是 30(一个数)
如果对两个字符串相加,结果将是一个字符串的级联:
var x="10";
var y="20";
var z=x + y; // z 将是 1020(字符串)
如果您对一个数和一个字符串相加,结果也是字符串级联:
var x=10;
var y="20";
var z=x + y; // z 将是 1020(一个字符串)
如果您对一个字符串和一个数字相加,结果也是字符串级联:
var x="10";
var y=20;
var z=x + y; // z 将是 1020(字符串)
常见的错误是认为结果应该是 30:
var x=10;
var y=20;
var z="The result is: " + x + y;
亲自试一试
常见的错误是认为结果应该是 102030:
var x=10;
var y=20;
var z="30";
var result=x + y + z;
JavaScript 从左向右进行编译。
因为 x 和 y 都是数,10 + 20 将被相加。
因为 z 是字符串,30 + "30" 被级联。
JavaScript 字符串可以拥有数字内容:
var x=100; // x 是数字
var y="100"; // y 是字符串
在所有数字运算中,JavaScript 会尝试将字符串转换为数字:
该例如此运行:
var x="100";
var y="10";
var z=x / y; // z 将是 10
该例也将如此运行:
var x="100";
var y="10";
var z=x * y; // z 将是 1000
该例如此运行:
var x="100";
var y="10";
var z=x - y; // z 将是 90
但是该例不会如上例般运行:
var x="100";
var y="10";
var z=x + y; // z 不会是 110(而是 10010)
在最后一个例子中,JavaScript 用 + 运算符对字符串进行了级联。
NaN 属于 JavaScript 保留词,指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN(Not a Number):
var x=100 / "Apple"; // x 将是 NaN(Not a Number)
不过,假如字符串包含数值,则结果将是数:
var x=100 / "10"; // x 将是 10
您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数:
var x=100 / "Apple";
isNaN(x); // 返回 true,因为 x 不是数
要小心 NaN。假如您在数学运算中使用了 NaN,则结果也将是 NaN:
var x=NaN;
var y=5;
var z=x + y; // z 将是 NaN
结果也许是串连接:
var x=NaN;
var y="5";
var z=x + y; // z 将是 NaN5
NaN 是数,typeof NaN 返回 number:
typeof NaN; // 返回 "number"
亲自试一试
Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回的值。
var myNumber=2;
while (myNumber !=Infinity) { // 执行直到 Infinity
myNumber=myNumber * myNumber;
}
除以 0(零)也会生成 Infinity:
var x=2 / 0; // x 将是 Infinity
var y=-2 / 0; // y 将是 -Infinity
亲自试一试
Infinity 是数:typeOf Infinity 返回 number。
typeof Infinity; // 返回 "number"
JavaScript 会把前缀为 0x 的数值常量解释为十六进制。
var x=0xFF; // x 将是 255
绝不要用前导零写数字(比如 07)。
一些 JavaScript 版本会把带有前导零的数解释为八进制。
默认地,Javascript 把数显示为十进制小数。
但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。
var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
通常 JavaScript 数值是通过字面量创建的原始值:var x=123
但是也可以通过关键词 new 定义为对象:var y=new Number(123)
var x=123;
var y=new Number(123);
// typeof x 返回 number
// typeof y 返回 object
请不要创建数值对象。这样会拖慢执行速度。
new 关键词使代码复杂化,并产生某些无法预料的结果:
当使用==相等运算符时,相等的数看上去相等:
var x=500;
var y=new Number(500);
// (x==y) 为 true,因为 x 和 y 有相等的值
亲自试一试 当使用===相等运算符后,相等的数变为不相等,因为===运算符需要类型和值同时相等。
var x=500;
var y=new Number(500);
// (x===y) 为 false,因为 x 和 y 的类型不同
甚至更糟。对象无法进行对比:
var x=new Number(500);
var y=new Number(500);
// (x==y) 为 false,因为对象无法比较
JavaScript 对象无法进行比较。
众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!
一、HTML
1、<image>标签上title属性与alt属性的区别是什么?
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体
加粗:<b>、<strong>
下标:<sub>
居中:<center>
字体:<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签,并说明其语义和应用场景
section:定义文档中的一个章节
nav:定义只包含导航链接的章节
header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型?
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素?
a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签(header,nav,footer,aside,article,section)
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件,calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素:
a. 纯表现的元素:basefont,big,center, s,strike,tt,u;
b. 对可用性产生负面影响的元素:frame,frameset,noframes;
9、iframe的优缺点?
优点:
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点:
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面,不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么?它和Standards模式有什么区别?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好?》
12、简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
公众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!
*请认真填写需求信息,我们会在24小时内与您取得联系。