js基础-数据类型

最新推荐文章于 2023-06-24 15:30:07 发布

烽火白小纯

最新推荐文章于 2023-06-24 15:30:07 发布

阅读量174

点赞数

分类专栏：笔记前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43184004/article/details/112299758

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

js基础之数据类型

ECMScript 6种简单数据类型（原始类型）

Undefined 值未定义
Null空指针
Boolean布尔值
Number数值
String字符串
Symbol符号

typeof操作符

因为定义js变量不指定类型，typeof可以判断数据类型

//使用方式
typeof 变量 ;//返回字符串

 - 'undefined' 对应 Null类型
 - 'boolean'   对应 Boolean类型
 - 'string'    对应 String类型
 - 'number'    对应 Number类型
 - 'object'    对应 Object/Null类型
 - 'symbol'    对应 Symbol类型
 - 'function'  对应值为函数

1、Undefined类型

只有undefined一个值，当var、let关键字声明却未初始化时，会被赋值undefined值
一般来说永远不要显式给某个值赋值undefined，字面值“undefined”主要用于比较
应为它是为了为了区别 空对象指针（null） 与 未初始化变量 而诞生的

var a ;
let b ;
console.log(a);//undefined
console.log(b);//undefined
console.log(c);//Uncaught ReferenceError: c is not defined

//变量c未被声明typeof也返回undefined. 所以为了避免此类情况
//强烈建议声明变量时初始化值
//那样就知道typeof返回undefined是变量未声明
typeof(a);//undefined
typeof(c);//undefined

//undefined是假值，当它作为判断条件
if(a){
//不执行
console.log('aaa');
}

if(c){
//报错
console.log('aaa');
}

2、Null类型

只有null一个值。逻辑上表示空对象指针。这就是为何typeof返回object的原因

//当我们要和创建一个变量来赋值对象时，最好初始化null值.这样可以保持null是空对象指针的语义
let a = null;
if(true){
	a = {name:'tom',age:15}
}

//undefined 由 null 派生而来 所以ECMAScript将他们定义为表面相等
undefined == null ;// true
undefined === null ;// false

//null也是假值

3、Boolean类型

布尔值类型有两个字面值 true | false

将特定的值转化为布尔值

数据类型	转化为 true 的值	转化为 false 的值
Boolean	true	false
String	非空字符串	‘’（空字符串）
Number	非零数值(包括无穷值)	0、NaN
Object	任意对象	null
Undefined	不存在	undefined

Boolean(''); //false
Boolean(5); //true
Boolean({});//true
Boolean(undefined);//false

//条件语句中的 flag 会自动转化为Boolean类型再进行判断
if(flag){
}

4、Number类型

它包括整数（十进制、八进制、十六进制…）、浮点数（双精度值）等

(1)浮点值

//定义浮点值： 小数点后至少1位不为0的数字
let num = 0.1;// ok
let num1 = 1.1;// ok
let num2 = .55; // 有效 但不推荐
//因为存储浮点值的空间是整数的2倍，所以ECAMScript想方设法将浮点数转化为整数
let float = 1.0000; // 1

//科学计数法表示
//一个数值后跟 E/e 10的n次幂
let num3 = 3E3; // 3000
let a = 3.14e5; // 314000
let b = 3e-10;// 0.0000000003

//不要企图测试特定的浮点值
//这种错误是因为使用了 IEEE754数值
a + b == 0.3;
0.1 + 0.2 == 0.3; //false

（2）值得范围

var big = Number.MAX_VALUE; //最大值范围  
var small = Number.MIN_VALUE;//最小值范围 
console.log(big);//大多数浏览器是 1.7976931348623157e+308
console.log(small);//大多数浏览器是 5e-324 
//无穷值不能进一步计算
console.log(1/0);// Infinity 无穷大
console.log(-1/0);// -Infinity 负无穷大

//测试一个数是否超出范围
isFinite(x) ;// 返回boolean (true/false)

(3)NaN

“不是数值”,用于表示本来要返回数值得操作失败了。不会终止代码运行

0/0 ;// NaN
//任何涉及NaN的操作始终返回NaN,NaN不等于包括NaN在内任何值
NaN/10 + 1;//NaN'
NaN == NaN ; //fals

//isNaN函数 判断参数是否为NaN
isNaN(NaN);// true
isNaN(10);// false
isNaN('0');// false
isNaN('NaN');// false
isNaN(true);// false

(4)数值转换

//用于任意数据类型
//1、Number() 
//规则如下
 - 布尔值 true-> 1 ,false -> 0
 - 数值   直接返回
 - null   0
 - undefined    NaN
 - 字符串，转化规则如下
 	*字符串包含数值字符（包括前面带+、-号） ,会忽略前面的0，转化为十进制数值
	 	Number('00111') ->  111
		Number('-00111') ->  -111
		Number('+00.111') ->  0.111
	*字符串包含其他有效进制格式（如16进制..）,此时带+-号会影响判断
		Number('0xf') ->  15
	* ''空字符串  ->  0 
	* 上述情况之外的 返回 NaN
 - 对象  调用 valueOf()方法，按上述规则转化返回值，如结果是NaN,调用 toString()方法转为字符串
