二、JavaScript基本数据类型

张小阳_
86 阅读5分钟

6062d02009ec298106540322.png

数据类型简介和检测

两大数据类型

image.png

typeof 操作符

  • typeof不是函数，它是内置操作符
  • 使用 typeof 操作符可以返回变量的数据类型
typeof x ;      // 获取变量 x 的数据类型
typeof(x);      // 获取变量 x 的数据类型

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(typeof (123));  //number
        console.log(typeof ('hello'));  //string
        console.log(typeof (null));     //object
        console.log(typeof (true));     //boolean
        console.log(typeof (undefined));    //undefined
    </script>
</body>

</html>

number(数字)类型

number

image.png

image.png

var num1 = 123; // 整数
var num2 = 3.14; // 浮点数
var num3 = .12;

image.png

科学计数法

对于一些极大或者极小的数，也可以通过科学（指数）计数法来表示，如下例所示：

image.png

3e8 --> 3*10的8次方，小数点向后挪8位

3e-4 --> 3*10的-4次方，小数点向前移四位

image.png

另外，Number 类型中还有一些比较特殊的值，分别为 Infinity、-Infinity 和 NaN，其中

  • Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；
  • -Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；
  • NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。

不同进制的数字

image.png

NaN

NaN是个值，number类型的值

  • NaN进行任何运算都是NaN
  • NaN不自等
  • NaN表示一个值是否是number类型的状态，不是一个确切的数

image.png

image.png

Infinity

  • Infinity是无穷大的意思，非零数字除以0时，结果是Infinity或-Infinity
  • Infinity本身是一个数字类型，使用typeof检测Infinity的类型是number

image.png

String(字符串)类型

字符串（String）类型是一段以单引号''或双引号""包裹起来的文本，例如 '123'、"abc"。

定义字符串时，如果字符串中包含引号，可以使用反斜杠\来转义字符串中的引号，或者选择与字符串中不同的引号来定义字符串，如下例所示：

var str1 = 'hello \'world\'';
var str2 = 'hello \“world\”';
console.log(str1);
console.log(str2);

image.png

字符串的拼接

斩断链接

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var year = 2022;
        var str = "北京冬奥会在" + year + "年召开";
        console.log(str);

        var num = 10;
        var str1 = '我买了' + num + '个苹果';
        console.log(str1);
    </script>
</body>

</html>

image.png

空字符串

image.png

字符串的length属性

  • 返回字符串的长度 image.png
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello world';
        console.log(str.length);    // 空格也算长度
    </script>
</body>

</html>

image.png

字符串常用的方法

image.png

charAt( )

  • 返回字符串的指定位置的字符（字符串从0开始计）

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello world';
        console.log(str.charAt(0));
        console.log(str.charAt(1));
        console.log(str.charAt(2));
        console.log(str.charAt(3));
        console.log(str.charAt(4));
        console.log(str.charAt(5)); // 空格
        console.log(str.charAt(6));
    </script>
</body>

</html>

image.png

substring( )

.substring(a, b) 提取子串

  • 一共两个参数 (从a开始提取到b，不包括b)
  • 可写一个参数 (代表从a开始，一直提取到最后)
  • a值也可以大于b的值，它会自动排序将小的值放在前面

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello world';
        console.log(str.substring(0));
        console.log(str.substring(4, 5));
        console.log(str.substring(8, 6));
    </script>
</body>

</html>

image.png

substr( )

.substr(a, b) 从a开始提取b位字符

  • 两个参数，从a开始提取b位字符
  • 一个参数，从a开始一直提取到最后
  • a可以为负数，表示从倒数第a位开始向后提取b位字符（倒数是从-1开始计的，不是0）
  • a为负数，b值省略：表示从倒数第a位开始提取到最后
  • 第二个参数代表截取的字符总数，当第二个参数为负数时，返回空字符串。

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello world';
        console.log(str.substr(6));
        console.log(str.substr(0, 5));
        console.log(str.substr(-2, 2))
        console.log(str.substr(1, -1)); //返回空字符串
    </script>
</body>

</html>

image.png

slice( )

slice 切、片、薄片

  • 从a开始提取到b结束，不包括b
  • 一个参数，从a开始提取到最后
  • a、b值都可以为负，从倒数第a位提取到倒数第b位，不包括b
  • 参数a必须小于b，否则会返回空字符串 (它与substring是不同的，slice不会将参数自动排序)

image.png

image.png

image.png substring() substr() 和 slice() 对比总结

  • substring()两个参数可以交换
  • slice()两个参数不可以交换，a值必须小于b值，并且a可以是负数
  • substr第二个参数是长度，不是截取位置

image.png

toUpperCase() 和 toLowerCase()

image.png

image.png

