JS数据类型详解【1.2万+】

目录

1.JS中的数据类型

2.undefined类型: 

1.定义:

2.什么情况下会出现undefined:

1.已经声明但未初始化的变量

2.未声明使用typeof操作符返回数据类型

3.函数未指定返回值时

4.使用viod操作任何值返回的都是undefined

3.扩展:

1.Undefined与null的不同

2.undefined不可删,不可重现定义,不可枚举 

3.undefined不是JavaScript的关键字和保留字

4.undefined是一个假值

3.null类型

1.定义:

2.作用:

3.null也是一个假值

4.Boolean类型

1.定义:

2.注意:

1.布尔值字面量区分大小写

2.布尔字面值不允许加引号

3.Boolean()函数

5.Number类型

1.定义:

2.三种字面值

3.整数:

1.十进制整数

2.八进制整数

3.十六进制整数

4.浮点数

1.规则:

2.科学计数法:

3.浮点数精度最高可达17位小数

5.NaN (非数值类型)

1.特点

2.isNaN()函数

6.number类型的数值范围

1.范围

2.无穷值(Infinity和-Infinity)

3.isFinite()函数

7.数值转化

1.Number()函数

2.parseInt(string,radix)取整(解析二、八、十、十六进制值)

3.parseFloat(string)浮点数(只解析十进制值)

6.String类型 

1.创建String:

2.toString()方法 :

 3.String()函数

4.扩展 

1.字符字面量

2.模板字面量

3.字符串插值

4.模板字面量标签函数

5.原始字符串

7.Object类型

1.创建方法 

1.new操作符

2.使用对象字面量

3.基于上面两种方法的不同表现(了解能看懂别人代码即可)

2.Object实例共有属性和方法

3.注意:


1.JS中的数据类型

简介:JS中有六种简单的数据类型(原始类型):UndefinedNullBooleanNumberStringSymbol(符号),Symbol是JS中新增的类型。还有一种复杂数据类型Object(对象)。

34ddd569d71447f48bba6911d2571e29.png

typeof操作符:检测数据类型。(typeof是一个操作符,并非函数)

var a=100;
console.log(typeof a)  //number
console.log(typeof 'cat')  //string

2.undefined类型: 

1.定义:

undefined是一个原始值数据,我的理解是,当一个声明了但是未初始化的变量会默认赋值为undefined,且只有undefined唯一值。

let a;
console.log(a) //undefined

但是不同于字符串“undefined”

let a=undefined;  //不建议为变量赋值undefined
let b='undefined'
console.log(a)//undefined
console.log(b)//'undefined'
if(a==b){
console.log('相等')
}else{
console.log('不相等') //结果为不相等
}
console.log(typeof b)//String

2.什么情况下会出现undefined:

1.已经声明但未初始化的变量

let a;
console.log(a)//undefined

2.未声明使用typeof操作符返回数据类型

console.log(typeof age)//undefined

console.log(age) //!报错

这里需要注意的是直接调用未声明的变量会报错.

3.函数未指定返回值时

function abc(){
    var a=100
    //如果这里加上return a,那么返回的是100
}
console.log(abc()) //undefined

4.使用viod操作任何值返回的都是undefined

     console.log(void(122));//undefined
     console.log(void('猫'));//undefined
     console.log(void(0));//undefined

3.扩展:

1.Undefined与null的不同

在ECMA-262第三版之前是不存在的,Undefined类型派生于Null类型,增加这个特殊值的目的在于明确未初始化变量与null的区别(关于JS中的操作符,后面内容会做详细介绍)

let a;
let b=null;
//这里判断a与b是否相等,表示只判断他们的值是否相等
if(a==b){
    console.log("相等");//结果为相等
}else{
    console.log('不相等')
}
//这里判断a与b是否全等,不仅判断它们的值,还要判断他们的类型
if(a===b){
    console.log("相等");
}else{
    console.log('不相等')
}

2.undefined不可删,不可重现定义,不可枚举 

(1)undefined不可删除

以下操作虽然使用delete操作想将undefined删除,但是达不到效果,使用delete操作后,再次输出undefined依然可行

       delete window.undefined;
       console.log(undefined);//undefined

(2)undefined不可重新定义

以下操作会报错

       Object.defineProperty(window,'undefined',{
            enumerable:true,
            writable:true,
            configurable:true
        });

(3)undefined不可枚举

