Javascript学习笔记-类型

Javascript类型.png

重新回顾一下Javascript中类型相关的知识

1. 基本类型

Javascript截止目前有7个基本类型:number, string, boolean , undefined, null, object, symbol

1.1 typeof

使用typeof函数可以得到对应变量/值的基本类型的字符串,但是也存在着一些例外:

typeof 1 === 'number';
typeof '' === 'string';
typeof true === 'boolean';
typeof {} === 'object';
typeof function(){} === 'function'; // function是object的一等公民,并不是基本类型
typeof null === 'object'; //之前说过在javascript中对对象的检测机制影响导致
typeof undefined === 'undefined';
typeof Symbol() === 'symbol';

我们知道Javascript中存在undefinedundeclared两种情况,undefined是变量已经声明,但是没有初始化赋值,此时获取变量的值为undefined;而undeclared是变量并没有声明,在词法作用域中无法找到对应的变量,此时获取变量的值会抛出ReferenceError
typeof对于undeclared的变量检测存在一个安全机制,会返回undefined的字符串,所以当我们需要使用一个不能确定是否存在的变量时,我们可以利用typeof的机制来避免异常的抛出

if(typeof x === 'undefined') { // x如果是undefined或者undecalred会满足条件
  // TODO
}

1.2 值相关内容

不同的基本类型的值存在一些特点:

1.2.1 string
  • 对于string的值来说,是一个常量,创建以后就不可以发生改变
  • string可以从某种程度上可以理解为字符数组,因此string在可以使用Array原型链上的方法,但是其本身并不是Array,所以并不是所有的方法都可以使用(这里存在自动封装过程)

var s = Array.prototype.join.call('abc', ','); // 可以使用该方法
console.log(s); // a,b,c
var r = Array.prototype.reverse.call('abc'); // 并不能使用该方法,会抛出异常
// 想要实现字符串顺序反转,可以将字符串转为数组后利用reverse()函数后再连接
var r = 'abc'.split('').reverse().join('');
console.log(r); // 'cba'
1.2.2 number
  • number类型可以分为不带小数的数据(整数)和带小数的数据,因此对于不带小数的数据和整数是一样的

4.0 === 4
  • number类型使用的是双精度的格式,所以在进行计算的时候并不是精确计算,会存在精度的不准确,最常见的例子就是

0.1 + 0.2 != 0.3

这是很让人费解的结果,所以在使用含有小数的数据进行计算的时候,最好引入一个误差精度,两个数差值绝对值小于这个值的时候,就认为它们相等,ES6中引入了Number.EPILON,该值等于Math.pow(2,-52)

  • number类型在较大或者较小的时候,会自动转换为科学计数法的方式

5000000000000000000000 // 5e+21
  • number类型在自动封装后可以使用toFixedtoPrecision分别保留指定小数位数和有效数字位数(科学计数法方式),返回结果为字符串

0.1234.toFixed(2); // '0.12'
1234.0.toPrecision(2); // '1.2e+3'

但是如果是整数调用对应方法的时候,要么使用..的方式,要么手动封装后调用,因为自动封装会默认把第一个.作为number自身的值

1234..toPrecision(2); // '1.2e+3'
Number(1234).toPrecision(2); // '1.2e+3'
1.2.3 特殊值
  • void和任何值进行运算后都只会返回undefined
  • NaN是特殊的number,是Javascript中唯一一个不具有自反性的值NaN!==NaN,因此想要判断一个变量是不是NaN可以利用自反性,也可以利用Number或者Window中的isNaN方法

var a = 1 / 'foo';
console.log(a!==a); // true
console.log(isNaN(a)); // true
console.log(Number.isNaN(a)); // true
  • Infinity是特殊的number,表示无限的意思,且在两个无限值进行计算的时候会有以下结果:

console.log(Infinity + Infinity); // Infinity
console.log(Infinity - Infinity); // NaN
console.log(Infinity * Infinity); // Infinity
console.log(Infinity / Infinity); // NaN
  • +0和-0,两个数在数值上并没有区别,但是确实可以区分其意义,如果要进行比较,可以使用Object.is函数进行

console.log(0 === -0); // true
console.log(Object.is(0,-0)); // false
// 也可以使用该函数对NaN进行比较
console.log(Object.is(NaN, NaN)); // true
1.2.4 值复制和值引用

只有很简单的一句话:对于基本类型的值在操作的时候进行值的复制传递,而对于复合对象在操作的时候进行值的引用传递。

2. 内置对象

Javascript内置对象也是内置函数,一共有10个:Number, String, Boolean, Object, Function, Array, RegExp, Error, Date, Symbol

2.1 toString

所有typeofobject的对象都有toString方法,其结果输出的对应对象的[[Class]]属性

Object.prototype.toString.call(Number(1)); // [object Number]
Object.prototype.toString.call(String(''));// [object String]

2.2 自动封装

基本类型并不存在方法,但是在使用的时候确可以直接使用某些方法,是因为在调用方法前,Javascript执行了自动封装的过程,所以可以使用对应封装类型的原型方法

2.3 valueOf拆封

对于封装后的对象(主要是通过显示的强制类型转换),如果需要得到其基本类型的值,可以使用valueOf函数进行拆封

new Boolean(false) === false; // false
new Boolean(false).valueOf() === false; // true

2.4 对象特性

2.4.1 Array
  • 创建一个数组,可以使用字面量的创建方法,也可以使用Array构造器,其中如果构造器传递参数为数字将创建对应长度的空单元数组

var arr = []; // 字面量创建
var arr = new Array([]); // 构造器创建
var arr = Array(3); // new关键字可以省略
console.log(arr.length); // 3;
  • Array对象的toString方法调用将返回通过,连接的字符串

[1,2,3].toString(); // '1,2,3'
  • Array对象中,如果存在空单元,那么就称为稀疏数组。空单元虽然在某些表现上和undefined单元相同,但是两者实际上有所区别

var arr1 = [undefined, undefined, undefined];
var arr2 = Array(3);
console.log(arr1.length === arr2.length); // true
console.log(arr1[0] === arr2[0]); // true;
// 区别
Array.prototype.map.call(arr1, (item,i) => { console.log(i);}); // 1 2 3
Array.prototype.map.call(arr2, (item,i) => {console.log(i);}); // [undefined * 3]
  • 使用delete可以删除数组元素,元素删除后长度不发生变化,删除位置变为空单元

var a = [1, 2, 3];
delete a[0];
console.log(a);// [undefind * 1, 2, 3];
console.log(a.length); // 3
2.4.2 Date和Error

DateError没有字面量的构建形式,一定要使用构造器的方式去创建对应的对象

var date = new Date(); // new关键字不能省略,若只获取当前时间可以使用Date.now()代替
var error = new Error(); // new关键字可以省略
2.4.3 Symbol

ES6引入的新的内置对象,通常用来作为对象内部私有属性的key,构建时不能使用new关键字,且可以使用Object.getOwnPropertySymbols()获取当前对象所有的symbol属性的数组

var s = Symbol('test');
var obj = {};
obj[s] = 1;
Object.getOwnPropertySymbols(o); // [Symbol(test)]
  1. 参考
    《你不知道的Javscript(中卷)》
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容