20191129 前端开发日报美高梅4858官方网站

作者:编程技术

Vue:学习笔记-介绍;我的大前端之旅;React 16.5 性能分析利器 Profiler;[vuejs 踩坑实战系列] keep-alive 被 beforeRouteEnter 骗了;Vue源码探究-构建版本的区别;美菜无线前端架构模型;高性能JavaScript之加载和执行;JavaScript 中数字的底层表示

5.2 Number原型对象的方法

注意:整数无法直接调用Number原型对象的方法(是JS装箱机制的原因吗?),但是将其赋值给变量以后可以。

Number.prototype.toExponential()
返回一个科学计数法字符串

console.log(3000.toExponential());  // 会报错
console.log(3000.0.toExponential());  // "3e 3"
console.log(new Number(3000).toExponential());  // "3e 3"

var a = 3000;
console.log(a.toExponential());  // "3e 3"

Number.prototype.toFixed()
转化成一个精确到小数点后指定位数的字符串返回,默认是小数点后0位。

console.log(3000.toFixed(2));  // 会报错
console.log(3000.0.toFixed(2));  // "3000.00"
console.log(new Number(3000).toFixed(2));  // "3000.00"

Number.prototype.toString()
转化成一个精确到指定进制的字符串返回,默认是十进制。

console.log(12.toString(16));  // 会报错
console.log(12.0.toString(16));  // "c"
console.log(new Number(12).toString(16));  // "c"

Number.prototype.toLocalString()
转化成一个精确到指定进制的字符串返回,默认是十进制。与语言相关,但大多数语言情况与Number.prototype.toString()相同。

Number.prototype.toPrecision()
转化成一个保留指定位数的字符串(四舍五入)返回。

console.log(666.toPrecision(2));  // 会报错
console.log(666.6666.toPrecision(2));  // "6.7e 2"
console.log(new Number(6666666).toPrecision(3));  // "6.67e 6"
console.log(6.67e 6.toPrecision(2));  // "6.7e 6"
console.log(new Number(6.6e 6).toPrecision(3));  // "6.60e 6"

Number.prototype.valueOf()
返回指定对象的原始值。覆盖了Object对象的 valueOf() 方法。