既然undefined是全局对象window中的一个属性,那么是否可以通过循环遍历的方式将undefined从window对象中遍历出来呢?结果很遗憾,不可以。

      for(k in window){
           if(k===undefined){
               console.log(key)//不会输出内容
           }
       }

3.undefined不是JavaScript的关键字和保留字

在全局作用域中,undefined不可以重新赋值。即使重新赋值了,但是无效,在全局中输出的依然是undefined。

window.undefined=1;
console.log(window.undefined)//undefined

但是在局部作用域中,可以将undefined作为变量名重新赋值,但是不建议这么做。

 function abc(){
      let undefined=123;
      console.log(undefined)//123
        }
    abc()

4.undefined是一个假值

let cat;
if(cat){
    console.log('undefined是一个真值')
}else{
    console.log('undefined是一个假值') //结果为undefined是一个假值
}

if(cat){
    //这个代码块不会执行
}

if(!cat){
    //这个代码块会执行

3.null类型

1.定义:

null类型只有一个值,即特殊值null。表示一个空对象指针,这也是给typeof传入一个null返回object的原因。

let cat=null;
console.log(typeof cat);//object

2.作用:

定义将来变量时保存的值。这样只要检查这个变量的值是不是null就可以知道这个变量是否在后来被重新赋予了一个对象的引用。

if(cat !=null){
    //cat是一个对象的引用
}

3.null也是一个假值

let cat=null;
if(cat){
  console.log('null是一个真值')
}else{
  console.log('null是一个假值')//结果为null是一个假值
}
if(cat){
//这个代码段不会执行
}
if(!cat){
//这个代码段会执行
}

4.Boolean类型

1.定义:

boolean 布尔类型 只有真和假两个值,布尔值与number值可以互相转换。true 为 1,false 为 0

2.注意:

1.布尔值字面量区分大小写

let boolean1=true;
let boolean2=True; //!报错,同时也不符合语法规范
console.log(typeof boolean1);//boolean
console.log(typeof boolean2);

2.布尔字面值不允许加引号

let boolean1=true;
let boolean2='true';
console.log(typeof boolean1);//boolean
console.log(typeof boolean2);//string

3.Boolean()函数

虽然布尔值只有两个,但是其他类型的值也有相应的布尔值的等价形式,要将一个其它类型的值转会为布尔值,只需要调用Boolean()函数即可

let str='欢迎新同学';
let boolean1=Boolean(str);
console.log(boolean1)//true
不同类型等价的布尔值
数据类型转换为true的值转换为false的值
Booleantruefalse
String非空字符串" " 空字符串
Number非零数值(包括无穷值)0、NaN
Object任意对象null
Undefined不存在undefined

理解以上转化非常重要,因为像if等流控制语句会自动执行其它类型的值到布尔值转换

let str='欢迎新同学';
if(str){
console.log('Value is true');//Value is true'
}

5.Number类型

1.定义:

就是数值类型,表示整数和浮点数

2.三种字面值

分别是整数、浮点数、NaN,下面我们来详细的介绍一下。

3.整数:

1.十进制整数

let num1=100;//十进制整数100

2.八进制整数

规则:

(1)第一个数字必须是0,然后是相应的八进制数值(0-7),如果字面中包含的数值超出了八进制范围,就会忽略前缀0,解析为十进制整数。

let num1=100;//十进制100
let num2=070;//八进制的56
let num3=079;//9超过了八进制范围,解析为十进制79
let num4=08;//无效八进制值,忽略前缀,解析为十进制8

(2)八进制字面量在严格模式下是无效的,前缀0会被视为语法错误。

"use strict"//严格模式
let num1=079;//!报错

3.十六进制整数

规则:

必须加上前缀0x,然后就是十六进制数值(0-9以及A-F),书上说的是前缀区分大小写,但是经过本人实测,这里的前缀与数值字母大小写均可。

let num1=0xA;//十六进制10
let num2=0x1f;//十六进制31

其实无论是八进制还是十六进制,在所有数学操作中都会被转换为十进制,根据个人需要选择

4.浮点数

1.规则:

要定义浮点数,数值中必须包含小数点,且小数点后至少有一位非零数字。

let num1=1.1;//浮点数1.1
let num2=1.0;//无效浮点数,解析为整数1
let num3=10. //无效浮点数,解析为整数10
let num4= .1 //有效,但不推荐使用,解析为浮点数0.1

2.科学计数法:

表示一个应该乘以10的给的次幂的数值,用于对非常大或非常小的数值

let num1=31400000;
let num2=3.14e7;  //表示3.14*10的7次方
if(num1==num2){
    console.log('相等') //输出相等
}

let num3=0.00003;
let num4=3e-5;  //表示3.14*10的-5次方
if(num3==num4){
    console.log('相等') //输出相等
}

3.浮点数精度最高可达17位小数

这里需要注意的是,浮点数存在舍入错误,在算术技术上浮点数远不如整数,导致很难测试特定的浮点值,比如下面的例子

let num1=0.1;
let num2=0.2;
console.log(num1+num2)//你以为是0.3
                      //其实是0.30000000000000004

5.NaN (非数值类型)

1.特点

(1)任何涉及到NaN的操作都会返回NaN,0、+0、-0相除会返回NaN

(2)NaN不等于任何值,包括它本身

let num1=NaN;
console.log(num1/1);//任何涉及到NaN的操作都会返回NaN
console.log(0/0);//NaN
console.log(-0/+0);//NaN
if(num1==num1){
    console.log('相等');
}else{
    console.log('不相等')//输出不相等
}

(3)一般来说,当我们用Number()函数将表达式强制转换为数值时,如果转换失败,就会 返回NaN

console.log(Number('你好'/10));//NaN
console.log(Number(0/0))  //NaN
console.log(Number(+0/-0)) //NaN

2.isNaN()函数

作用:只允许传入一个参数,该函数会先尝试参数是否可以转换为数值,再判断参数是否不是数值

 规则:传入参数是数值返回false,不是数值返回true(这里我们可以理解为能转换为数值返回假,不能转换为数值则返回真)

        注意:          

  • 空字符串、空数组、布尔值、null会转成数值,所以isNaN函数返回false
  • 空对象、函数、undefined不能转换成数值,返回true
console.log(isNaN(NaN));//true
console.log(isNaN(10));//false
console.log(isNaN('10'));//false
console.log(isNaN('blue'));//true
console.log(isNaN(true));//false

6.number类型的数值范围

1.范围

 最大值:Number.MAX_VALUE   大多数浏览器返回的是1.7976931348623157e+308

 最小值:Number.MIN_VALUE    大多数浏览器返回的是5e-324

let num3=Number.MAX_VALUE;//最大值
let num4=Number.MIN_VALUE;//最小值

2.无穷值(Infinity和-Infinity)

         无穷小:Number.NEGATIVE_INFINITY

         无穷大:Number.POSITIVE_INFINITY

let num=Number.NEGATIVE_INFINITY;//无穷小
let num2=Number.POSITIVE_INFINITY;//无穷大

当超过这个范围时,那么数值会自动转换为无穷大(Infinity)无穷小(-Infinity),这种值将不能再进一步计算

注意:

(1)最大值+最大值=无穷大,但是最大值+1不等于无穷大,最小值-最小值为0;

(2)如果分子时非零值,分母为+0返回无穷大。分母为-0返回无穷小

let num1=Number.MAX_VALUE;//最大值
let num2=Number.MIN_VALUE;//最小值
console.log(num1+num1);//最大值+最大值=Infinity
console.log(num1+1);//最大值+1不等于无穷大1.7976931348623157e+308
console.log(num2-num2);//最小值-最小值为0
console.log(5/0)//Infinity
console.log(5/-0)//-Infinity

3.isFinite()函数

作用:判断数值有没有超过numbei类型的范围。

 使用方法:超过范围返回false,没有超过范围返回true 

let num1=Number.MAX_VALUE;//最大值
let num2=99999;
console.log(isFinite(num1+num1))//超过范围返回false
console.log(isFinite(num2)) //没有超过范围返回true

7.数值转化

有三个函数可以将非数值转换为数值:Number(),parseInt()和parseFloat(),下面我们来详细介绍一下。

1.Number()函数

转换成功返回数值,转换失败返回NaN

 规则如下:

  • 如果是布尔值,truefalse会被转换为10
  • 如果是数字,只是简单的传入和返回。
  • 如果是null值,返回0
  • 如果是undefined,返回NaN
  • 如果是字符串:  

(1)字符串中只包含数字(包括前面带正/负号的情况),则将其转换为十进制数值,数字前面有0的会被忽略(不管前面有几个0,全部忽略),例如"010"会转换成10。
(2)字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值。
(3)字符串中包含有效的十六进制格式(一般用数字0到9和字母A到F(或a~f)表示,其中:A~F表示10~15,这些称作十六进制数字),如"0xf",将其转换成相同大小的十进制整数值。
(4)字符串为空,转换成0。
(5)字符串中包含除了以上格式之外的字符,则转换为NaN,如字符串中既有数字又有字母的情况。


// 规则一
Number("1") // 1
Number("123") // 123
Number("010") // 10 (前导的0会被忽略)
Number("-10") // -10

// 规则2
Number("1.1") // 1.1
Number("0.1") // 0.1
Number("0000.1") // 0.1 (前导的0会被忽略)

// 规则3
Number(0xf) // 15

// 规则4
Number("") // 0
Number(" ") // 0
Number('') // 0

// 规则5
Number("Hello Wolrd") // NaN
Number("0ff6600") // NaN
Number("ff6600") // NaN
Number("0.1a") // NaN
Number("10a") // NaN
Number("a10.1") // NaN

var goodsList = {
    'pop':
}

var arr = [1,2,3,4]
Number(arr)

2.parseInt(string,radix)取整(解析二、八、十、十六进制值)

作用:将一个字符串转换成x进制的整数。

(1)不传入第二个时:只传入的第一个参数为字符串

规则:如果第一个字符不是数值字符、+、-立即返回NaN,所以空字符串会返回NaN,这点和Number不一样,然后再依次检测每个字符,直到字符串末尾或碰到非字符数值 

如果字符串中以0x开头且后跟数字字符,就会将其当做一个十六进制整数。

如果字符串以"0"开头且后跟数字字符,则会被当做一个八进制数来解析。

parseInt('123red');//123
parseInt('')//NaN
parseInt(22.5)//22
parseInt(0xa)//十六进制10
parseInt(015)//八进制13

(2)传入第二个参数时:第二个参数为整数,默认为10

表示传入的参数是xx进制的数值,那么将按这个进制的规则将数值转换为对应的十进制3.

console.log(parseInt('10',2));//10一个二进制数,转换为十进制后为2
console.log(parseInt('10',8));//10一个八进制数,转换为十进制后为8
console.log(parseInt('10',10));//10一个八进制数,转换为十进制后为10
console.log(parseInt('10',16));//10一个八进制数,转换为十进制后为16

3.parseFloat(string)浮点数(只解析十进制值)

作用:取浮点数

规则:如果第一个字符不是数值字符、+、-立即返回NaN,然后再依次检测每个字符,直到字符串末尾或碰到一个无效的浮点数值为止

如果字符串表示整数则返回整数。

第二次出现的小数点会无效

始终忽略字符串开头的0


parseFloat("3.14") // 3.14
parseFloat("-3.14") //-3.14
parseFloat("+3.14") //3.14
parseFloat("0003.14") // 3.14
parseFloat(" 3.14 ") // 3.14
parseFloat("3.14abc") // 3.14
parseFloat("3.14.5678") // 3.14
parseFloat("abc3.14") // NaN
parseFloat("abc123") // NaN
parseFloat("123abc") // 123


6.String类型 

1.创建String:

let str='hello';
console.log(typeof str);//String

2.toString()方法 :

作用:强制转换为字符串类型,可用于数值,布尔值,对象,字符串。null和undefined没有toString()方法

let num1=110;
let str1=num1.toString();//"110"
let boolean1=true;
let str2=boolean1.toString();//"true"
console.log(typeof str1);//string
console.log(typeof str2);//string


let a=null;
lei b;
console.log(a.toString())//报错
console.log(b.toString())//报错

注意:对数值调用toString()方法时候可以传入一个参数

let num=10;
console.log(num.toString());//"10"
console.log(num.toString(2));//"1010"
console.log(num.toString(8));//"12"
console.log(num.toString(10));//"10"
console.log(num.toString(16));//"a"

 3.String()函数

规则:1.如果值有toString()方法,则返回对应的字符串

           2.如果值时null和undefined,则返回null和undefined

4.扩展 

1.字符字面量

字符串数据类型包含一些字符字面量,用于表示非打印字符或有其他用途的字符

字符字面量
字面量含义
\n换行
\t制表
\b退格
\r回车
\f换页
\\反斜杠(\)
\'单引号(')
\"双引号(")
\`反引号(`)
\xnn以十六进制编码nn表示字符,例如 \x41=A
\unnn以十六进制编码nnnn表示Unicode字符,例如 \u03a3等于一个希腊字符

 转义序列表示一个字符,所以只算一个字符长度

