前端基础(一):js数据类型

简介: 至今,JS中共上述7种数据类型。这里需要注意,不要将js的内置对象:Date、Array等与数据类型混淆了,这些内置对象和我们自己创建的对象统一属于Object类型。 6中原始类型的值都无法改变。举个栗子,数值1,我们是无法将他改变成2的;字符串的变化实质上也是产生了一个新的字符串,旧的字符串仍然不变。

引自MDN:

最新的 ECMAScript 标准定义了 7 种数据类型:

至今,JS中共上述7种数据类型。这里需要注意,不要将js的内置对象:Date、Array等与数据类型混淆了,这些内置对象和我们自己创建的对象统一属于Object类型。

6中原始类型的值都无法改变。举个栗子,数值1,我们是无法将他改变成2的;字符串的变化实质上也是产生了一个新的字符串,旧的字符串仍然不变。由于这种特性,js会将其存至栈中,按值访问。而引用类型Object内容是可变的,而且大小不固定,所以将它存入堆中,通过地址引用的方式调用。

Boolean类型:表示逻辑,取值truefalse

Number类型:表示数字,和其他语言不同,js只有一种数字类型,是基于IEEE 754标准的双精度64位的值,取值范围(-2^63 - 1 至 2^63 - 1)。此外还有一些特殊标识符:Infinity、-Infinity、NaN。

String类型:表示字符串,由字符(2个字节)组成的一组数据,因此它也具有数组的可遍历、拥有长度属性等特性。

Symbol类型:表示符号类型,ES6新增的数据类型,表示一个唯一值,一般作为对象的key值或者枚举之用,非常适合消除魔法字符串。

Null类型:表示空值,可以理解为一个尚未创建的对象。它虽然是空值,但是却是一个对象,而且Object对象是继承自它,所以它可以说才是真正的对象始祖。

注意:虽然null是一个对象,但是其中的属性都是不可访问的,因此,我们是无法通过代码获取它的属性的。

Undefined类型:表示未定义,一个没有定义的变量或者没有赋予初始值的对象的值就是undefined。这里不要与Null混淆,它不是一个对象。


null === undefined;	//false
null == undefined;	//true	
null === null;	//true
undefined == undefined;	//true

Object类型:表示对象。在计算机科学中, 对象是指内存中的可以被标识符引用的一块区域。在JS中,对象可以被看做是一组属性的集合。JS中以ObjectFunction两个对象为基础,衍生出了现在百花齐放的各种对象,JS的继承、原型等都在这个基础上实现的。


类型判断

由于js弱类型的机制,变量的类型需要我们自己判断。江湖上出现了各种判断方法,下面我们来总结一下。

1.typeof

MDN上推荐的方法。


let str = 'string';
    let pNum = 11;
    let bRt = true;
    let pSymbol = Symbol('symbol');
    let pObj = {};
    let pArray = [];
    let fun = function () {};

    //typeof
    console.log('字符串', typeof str); //string
    console.log('数字', typeof pNum); //number
    console.log('布尔', typeof bRt); //boolean
    console.log('符号', typeof pSymbol); //symbol
    console.log('null', typeof null); //object
    console.log('undefined', typeof undefined); //undefined
    console.log('对象', typeof pObj); //object
    console.log('数组', typeof pArray); //object
    console.log('函数', typeof fun); //function

如上执行结果,对于原始类型(除了null以外),输出结果没问题。但是对于引用类型,输出结果只会是objectfunction,这并非我们预期的结果。

typeof输出的结果包含以下7种:number、boolean、string、symbol、undefined、object、function。

2.instanceof

这种方式只能判断拥有原型的对象,并且只能判断比较的两个对象之间是否属于实例关系(包括继承),不能获取类型。


console.log('对象', pObj instanceof Object); //true
    console.log('数组是否数组', pArray instanceof Array); //true
    console.log('数组是否对象', pArray instanceof Object); //true
    console.log('函数是否函数', fun instanceof Function); //true
    console.log('函数是否对象', fun instanceof Object); //true

需要注意,它会去原型链上去寻找匹配项,例如: pArray instanceof Object结果也是true。该方法用作判断变量是否是某个类的实例非常有效。但是需要注意,这里的比对默认都是在同一个全局环境下比对的。也就是说,在同一个frame下,我们才能得到正确结果。如果在frame1下去判断一个变量是否属于frame2的Object,只会得到false结果。

