前言

写着 TypeScript 学习笔记, 顺便也写点 JS 的呗.

参考

JS数据类型分类和判断

阮一峰 – 数据类型

JS 数据类型

string

number

boolan

undefined

null

object

symbol (es6)

bigint (es2020)

其中 symbol 和 bigint 是后来加进去的

另外还有一些很常见但其实它们不能说是类型. array, function, class, arrow function, NaN, Regex, Date

typeof

typeof 是用来判断类型的.

console.log('string', typeof 'string');
console.log('number', typeof 1);
console.log('boolean', typeof true);
console.log('undefined', typeof undefined);
console.log('null', typeof null);
console.log('object', typeof {});
console.log('symbol', typeof Symbol('v'));
console.log('bigint', typeof (100n));

结果

只有一个奇葩, null = object. 这个是历史原因.

另一组

console.log('array', typeof []);
console.log('function', typeof function() {});
console.log('arrow function', typeof (() => {}));
console.log('date', typeof new Date());
console.log('reg', typeof /\d/gi);
console.log('NaN', typeof NaN);
console.log('class', typeof class{});

结果

我们先讲好理解的, function, arraw function 都是 function, JS 的 class 只是语法糖其实也是 function, 所有它们三都是 function, 没问题.

reg, date 都是 new 出来的对象, 没问题

最后只剩下 array = object, NaN (not a number) = number 比较乱水了. (背起来呗)

类型判断方式

除了用 typeof 还有一些常用的技巧

判断 null

null === null

判断 NaN

isNaN(NaN)

判断 Array

Array.isArray([])

判断 Date, Regex

(new Date()) instanceof Date

黑魔法 typeof

console.log('string', Object.prototype.toString.call('string').slice(8, -1).toLowerCase());

效果

类型转换

参考: 阮一峰 – 数据类型转换

所有类型都可以被强制转换成 boolean, string, number

转 boolean

Boolean(variable) 或者 !!variable 2 种写法都可以把 variable 强制转换成 boolean

它的规则是除以下 5 个值转成 false, 其余都转成 true

转 number

Number(variable) 或者 +(variable) 2 种写法都可以把 variable 强制转换成 number

'324' = 324
'' = 0
true = 1
false = 0
'324abc' = NaN
undefined = NaN
null = 0

几个记忆点

1. boolean true = 1, false = 0 (好记)

2. empty string = 0 (可以记)

3. full number string = number 和 partial number string = NaN (这个和 parseInt, parseFloat 有时会搞乱, parse 会自动过滤掉不是 number 的 string, 比如 parseInt('100px') = 100, Number('100px') = NaN) (可以记, 但要记得和 parse 不同)

4. undefined = NaN, null = 0 (不好记...为什么这 2 个不同...乱水)

当强转对象

三个步骤

valueOf > toString > Number(variable)

概念是先把对象转成普通类型

首先是调用 valueOf, 如果返回的依然是对象就再调用 toString, 如果依然是对象就报错

只要 valueOf 或 toString 返回的不是对象, 那么就 Number(variable)

转 string

转换规则是

123 = '123' (好记)

true = 'true' (好记)

undefined = 'undefned'  (好记)

null = 'null'  (好记)

当强转对象

toString > valueOf  > String(variable)

概念和 Number 一样, 只是顺序不同, 它先调用 toString 如果依然返回对象就调用 valueOf

自动类型转换

if (variable) 会把 variable 强行转成 boolean

!!(variable) 会把 varable 强行转成 boolean

+(variable) 会把 varable 强行转成 number

string + variable 会把 varable 强行转成 string e.g. '123' + 3 = '1233'

variable -*/ variable 会把 variable 变成 number e.g. '123' - '3' = 120

variable == variable 双等号在对比时, 也会自动类型转换.

双等号 ==

参考: JavaScript中双等号(==)的比较机制

这个规则挺多的, 真实开发中已经被禁用了. 其实没有必要学.

首先是

1. null 和 undefned 是相等的

2. null 和 undefined 不可以被转换类型

3. NaN 和谁都不相等, 包括 NaN... 所以 NaN == NaN 是 false, NaN != NaN 是 true

4. string == string, number == number, bool == bool, object == object 这些都不会有自动转换

5. 类型不同的情况下, 比如 string == number, bool == string, object == number, 先把他们转成 Number(string) == Number(boolean). Number 是老大就对了.

我日常会用的类型转换

+(new Date()) 把日期转成 number, 表示 1970 到日期的 milliseconds

true = 1 和 false = 0 (number 和 boolean 间的转换)

if(object|array) 判断空 null or undefined (我只会判断 object 和 array, string, number 我不会这样做)

'abc' + 123 把 number 拼接到 string 里.

其它的我都不会去记也不会去用.