length属性:返回字符串或数组的长度

let str="this is \u03a3";
console.log(str.length);//9

2.模板字面量

模板字面量保留换行符,可以跨行定义字符串,用于定义模板

 格式:let a=`字符串`;

//使用单引号定义字符串
let a='hello\nChina';
console.log(a);
//hello
//China

//使用模板字面量定义字符串
let b=`hello
China`;
console.log(b);
//hello
//China

判断a、b是否相等
console.log(a===b);//true

使用模板字面量定义一个HTML模板

let a=`<p>
    我爱中国
    <\p>`
    document.write(a)//我爱中国

 模板字面量会保持反引号内的空格,回车、空格占一个字符长度

let str=`    //回车
hello`
let str1=`
 hello`     //在str基础上加了个空格
console.log(str.length)//6
console.log(str1.length)//7

//这个模板字面量第一个字符时\n
let str=`
hello`
console.log(str[0]==='\n');//true

3.字符串插值

模板字面量最常用的一个特性就是字符串插值,也就是可以在一个连续定义中插入一个或多个值,严格意义上来说,模板字面量不是字符串,而是一种特殊的JavaScript表达式,只是返回的时字符串

 格式:使用${}在模板字面量中插入值。任何插入的值都会使用toString()强制转换成字符串,undefined与null也不例外

    let d=10;
    let e;
    let f=null;
    let a=`${d} to a`
    console.log(a) //10 to a
    let b=`${e} to a`//undefined to a
    let b=`${f} to a`//null to a  