最棒的前端编译原理揭秘 背景 整个前端领域在这几年迅速发展,前端框架也在不断变化,各团队选择的解决方案都不太一致,此外像小程序这种跨端场景和以往的研发方式也不太一样。在日常开发中往往会因为投放平台的不一样需要进行重新编码。前段时间我们需要在淘宝页面上投放闲鱼组件,淘宝前端研发DSL主要是React(Rax),而闲鱼前端之前研发DSL主...Vue 之keep-alive的使用,实现页面缓存 有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到 keep-alive 组件。 官网释义: keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-aliveg...9102 年,蚂蚁金服前端是怎么写图表的?相信很多开发者都有过被图表搞得很抓狂瞬间:业务压力大,想快速上个图表,折腾半天配出来却丑的不能看;Demo 里明明看着很美,换成真实数据立刻变成买家秀了..... 很长一段时间里,这些问题也在困扰着蚂蚁的前...webpack核心模块解析 webpack的运行分很多阶段,每个阶段都有一个钩子,我们可以在钩子上注册我们自定义的插件。 注册后,我们自定义的插件会在钩子运行阶段执行。 webpack的钩子 webpack.docschina.org/api/compile… webpack中的插件定位 插件目的在于解决 loader 无法实现的其他事。 插件是 webpack 的 支柱 功能。...超性感的React Hooks:为何她独具魅力过去大半年里,我将React Hooks应用到了许多大型项目,其中5个全新重构,其他项目由于时间关系少量使用。JavaScript内存空间图解 栈, 计算机专业的同学可能都有些了解. 讲究的是一个先进后出. 今天我们简单的来过一下. 可以想象为只有一个口子的一条路, 这条路. 每次呢只进去一个人. 后面的人进来的, 只有等后面的人出去了, 先进去的才可以出来. 所以就是 先进后出 堆数据结构 堆数据结构是一种树状结构。它的存取数据的方式与书...推荐几款 Angular 工具,轻松实现高性能目标 本文主要分享一系列新型工具与实践,旨在帮助大家快速构建 Angular 应用并监控其性能表现。在各章节中,我们将具体探讨如何将这些工具与实践整合至项目当中,同时配合对应链接。本文的重点在于缩短初始加载时间,并利用代码分割与预加载机制加快页面导航速度。 我们将关注以下几大主题: 代码分割 预加载策略...Angular8 引入百度 Echarts,进行图表分析 Angular8 引入百度Echarts,进行图表分析 原文地址: 传送门 最近突发奇想,想自己做一个理财分析记录的网页,主要给自己记账,然后想到了把每天,每周的消费用图标分析出来,于是就需要用到百度的echarts图标插件,talk is cheep, show me the code。 1. npm 安装ngx-echarts及相关的依赖 npm install echarts...在 HTML5 上开发音视频应用的五种思路 问题背景: 无论是实时视频监控还是直播点播等应用场景,最起码的一个操作就是播放视频。其中最基本的思路就是利用OS的API在PC开发桌面应用、在移动端开发Native App,目前这种技术已经成熟,大厂小厂都是这么做的,但是缺点也很明显:开发比较费时费力,需要ios开发一遍再去Android开发一遍。特别对于一些非...JavaScript 关于setTimeout与setInterval的小研究为什么在JavaScript中[1, 7, 11].map(parseInt)返回[1, NaN, 3] 本文摘自: 《Why .map(parseInt) returns in Javascript》 译者:战五渣 JavaScript真的很奇怪,不相信我?那我们尝试用 map 和 parseInt 将字符串数组转换成整数数组。在chrome上启动控制台,复制粘贴下面的代码,然后回车运行。 ...五个大型项目实践总结,解密React Hooks最佳实践我也不知道应该说点撒。 就是一个目录,后续应该还有10多篇的样子,主要是实战,更新了会把目录补上。 超性感的React Hooks:为何她独具魅力 超性感的React Hooks:再谈闭包 超性感的React Hooks 最近有些懒, 加上公司项目较多, 没有来得及更。这次选题比较纠结, 本来想继续围绕webpack, 但无奈在私下和一些同学聊天时, 无意中发现大部分同学对Js运行机制和内存机制并不是很了解。在做了一些分享后, 于是决心梳理下Js的底层基础和原理, 所以有了这篇文章, 主要面向初中级前端同学。 这篇文章能学到什么? 堆,...Vue Typescript开发模式介绍 为什么要用 typescript? ts 是对 js 对象模型的扩展,是 js 的超集 ts 具有静态类型、类、模块和类型注解,可以提供静态类型检查,可以将声明,数据和类封装到模块中 对大型项目开发友好性更强,使用 TypeScript 工具来进行重构更变的容易、快捷 安装 vue-cli 脚手架安装 ...Node.js 中实践基于 Redis 的分布式锁实现 在一些分布式环境下、多线程并发编程中,如果对同一资源进行读写操作,避免不了的一个就是资源竞争问题,通过引入分布式锁这一概念,可以解决数据一致性问题。 作者简介:五月君,Nodejs Developer,慕课网认证作者,热爱技术、喜欢分享的 90 后青年,欢迎关注 Nodejs技术栈 和 Github 开源项目 认...深入理解JavaScript之执行上下文和执行栈都说想成为出色的JavaScript 开发者,就要深入学习 JavaScript 程序内部的执行机制,最近学了一遍JS的执行上下文和执行栈,以此作总结。JS基础之原型和原型链 本篇文章主讲构造函数、原型以及原型链,包括 Symbol 是不是构造函数、 constructor 属性是否只读、 prototype 、 __proto__ 、 ] 、原型链。 一、基础入门 1. 对象 在JS中,万物皆对象,对象又分为普通对象和函数对象,其中 Object、Function 为 JS 自带的函数对象。 let obj1 = {}; let obj2 = ...javascript之深浅拷贝 开笔前的那些事 关于深拷贝和浅拷贝,也是面试中经常被问到的一个高频题目。然而最近在使用`redux`的过程中,才发现对这一方面的理解不是很到位。 事情来源是这样的:当我在 reducer 中更新 state 时,发现 initstate 也被修改了,被修改的部分是一个数组,基本类型并没有被修改。 举个栗子: const initsta...23 个 Vue.js 初级面试题使用渐进式框架的代价很小,从而使现有项目更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。JSON 的诞生与发展 JSON作为目前web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式。尤其是在ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选!今天大家就和猪哥一起来学习一下JSON的相关知识吧,以下是今天文章的目录。 一、XML 1.XML起源 2.XML实例 3.XML十字路口 二、JSON 1.JSON...angular8与ngrx8的结合使用 二、关于 ngrx 的认识 1、 官网地址 2、 ngrx 是借鉴 redux 的思维,专门为 angular 中定制的一个状态管理的包,类似 react 中的 redux 、 vue 中的 vuex ,主要包括以下几个模块(本文先介绍 @ngrx/store ) @ngrx/store @ngrx/store-devtools @ngrx/effects @ngrx/router-store @ngrx/entity @ngrx/data @ngrx...node.js脚本与js的数据通信 最近在写瀑布流视图,要用到很多图片,想拿到本地图片的数据信息,于是乎就写了 Node 脚本。就有了数据传输的问题。 解决 err: 1、当时最先想到的是 import 与 export ,但是目前 nodejs 还不支持,听说快要支持了。 所以这个行不通。 最后实现方法为通过 node 的 fs 这个对象来把数据抛...为什么需要在 JavaScript 中使用严格模式? 严格模式是什么意思?有什么用途?为什么我们应该使用它? 本文 将主要从这几个问题入手,讲述在 JavaScript 中使用严格模式的必要性。 严格模式是现代 JavaScript 的重要组成部分。通过这种模式,我们可以选择使用更为严格的 JavaScript 语法。 严格模式的语义不同于以前的 JavaScript“稀松模式”,...JavaScript是如何运行的(上)React Hooks 在蚂蚁金服的实践一个 React 项目,是由无数个大大小小的组件组合而成的。在 React 的世界中,组件是一等公民。而我们平时拆分组件的依据无非是:尽量的复用代码。『 Vue小Case 』- Vue Prop中的 null vs undefined 前言:本文将引入两个Vue中比较特殊的使用场景,带领大家熟悉一下 null 和 undefined 的区别,然后再分析一下Vue中是怎么对Props做校验的,最后给出大佬是怎么解释的。 一直以来,笔者在使用Vue时,习惯于在需要表示prop属性未定义时,使用 undefined ,而不是 null 。因为“ undefined 才是没有值, null 是有值,...你所不知道的JavaScript之 2---- js中的基本类型 javascript中的基本类型(七种) 基本数据类型 Number string null undefined Boolean BigInt symbol 一、Number Number类型在ECMAScript中主要用来表示整数和浮点数值 //值得注意的是.浏览器在Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER ECMAScript中保存了ECMAScript中能够表示的最小值以...深入学习JavaScript作用域 编译器在编译过程的第二步中生成了代码,引擎执行它时,会通过查找变量a来判断它是否已声明过。查找的过程由作用域进行协助,但是引擎执行怎样的查找,会影响最终的查找结果。 LHS查询 试图找到变量的容器本身 a = 2; 复制代码 这里的引用为LHS引用,是为 = 2 这个赋值操作找到对应的目标 RHS查...