3.constructor或__proto__


 console.log('construct');
    console.log('字符串', str.construct === String.construct); //true
    // console.log('数字', typeof pNum); //数字没有construct
    console.log('布尔', bRt.construct === Boolean.construct); //true
    // console.log('符号', typeof pSymbol); //symbol没有construct
    // console.log('null', typeof null); //null无法访问construct属性
    // console.log('undefined', typeof undefined); //undefined无法访问construct属性
    console.log('对象', pObj.construct === Object.construct); //true
    console.log('数组', pArray.construct === Array.construct); //true
    console.log('函数', fun.construct === Function.construct); //true

    console.log('__proto__');
    console.log('字符串', str.__proto__ === String.prototype); //true
    // console.log('数字', typeof pNum); //数字没有prototype
    console.log('布尔', bRt.__proto__ === Boolean.prototype); //true
    // console.log('符号', typeof pSymbol); //symbol没有prototype
    // console.log('null', typeof null); //null无法访问prototype属性
    // console.log('undefined', typeof undefined); //undefined无法访问prototype属性
    console.log('对象', pObj.__proto__ === Object.prototype); //true
    console.log('数组', pArray.__proto__ === Array.prototype); //true
    console.log('函数', fun.__proto__ === Function.prototype); //true

原理同2,只是不会再去原型链上查找了,这里固定只对比当前对象的实例。

4.toString


 console.log('字符串', Object.prototype.toString.call(str)); //[object String]
    console.log('数字', Object.prototype.toString.call(pNum)); //[object Number]
    console.log('布尔', Object.prototype.toString.call(bRt)); //[object Boolean]
    console.log('符号', Object.prototype.toString.call(pSymbol)); //[object Symbol]
    console.log('null', Object.prototype.toString.call(null)); //[object Null]
    console.log('undefined', Object.prototype.toString.call(undefined)); //[object Undefined]
    console.log('对象', Object.prototype.toString.call(pObj)); //[object Object]
    console.log('数组', Object.prototype.toString.call(pArray)); //[object Array]
    console.log('函数', Object.prototype.toString.call(fun)); //[object Function]
    console.log('日期', Object.prototype.toString.call(new Date())); //[object Date]
    console.log('window', Object.prototype.toString.call(window)); //[object HTMLDocument]
    console.log('document', Object.prototype.toString.call(document)); //[object global]

Object中定义的toString方法,返回的是当前对象的内部属性[[Class]],结果格式为[object Xxx],其中Xxx就是我们判断数据类型的依据,也是内置对象的字符串。

看一下优秀的框架是怎么做的

JQuery


function toType( obj ) {
	if ( obj == null ) {
		return obj + "";
	}

	// Support: Android <=2.3 only (functionish RegExp)
	return typeof obj === "object" || typeof obj === "function" ?
		class2type[ toString.call( obj ) ] || "object" :
		typeof obj;
}

原始类型使用typeof,引用类型使用toString。

AngularJs


function isNumber(value) {return typeof value === 'number';}
function isDate(value) {
  return toString.call(value) === '[object Date]';
}

也是一样,原始类型使用typeof,引用类型使用toString。

这里其实toString能够完成typeof的所有任务,不知为何以上两个框架会混用。私自猜测可能是因为typeof使用起来更为简洁一点,所以会优先使用typeof。


总结

①boolen、number、string、symbol、function可通过typeof或toString方式判断。

②null、undefined直接通过 ===运算符判断。

③js内置对象,如:Object、Function、Date、Regex等通过toString方式判断。

④自定义类和相应继承类,通过 instanceof判断。

原文发布时间为:2018年06月06日
原文作者:老司机带你撸代码

本文来源:开源中国 如需转载请联系原作者

 
























目录
相关文章
|
16天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
17天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
30 4
|
27天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
27天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
40 1
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
29 1
|
6月前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
34 0
|
存储 JavaScript 前端开发
JavaScript | 数据类型,常量以及变量
这应该是JavaScript系列教程第三期,这期准备讲一下数据类型,常量以及变量的定义。
|
存储 JavaScript 前端开发
JavaScript之 数据类型 与 变量
JavaScript之 数据类型 与 变量
99 0
JavaScript之 数据类型 与 变量
|
JavaScript 前端开发
JavaScript数据类型和变量
本文目录 1. 数据类型 2. undefined和null的区别 3. typeof判断类型 4. 局部变量和全局变量
125 0