一、数据类型

JS分两种数据类型:

基本数据类型:**Number、String、Boolean、Null、 Undefined、Symbol(ES6),**这些类型可以直接操作保存在变量中的实际值。

引用数据类型Object(在JS中除了基数据类型以外的都是对象,数据是对象,函数是对象,正则表达式是对象)

1、基本数据类型(六种)存放在栈中

基本数据类型是指存放在中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按值存放的,所以可以直接按值访问

  • 1、Number数值类型
    Number类型包含整数和浮点数(浮点数数值必须包含一个小数点,且小数点后面至少有一个数字)两种值

注意:在js中浮点数的精度是17位,计算是二进制的计算数 据,所以得到的不是整数

var num1 = 0.1;var num2 = 0.2;console.log(num1 + num2);   //0.30000000000000004

NaN:非数字类型,属于数值型基本数据类型

特点:
1):设计任何的NaN操纵都会返回NaN
console.log('ab'/10); // NaN
2) NaN不等于自身。
console.log(NaN == NaN);// false;

判断是否是Number类型

1、isNaN:判断是否是一个非数字类型,传入的非数字类型,返回true,否则返回false
注意:传入的参数首先会被转化为数值,如果参数类型为对象类型,先调用valueOf()方法,再确定该方法返回的值是否可以转换为数值类型,如果不能,再调用toString()方法,再确定返回值
2、typeof
console.log(typeof 12) //Number

数值类型的转换:
Number():可以用于任何的数据类型
parseInt:提取 整数数值
paseFloat:提取浮点数值

  • 2、String 字符串类型

特点:
1、字符串的单引号和双引号作用效果一样
2、字符串有length属性,可以取得字符串的长度
3、字符串的值是不可变的,所以很多的字符串的api不会改变原字符串值

字符串转换:
String():适用于任何的数据类型(null -> null undefined -> undefined)
toString()nullundefined没有这个功能
console.log(null.toString()); //error 报错

  • 3、Boolean 布尔类型
    该类型只有两个值:truefalse
转换为`boolean`:    `Boolean()`
Boolean(undefined):falseBoolean(null):falseBoolean(非空对象包括空数组[]和空对象{}):trueBoolean(非0): true || Boolean(0和NaN):falseBoolean(非空包括空格字符串):true || Boolean(''):false[注意]true不一定等于1,false也不一定等于0

出现场景:
(1)条件语句导致执行的隐士类转换
(2)字面量或变量定义

类型转换:
Number(true): 1     ||   Number(false) : 0String(true):'true'      ||   String(false):'false'
  • 4、Null 空对象指针类型
    如果定了一个对象,初始化可以为null,因为null的基本类型是Null,在if语句中默认转化为false,在和数值计算默认为0
    出现场景:对象不存在
类型转换:
Booleam(null)  falseNumber(num)  0String(null)  'null'

Number(null) // 0

  • 5、Undefined
    申明了变量但是没有初始化,默认为undefined,在if语句中默认转化为false,

undefined:表示‘缺少值’,就是应该有一个值,但是没有定义,以下用法是典型的出现undefined情况
(1)变量被申明,等于undefined
(2)调用函数时,应该提供的参数没有提供,该参数等于undefined
(3)对象没有赋值的属性,该属性值为undefined
(4)函数没有返回值,默认返回undefined

类型转换:
Boolean(undefined):  falseNumber(undefined):  NaNString(undefined):  'undefined'
  • 6、Symbol
    ES6新增的一个基本数据类型,表示唯一性
 let id1 = Symbol('id');let id2 = Symbol('id');console.log(id1 == id2);  //false

