3. 数据类型

123 阅读5分钟

1、数据为什么要有类型

数字与字符串

都是1,为什么要分1和'1’

功能不同

数字是数字,字符串是字符串

数字可以加减乘除,字符串不行

字符串能表示电话号码,数字不行

存储形式不同

JS 中,数字是用 64 位浮点数的形式存储

JS 中,字符串是用类似 UTF8 形式存储的 (UCS-2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="info"></div>
    <script>        
        // ES5
        //数字类型:字符串,数字,布尔,空underline,null,对象object
        // ES6
        // symbol

        //字符串
        let name = '中南';
        //数字类型
        let age = 22;
        //布尔类似:bool  false, true
        let isMale = true;
        //undefined:定义未赋值
        let future;
        console.log(future);
        //对象:描述一些列的事物
        let obj = {name,age,isMale,future};
        
        //数组,在js里面属于对象
        let arr = [1,2,3,4];
        console.log(obj);
        console.log(age);
        // console.log(arr);
        // 获取dom元素
        const info = document.getElementById('info');
        console.log(info);
        info.innerHTML = name
    </script>
</body>
</html>

2、js中的数据类型

七种

  • 数字 number
  • 字符串 string
  • 布尔 bool
  • 符号 symbol
  • 空 undefined
  • 空 null
  • 对象 object

总结:四基两空一对象

注意:以下不是数据类型

数组,函数,日期,它们都属于object

我们来一一介绍这几种数据类型

(1)数字number

1.如何声明数字类型
let num=10 声明整数
let num=10.1 声明小数
let num=2e4  20000科学计数法

2.数字的运算
let a=10
let b=10
计算和 sum=a+b
计算差 menus=a-b
计算×  multiple=a*b
计算除法  divide=a/b

  <!-- 特殊情况的除法 -->
let value=a/0----Infinity
let nanValue=0/0-----NaN
let mod=a%b  比如7%2=1 取余数

64位浮点数

写法

  • 整数写法:1
  • 小数写法:0.1
  • 科学计数法:1.23e4
  • 八进制写法(用得少):0123 或 00123 或 0123
  • 十六进制写法:0x3F 或 0X3F
  • 二进制写法:0b11 或 0B11

特殊写法

正0 和 负0都等于 0,要严谨

无穷大

Infinity 、+Infinity 、 -Infinity

无法表示的数字

NaN (Not a Number)但它是一个数字,比如1/0 得到NaN

什么是64位浮点数

浮点数,就是小数点会乱动的数

123.456可以表示为1.23456e10的二次方

js中使用64位存储一个number

其中符号正负占一位,指数占11位,有效数字占52位。

所以我们可以得出结论,js中的number是有精度的

范围和精度

范围

拉满指数和有效数字,得到的最大二进制数字

console.log(Number.MAX_VALUE) // 数字型的最大值
console.log(Number.MIN_VALUE) // 数字型的最小值

精度

最多只能到53个二进制表示有效数字

所以15位有效数字都能精确表示

16位数字如果小于90开头,也能精确表示

但是9110000000000001就存不下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 数值类型number
        let a = 25.1;
        let b = 2e4;
        // 四则运算
        let sum = a + b;
        let mul = a * b;
        let devide = a / b;
        console.log(sum);
        console.log(mul);
        console.log(devide)
        // 除0,变为无穷大Infinity
        let uncatch = a / 0;
        console.log(uncatch)
        // 取模(取余数)
        let mo = b % a;
        console.log(mo)
        console.log(Number.MAX_VALUE) // 数字型的最大值
        console.log(Number.MIN_VALUE) // 数字型的最小值
    </script>
</body>
</html>

(2)字符串string

1.如何声明字符串 单引号双引号都可以
let str='猪猪' || "猪猪"
let str2='123'|| "123"

2.字符串相加
let sumStr=str+str2  -------  '猪猪123'
let numStr=10+'10' ---------'1010'

3.获取字符串中的子字符
let str='abcde'
获取a 
str[0]--------a
获取b
str[1]--------b
获取e
str[4]  str[str.length-1] 获取最后一位

4.模板字符串
let modStr=`12345${str}` --------${str}
'12345abcde'

字符串的写法:

①单引号:'hello word'

②双引号:"hello word"

③反引号:`hello word`

<script>
    // 字符串string
    let str = '你好'
    let str2 = '中国'
    // 字符串的相加,相当于字符串的拼接
    let targetStr = str + str;
    console.log(targetStr);
    let aa = 30;
    let bb = '20';
    // 字符串加上数字,会将数字自动编译为字符串
    let result = aa + bb;
    console.log(result);
    
    console.log(str.length);
    // 获取子字符,从下标0开始
    let pwd = '12345';
    console.log(pwd[2]);
    let pwdNum = Number(pwd);
    // let pwdNum = parseInt(pwd);    也可以
    console.log(pwdNum);
    // 模板字符串
    let messageInfo = prompt('请输入密码最后一位:');
    // '12345'+messageInfo
    let templateStr = `12345${messageInfo}`;//要用反引号``而不是单引号''
    console.log(templateStr);
</script>

结果:

若使用单引号:
结果:

获取最后一位

messageInfo[messageInfo.length-1]

注意

引号不属于字符串的一部分,就像书名号不属于书名的部分一样

字符串是有长度的

string.length 获取长度
'123'.length //3
string[index]获取字符
let s='hello'
s[0]='h'

(3)bool布尔值

<script>        
    let a = 1;
    let b = '1';
    // === 强类型比较,会先去校验类型,然后再比较值的大小
    const res1 = a === b;
    // == 直接比较值的大小
    const res2 = a == b;
    // res1 为false
    // res2 为true
    // 在代码的时候用===
    console.log(res1);
    console.log(res2);
</script>

=== 强类型比较,会先去校验类型,然后再比较值的大小

== 直接比较值的大小

在代码的时候用“===”

只有两个值,true和false

一般我们使用if配bool

if(value){}else{}

js中定义了五个falsy值,即相当于false的值

undefined,null,0,NaN''
if(!undefined)
{
  console.log('undefined为false');
}
if(!null)
{
  console.log('null is false');
}
if(!0)
{
  console.log('0 is false');
}
if(!NaN){
  console.log('NaN is false');
}
if(!''){
  console.log('"" is false' );
}

(4)undefined和null

两个空类型

区别是

  • 如果一个变量声明了,但是没有赋值,那么默认值是undefined而不是null
  • 如果一个函数没有写return,那么默认return undefined而不是null

(5)对象

对象可以包含所有的数据类型在里面;

定义

键值对的集合

2.通过对象的键,找到对应的值
let name=people.name  第一种写法,通过·操作符
let name=people['name']  第二种写法,通过[]访问

<!-- 如果你不知道对象里面有声明哪些键 -->
let keys=Object.keys(people)
keys[0]就是name所对应的key
let name=people[keys[0]]  第二种写法,通过[]访问 ,在你不清楚对象里有哪些key存在的情况下

找到对象中存在所有的值
let values=Object.values(people)--------返回所有值的数组

1、对象声明

//对象声明
let people = {
  name: '钱多多',
  age: 20,
  hobbies: true,
  coding:()=>{
    console.log('coding');
  }
}
console.log(people);

注意,键名是字符串,不是标识符,引号可以省略

这里name叫做属性名,'钱多多' 叫做属性值

所有属性名都会自动变为字符串

const res = people.toString();
console.log(res);

2、获取对象中的属性

①适用于知道这个对象里面有name这个key值

const name = people.name;
console.log(name);

②适用于不知道有这个key值,这个key是通过别的方法计算出来的

const name2 = people['name'];
console.log(name2);

获取到对象的所有key

const keys = Object.keys(people);
console.log(keys);

获取对象中的第一个ley值

const name2 = people[keys[0]];
console.log(name2);

3、不确定是否有属性时:使用in来判断key是否还在对象中

console.log('name' in people);

4、获取对象所有的值

// 获取对象所有的值
const values = Object.values(people);
console.log(values);

5、删除key

// 删除key
delete people.name;
console.log(people);

使用变量删除

delete people[keys[0]]

6、判断是否为我们自己给对象添加的属性

console.log(people.hasOwnProperty('age'));
console.log(people.hasOwnProperty('toString'));

6、总结

对象常用操作
删除属性
delete obj.xxx或者delete obj['xxx']

是否含有属性
'xxx' in obj ===false

查看所有属性
Object.keys(obj)

查看属性值
Object.values(obj)

查看自身+共有属性
console.dir(obj)

判断一个属性是自身的还是共有的
obj.hasOwnProperty('key')

(6)原型