JS中的数字格式化和大位数缩写

以前因为项目需要 i18n ,一直以来都是自己写了一个格式化函数来处理,会使用 replace 配合正则对数字进行千位分割来展示,并且搭配 Vue.filter 来实现快速格式化。
但是对于大位数处理就会比较麻烦了,因为在境内就需要使用 万位分割,大位数使用 万、亿、万亿 来缩,而在英语系国家就会使用 千分分隔,比如说: K、M、B 来缩写数额。

正巧最近开始了一个需要国际化的项目,在一开始编写数字格式化过滤器的时候偶尔发现了 Intl.NumberFormat().format() 这个API,原来现在 原生JS就支持了对数字的格式化,并且不光可以千位分隔,还可以将大位数缩写。

阅读全文

JS中的字符串前后补全(补位)

在日常项目中经常会遇到需要对字符串补位的操作,比如

  • 向前补0:例如日期,经常会需要YYYY-MM-DD 的格式,
    如果不使用日期库,直接获取月份和日期前面是没有0的,需要手动拼接字符串。

正巧今天要搞日历组件,前面缺一个0总感觉少了点感觉,当时懒得自己写补全了,想着百度一个吧,就搜到了张鑫旭大佬的这篇文章 《JS字符串补全方法padStart()和padEnd()简介》,然后就惊了,原来早在4年前 JS 就原生支持了全后补全了(我这几年在干嘛😢)

阅读全文

如何判定一个变量是数组

一个不幸的消息,最近我厂因为资金的问题凉凉了,所以我得开始重新找工作了,最近应该会分享一些和面试题有关并且我觉得有意思的内容,
😁 正巧今天面试的时候被问到的一个面试题我觉得就挺有意思的题目:

你如何判断一个变量是数组?

因为得知公司要解散的消息后比较仓促,也就没有好好刷面试题直接就出去面了(无缝衔接实属渣男了),所以被问道这还算是比较经典面试题的时候,下意识就回答了使用 typeof 来判断,但是想起来不对啊,数组他是对象类型嘛!

😱 卧槽,踩坑里了。

就马上补充了一句:“emmmm….好像用 typeof 不行,数组返回的是 Object ,应该可以通过原型链上的 constructor 来判断….噢,通过 instanceof 也可以!”

不出意料因为踩坑了,紧接着面试官就追问了一句 “还有其它的方式吗?”
考虑了5秒左右答 “没有了,暂时想不起来更多的方式。”,面试官回:“还有一种 isArray 可以判断”

以前一直没有考虑过这种问题,去判断一个对象是否为数组的场景。所以我觉得就还蛮有意思的,所以回来之后想看看还有哪几种方式可以判断是否为数组。

阅读全文

原型链! __proto__ 与 prototype

Every JavaScript object has a second JavaScript object (or null ,but this is rare) associated with it. This second object is known as a prototype, and the first object inherits properties from the prototype.
每个 JavaScript 对象都会对应一个原型对象(除了 null),并从原型对象继承属性和方法。
JavaScript 权威指南

一句话解释:对象 __proto__ 属性是JS内置的,它所对应值是原型对象的 prototype ;而 prototype 就是你自己写的原型属性、方法 加上 JS原型内置的属性、方法

阅读全文

JS中的 new 关键字做了什么?

new 运算符 创建 一个用户定义的 对象类型 的实例或 具有构造函数的内置对象 的实例。

完整的了解 new 运算符你可能还需要了解一下 面向对象思想 以及 原型链,可以简单查看这篇笔记 👉 原型链! __proto__ 与 prototype

如果快速的了解 new 关键字按照MDN的文档描述来说就是:

  1. new关键字会创建一个空的简单JavaScript对象(即 {});
  2. 链接该对象(设置该对象的 constructor)到另一个对象 (绑定原型);
  3. 步骤1 新创建的对象作为 this 的上下文 ;
  4. 如果该函数没有返回对象,则返回 this

可以简单理解成 new 关键字帮我们处理了书写构造函数时一些固定的步骤

阅读全文

ES6 中的数组拓展方法 flat() & flatMap()

之前有使用过 flat() 方法,但是一直不知道 flatMap() 方法,在使用 map() 方法组装集合的时候,在组装完成之后还要链式调用一下 flat(),如果可以知道 flatMap() 代码还能精简一点,也方便递归返回的数组内容。

本来是上个月发现的,但隔了一个月才有时间写,已经想不起来当时怎么发现的 flatMap() 这个方法了…
就直接跳过前置场景,直接开始聊这两个扩展方法吧。

阅读全文

JavaScript 中的位运算符

在思否上遇到一个问位运算符的问题 字符串的位运算,是怎么执行的,我也挺好奇的,就是为啥字符串进行位运算的时候返回的结果是 0,索性在解答这个问题的同时把位运算符都整理一遍。

那么先来整理一下位运算符,最后再说明为什么字符串的处理结果为 0

阅读全文

Symbol() 是个什么东西?

最近在一些 Demo 中经常会看到 Symbol() 这个东西,例如:

var race = {
  protoss: Symbol(),
  terran: Symbol(),
  zerg: Symbol()
}

就只能记得大概了,就是赋值一个独特的值,但是这个值具体是什么我想不起来了。
所以还是记个笔记加深下印象,省的看了又忘。

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型

阅读全文

ES6 中的 新数据结构 Set & Map

今天在一个需求里边遇到一个使用 MAP 数据结构的场景,就去解了一下 ES6 的新数据结构

ECMAScript 6 内提供了 4种 新结构 Set, WeakSet, Map, WeakMap,虽然已经是5年前的知识了,但是对于我来说还是新🤣

本来想先聊 Map 的,但是仔细看了阮一峰老师的文章之后发现,确实是要从 Set 开始讲

阅读全文

JavaScript 中的 this 指向问题

今天在群里看到大家在讨论一个问题,就是 this 的指向,并且牵扯到了 letconst 的变量提升,比如说在全局顶部声明的 let 变量能否挂载到 window 下之类的。
还是老流程,先讨论第一个问题,然后再开始牵扯到后续的展开。

this 指向大概分为两种,普通函数内的 this 和 箭头函数内的 this,箭头函数内的 this 其实挺好理解的,主要是因为各种 call()apply()bind()new 影响下的 this 指向问题。

阅读全文