前端数据类型

最新推荐文章于 2024-04-15 22:32:48 发布

随心写文章

最新推荐文章于 2024-04-15 22:32:48 发布

阅读量566

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_50406892/article/details/132656398

版权

我们前端有6种数据类型，5种简单数据类型：undefined、null、Boolean、Number、String，1种复杂数据类型object。

第一种：undefined类型，表示未定义，比较特殊，在使用变量的时候没有对其赋值，这个变量就是undefined的，如下面的例子：

// undefined
// 列子1
// 下面的例子就是undefined的，表示Undefined变量未赋值。
let undefined1;
console.log(undefined1)
			
// 列子2
let undefined2;
if( undefined2 === undefined ) {
// 这时浏览器的控制台就会打印"我是未赋值的变量"，true，为真
console.log("我是未赋值的变量") 
		
// 列子3
let undefined3;
console.log( typeof Undefined3 ) // 检测类型为undefined

总结：undefined类型一般用于判断，判断数组或是对象，是否某个值等于undefined，或是不等于undefined，
或者是等待赋值的操作，它是表示缺少值，总之，运用的场景非常多，大家要随机应变。

第二种：null类型，表示一个值为空对象，null也是一个特殊的对象，它是object类型的，复杂数据类型，如果定义一个变量来检测它的类型，那么它一定是个object类型，如下面例子：

// 列子1
let Null_1 = null;
// 浏览器控制台一定会输出object
console.log( typeof Null) // 检测类型为 object 复杂数据类型 

// 列子2
let Null_2 = null;
if ( Null_2 != null ) {
// 这是控制台并不会输出，因为我取反了，因为Null_2就本省等于null;
console.log("我不会输出，因为我本省就等于null") // fasle
}

// 列子3
let Null_3 = null;
console.log( Null_3 === null ) // 控制台一定会输出true

总结：null使用的场景也是非常之多的，也经常用于判断，赋值，用途跟undefined差不多，经常用，总之null是表示已经赋值了，只是
赋的值为空，undefined为未定义,未赋值;

第三种：Boolean布尔类型，它在js中用途也是非常多的一种类型，特别是在if判断，if判断是true了才会执行，Boolean只有两个值：true和false，true是1，false是0，真和假，下面我们来举列子：

// 列子1
let found = true;
// 控制台输出一定是 true 代表是 1 为真
console.log(found)
// 列子2
let lost = false；
// 控制台输出一定是 false 代表是 0 为假
console.log( lost )

// 列子3
let found_if = true;
if ( found_if ) {
// 因为我等于真，我是true ==> 1
console.log( "我一定会执行" ) 
}

// 列子4
let lost_if = false;

if ( lost_if  ) {
// 因为我等于假，我是false ==> 0
console.log("我一定不会执行") 
}
总结：Boolean是布尔数据类型，在我们写逻辑，或是判断用得非常多，可以把字符串转换未布尔类型的数据。

第四种：Number数值类型，也就是数值类型了，这个类型的用途可是非常的多了，用于计算，用于表示整数，浮点数，加减乘除都在这个数值类型，如下面列子：

let intNum = 55;
// 控制台一定会输出 55 整数
console.log( intNum )
			
// 我们用intNum来算一下减法，不用管-=是什么操作符，后面我的文章里面会讲，你只要理解为（-）减号就行了
// 以此类推 -= += *= \=
intNum -= 40;
// 那么我是等于15的
console.log( intNum )
			
// 那我们再用加法
intNum += 15;
// 那么我是等于30的
console.log( intNum )
			
// 乘法
intNum *= 10;
// 那么我是等于300的
console.log( intNum )
			
// 除法
intNum /= 10;
// 那么我是等于30的
console.log( intNum )

// 我们再来浮点数，也就是小数点,但是浮点数需要的内存空间是整数的两倍，只需要知道就好
let floatNum1 = 1.1;
let floatNum2 = 0.4;
let floatNum3 = .6;

// 如果是数值极大或者极小用e表示法就可以了
// 极大
let floatNum4 = 2.786e8;
// 表示 278600000
console.log( floatNum4 )
			
let floatNum5 = 3.7852e9;
// 表示 3785200000
console.log( floatNum5 )

// 极小
let floatNum6 = 3.3e-3
// 表示 0.0033
console.log( floatNum6 )
			
let floatNum7 = 2.1e-2
// 表示 0.021
console.log( floatNum7 )


总结：Number数值类型呢用途可多着呢，科学计数法，加减乘除，样式计算，浏览器窗口和侧边栏滑动，Math数学对象计算等等
再多提一嘴，Number()可以把其它类型转换成数值类型，个别类型转换成数据类型是NaN。

第5种：String() 字符串类型，它是零或多个16位Unicode字符组成的字符序列，字符串可以用单引号表示（‘’）,

或者是双引号表示（“”）,一般用单引号较多，如下面列子：

// 双引号
let string2 = "嘿，兄弟"
// "嘿，兄弟"
console.log( "string2"  )
			
// 这些方法只在特殊时候用到
// 字符串里面有很多字符字面量
// \n				表示换行
// \t				表示制表 ==> 也就是一个Tab空格	
// \b 				表示空格
// \r 				表示回车
// \f				表示进纸 ==> 换页的意思
			
			
// 字符串也可以更字符串相加
let hello = '你好'
let boss = '大佬'
// 控制台输出：你好大佬
console.log( hello + boss )
			
// 注意：字符串和如何数值类型相加都会变成字符串，如果字符串 加、减、乘、除，除了加会变成字符串，其他都会变成数值类型
			
// 我们随便定义一些值
// 加
let stringNum = 12;
let String1 = '我是字符串'
let String2 = stringNum + String1
// 它是一个string类型
console.log( typeof String2  )
			
// 减
let minus = '123'  //注意： 这里要数字啊，不然会被转换成NaN类型的特殊数值
let Minus = 1
minus -= Minus
// 控制台输出 number数值类型
console.log( typeof minus )  
			
			
// 乘
let Snumber1 = '123';
let Snumber2 = 10;
Snumber1 *= Snumber2
// 控制台输出 number数值类型
console.log( typeof Snumber1 )
			
			
// 除
let Snumber3 = '123';
let Snumber4 = 10;
Snumber3 /= Snumber4
// 控制台输出 number数值类型
console.log(typeof Snumber3 )
			
/*
既然说到这里,那我就讲两个方法吧,把其他类型转换成字符串类型
第一个:	toString(),这个方法可以把其他类型转换成字符串,但是null和undefined不行
它是可以接收一个参数的,,这个参数不常用,它是返回二进制,八进制之类的,但是它是默认返回十进制的啊
*/
// 已经转换成字符串了,可以typeof一下
console.log( Snumber3.toString() )
			
/*
			
第二个:String(),它是可以把任何类型转换成字符串,包括null和undefined
因为null和undefined是没有toString方法的,所以直接返回的就是字符串的null和undefined
			
*/
let Null_4 = null; 
let Null_5 = undefined;
// 转换了 String 类型
console.log(  String( Null_4 ) )
// 转换了 String 类型
console.log( String( Null_5 ) )
			
/*
总结:字符串很霸道,如果其他类型和字符串相加,可以把如何类型转换成字符串,字符串是有length("长度")的
length,这个后面再讲了，丢，也没有什么好总结的
*/

第6种：Object复杂数据类型，对象可以通过new操作符来创建一个对象，没有对象的兄弟可以找我帮你new一个对象，来吧，帮你们new一个各种类型的对象，总之对象有方法对象有属性。

// Object
// 创建一个对象，现在它是一个空对象
let New = new Object();
// 空对象，可以往对象里面添加属性
console.log( New )
		   
// 往对象里面添加属性,不过我们一般不会这样写，我们会采取对象字面量形式去写
New.name = '张三'
New.age = 18;
New.height = 172;
		   
// 字面量形式
let obj = {
name:"李四",
age:19,
height:167
}
		   
// 我们可以取到里面的内容,有两种方法
// 第一种
console.log( obj.name )
// 第二种,数组形式取字符串，记得大括号里面要加双引号
console.log( obj["name"] )

object实例的方法，它的每个实例都有一下的属性和方法
		 
constructor（构造函数 ==> 指向与构造函数）就是用来生成实例对象的函数，
它就是对象的模板，描述实例对象的基本结构。
		 
constructor 就是类的默认方法，用new操作符生成对象实例，会自动调用该方法
*/   
// 定义一个类，给类添加信息
class Class {
// 创建构造函数
constructor(name, height, age) {
// 定义属性，注意，这里的this指向，指向于类的本身，以后会讲
this.name = name
this.height = height
this.age = age
}
}
// new一个实例对象
let dog = new Class("张飞", 188, 10)
// 控制台输出 Class {name: '张飞', height: 188, age: 10}
console.log( dog )
		   
// 我们再来用constructor指向与构造函数
function Fun (i,k) {
this.i = i
this.k = k
}
let F = new Fun('你好','嗯')
// 指向于构造函数本身
console.log( F.constructor )



// isPrototypeOf() 用来检测 (调用者) 的原型对象是否在另一对象（参数）的原型链上
// 如果在另一个对象 (参数) 的原型链上,则返回true ,否则返回 false
let obj2 = new Object();
//因为obj2的原型是Object实例,所以obj2的对象原型(__proto__)指向Object原型(prototype)
// 所以输出 true
console.log( Object.prototype.isPrototypeOf( obj2 ) )
			
// 再来
function hi () {}
let heil = new hi()
// 因为 heil 对象是 hi 实例,所以heil的对象原型(__proto__)指向hi原型(prototype)
// 所以输出true
console.log( hi.prototype.isPrototypeOf( heil ) )
			
// 我们来一个false的
// 因为obj2实例对象不是hi实例对象,obj2的对象原型 (__proto__) 也不是指向于hi原型(prototype)
// 所以输出  false
// 其实很简单,张三的老婆和李四的老婆不是同一个人,张三老婆娘家也李四老婆娘家也不是同一个娘家
console.log( hi.prototype.isPrototypeOf( obj2 ) )


// propertyIsEnumerable  用于检查属性是否能够使用 for in 语句,能够使用for in 语句的,
// 必须是对象本身属性,而不是原型链上的属性,传参的方式和hasOwnProperty一样,要传入字符串
			
function Proper(name,age) {
this.name = name
this.age = age
}
			
let p = new Proper("张三","李四")
// true,这个name属性必须属于实例本身的,而不是属于原型链的
console.log( p.propertyIsEnumerable("name") )
			
Proper.prototype.prop = '我是原型链上面的属性';
// false, prop是继承自原型上的属性，所以返回的是false
console.log( p.propertyIsEnumerable( "prop" ) )

// 举枚属性遍历
// 注意:这里的prop不是实例，但是依然被遍历出来，按理说是不能被遍历的，因为它是原型上的属性
// 但是 for in 只要在遍历对象和对象所在的原型链上可举枚的属性都会被遍历
for ( let j in p ) {
console.log(j + "," + p[j]);
}


			
			
// toLocaleString( locale,options ) 可以将数字转换为特定语言环境的字符串格式，指定输出格式
// locale 表示所使用的语言环境,国家/地区。该参数是一个字符串数组，可以指定一个或多个地区如："zh"~"en"
// options 对象，附加选项，用来指定字符串的显示格式
			
let numOne = 123456.23
// 数字分割 123,456.23
console.log( numOne.toLocaleString() )
			
let numTwo = 0.12
// 数字转换为百分比 12%
console.log( numTwo.toLocaleString("zh",{style:"percent"}) )
			
let numThree = 100000;
// ¥100,000.00 数字转换为货币表示法
console.log( numThree.toLocaleString("zh",{style:"currency",currency:"cny"}) )
// CNY 100,000.00 ，数字转换为CNY表示法  CNY表示的也是人民币  
console.log( numThree.toLocaleString( "zh",{style:"currency",currency:"cny",currencyDisplay:"code"}  ) )
// 100,000.00人民币，数字转换为人民币表示法
console.log( numThree.toLocaleString("zh",{style:"currency",currency:"cny",currencyDisplay:"name"}) )
// $100,000.00 美金，数字转换为美金表示法
console.log( numThree.toLocaleString('en', {style: 'currency', currency: 'USD'}) )
			
			
// 日期对象
let b = new Date();
let option = { 
era:"long",  // 公历纪年
year:"numeric", // 年
month:"long",  // 月
day:"numeric", // 日
weekday:"long" ,// 周六
timeZoneName:"long", // 国家
hour:"numeric", // 小时
minute:"numeric",// 分钟
second:"numeric"// 秒
}
// 使用该方法将日期对象格式化为字符串
let dateStr = b.toLocaleString( "zh",option )
// 公元2023年9月2日星期六 中国标准时间 23:03:43
console.log( dateStr )



// toString() 方法是原型上面的方法,所以每一个对象都有一个toString()方法
// 简单的理解可以把其他类型转换为字符串类型,除了null和undefined不能转换
// 其他类型也是对象,数值,布尔,字符串等等,就讲这么多了
//'NaN'
console.log(NaN.toString());
//'Infinity'
console.log(Infinity.toString());
//'0'
console.log((0).toString());
//'123'
console.log((123).toString())
//"true"
console.log(true.toString())
let Arr = [1,2,3]
// 1 2 3
console.log(  Arr.toString() )
			   
			   
			   
// valueOf() 是 Object 的原型方法，它定义在 Object.prototype 对象上，
// 所有 Object 的实例对象都会继承 valueOf() 方法,它也是对象内置的方法,
// 在js后天中调用,一般不会出现在代码中,它返回对象的原始值
			   
//对象实例
let k = new Date();
//返回当前时间的UTC字符串
console.log(k.toString()); 
//返回距离1970年1月1日午夜之间的毫秒数
console.log(k.valueOf());  
//默认返回当前时间的UTC字符串,apply是改变this指向的,后面会将
console.log(Object.prototype.valueOf.apply(k));