JavaScript – 数据类型的更多相关文章

  1. Javascript:Javascript数据类型详解

    要成为一个优秀的前端工程师,系统的学习Javascript,有夯实的Javascript基础,以及对语言本身的深刻的理解,是基本功.从Javascript数据类型开始,我将对Javascript知识体 ...

  2. JavaScript数据类型 typeof, null, 和 undefined

    JavaScript 数据类型 在 JavaScript 中有 5 种不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...

  3. 网页、JavaScript 数据类型

    JavaScript 数据类型 一.基本数据类型: 字符串.数字.布尔.日期和时间 JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 1 v ...

  4. javascript数据类型、初始化

    Javascript数据类型有6种: 数值型数据类型(Number): 字符串(String): 布尔型数据(Boolean): 对象数据(Object): 空(Null): 未定义(Undefine ...

  5. 第九十九节,JavaScript数据类型

    JavaScript数据类型 学习要点: 1.typeof操作符 2.Undefined类型 3.Null类型 4.Boolean类型 5.Number类型 6.String类型 7.Object类型 ...

  6. Javascript数据类型共有六种

    Javascript数据类型共有六种 /* var box; alert(typeof box); // box是Undefined类型,值是undefined,类型返回的字符串是undefined ...

  7. JavaScript复习之--javascript数据类型隐式转换

    JavaScript数据类型隐式转换.一,函数类    isNaN()    该函数会对参数进行隐式的Number()转换,如果转换不成功则返回true.    alert()    输出的内容隐式的 ...

  8. 数据的分类-JavaScript数据类型

    JavaScript数据类型 1.数据类型是什么? 我们接触的绝大多数程序语言来说,把数据都进行了分类,包括数字.字符.逻辑真假:int,long,string,boolean....等等:我们都知道 ...

  9. js基础--javaScript数据类型你都弄明白了吗?绝对干货

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...

  10. 每天五分钟-javascript数据类型

    javascript数据类型分为基本数据类型与复杂数据类型 基本数据类型包括:string,number,boolean,null,undefined,symbol(es6) 复杂数据类型包括:obj ...

随机推荐

  1. 第十节 JMeter基础-初级购物车【接口关联-鉴权】

    声明:本文所记录的仅本次操作学习到的知识点,其中商城IP错误,请自行更改. 背景:商城购物车可以添加数据,也可以删除数据. 思路: 登录后添加购物车,加入成功后查看购物车列表. 购物车列表,随机删除, ...

  2. WordPress基础之基本SEO设置

    基础内容,不会涉及过深,在谷歌SEO教程中会做详细的介绍,我这里只简单讲下. 1. SEO介绍 SEO,又名搜索引擎优化(Search Engine Optimization,缩写为SEO)是透过了解 ...

  3. 在Ubuntu 18.04 Desktop图形中配置静态和动态IP

    在Ubuntu 18.04 图形界面中配置静态和动态IP 设置静态ip 设置为dhcp动态获取ip

  4. 7月24号python:库存管理

    7月24号python:库存管理 题目: ​ 仓库管理员以数组 stock 形式记录商品库存表.stock[i] 表示商品 id,可能存在重复.原库存表按商品 id 升序排列.现因突发情况需要进行商品 ...

  5. 【SpringCloud】 Re01

    简单理解 接口跨服务调用 说白了 就是原来只是调用一个接口就能得到资源,现在是调用两个或者更多接口,这些接口来自不同的服务 (从前端的角度来看依然只是调用这个接口,只是这个接口背后又去调用其他的接口了 ...

  6. 【C】Re01

    一.GCC分步编译 xxx.c文件经历的一系列编译过程: #include <stdio.h> int main() { printf("Hello, World!\n" ...

  7. 模具仿真软件FASTAMP —— 华中科技大学材料成形及模具技术国家重点实验室

    相关介绍: https://www.ruanfujia.com/software/9525/ FASTAMP 是由华中科技大学材料成形及模具技术国家重点实验室独立设计开发的,是专业的板料冲压成形快速分 ...

  8. Ubuntu18.04环境下 以太坊Geth的安装

    ubuntu18.04系统下安装: sudo apt-get install software-properties-common sudo add-apt-repository -y ppa:eth ...

  9. Ubuntu18.04server 双网卡,开机自动设置路由并启动校园网网络认证程序(Ubuntu开机自动设置路由,开机自启动应用程序)

    本博主为高龄在校生,实验室服务器需要假期时候无人守候也能实现自动登录校园网从而实现网络连接,以使实验室同学在家也可以使用校园vpn连接服务器. 由于假期时候实验室没有人,而假期实验室可能会出现断电断网 ...

  10. Docker部署rabbitmq遇到的问题

    1.背景 Docker部署rabbitmq遇到的如下两个问题 问题一:访问交换机时报错 Management API returned status code 500 问题二:访问channel时报错 ...