Symbol属性类型不支持for...inObject.keys()

 let id = Symbol("id");let obj = {[id]:'symbol'};for(let option in obj){console.log(obj[option]); //空}

但是也能有方法去访问:Object.getOwnPropertySymbols
方法会返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

console.log(Object.getOwnPropertySymbols(obj))
// [ Symbol(c) ]
  • 介绍两个Symbol.forSymbol.keyFor
    (1)、Symbol.for :方法根据给到的键key来运行时的symbol注册表中找到对应的symbol,如果找到了,则返回它,否则新增一个与该键关联的symbol,并放入全局的symbol,这个Symbol值可以是被二次用到的
    返回值:
    返回由给定的 key 找到的 symbol,否则就是返回新创建的 symbol。
Symbol.for("foo"); // 创建一个 symbol 并放入 symbol 注册表中,键为 "foo"
Symbol.for("foo"); // 从 symbol 注册表中读取键为"foo"的 symbolSymbol.for("bar") === Symbol.for("bar"); // true,证明了上面说的
Symbol("bar") === Symbol("bar"); // false,Symbol() 函数每次都会返回新的一个 symbol为了防止冲突,最好给你要放入 symbol 注册表中的 symbol 带上键前缀。
Symbol.for("mdn.foo");
Symbol.for("mdn.bar");

(2)、Symbol.keyFor
方法用来获取 symbol 注册表中与某个 symbol 关联的键。

var globalSym = Symbol.for("foo");
Symbol.keyFor(globalSym); // "foo"

2、引用数据类型

引用数据类型也叫对象数据类型,包括function,object,array,date,RegExp等可以可以使用new创建的数据,又叫对象类型,他们是存放在(heap)内存中的数据
特点:

  • 引用类型的值可以改变
  • 引用数据类型可以添加属性和方法
  • 引用数据类型的赋值是对象引用
  • 引用类型的比较是引用的比较
  • 引用类型是同时保存在栈区中和堆区中的,引用类型的存储需要在内存的栈区和堆区中共同完成,栈区保存变量标识符和指向堆内存的地址

注意:在引用类型赋值时对象的引用,所以从一个变量向另一个变量赋值引用类型的值时,同样会将存在在变量中的对象的值赋值一份到新的变量分配的空间,引用类型保存在变量中的时对象在堆存在的地址,所以与基本数据类型的简单赋值不同,这个值的副本实际上时一个指针,而这个指针指向储存在堆内存的一个对象,那么赋值操作后,两个变量都保存了同一个对象的地址,而这个地址都指向同一个对象,因此改变其中任何一个变量,都会影响

在ECMAScript中,Object类型是所有它的实例的基础

Object的每个实例都具有下列的属性和方法:

  • constructor:构造函数
  • hasOwnProperty(proertyName)
    用于检查给定的属性在当前对象实例(而不是实例的原型)中是否存在。
  • isPropertyOf(Object)
    用于检查其原型链的对象是否存在于指定对象的实例中,是则返回true,否则返回false。
var a = {} function Person() {} var p1 = new Person() // 继承自原来的原型,但现在已经无法访问  var Person.prototype = a var p2 = new Person() // 继承a  console.log(a.isPrototypeOf(p1)) // false a是不是p1的原型 console.log(a.isPrototypeOf(p2)) // true a是不是p2的原型  console.log(Object.prototype.isPrototypeOf(p1)) // true  console.log(Object.prototype.isPrototypeOf(p2)) // true
  • propertyIsEnumerable(propertyName)
    用于检查给定的属性是否可以用 for-in 语句进行枚举。
  • toLocaleString()
    返回对象的字符串表示,该字符串与执行环境的地区对应。
  • toString()
    返回对象的字符串表示。
  • valueOf()
    返回对象的字符串、数值、布尔值表示。通常与toString()方法的返回值相同。

拓展:声明对象的几种方式

 <script>
//内置函数var obj1=new Object();obj1.name="zhuyu";obj1.age=21;obj1.uni=function(){console.log(this.name+this.age);}console.log(obj1);obj1.uni();//字面量var obj2={name:"zhuyu2",age:21,uni2:function(){console.log(this.name+this.age)}}console.log(obj2);obj2.uni2();// 自定义函数function Obj(name,age){this.name=name;this.age=age;this.uni3=function(){console.log(this.name+this.age)}}var obj3=new Obj("zhuyu3",21);console.log(obj3);obj3.uni3();// Es6类class Obj2{constructor(name,age){this.name=name;this.age=age;}uni4(){console.log(this.name+this.age)}}var obj4=new Obj2("zhuyu4",21);console.log(obj4);obj4.uni4();//使用Object.create()var person={image:"true",uni5:function(){console.log(`名字是${this.name},年龄是${this.age}`);}}var obj5=Object.create(person);obj5.name="zhuyu5";obj5.age=21;obj5.image=false;obj5.uni5();console.log(obj5)</script>

3、基本数据类型和引用数据类型的区别

总结基本数据类型和引用数据类型区别

1、声明变量时内存分配不同

*原始类型:在栈中,因为占据空间是固定的,可以将他们存在较小的内存中-栈中,这样便于迅速查询变量的值

*引用类型:存在堆中,栈中存储的变量,只是用来查找堆中的引用地址。

这是因为:引用值的大小会改变,所以不能把它放在栈中,否则会降低变量查寻的速度。相反,放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的,所以把它存储在栈中对变量性能无任何负面影响

2、不同的内存分配带来不同的访问机制

在javascript中是不允许直接访问保存在堆内存中的对象的,所以在访问一个对象时,首先得到的是这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值,这就是传说中的按引用访问。而原始类型的值则是可以直接访问到的。

3、复制变量时的不同

1)原始值:在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的,他们只是拥有相同的value而已。