Vue:学习笔记-介绍 17年上半年,学习了一些Vue的知识,但是现在反观回去,感觉在那个时候,因为着急做项目,很多东西消化的不够清楚,这一点同样体现在对angular的学习上,现在有点时间进行修整,那就花点时间去好好整理一下。 正文 Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. U...我的大前端之旅 半年没有更新文章了,甚是惭愧 很荣幸,4月份我通过了高德地图的面试,加入了阿里大家庭。这段时间一直在忙着适应新的工作环境,学习新的技术栈,所以没有输出文章。 先明确一下写这篇文章的目的,相信 大前端 这个词大家都不陌生了。这个技术迭代越来越快的时代,市场对工程师的技术素质提出了新的...React 16.5 性能分析利器 Profiler React 16.5 正式在 devtool 中加入了 Profiler 功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的 React 应用。[vuejs 踩坑实战系列] keep-alive 被 beforeRouteEnter 骗了大家中秋假期快乐,假期分享一些实战文章给大家,原创不易,欢迎转发,一起学习 现在大家基本都在单页应用里面使用了 keep-alive 来缓存不活动的组件实例,而不是销毁它们。 如果你还没有使用,可以看看官方的介...Vue源码探究-构建版本的区别基于第三方性能评估工具Benchmark的测评结果可以看出Vue 2.0版本在整体的性能上得到了大幅优化,即使与React和Angular最新版相比也相差无几。在提供给使用者的构建版本方面,也进行了针对性的细化,输出了多种不...美菜无线前端架构模型 “防守姿态的前端驱动模型已经无法支撑一个前端人、一个前端团队在未来的生存,因为工作效率的提升,不需要这么多低价值的前端,也不需要企业去养一个低价值的团队。一个进击的模型才能支撑未来一段时间的成长基础。”高性能JavaScript之加载和执行JavaScript 中数字的底层表示 这篇文章对 JavaScript Number 的二进制表示进行简要的介绍,主要明确使用者观察到的边界, 解释 MAX_VALUE, MIN_VALUE, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, EPSILON 这些常量取值的原因;回答 POSITIVE_INFINITY, NEGATIVE_INFINITY, NaN 这些常量的表示方法。