indexOf()

  • 检索某个指定的字符串在字符串中首次出现的位置
  • 没有检测到，返回-1

indexOf)有两个参数，第一个参数是要查找的项，第二个是查找项的起点位置的索引。如果查找到该项，则返回它从查找位置起，首次出现的位置。如果没有查找到，则返回-1。

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'hello world';
        console.log(str.indexOf('h'));
        console.log(str.indexOf(' '));
        console.log(str.indexOf('o', 5));   //从下标为5的位置开始查找
    </script>
</body>

</html>

image.png

Boolean(布尔)类型

image.png

布尔（Boolean）类型只有两个值，true（真）或者 false（假），在做条件判断时使用的比较多，您除了可以直接使用 true 或 false 来定义布尔类型的变量外，还可以通过一些表达式来得到布尔类型的值，例如：

var a = true;   // 定义一个布尔值 true
var b = false;  // 定义一个布尔值 false
var c = 2 > 1;  // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
var d = 2 < 1;  // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false

image.png

undefined类型

  • 定义了一个变量，但没有赋值，就是undefined
  • undefinded参与任何数学运算都得 NaN

image.png

var num;
console.log(num);  // 输出 undefined
console.log(typeof undefined);  // undefined

变量声明提升的情况： image.png

null类型

image.png

  • typeof 检测 null 是object
  • typeof 检测 数组 是object
  • typeof 将测 函数 是function

image.png

image.png 基本数据类型总结

image.png

5fe5a0cf0af9aef512000200.gif

数据类型转换

Number() 构造函数

  • 将其他类型转换为数字
  • 转换成数字类型只有 数字 与 NaN 两种情况

image.png

image.png

image.png

parseInt()函数

  • 专门将字符串转换为整数的函数
  • 从第一位开找，截取掉第一个非数字字符后的所有字符
  • 若第一位就是非数字字符，则返回NaN
  • 也可以对带有小数点的数字进行取整

image.png

image.png

image.png

paresFloat() 函数

  • 专门将字符串转换为浮点数的函数
  • 若第一位就是非数字字符，则返回NaN

image.png

image.png

image.png

String() 函数

  • 将其它类型值转换为字符串

image.png

image.png

.toString() 方法

  • 将其它值转换为字符串

image.png

image.png 注意！

image.png

Boolean() 函数

  • 将其它值转换为布尔值

image.png

image.png

Boolean(undefined); // false
Boolean(null); // false

隐式类型转换

隐式转换就是自动转换，通常发生在一些数学运算中。因为 JavaScript 是一种弱类型的语言，在一个表达式中，运算符两边的类型可以不同（比如一个字符串和一个数字相加），JavaScript 解释器会在运算之前将它们的类型进行转换。

JavaScript 中，表达式中包含以下运算符时，会发生隐式类型转换：

  • 算术运算符：加（+）、减（-）、乘（*）、除（/）、取模（%）；
  • 逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）；
  • 字符串运算符：+、+=。
document.write("3" - 2);           // 输出：1
document.write("3" + 2);           // 输出："32"
document.write(3 + "2");           // 输出："32"
document.write("3" * "2");         // 输出：6
document.write("10" / "2");        // 输出：5
document.write(1 + true);          // 输出：2
document.write(1 + false);         // 输出：1
document.write(1 + undefined);     // 输出：NaN
document.write(3 + null);          // 输出：3
document.write("3" + null);        // 输出："3null"
document.write(true + null);       // 输出：1
document.write(true + undefined);  // 输出：NaN

通过运行结果可以得出：

  • 字符串加数字，数字会转换为字符串；
  • 数字减字符串，字符串会转换为数字，如果字符串无法转换为数字（例如"abc"、"JavaScript"），则会转换为 NaN；
  • 字符串减数字，字符串会转换为数字，如果字符串无法转换为数字，则会转换为 NaN；
  • 乘、除运算时，也会先将字符串转换为数字。

简易计算器

prompt( )

  • 输入框(用来接收用户所输入的内容)
  • 所输入的内容都是字符串

加法计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num1 = Number(prompt('请输入第一个数'));
        var num2 = Number(prompt('请输入第二个数'));
        var sum = num1 + num2;
        alert(num1 + '+' + num2 + '=' + sum);
    </script>
</body>
</html>

习题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 计算下列结果
        console.log(parseInt('3.6' + '5.1'));
        console.log(Boolean('false'));
        console.log(0 / 0);
        console.log(4 / 0);

        var str = 'abcde';
        console.log(str.substr(1, 3));
        console.log(str.substring(1, 3));
        console.log(str.slice(3, 2));
        console.log(str.substring(3, 1));
    </script>
</body>

</html>

答案 image.png 知识图谱 image.png

5fe159820a8dd0e512000252.gif

avatar
文章
阅读
粉丝