JavaScript中数据类型的种类以及转换

JavaScript的数据类型

1. 基本数据类型-值类型
  • String字符串 "abcd" '你好,世界'
  • Number数字 10进制,2进制、8进制、16进制
  • boolean值: true false
  • null 空指针 obj = {}; obj = null;
  • undefined 未定义值,定义变量,未赋初值
2. 复合数据类型-引用类型
  • 对象Object (内置对象、自定义对象)
3. 区别

基本数据类型 只能存储单个数据
复合数据类型 可以存储多个相关联的数据

4. 数据类型转换
  • 字符串 -> 数字
    • Number( str )
    • str - 0 | str * 1 | +str
    • parseInt | parseFloat
    • new Number( str )
    • 2 > 3 > 1 > 4
  • 数字 -> 字符串
    • String( num )
    • num + ''
    • num.toString()
    • new String( num )
    • 2 > 3 > 1 > 4
  • 其他 -> boolean值
    • 非0数字 -> true
    • 非空字符串 -> true
    • null和undefined -> false
    • 对象 -> true
    • 转换方式:!![variable]
  • 隐式的基本数据类型和其包装类型之间的转换

获取数据类型的方式

  1. 方式
  • typeof : 准确的获取字符串、数字、bool值的类型
  • instanceof: 判断某个对象是否为 指定的构造函数的实例

值类型与引用类型

  1. 值类型包含:数字 字符串 boolean值

  2. 引用类型包含:对象

  3. 在做参数传递,即给函数传参,或者给其他变量赋值,值类型 是 赋值变量的值本身,将拷贝后的值,赋值给其他变量;
    而引用类型,是将变量存储对象的指针拷贝给其他变量,此时两个变量指向同一个对象。

内置对象的常用方法

  1. 字符串

检索:indexOf、match、search
替换:replace、splice
截取:substr、substring、slice
切割:split

  1. 数组

添加:push、unshift
删除:pop、shift、splice
截取:slice
合并:concat
拼接:join
ES5:indexOf、forEach、map...

  1. Math对象
    Math常见属性
    π: Math.PI
    开平方:Math.sqrt
    正弦: Math.sin
    余弦: Math.cos

  2. 日期Date对象

  • getHours
  • getMinutes()
  • getSeconds()
  • getMilliseconds()
  • getDay()
  • getFullyear()
  • getMonth() 0-11
  • getDate() 1-31
  • setMilliseconds()
  1. 其他

DOM相关属性和方法

  1. 相关属性
  • innerHTML
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling
  • parentNode
  • childNodes
  • nodeName
  • nodeType 12种
    • 1 元素节点
    • 2 属性节点
    • 3 文本节点
    • 8 注释
    • 9 文档document
    • 11 文档片段documentFragment
  • nodeValue
  1. 方法

插入节点:
parentNode.appendChild( node );
parentNode.insertBefore( new node, node );

删除节点
parentNode.removeChild( node );

替换
parentNode.replaceChild( new node, old node );

创建节点
document.createElement( 'tagName' ); 创建元素节点
document.createTextNode( 'txt' ) 创建文本节点

查询节点
document.getElementById( 'id' )
document.getElementsByTagName( 'tagName' )
document.getElementsByName( 'name' )

== 和 === 区别

  1. == :先将==两边的操作数统一成一种数据类型,再比较。
    类型转换规则:
    如果运算符两边的操作数,只有一个操作数类型为数字,那么将第二个操作数转换成数字;
    如果运算符两边的操作数,只有一个操作数类型为bool值,那么将其转换成数字;
    如果运算符两边的操作数,只有一个操作数类型为对象,那么将其转换成基本数据类型(优先使用valueOf,失败后在使用toString方法);

  2. ===: 不需要做类型转换,直接比较。

对象的概念

  1. 对象 就是 无序的键值对集合。
    对象:是对现实事物的抽象,从而提取出一些相关属性的集合。用一种结构来存储。那么这种结构 就是 对象

创建对象的方式

  1. 直接量

var arr = []; <==> var obj = new Array();
var obj = {}; <==> var obj = new Object();

  1. 构造函数

function Person () {

}

var p = new Person();

劣势:如果在使用构造函数时,不小心没有配合new操作符,那么就会造成意外的结果
1、 无法创建对象; 2、会造成全局对象的污染;

  1. 工厂函数

将创建对象的过程封装在一个函数内部,再将创建出来的对象,作为该函数的返回值。这种实现创建对象的方式成为工厂模式。

如果在工厂函数内部创建对象时,使用直接量方式,那么对象的类型会被弱化;
相反,如果在意对象的类型,可以在工厂函数内部使用构造函数来创建对象。

  1. 工厂模式 与 构造函数
  • 工厂模式 不管是否 带new 都可以创建对象,并且不会造成全局对象的污染
  • 构造函数创建对象时,必须使用new,而且给对象添加属性,要使用this
  • 工厂模式 在给对象添加属性时,要使用内部创建出来的对象,而不是this

面向对象概念

js不是面向对象语言。学习面向对象思想 是为了模拟其编程思想,实现代码的复用。

  1. 面向过程:要按部就班的书写代码,有些代码的书写顺序不能改变。
  • 缺点:难以维护、难以扩展、代码复用
  1. 面向对象:在实际开发解决一个问题时,首先看是否已存在一个对象可以帮助解决,如果有,就使用该对象解决问题;
    如果没有,就实现一个对象去解决该问题,以后如果在遇到同类问题,就可以找到该对象来解决。

    • 优点:代码复用
  2. 区别
    身份:前者 —> 执行者; 后者 -> 管理者
    实现:前者:亲力亲为,按部就班的实现
    后者:在实现功能时,可以交给其他对象去完成。

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 1,694评论 0 14
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 338评论 0 4
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 616评论 0 6
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 1,020评论 0 5
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 242评论 0 0