js数据类型

一、js数据类型

string、number、Boolean、Array、object、Null、Undefined

1. js拥有动态类型

 相同的变量可以用作不同的类型

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

2. 数据类型

  • string 存储字符,可用单引号或双引号
  • number 可带小数点或不带(支持科学记数法)
  • Boolean true  或   false
  • array
//先创建再赋值
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

//创建的同时赋值
var cars=new Array("Audi","BMW","Volvo");

//直接赋值
var cars=["Audi","BMW","Volvo"];
  • object 由花括号分隔,括号内部,对象的属性以名称和键值对的形式定义,属性用逗号分隔 //两种寻址方式 name=person.lastname; name=person["lastname"];
var person={
    firstname : "Bill",
    lastname  : "Gates",
    id        :  5566
};
  • undefined 当声明的变量还未被初始化时,变量的默认值为undefined
// 典型用法
var i;
i                     // 变量被声明了,但没有赋值

function f(x){console.log(x)}
f()                  //调用函数时,应该提供的参数没有提供,该参数等undefined

var  o = new Object();
o.p                 // 对象没有赋值的属性,该属性的值为undefined

var x = f();
x                    // 函数没有返回值时,默认返回undefined
  • null 尚未存在的对象
// 典型用法
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。

  undefined 与 null

  null即是一个不存在的对象的占位符

  ECMAScript认为undefined是从null派生出来的,所以把它们定义为相等的。

  区分: 

concole.log(null === undefined);     //   false 
concole.log(typeof null == typeof undefined); //  false

二、 js数据类型转换

 1. 转换函数

  • 转换成字符串(tostring)
// number
var iNum = 10;
alert(iNum.toString());    //输出 "10"
//Boolean
var bool = false;
alert(bool .toString());    //输出 "false"
//基模式
var iNum = 10;
alert(iNum.toString(2));    //输出 "1010"
alert(iNum.toString(8));    //输出 "12"
alert(iNum.toString(16));    //输出 "A"
  • 转换成数字 parseInt()   parseFloat()
/*parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。*/
/*但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。*/
var iNum1 = parseInt("12345red");          //返回 12345
var iNum1 = parseInt("0xA");               //返回 10
var iNum1 = parseInt("56.9");              //返回 56  小数点是无效字符
var iNum1 = parseInt("red");               //返回 NaN

// parseFloat() 方法与 parseInt() 方法的处理方式相似
// 但第一个出现的小数点是有效字符
var fNum4 = parseFloat("11.22.33");        //返回 11.22    

2. 强制类型转换

  ECMAScript 中可用的 3 种强制类型转换:Boolean、Number、String

  • Boolean(value) 
// 当要转换的值是至少有一个字符的字符串、非 0 数字或对象时,Boolean() 函数将返回 true
// 如果该值是空字符串、数字 0、undefined 或 null,它将返回 false
var b1 = Boolean("");             //false - 空字符串
var b2 = Boolean("hello");        //true - 非空字符串
  • Number(value)
// Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。
var iNum1 = parseInt("56.9");          //返回 56
var fNum2 = parseFloat("11.22.33");    //返回 11.22
var iNum3 = Number("56.9");            //返回 56.9
var fNum2 = Number("11.22.33");        //返回 NaN
  • String(value)  可把任何值转换成字符串

三、js数据类型判断

1. typeOf

类型

结构

Undefined

"undefined"

Null

"object" (见下方)

布尔值

"boolean"

数值

"number"

字符串

"string"

Symbol (ECMAScript 6 新增)

"symbol"

宿主对象(JS环境提供的,比如浏览器)

Implementation-dependent

函数对象 (implements [[Call]] in ECMA-262 terms)

"function"

任何其他对象

"object"

2. instanceof (判断已知对象类型)

  instance:实例,例子,所以instanceof 用于判断一个变量是否某个对象的实例,是一个三目运算式

  instanceof 运算符用于识别正在处理的对象的类型,要求开发者明确地确认对象为某特定类型在使用

instanceof检测变量类型时,我们是检测不到number, 'string', bool, null, undefined  的类型的

var a = [],
    b = new Date(),
    d = {},
    e = null;
function c(name){
    this.name = name;
}
alert(b instanceof Date)  ----------------> true
alert(c instanceof Function) -------------> true
alert(c instanceof function) -------------> false