2)引用值:在将一个保存着对象内存地址的变量复制给另一个变量时,会把这个内存地址赋值给新变量,也就是说这两个变量都指向了堆内存中的同一个对象,他们中任何一个作出的改变都会反映在另一个身上。(这里要理解的一点就是,复制对象时并不会在堆内存中新生成一个一模一样的对象,只是多了一个保存指向这个对象指针的变量罢了)。多了一个指针
浅拷贝:

深拷贝:

4、参数传递的不同(把实参复制给形参的过程

首先我们应该明确一点:ECMAScript中所有函数的参数都是按值来传递的。

但是为什么涉及到原始类型与引用类型的值时仍然有区别呢?还不就是因为内存分配时的差别。

1)原始值:只是把变量里的值传递给参数,之后参数和这个变量互不影响。

2)引用值:对象变量它里面的值是这个对象在堆内存中的内存地址,这一点你要时刻铭记在心!

因此它传递的值也就是这个内存地址,这也就是为什么函数内部对这个参数的修改会体现在外部的原因了,因为它们都指向同一个对象。

4、检测类型

  • 法一:typeof

最基本的判断方式,该操作符返回一个表示数据类型的字符串,numberstringbooleanobjectfunctionundefinedsymbol

  1. ‘undefined’ --未定义的变量或值

  2. ‘boolean’ --布尔类型的变量或值

  3. ‘string’ --字符串类型的变量或值

  4. ‘number’ --数字类型的变量或值

  5. ‘object’ --对象类型的变量或值,或者null(这个是js历史遗留问题,将null作为object类型处理)

  6. ‘function’ --函数类型的变量或值

     console.log(typeof a);    //'undefined'console.log(typeof(true));  //'boolean'console.log(typeof '123');  //'string'console.log(typeof 123);   //'number'console.log(typeof NaN);   //'number'console.log(typeof null);  //'object'    var obj = new String();console.log(typeof(obj));    //'object'var  fn = function(){};console.log(typeof(fn));  //'function'console.log(typeof(class c{}));  //'function'
  • 法二:instanceof

运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
语法:object instanceof constructor
(1)基础类型

let num = 1
num instanceof Number // falsenum = new Number(1)
num instanceof Number // true

这两个都是一样的数值,为什么不一样?
因为instanceof 检测的是:检测目标的__proto__与构造函数prototype,相同返回true,不同返回false,对于stringboolean是一样的
注意:

new String(1) // String {"1"}
String(1) // "1"

(2) 继承关系的用法

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例function Aoo(){}function Foo(){}Foo.prototype = new Aoo();//JavaScript 原型继承var foo = new Foo();console.log(foo instanceof Foo)//trueconsole.log(foo instanceof Aoo)//true

(3) 复杂类型

let arr = []
arr instanceof Array // true
arr instanceof Object // true
Array.isArray(arr) // true

注意:
(new Number(1)) instanceof Object // true
(4) 其他类型