模板还可以插入自己之前的值

let a='';
function abc(){
  a=`${a}123`;
console.log(a);
}
abc();// 123

4.模板字面量标签函数

!正在整理

5.原始字符串

像Unicode字符,我么可以通过String.raw标签函数来查看字符串最原始的内容,而不是转移过后的内容

 定义有点拗口,我们通过一个简单的程序代码来看

let a=`\u00a9`;
console.log(a)//转换后表示©版权符号
console.log(String.raw`\u00a9`) //\u00a9

7.Object类型

ECMAScript中的对象其实就是一组数据和功能的集合 

1.创建方法 

1.new操作符

创建Object类型的实例并为其添加属性和方法,就可以创建自定义对象,如下所示

var o = new Object();
o.name = "Alvin"; //添加属性
console.log(o);//{name: 'Alvin'}
//添加方法
o.sayHello = function(){
    console.log("hello "+ this.name);
}

2.使用对象字面量

var person = {
    name: "Alvin", //添加name属性
    //添加sayHello方法
    sayHello:function(){
        console.log("Hello "+ this.name)
    }
}

推荐使用对象字面量方法 

3.基于上面两种方法的不同表现(了解能看懂别人代码即可)

//1.使用字面量创建一个只要默认属性和方法的对象
        let bj3={};
        bj3.name='wy';
        bj3.age=12;