//2、+ (隐式转化) 用于任意数据类型 ,与Number（）方法一致
 + '-00.122' ; // -0.123
 +  true ;  // 1

//用于字符串、数值
//1、parseInt()  从第一个非空格字符开始转换（如果第一个字符不是+，-，数值 则立马返回NaN）返回整数
//第二个参数指定解析进制数（默认十进制），可省略其进制前缀
parseInt(''); //NaN
parseInt('123.111a');// 123
parseInt('0xf'); // 15 转化16 进制整数
parseInt('f',16); // 15  转化16 进制整数，省略 '0x'前缀
//2、parseFloat()  只能解析十进制数 此外与parseInt类似，可返回整数、浮点数、NaN
parseFloat('00.002.003'); //0.002

String类型

表示0或多个16位Unicode字符序列。由两个 ‘（单引号）或 “（双引号）或 `(反单引号)包裹

1、转化为字符串

//tostring()方法：可返回当前值的字符串等价物，null、undefined没有此方法
11.toString(); // "11"
true.toString();// "true"
let obj = {a:12};
obj.toString(); // "[object Object]"

//数值调用此方法时：可传入一个参数（进制数），将该数值转化为该进制值 没有返回前缀
let num = 12;
num.toString(2);// "1100" 以2进制显示 
num.toString(8);// "14"
num.toString(16);// "c"
【注意】：12.toString(2);//会报错，要用 变量.toString(2)调用
//String(): null、undefined转为字符串(其他值类型也可)
String(null);// "null"
String(undefined);//"undefined"

2、模板字面量

不同于单双引号，它可以跨行定义字符串

//跨行定义字符串
let pageHTML = `
	<div>
		<a> href = "#">
			<span>JavaScript</span>
		</a>
	</div>
`
//字符串插值
let y = 2020;
let m = 12;
let d = 12;
let time = `${y}年${m}月${d}天`;
console.log(time);// 2020年12月12日

//标签函数  自定义插值行为
//创建标签模板 防止用户恶意输入
//string：除变量外的其他字符串数组，argus：变量数组，前者总比后者长度大1
function SaferHTMLx(string,...argus) {
    console.log(string,argus);//["<p>", " has ", " sent you a message.</p>"] , 
    // ["<script>alert("abc")</script>", "<script>alert("abc")</script>"]
    let s = string[0];
    for (let i = 1; i < string.length; i++) {
      let arg = String(argus[i-1]);
 	  //对变量参数进行处理
      s += arg.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;");
      s += string[i]         
    }
    return s
  }
 
let senderx = '<script>alert("abc")</script>';
//使用标签模板 
let messagex = SaferHTMLx`<p>${senderx} has ${senderx}sent you a message.</p>`;
console.log(messagex);//<p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

Symbol类型

symbol(符号)实例是唯一、不可变的。用途是确保对象属性使用唯一标识，不会发生冲突

//实例化
//创建普通符号，不会出现在全局符号注册表
let sb1 = Symbol('www');
let sb2 = Symbol('www');
//传入相同字符串创建的实例不相等
sb1 === sb2 ;//false
//作为对象属性
let obj = {
    [sb1]:'symbol值',
    www:'字符串值',
    age:12
}
console.log(obj[sb1]);//'symbol值' 取值必须使用[]与字符串区分
console.log(obj.www);//'字符串值'
//返回对象实例的属性数组
Object.getOwnPrepertySymbols(obj);//[Symbol(www)]
Object.getOwnPrepertyName(obj);//["www","age"]
Object.getOwnPrepertyDescriptors(obj);//[Symbol(www):{...},www:{...},age:{...}]
Reflect.ownKeys(obj);//[Symbol(www),"www","age"]

//全局符号注册表（Symbol.for('xxx')）在全局搜索符号注册表，发现已注册返回该符号实例，否则全局新创建一个符号实例
let a = Symbol.for('www');//返回该 Symbol 值  创建新符号
let b = Symbol.for('www');//返回该 Symbol 值  返回已有符号
let c = Symbol.for("www");//返回该 Symbol 类型值的 key   返回已有符号
console.log(c == a);//false
console.log(b == a);//false
console.log(c == b);//true
//查询全局注册表( Symbol.keyFor() ),方法接收符号，返回全局符号对应字符串键。若不存在返回 undefined
Symbol.keyFor('aaa');// 报错   参数必须为符号（let sb = Symbol('sbsbsb');）

Object类型

一组数据和功能的集合

//实例化创建
let obj = new Object();//ok
let obj = new Object; //合法，但不推荐
let obj = {};//推荐
//属性及方法

 - constructor:用于创建当前对象的函数。上面例子中这个属性就是 Object()函数
 - hasOwnProperty(属性名)：判断当前对象实例是否存在给定的属性
 - isPrototypeof(对象)：判断当前对象是否为另一个对象的原型
 - propertyIsEnumerable(属性名)：判断对象给定的属性是否可枚举（遍历）
 - tolocaleString():返回对象对应的字符串表示，该字符串反应本地化执行环境
 - toString():返回对象对应的字符串
 - valueOf();返回对象对应的字符串、数值或布尔值表示，通常与toString()返回值相同