5.1 Number原型对象的属性

Number.prototype.constructor
指向构造函数Array

最棒的前端编译原理揭秘;Vue 之keep-alive的使用,实现页面缓存;9102 年,蚂蚁金服前端是怎么写图表的?;webpack核心模块解析;超性感的React Hooks:为何她独具魅力;JavaScript内存空间图解;推荐几款 Angular 工具,轻松实现高性能目标;Angular8 引入百度 Echarts,进行图表分析

4. Number构造函数的属性与方法

我们用Object.getOwnPropertyNames()方法获取Number构造函数的所有属性与方法。

Object.getOwnPropertyNames(Number);
// (17) ["length", "name", "prototype", "isFinite", "isInteger", "isNaN", "isSafeInteger", "parseFloat", "parseInt", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "MAX_SAFE_INTEGER", "MIN_SAFE_INTEGER", "EPSILON"]

发现一共有17个属性和方法。

5. Number原型对象的属性与方法

我们用Object.getOwnPropertyNames()方法获取Number原型对象的所有属性与方法。

Object.getOwnPropertyNames(Number.prototype);
// (7) ["constructor", "toExponential", "toFixed", "toPrecision", "toString", "valueOf", "toLocaleString"]

发现一共有7个属性和方法。其中有相当一部分是与HTML相关的方法。

参考

MDN-Number
BOOK-《JavaScript高级程序设计(第3版)》第5章
ES6中Number的一些扩展方法(一)

6. Number实例对象的属性与方法

我们用Object.getOwnPropertyNames()方法获取Number实例对象的所有属性与方法。

var num = new Number(123);
Object.getOwnPropertyNames(num);
// []

没有任何自有属性与方法。

4.1 Number构造函数的属性

Number.length
长度为1

Number.name
名称为"Number"

Number.prototype
指向Number构造函数的原型,可以为所有Number类型的对象添加属性。

Number.EPSILON
表示 1 和大于 1 的最小值的差值,是一个常量,接近于 2.2204460492503130808472633361816E-16,或者 2-52。引入这么小的一个常量的目的在于,为浮点数计算设置一个误差范围。因为浮点数的计算是不精确的。如果误差小于Number.EPSILON,我们就可以认为得到了正确的结果。

0.1 0.2;      //0.30000000000000004
0.1 0.2-0.3;     //5.551115123125783e-17
(0.1 0.2-0.3).toFixed(20);    //"0.00000000000000005551"
// 那么我们再来看看0.1 0.2-0.3的值是否小于Number.EPSILON,如果小于,返回true,那我们便可以认为结果正确
(0.1 0.2-0.3).toFixed(20)<Number.EPSILON;   // true

