JS中常用的数据类型

167 阅读8分钟

JS常用的数据类型

  • 基本数据类型(值类型/原始值)
    • 数字number
    • 字符串string
    • 布尔boolean
    • 空对象指针null
    • 未定义undefined
    • Symbol唯一值
  • 引用数据类型
    • 对象数据类型object
      • {} 普通对象 (object普通对象;大括号包起来里面有多组键值对)
      • [] 数组对象 (中括号包起来)
      • /^[+-]?(\d|([1-9]\d+))(.\d+)?$/ 正则对象
      • Math 数学函数对象
      • 日期对象
      • 函数数据类型 function

常用的输出方式

+ console

    -   console.log()控制台输出日志
    -   console.dir()控制台详细输出
    -   console.table()把数据以表格的形式输出在控制台
    -   console.time / timeEnd() 计算某一个程序消耗的时间
    -   console.warn() 输出警告信息
    -+    window

    -   alert() 提示框(会阻断主线程渲染,‘弹出的内容默认转化为字符串’)
    -   confirm() 确认取消提示框
    -   prompt() 在confirm的基础上加一个原因
+ 向页面指定容器中插入内容
     — document.write  向页面中输入内容
     - innerTTML/innerText  向页面指定容器中输入内容
     - value  向页面表单元素中输入内容
     

number 数据类型

  + 正数、零、负数、小数
  + NaN:not a number 不是一个有效数字,但是属于number类型的(NaN和任何值都不相等(包括自己本身))
  + Infinity:无穷大的值,也是number类型的
  
  想要验证一下n是不是有效数字:isNaN 验证一个值是否为非有效数字 ,如果是有效数字,则返回false,如果不是有效数字,则返回true 
  
  在使用isNaN进行检测的时候,如果检测的值是非数字类型的值,则需要先把其转换为数字类型,然后在进行检测

把其它数据类型转换为数字类型

    + Number([value]) 而isNaN在检测的时候,使用的就是这种方式转换为数字类型的
    + parseInt([value]) 
    + parseFloat([value])
    
 Number是JS内置的转换方法,可以把其它数据类型“强制”转换为数字类型
      * 把字符串转换为数字:一但字符串中出现非有效数字字符,则结果为NaN,只有都是有效数字字符,才能转换为具体的数字,空字符串会转换为0
      * 把布尔转换为数字:true转换为1  false转换为0
      * 把空转换为数字:null转换为0 undefined转换为NaN
      * 不能把Symbol类型转换为数字,否则会报错
      * 对象转换为数字:先把对象转换为字符串,再把字符串转为数字
         > 普通对象
         > 数组对象
         > 其余对象格式基本上都会变为数字NaN
      * 函数转换为数字:结果都是NaN
      
 ```

	 * 1.先把obj转化为字符串 "[object Object]"
	 * 2.把字符串转换为数字 Number("[object Object]") 
	
	// let obj={x:100};
	// console.log(Number(obj)); //=>NaN
            
            /*
	 * 1.先把ARR转换为字符串: "10"
	 * 2.在把"10"转换为数字:10
	 */
	// let arr = ["10"];
	// console.log(Number(arr)); //=>10
	/*
	 * 1.先把ARR转换为字符串: "10,20"
	 * 2.在把"10,20"转换为数字:NaN
	 */
	// arr = ["10", "20"];
	// console.log(Number(arr)); //=>NaN  因为转化中是‘10,20’ 有逗号,逗号不是有效数字
	// console.log(Number([])); //=>  []->''  Number('')->0
	// console.log(Number(['AA'])); //=> ['AA']->'AA'  Number('AA')->NaN
            console.log(Number(Symbol(13))); //报错=>Cannot convert a Symbol value to a number
  ```