let reg = new RegExp(//)
reg instanceof RegExp // true
reg instanceof Object // truelet date = new Date()
date instanceof Date // true
date instanceof Object // true

但是Fuction不一样

function A() {}
let a = new A()
a instanceof Function // false
a instanceof Object // true
A instanceof Function // true

–>分析a为什么不是?

  • a是new出来,所以是经过构造,因此已经是对象,不再是函数,所以false。
  • a是经过构造的对象,返回ture没问题。
  • 如上所述,A是个函数,因此没什么概念上的问题。但是要知道A.__proto__Function.prototypeƒ () { [native code] },这是与object以后处于原型链上层的存在,而且与object平级:
let obj = {}
obj.__proto__ // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
obj.__proto__.prototype // undefinedlet A = function() {}
A.__proto__ // ƒ () { [native code] }
A.__proto__.prototype // undefined

本章内容图谱:

js数据类型(基本数据类型 | 引用数据类型)相关推荐

  1. JS中的原始数据类型(基础数据类型)和 引用数据类型

    文章目录 一.js的数据类型划分方式为 原始数据类型(基础数据类型)和 引用数据类型 二.两种类型的区别 1.存储位置不同 2.传值方式不同 3.两种数据类型在实参和形参中的区别 一.js的数据类型划 ...

  2. Java基础-1 基础数据类型及常用引用数据类型

    Java基础-1 数据类型及常用引用数据类型 基本数据类型 java四类八种基本数据类型: 基本数据类型 占用字节 默认值 包装类 表数范围 byte字节型 1 0 Byte -128~127 sho ...

  3. 基本数据类型参数传递 与 引用数据类型参数传递区别

    2019独角兽企业重金招聘Python工程师标准>>> 1.Java中的方法可以传递参数,参数的传递方法就是值传递. 2.参数有形参和实参,定义方法时写的参数叫形参,真正调用方法时, ...

  4. JAVA八种基本数据类型+三种引用数据类型

    一.Java八种基本数据类型 在程序设计中经常用到一系列类型,把它们存储在堆栈中,加快程序的运行效率,它们就是基本数据类型.Java提供了8中基本数据类型,分别是:boolean.char.byte. ...

  5. Java数据类型(八种基本数据类型 + 四种引用数据类型)

    1.位(bit): 又名 比特位,表示二进制位,是计算中内部数据储存的最小单位.一个二进制位只能表示0和1两种状态. 2.字节(byte): 是计算机中处理数据的基本单位.一个字节等于八位(1Byte ...

  6. JavaScript的数据类型、null 和undefined、原始数据类型和引用数据类型等JavaScript基础知识总结

    一.JavaScript里有哪些数据类型,解释清楚null 和undefined,解释清楚原始数据类型和引用数据类型.比如讲一下1 和Number(1)的区别 数据类型: undefined,没有定义 ...

  7. java 引用数据类型Scanner类 Random类

    Scanner类是属于引用数据类型 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固定的步骤或格式. 基本数据类型定义:数据类型  变量名  =  值;            引用 ...

  8. 引用数据类型的类型转换

    引用数据类型的类型转换 引用数据类型也能够做类型转换,条件是: 引用数据类型的转换是有条件,不能够随便转 转换的条件是:只能够在有继承关系的类型间进行 正因为只能沿着继承树进行转换,才有向上转型和向下 ...

  9. 【JavaScript】关于基本数据类型和引用数据类型

    基本数据类型 JavaScript的基本数据类型有: String-字符串类型 Number-整形-----NaN也属于数值型 Boolean-布尔类型 null undefined-undefine ...

  10. Java中的基本数据类型和引用数据类型

    一.数据类型 Java中的数据类型分为两大类,基本数据类型和引用数据类型. 1.基本数据类型 基本数据类型只有8种,可按照如下分类 ①整数类型:long.int.short.byte ②浮点类型:fl ...

最新文章

  1. 一篇文章学懂Shell脚本
  2. 织梦(dedecms)当前位置{dede:field name='position' /}修改
  3. MVC中使用 事物
  4. MHT格式文件更换默认图标及打开后显示乱码的问题
  5. Python机器学习:KNN算法02scikit-learn中的机器学习算法封装
  6. C++ 连接Mongo数据库实现增删改差
  7. POJ3274 Gold Balanced Lineup【Hash函数】
  8. JavaScript alert延迟弹出
  9. 用户账户、共享和NTFS权限
  10. Linux(Ubuntu)菜单栏(工具栏)隐藏了,怎么显示出来
  11. 二分类图片标签从0-1改为0-255——将图片位深度从1改为8
  12. 实战项目 — 爬取中国票房网年度电影信息并保存在csv
  13. 安卓开发:记事本App
  14. unity 之 Particle 二
  15. 计算机英语凤凰职教,凤凰职教英语第册Unit1.doc
  16. 一个0中间一斜杠_斜杠青年喜欢的“网红台灯”:会唱歌,能无线充电,抖音获赞16W+...
  17. 【PS】证件照转换背景色
  18. oracle 数据库如何建立索引 如何用索引?
  19. 家庭和办公路由器被劫持以发动 DDoS 攻击
  20. 数组越界及其避免方法,C语言数组越界详解

热门文章

  1. vue路由传参和取参,四种方法,包会
  2. CPU 和 CPU Core 有啥区别?多核 CPU?多个 CPU?单核 CPU 为何也支持多线程呢?
  3. vmware安装ubuntu12.04嵌套安装xen server(实现嵌套虚拟化) - skyme
  4. 【TFS-CLUB社区 第6期赠书活动】〖uni-app跨平台开发与应用从入门到实践〗等你来拿,参与评论,即可有机获得
  5. 用python画卡通人物柒_追忆童年,教你用Python画出儿时卡通人物
  6. SMARTFORMS换行
  7. 优测云服务平台总结兼容性测试的分类与权衡
  8. Java-随机数的取值范围公式
  9. vue ie(兼容模式) 判断是否是在ie浏览器
  10. 快速理解什么是面向对象编程