其实,Number.EPSILON就是一个可接受的误差范围。

Number.MAX_SAFE_INTEGER
该常量表示在 JavaScript 中最大的安全整数(maxinum safe integer)(253 - 1)。IEEE 754 标准规定能够准确地表示整数和正确地比较整数的数字范围是在 -(253 - 1) 到 253 - 1 之间,包含 -(253 - 1) 和 253 - 1。

Number.MIN_SAFE_INTEGER
代表在 JavaScript中最小的安全的integer型数字 (-(253 - 1)).

Number.MAX_VALUE
表示在 JavaScript 里所能表示的最大数值。该值接近于 1.79E 308,大于 MAX_VALUE 的值代表 "Infinity"。

Number.MIN_VALUE
表示在 JavaScript 里所能表示的最小的正数。MIN_VALUE 的值约为 5e-324。小于 MIN_VALUE ("underflow values") 的值将会转换为 0。

Number.NaN
表示“非数字”的值(Not-A-Number)。

Number.NEGATIVE_INFINITY
表示负无穷大,在溢出时返回该值。和全局对象的 Infinity 属性的负值相同。
为了成功返回一个有限值,你可能会使用 Number.NEGATIVE_INFINITY 属性来判断是否显示一个条件错误 。然而 isFinite()方法更适合这种情况。

Number.POSITIVE_INFINITY
表示正无穷大,在溢出时返回该值。和全局对象的 Infinity 属性的值相同。
为了成功返回一个有限值,你可能会使用 Number.POSITIVE_INFINITY 属性来判断是否显示一个条件错误 。然而 isFinite()方法更适合这种情况。

4.2 Number构造函数的方法

Number.isNaN()
确定传递的值是否是 NaN。

Number.isFinite()
确定传递的值类型及本身是否是有限数。

Number.isInteger()
判断给定的参数是否为整数。

Number.isSafeInteger()
确定传递的值是否为安全整数 ( -(253 - 1) 至 253 - 1之间)。

Number.parseFloat()
以把一个字符串解析成浮点数。该方法与全局的 parseFloat()函数相同。

Number.parseInt()
以把一个字符串解析成整数。该方法与全局的 parseFloat()函数相同。

3. 数字值读取

其实,在读取模式中访问数字值时,后台会自动完成以下处理:

(1)创建Number类型的一个实例;
(2)在实例上调用指定的方法;
(3)销毁该实例。

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)
(注2:更多内容请查看我的目录。)

2. Number类型对象创建

Number类型是与数字值对应的引用类型,Number类型对象创建是使用Number构造函数。下面是使用Number构造函数传入不同类型参数后的情况。

// 传入Number类型
console.log(new Number(1));  // Number {1}
// 传入NaN类型
console.log(new Number(NaN));  // Number {NaN}
// 传入Infinity类型
console.log(new Number(Infinity));  // Number {Infinity}
// 传入String类型
console.log(new Number('123'));  // Number {123}
// 传入Undefined类型
console.log(new Number(undefined));  // Number {NaN}
// 传入Null类型
console.log(new Number(null));  // Number {0}
// 传入Boolean类型
console.log(new Number(true));  // Number {1}
// 传入Array类型
console.log(new Number([1,2]));  // Number {NaN}
// 传入Function类型
console.log(new Number(function(){return 1;}));  // Number {NaN}
// 传入Object类型
console.log(new Number({a: 1}));  // Number {NaN}
// 传入空对象
console.log(new Number({}));  // Number {NaN}

Number构造函数接收基本类型值时,能将其转换成对应的包含数字的对象,但是undefined会被转成{NaN},传入对象也会转换成{NaN}。

注意:null是基本类型值,是一个空对象指针,而{}是空对象。

省略new的效果一样。

1. 简介

为了便于操作基本类型值,ECMAScript提供了3个特殊的引用类型作为基本包装类型:String,Number和Boolean。实际上,每当读取一个基本类型值得时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。

本文由美高梅4858官方网站发布,转载请注明来源

关键词: 性能 版本 javascr 模型 时间