parseInt / parseFloat

    也是把其它数据类型转换为number类型的
    处理原理和Number不一样,他们是把字符串转换为数字类型(如果处理的值不是字符串,需要先转换为字符串然后在去转换为number类型的)
     =>从字符串最左边开始查找,把找到的有效数字字符转换为数字,一直遇到一个非有效数字字符为止,则结束查找
     parseFloatparseInt多识别一个小数点
   console.log(Number(true)); //=>1
   console.log(parseInt(true)); //=>先把TRUE转换为字符串"TRUE"  parseInt('true') =>NaN
     // console.log(parseInt(NaN)); //=>NaN
     // console.log(Number(null)); //=>0
     // console.log(parseInt(null)); //=> parseInt('null') =>NaN
     // console.log(isNaN(Number(parseInt("0.8")))); //=>parseInt("0.8")->0   Number(0)->0  isNaN(0)->false

     // console.log(Number('')); //=>0
     // console.log(parseInt('')); //=>NaN
 ```
##### toFixed:
    保留小数点后面N位(最后的结果是一个字符串)
    ES6中提供了一个新的数据类型 BigInt:管理超过安全数值的数字
    // console.log(BigInt(9007199254740992), BigInt(9007199254740993));
     /* 
     // console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991 最大安全数(JS能够有效识别的最大整数)
      * 基本数据类型
      *   number string boolean null undefined symbol  => BigInt新增的基本数据类型
      */
#### string 字符串数据类型
    在JS中用 单引号/双引号/反引号 包起来的都是字符串 
    把其它数据类型转换为字符串类型
      + String([value])
      + [value].toString()
      规则:普通对象转换为字符串都是 "[object Object]",数组对象转换为字符串是 "第一项,第                 二项..."(逗号分隔数组中的每一项)
   + 在JS中常用的数学运算
       数学运算:+ - * / 加减乘除
        %(膜)取余数
        除了加法以外,其余的情况都是数学运算(如果遇到非数字类型,需要基于Number把其强制             转换为数字类型,然后在进行运算的);加号在JS中既有数学运算,也有字符串拼接的意思           (只要加号两边的任意一边出现字符串,则变为字符串拼接);
     ```
     console.log(1 + {}); //=>"1[object Object]"  在把{}转换为数字过程中,先把他转换为字符串"[object Object]",此时右侧出现了字符串,则不再是数学运算,而是字符串拼接了
     console.log(1 + []); //=>'1'
     console.log([10] + true); //=>"10true"  在转换[10]到数字的过程中,先把其转换为字符串"10",此时操作变为字符串拼接(和数学运算没关系了)
     // console.log(100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false);
 /* 
  100 + true => 101
  101 + 21.2 => 122.2
  122.2 + null => 122.2
  122.2 + undefined => NaN 
  NaN + "Tencent" => "NaNTencent"  字符串拼接(以后都是字符串拼接)
  "NaNTencent" + [] => "NaNTencent"
  "NaNTencent" + null => "NaNTencentnull"
  "NaNTencentnull" + 9 => "NaNTencentnull9"
  "NaNTencentnull9" + false => "NaNTencentnull9false"
  */
     ```
#### 如何把其它数据类型转换为布尔类型 
   + Boolean([value])
  *   + ![value] 把指定的值转换为布尔类型后取反
  *   + !![value] 取反再取反,相当于没有取反,只是把它转换为布尔类型值
  * 规则:只有 “0/NaN/null/undefined/空字符串” 最后是false,其余的都是true

/* 条件判断中,每一个条件最后一定是true/false */
    if (1 == 1) {}
    if (1) {
    	//=>写一个值,也是要把这个值转换为布尔,然后校验程序的真假
     }
     if (3 + '3px') {} //=>3 + '3px' =>'33px'  真
     if (3 - '3px') {} //=>3 - '3px' =>NaN   假
     
#### Object 数据类型
       所有的对象都应该具备以下特点:
        + 1.用键值对(key:value 俗称属性名和属性值) 来描述一个对象的特征(每一个对象都是综合体,存在零到多组键值对)
        + 2.{ key:value , ...} 每一组键值对是 key:value 的格式,多组键值对用逗号分隔
        + 3.key不能是引用数据类型的,value可以是任何的数据类型


    关于对象中键值对的增删改查
    let obj = {}
    obj.name = xxx;
    obj[name] = xxx;
    1.新增或者修改属性和属性值
    对象的属性名(键)是不允许重复的,之前没有这个属性则为新增,之前有这个属性,则是修改对应的属性值
    操作属性的两种方式
       + 1)对象.属性名 = 属性值   .在这里可以理解为“的”
       + 2)对象[属性名] = 属性值
     2.获取对象中的属性名和属性值
        + 1)获取指定属性名的属性值 obj.name= xxx || obj[name]=xxx
        + 2)如果指定的属性不存在,获取到的属性值是undefined(不会报错)
        + 3)获取当前对象中所有的属性名:返回结果是包含所有属性名的数组
             console.log(Object.keys(obj))
      3.删除对象中指定的属性
      1)假删除:当前属性还存在,只不过属性值赋值为空 obj.sex = null;
      2)真删除:彻底把属性从对象中移除掉 delete obj.sex;
      
   > 对象的属性名不能是引用数据类型值
          - 基于 对象[属性名] 的方式操作,需要保证属性名是一个值(字符串/数字/布尔等都可以),如果不是值而是一个变量,它会把变量存储的值作为对象的属性名进行操作
          - 基于 对象.属性名 的方式操作,属性名就是点后面的 (基于点的方式操作有自己的局限性,属性名不能是数字的,不能 对象.数字属性,此时只能用 对象[数字属性])
          -  obj[n] = 200; //=> {100:200} => obj[100]=200   n本身是一个变量(n和'n'的区别:前者是一个变量,后者是一个字符串的值),它代表的是所存储的值100(是一个数字格式)
          
 let n = {
            x: 100
	};
	let m = [100, 200];
	let obj = {};
	obj[n] = "大雄"; //=>obj[{x:100}] 但是对象不能作为属性名,需要把其转换为字符串 =>{"[object Object]":"大雄" }
	obj[m] = "八戒"; //=>obj[[100,200]] =>{ "100,200":"八戒" }
	console.log(obj);
如果非要让属性名是个对象,只能基于ES6中的新数据结构 Map 处理

#### 数组是特殊的对象:
   1.它的属性名是数字,数字从零开始,逐级递增,每一个数字代表着当前项的位置 =>我们把这种数字属性名叫做“索引”
   2.默认有一个length属性存储数组的长度