你不知道的前端数据类型(基础+进阶篇)

类型&值

内置类型: 7种 (null| undefined | boolean | number| string | object | symbol)

值类型转换

Number<->String
let a = 123;
a.toString() //‘123’
String(a) //‘123’ String() 遵循toString()规范
let c = '3.14'
Number(c) //3.14

因为数组的valueOf()无法转换为简单类型值,于是转而调用ToString()


* 结合ES5规范谈字符串转换

如果其中一个操作数为字符串或通过调用Topermitive抽象操作后,再调用 [[DefaultValue]],以数字作为上下文,执行拼接操作;否则进行数字加法;
「这个地方有些绕,再查下规范」


执行拼接操作
let a = {
  valueOf: () => 2;
  toString: (num) => '44'
}
a+ ' ' // '2'
String(a) //'44' 

因此我们在定义valueOftoString方法时要慎重,因为会影响强制类型转换结果。

  • 不建议使用封装对象直接进行判断,因为返回的值始终为 true
let a = new String("abc");
typeof a // "object"
a instanceof String // true
Object.prototype.toString.call(a) // "[object String]"
Number<->Boolean
// 判断多个参数下是否唯一一个为true
const onlyOne= (args) => {
  let sum = 0;
  for(let i = 0,len = args.length; i < len; i++) {
    sum += Number(!!args[i]);
  }
  return sum === 1;
}
a = true;
b = false;
p(onlyOne([a,b]))
symbol <-> anyType

ES6中出现的 symbol 类型不能够转换为Number String

var s2= Symbol("not cool");
s2 + ""  // TypeError
Symbol("foo") === Symbol("foo"); // false

typeof 运算符能帮助识别symbol类型

typeof Symbol() === 'Symbol'
typeof Symbol('foo') === 'Symbol'
Boolean <-> String/Others

掌握真 / 假值的重点在于理解布尔强制类型转换

  • 规律总结
    以下这些是假值:
    undefined
    null
    false
    +0-0NaN
    ""
    假值的布尔强制类型转换结果为 false
  • 显式调用Boolean() 进行强制类型转换
var a = "0";
var b = [];
var c = {};
var d = "";
var e = 0;
var f = null;
var g;
Boolean( a ); // true
Boolean( b ); // true
Boolean( c ); // true
Boolean( d ); // false
Boolean( e ); // false
Boolean( f ); // false
Boolean( g ); // false
  • 使用 运算符 !!显式地将值强制类型转换为布尔值, 包含一次强制Boolean类型转换,将真值反转为假值再反转回来。
数字
  • 判断是否相等
    设置机器精度 Number.EPSILON = Math.pow(2,-52);
    Math.abs(n1 - n2) < Number.EPSILON;

  • 判断是否为整数
    Number.isInteger()
    polyfill 版本
    return typeof num == 'number' && num % 1 == 0

  • x的引用还是副本
    x.length = 0 x.push (4,5,6,7) 并没有创建一个新数组,而是改变了当前的数组
    通过值复制传递复合值(如数组),就需要创建一个副本;

对象

封装
var a = new Boolean(false);
得到的不是 false,而是一个真值

类型转换
  1. 日期显式转换为数字
let l = new Date(); //1563943975689
let timeStamp = new Date().getTime();
// es5 中的方法
timeStamp = Date.now();
// Date.now() 的polyfill
if(!Date.now) {
  Date.now = function () {
    return +new Date();
  }
}
  1. 使用~进行 32位运算
    ~x 大致等于 -(x+1)
if(~a.indexOf('xx')) {
console.log("当前没有找到匹配")
}

~~只适用于32位的数字
Math.floor(-49.6) // -50
~~(-49.6) // -50

  1. parseInt(...)
    将参数强制处理为字符串再解析
    parseInt(1/0, 19) // 18 1/0 处理为Infinity n为无效字符,只处理到I,按照19进制 得到18
  2. Boolean(...)显式转换
    4.1 最常用: !!
    a = !!"0" && !!{} && !![] // true
    d = !!"" && !!0 && !!null !!undefined // false
    Boolean(a)
&& || 操作符

|| 返回的是对应的值 不同于C语言中的 true | false
守护运算符&&

function fn() {
    console.log(a);
}
a && fn()
//  fn在条件判断通过时才会执行
其他类型和布尔类型之间的相等比较

如果Type(x)是boolean类型,结果返回 ToNumber(x) == y

let x = true;
let y = "42"
x == y; // false
// x被强制转换为1;    1 == '42'

null undefined 之前的强制类型转换是安全的

对象与非对象之间的相等比较

对象通过 Topremitive进行强制类型转换(如 toString()、 valueOf())

  1. 抽象关系比较
    2.1 双方都是字符串,按照字母顺序来比较
    2.2 为了保证安全,应该在关系比较中进行显示强制类型转化;
var a = { b : 2};
var b = { b : 3};
a > b //flase
a == b //false
a < b //false
a >= b // true  a<=b 被处理为 !(a>b) 小于等于其实是不大于
a <= b //true
运算符优先级

Javascript中的 && 和 || 运算符返回它们其中一个操作数的值,而非 true 或者 false

数字精度

类数组:字符串和数组都是类数组,拥有length和indexof(...)和concat(...)
字符串可以借用数组的方法,使用call

let dUpper = Array.prototype.map.call(a,function(v) {
  return v.toUpperCase()+ '.';
}).join("");

浮点数:设定误差范围 2^-52

ES6中定义了Number.EPSILON代表浮点数的误差范围

//polyfill
if(!Number.EPSILON)
{
  Number.EPSILON = Math.pow(2,-52);
}

数字类型包含几个特殊值: -Infinity +Infinity -0
特殊的数值 NaN
不是数字的数字 仍是数字类型
typeof NaN === "number"
NaN 为非自反的值 NaN !== NaN 使用内建函数isNaN()判断 该函数有个严重bug 判断当前数字不是NaN类型,也不是Number类型
math工具函数中 isNaN 的polyfill

if(!Number.isNaN) {
  Number.isNaN = function(n) {
    return typeof n === 'Number' && window.isNaN(n);
  }
}

区分正负0
function isNegZero(n) {
n = Number(n);
return (n === 0) && (1/n === -Infinity)
}
ES6中出现了 Object.is(...) 判断两个值是否完全相等,能够使用== / === ,不使用 Object.is() 因为前者效率更高更通用

mentor's question
  1. 为什么+-Infinity Boolean后为 true
    根据MDN web docs
    -Infinity 仍为真值, Infinity是一个全局对象的一个属性,即它是一个全局变量.
    *JavaScript 中的真值示例如下(将被转换为 true,if 后的代码段将被执行)
if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
  1. 标志symbol 这个基本类型的作用是什么?
    一种不可变的并且值唯一的基本数据类型,用于定义属性的key, 防止在多个属性同时作用于对象时由于属性重复引发覆盖。

  2. object 转为number 类型,得到的结果
    如果有对应的数值可以转换,得到数值,如果不能对应转换 NaN

let test1 = new Boolean(true) //undefined
let test2 = new Boolean(false) //undefined
Number(test1) //1
Number(test2) //0
let test3 = new Date() // Thu Aug 22 2019 10:57:06 GMT+0800 (中国标准时间)
Number(test3) //1566442626454 得到的是时间戳
let test4 = new String('999');
Number(test4) //999
let test5 = new String('999 888');
Number(test5) // NaN
let test6 = {
  a: {
  hahah: 'jajaja'
  }
}
Number(test6) //NaN
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容