console.log(a instanceof Array) ----------> true
console.log(a instanceof Object)----------> true
console.log(c instanceof Array)-----------> false

console.log(e instanceof Object)----------> false
console.log(1 instanceof Number)----------> false



// 注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
  • 因为数组本身也是一个对象
  • 正常对象用instanceof 可以和数组区分
  • null 虽然是个特殊的对象,但并不继承自object

3. 结合 typeof 与 instanceof

function type(item) {
    if (arguments.length != 1) {
        throw new Error('must give one argument!')
    }

    var itemTp = typeof(item)

    // if null
    if (!item) {
        return itemTp === 'undefined' ? 'undefined' : 'null'
    }

    return itemTp !== 'object' ? itemTp : (item instanceof Array) ? 'array' : (item instanceof  'object')
    
}

4. constructor(根据对象的constructor判断)

  W3C定义:constructor 属性返回对创建此对象的数组函数的引用(返回对象对应的构造函数)

  constructor本来是原型对象上的属性,指向构造函数。但是根据实例对象寻找属性的顺序,若实例对象上没有实例属性或方法时,就去原型链上寻找,因此,实例对象也是能使用constructor属性的

var a = new Array();
console.log(a instanceof Array) // a是否Array的实例  true
console.log(a.constructor == Array)  //  a实例所对应的构造函数是否为Array  true

//example
function Dog(name){
    this.name=name;
}

var Dollar=new Dog("Dollar");
console.log(Dollar.constructor); //输出function Dog(name){this.name=name;}

function Dog(){
 
}
var Tim = new Dog();
 
console.log(Tom.constructor === Dog);//true

// constructor属性是可以被修改的,会导致检测出的结果不正确
function Dog(){
 
}
function Cat(){
 
}
Cat.prototype = new Dog();
var m= new Cat();
console.log(m.constructor==Cat); // false
console.log(John.constructor==Person); // true
// instanceof 对于直接或间接引用都是true
console.log(m instanceof Cat); // true
console.log(John instanceof Person); // true

5. Object.prototype.toString.call 

function a() { };
 
var toString = Object.prototype.toString;
console.log(toString.call(new Date) === '[object Date]');   //true
console.log(toString.call(new String) ==='[object String]');//true
console.log(toString.call(a) ==='[object Function]');       //true

6. $.type()(万能判断)

jQuery.type( undefined ) === "undefined"          // true
jQuery.type() === "undefined"                     // true
jQuery.type( null ) === "null"                    // true
jQuery.type( true ) === "boolean"                 // true

7. 判断是否为数组

数组不是基础类型

typeof [] === 'object' // true

要判断一个变量是否为数组,需要用 Array.isArray( var )

如有建议或补充,欢迎留言交流~

参考:

http://www.jb51.net/article/73566.htm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高效开发之SASS篇

    作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~

    超然
  • ECMAScript 6 笔记(一)

           1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国...

    超然
  • BAT 前端开发面经 —— 吐血总结

    最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下 一是备忘、总结提升,二是希望给大家一些参考 其他面试及基础相关可以...

    超然
  • [解决方案] spring-mvc 400错误解决办法

    简单看一下上面代码觉得似乎没有什么不对的地方,但是启动之后访问 /item/param 就会报 400 错误

    星尘的一个朋友
  • Android使用WebView实现全屏切换播放网页视频功能

      原理:实现全屏的时候把webview里的视频放到一个View(布局里的video_view控件)里面,然后把webview隐藏掉!这样就实现了全屏播放的!

    砸漏
  • Java 字符流文件读写

    Single
  • Basic wechat mini program 基础微信小程序

    vanguard
  • Java消息系统简单设计与实现

    我的毕设是一个博客系统,类似于简书这样的,所以消息系统也类似,在用户的消息里包含了有:喜欢和赞、评论、关注、私信这样的一类东西,这样的一个系统应该包含以下的功能...

    我没有三颗心脏
  • 聊聊项目打包发布到maven私仓常见的几种方式

    在早期没有使用maven之前,我们引用一些公有jar或者api jar,我们可能会采用这样的方式,通过手动导入这些jar到项目的classpath路径进行引用。

    lyb-geek
  • H.265在花椒直播中的应用与优化

    https://www2.tutormeetplus.com/v2/render/playback?mode=playback&token=b605af2653...

    LiveVideoStack

扫码关注云+社区

领取腾讯云代金券