//2.
        let jb4=new Object({
            name:'wy',
            age:12
        })

2.Object实例共有属性和方法

let o=new Object()
  • Costructor:保存着用于创建对象的函数
  • hasOwnProperty(propertyName):用于检查给定的属性在当前的实例对象(不是在实例原型)中是否存在。其中作为参数的属性名(propertName)必须以字符串形式指定,例如:o.hasOwnProperty("name")
  • isPropertyOf(object):用于检查传入的对象是否是另一个对象的原型
  • propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。与hasOwnProperty()方法一样,作为参数的属性名必须以字符串形式指定。
  • toLocalString():返回对象的字符串表示形式,该字符串与执行环境的地区对应。
  • toString():返回对象的字符串表示形式。
  • valueOf():返回对象的字符串、数值或布尔值表示,通常与toString()方法的返回值相同。

3.注意:

1.object类型的属性与属性值可以是字符串或数字,比如下面

        let bj={
            'name':'wy',
            '5':0
        }
//object里面的属性默认为string类型,所以上面的代码与下面相同

       let bj={
          name:'wy',
          5:0
       }

2.如果object属性的名称中存在违规数字【因为属性名默认为string类型,所以可以存在违规字符】,可以用[]访问属性值,比如下面 

        let bj={
          "user name":'wy',
        }
        console.log(bj['user name'])//wy
        console.log(bj.user name)//报错,因为这样不符合JS的语法规范,属性名存在空格
                                  
     注意:如果属性名称需要加违规字符,必须加引号声明

Symbol类型是ES6新定义的类型,我们暂时先不了解,(TT偷个懒)后续介绍!

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值