• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

JavaScript基本数据类型

开发技术 开发技术 2周前 (07-27) 15次浏览

JavaScript基本数据类型

数据类型分类

  Js中分为两种数据类型,一种是基本数据类型,一种是object引用数据类型。

  当需要去使用object引用数据类型的时候会在栈内存(连续存储)中去调用堆内存(链表存储)中的object引用数据类型对象,这是一个引用过程。

 

  值类型(基本类型):numberbooleannullundefinedstring(在赋值传递中会以引用类型的方式来处理)。

  引用类型:对象、数组、函数。

 

  基本类型值:按值访问,操作的是他们实际保存的值;

  引用类型值:按引用访问,当查询时,我们需要先从栈中读取内存地址,然后再顺藤摸瓜地找到保存在堆内存中的值;

 

JavaScript基本数据类型

 

  只有对象才有方法使用,但在Js中也可以使用值类型调用方法,因为它会在执行时将值类型转为引用类型,即跑到堆内存中找方法。

 

类型检测

  Js中提供了丰富的数据类型,在实际开发工作中。要根据不同的数据类型做出不同的处理方案,那么类型检测就显得尤为重要。

 

typeof


  typeof 用于返回以下原始类型

 

  number

  string

  boolean

  function

  object

  undefined

 

  可以使用typeof用于判断数据的类型

<script>"use strict";
​
        let num = 100;
        let num_string = "100";
        let bool_true = true;
        let bool_false = false;
​
        function test(){};
​
        let undef;  // 未定义
​
        let dic = {"1":"一","2":"二"};
​
        console.log(typeof num);  // number
        console.log(typeof num_string);  // string
        console.log(typeof bool_true);  // boolean
        console.log(typeof bool_false);  // boolean
        console.log(typeof test);  // function
        console.log(typeof undef);  // undefined
        console.log(typeof dic);  // object
​
​
</script>

 

instanceof


  instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

  也可以理解为是否为某个对象的实例,typeof不能区分数组,但instanceof则可以。

 

<script>"use strict";
​
        let num = 100;
        let num_string = "100";
        let bool_true = true;
        let bool_false = false;
​
        function test(){};
​
​
        let dic = {"1":"一","2":"二"};
​
        console.log(num instanceof Number);  // false
        console.log(num_string instanceof String);  // false
        console.log(bool_true instanceof Boolean);  // false
        console.log(bool_false instanceof Boolean);  // false
        console.log(test instanceof Function);  // true
        console.log(dic instanceof Object);  // true
</script>

 

  如果我们用简写的形式生成基本类型,使用instanceof进行判断时会全部变成false

  但是用完整的实例化对象方式生成基本类型则会变成true

<script>"use strict";
​
        let num = new Number(100);
        let num_string = new String("100"); 
        let bool_true = new Boolean(true);
        let bool_false = new Boolean(false);
​
        function test(){};
​
​
        let dic = {"1":"一","2":"二"};
​
        console.log(num instanceof Number);  // true
        console.log(num_string instanceof String);  // true
        console.log(bool_true instanceof Boolean);  // true
        console.log(bool_false instanceof Boolean);  // true
        console.log(test instanceof Function);  // true
        console.log(dic instanceof Object);  // true
</script>

 

String

  字符串类型是使用非常多的数据类型,也是相对简单的数据类型。

 

声明定义


  使用对象形式创建字符串

<script>"use strict";
​
        let object_string = new String("hello,world");
        console.log(typeof object_string);  // object
</script>

 

  简便创建字符串,即使用字面量来创建。

<script>"use strict";
​
        let value_string = "hello,world";
        console.log(typeof value_string);  // string
</script>

 

转义字符


  有些字符有双层含义,需要使用 转义符号进行含义转换。

  下例中引号为字符串边界符,如果输出引号时需要使用转义符号。

 

<script>"use strict";
​
        console.log("JavaScript是一门非常'严格'的语言。");
        // JavaScript是一门非常'严格'的语言。
</script>

 

  常用转义符号列表如下

符号 说明
t 制表符
n 换行
斜杠符号
单引号
双引号R

 

连接运算符


  使用 + 可以连接多个内容组合成字符串,经常用于组合输出内容使用。

<script>"use strict";
​
        console.log("JavaScript"+"是一门"+"非常优秀的语言。");
        // JavaScript是一门非常优秀的语言。
</script>

 

模板字面量


  JavaScript中没有format格式化字符串,但是有模板字面量。

  你可以使用`${变量函数表达式}`来达到格式化字符串的目的。

  注意,不是单引号。而是`号。

<script>"use strict";
​
        let username = prompt("请输入您的姓名:").trim();
        document.write(`欢迎您:${username},很高兴您回家..`);
​
</script>

 

  使用函数或表达式。

<script>

        "use strict";

        function show() {

                return "云崖先生";

        };
        
        document.write(`欢迎您:${show()},很高兴您回家..`);

</script>

 

  另外,换行操作不会产生错误。会保留原样进行输出。

<script>

        "use strict";

        console.log(`经过周密的计算,最后结果是:
        ${1 + 2},对这个结果满意吗?`);

        // 经过周密的计算,最后结果是:
        // 3,对这个结果满意吗?

        // 会保留原样式

</script>

 

标签模板


  标签模板是提取出普通字符串与变量,交由标签函数处理。

<script>

        "use strict";

        let username = "云崖先生";
        let age = 18;

        func`用户名是${username},年龄是${age},看的出来是个小帅哥`;

        // ... 是一种语法,可以让形参接收多个参数。用array进行接收。和arguments有点相似,但是要定义形参名称。
        
        function func(s, ...f) {
                console.log(s); // (3) ["用户名是", ",年龄是", ",看的出来是个小帅哥", raw: Array(3)]
                console.log(f); // (2) ["云崖先生", 18]
        };

</script>

 

获取长度


  使用length属性可以获取字符串长度

<script>

        "use strict";

        console.log("hello,world".length); // 11

</script>

 

大小写转换


  大写转换:toUpperCase()

  小写转换:toLowerCase()

<script>

        "use strict";

        console.log("hello,world".toUpperCase());  // HELLO,WORLD
        console.log("HELLO,WORLD".toLowerCase());  // hello,world
</script>

 

移除空白


  使用trim()可移除两侧空白。

  使用trimLeft()删除左边空白。

  使用trimRight()删除右边空白。

<script>

        "use strict";

        console.log("  不移除空白  ");
        console.log("  两侧空白  ".trim()); 
        console.log("  左侧空白".trimLeft());
        console.log("右侧空白  ".trimRight());

</script>

 

获取单字符


  索引0开始,往后数。

  可以使用charAt()

  也可使用[]

  使用length-1即可获取最后一位元素,以此类推。

<script>

        "use strict";

        let str = "ABCDEFGHIJKLMN";
        // 取出C
        console.log(str[2]);
        // 取出D
        console.log(str.charAt(3));
        // 取出N
        console.log(str[str.length - 1]);
        // 取出L
        console.log(str.charAt(str.length - 3));

</script>

 

截取子字符串


 

方法 说明
slice() 参数1:开始索引值 参数2:结束索引值 特点:取头不取尾
substring() 参数1:开始索引值 参数2:结束索引值 特点:取头不取尾
substr() 参数1:开始索引参数2:指定获取长度 特点:从开始索引值往后数参数2的数值-1即可

 

<script>

        "use strict";

        let str = "0123456789";
        // 取出0 1 2 3 4 取头不取尾
        console.log(str.slice(0, 5));

        // 从2开始取,往后数五个 2 3 4 5 6 7 减去一个 2 3 4 5 6
        console.log(str.substr(2, 5));

        //  取出0 1 2 3 4  取头不取尾
        console.log(str.substring(2, 5));


</script>

 

查找字符串


  查找字符串的索引位置或给出一个布尔值。

 

方法 说明
indexOf() 从开始获取字符串位置,检测不到时返回 -1,第2个参数为从哪个位置开始查找
lastIndexOf() 从结尾来搜索字符串位置,检测不到时返回 -1,第2个参数为从哪个位置开始查找
search() 用于检索字符串中指定的子字符串,也可以使用正则表达式搜索。检测不到时返回 -1
includes() 字符串中是否包含指定的值,第二个参数指查找开始位置,返回的是一个布尔值
startsWith() 是否已特定子串开头。 参数2为查找的位置。返回的是一个布尔值
endsWith() 是否已特定子串结束。参数2为查找的位置。返回的是一个布尔值

 

<script>

        "use strict";

        let str = "01234567890123456789abcdef";

        // 从下标0的位置开始向后找
        console.log(str.indexOf("0123"));  // 0
        // 从下标3的位置开始向后找
        console.log(str.indexOf("ef", 3));  // 24
        // 找不到返回 -1
        console.log(str.indexOf("z"));  // -1

        // 从最后一位下标开始往前找
        console.log(str.lastIndexOf("9abc"));  // 19
        // 指定下标位,从下标7的位置向前找
        console.log(str.lastIndexOf("123", 7));  //  1
        // 找不到返回 -1
        console.log(str.lastIndexOf("z"));  // -1


        // 必须以f结尾
        console.log(str.search("f$"));  // 25
        // 必须以a开头
        console.log(str.search("^a")); // -1
        // 必须以89开头结尾是英文
        console.log(str.search("89[a-z]"));  // 18


        // 是否包含abc
        console.log(str.includes("abc")); // true
        // 是否包含zzz,从索引2向后检索
        console.log(str.includes("zzz", 2)); // false

        // 索引2是否234开始
        console.log(str.startsWith("234", 2)); // true

        // 当前字符串是否已cdef结束
        console.log(str.endsWith("cdef")); // true

</script>

 

替换字符串


  replace() 方法用于字符串的替换操作。

  参数1:查找的子串

  参数2:替换的子串

 

  注意,默认只替换一次。

<script>

        "use strict";

        let str = "hello,world";

        let new_str = str.replace("world","Js");

        console.log(new_str); // hello,Js
  

</script>

 

重复生成


  使用repeat()方法可进行重复生成。

<script>

        "use strict";

        // 生成20个星号
        console.log("*".repeat(20));

        // ********************
  
</script>

 

  将电话号码中间四位隐藏。

<script>

        "use strict";

        let phone = "13811112457";
        let new_phone = phone.replace(phone.slice(3, 7), "*".repeat(4));
        console.log(new_phone);

        // 138****2457

</script>

 

拆分字符串


  使用split()方法可将字符串进行拆分,拆分结果为array类型。

<script>

        "use strict";

        let str = "hello,world";
        console.log(str.split(",")); // ["hello", "world"]

</script>

 

  split()方法的第二个参数可以指定要拿几次拆分,默认是都拿。

<script>

        "use strict";

        let str = "hello,wor,ld";
        // 代表拆分出来只拿前两个,而不是都拿
        console.log(str.split(",", 2));  //["hello", "wor"]

</script>

 

合并字符串


  使用concat()方法可将多个字符串合并为一个新的字符串。

<script>

        "use strict";

        let s1 = "hello",s2 = "world";

        //      指定拼接符号    指定要拼接的字符串      指定新添加的内容
        let s3 = s1.concat(",",s2,"新添加的内容");
        console.log(s3);

        // hello,world新添加的内容
        
</script>

 

类型转换


  如果想让一个对象变为字符串,可以使用Strint()将它包裹。

<script>

        "use strict";

        let num = 123321;
        let num_string = String(num);
        console.log(num_string);   // 123321
        console.log(typeof num_string);  // string
        
        let arr = ["a",1,23];
        let arr_string = String(arr);
        console.log(arr_string);   // a,1,23
        console.log(typeof arr_string);  // string

</script>

 

  此外,我们也可以直接对象+""完成类型转换,,这是属于隐式转换。

<script>

        "use strict";

        let num = 123321;
        let num_string = num+"";
        console.log(num_string);   // 123321
        console.log(typeof num_string);  // string
        
        let arr = ["a",1,23];
        let arr_string = arr+"";
        console.log(arr_string);   // a,1,23
        console.log(typeof arr_string);  // string

</script>

 

  我们也可以调用对象下的toString()方法,来将对象转换为string类型。

<script>

        "use strict";

        let num = 123321;
        let num_string = num.toString();
        console.log(num_string);   // 123321
        console.log(typeof num_string);  // string
        
        let arr = ["a",1,23];
        let arr_string = arr.toString();
        console.log(arr_string);   // a,1,23
        console.log(typeof arr_string);  // string

</script>

 

常用方法大全


 

方法 说明
length 获取长度
大小写转换 
toUpperCase() 大写转换
toLowerCase() 小写转换
移除空白 
trim() 移除两侧空白
trimLeft() 移除左侧空白
trimeRight() 移除右侧空白
获取单字符 
charAt() 获取单字符,与[]使用方法相同
截取字符串 
slice() 参数1:开始索引值 参数2:结束索引值 特点:取头不取尾
substring() 参数1:开始索引值 参数2:结束索引值 特点:取头不取尾
substr() 参数1:开始索引值 参数2:指定获取长度 特点:从开始索引值往后数参数2的数值-1即可
查找字符串 
indexOf() 从开始获取字符串位置,检测不到时返回 -1,第2个参数为从哪个位置开始查找
lastIndexOf() 从结尾来搜索字符串位置,检测不到时返回 -1,第2个参数为从哪个位置开始查找
search() 用于检索字符串中指定的子字符串,也可以使用正则表达式搜索。检测不到时返回 -1
includes() 字符串中是否包含指定的值,第二个参数指查找开始位置,返回的是一个布尔值
startsWith() 是否已特定子串开头。 参数2为查找的位置。返回的是一个布尔值
endsWith() 是否已特定子串结束。参数2为查找的位置。返回的是一个布尔值
替换与重复生成 
replace() 用于字符串的替换操作。参数1:查找的子串 参数2:替换的子串
repeat() 重复生成的次数
合并与拆分 
split() 拆分字符串,拆分结果为数组类型
concat() 合并字符串,产生一个新的字符串

 

方法 说明
charCodeAt() 通过index下标取出元素的Unicode编码
anchor( ) 为字符串添加上a标签
italics( ) 为字符串添加上i标签
bold( ) 为字符串添加上b标签

 

Boolean

  布尔类型包括 truefalse 两个值,是开发中使用较多的数据类型。

 

声明定义


  使用对象形式创建布尔类型

<script>

        "use strict";
        console.log(new Boolean(true));  // true
        console.log(new Boolean(false));  // false
        
</script>

 

  但建议使用字面量创建布尔类型

<script>

        "use strict";
        let  status = true;
        
</script>

 

隐式转换


  基本上所有类型都可以隐式转换为 Boolean类型。

 

数据类型 true false
String 非空字符串 空字符串
Number 非0的数值 0 、NaN
Array 数组不参与比较时 参与比较的空数组
Object 所有对象  
undefined undefined
null null
NaN NaN

 

  当与Boolean类型比较时,会将两边类型统一为数字1或0。

  如果使用Boolean与数值比较时,会进行隐式类型转换 true转为1,false转为0。

<script>
    
    "use strict";

    console.log(3 == true); //false
    console.log(0 == false); //true

</script> 

 

  当String类型与Boolean类型做比较时,会都转换为Number类型进行比较。

<script>

        "use strict";

        console.log(true == "1");  // true
        console.log(true > "0"); // true

</script>

 

  数组的表现与字符串原理一样,会先转换为数值。

<script>

        "use strict";

        console.log(Number([]));  // 0
        console.log(Number([3]));  // 3
        console.log(Number([1, 2, 3]));  // NaN

        console.log([] == false);  // true
        console.log([1] == true);  // true
        console.log([1, 2, 3] == true);  // false

</script>

 

  引用类型的Boolean值为真,如键值对对象和数组。

<script>

        "use strict";

        if ([]) { console.log("true") } else { console.log("false"); };  // true
        if ({}) { console.log("true") } else { console.log("false"); };  // true

</script>

 

 

显式转换


  使用 !! 转换布尔类型。

 

  首先!代表非,取反的意思。

  如果是true则取false,如果是false则去true。这会得到一个相反的布尔值。

  再来一个!,将之前的布尔值再去反。

 

<script>

        "use strict";

        console.log(!![]);  // true
        console.log(!!{});  // true
        console.log(!!"");  // false
        console.log(!!"0");  // true
        console.log(!!"1");  // true
        console.log(!!0);  // false
        console.log(!!1);  // true

</script>

 

  使用 Boolean() 函数可以显式转换为布尔类型

<script>

        "use strict";

        console.log(Boolean([]));  // true
        console.log(Boolean({}));  // true
        console.log(Boolean(""));  // false
        console.log(Boolean("0"));  // true
        console.log(Boolean("1"));  // true
        console.log(Boolean(0));  // false
        console.log(Boolean(1));  // true

</script>

 

Number

  JavaScript中,Number包含整数与小数。

 

声明定义


  使用对象方式声明

<script>

        "use strict";

        let num_obj = new Number(100);

        console.log(typeof num_obj);  // object
        console.log(num_obj);  // Number {100}

</script>

 

  简便的字面量形式声明

<script>

        "use strict";

        let num_value = 100;

        console.log(typeof num_value);  // number
        console.log(num_value);  // 100

</script>

 

类型判断


  使用isInteger()方法可判断是否为整数。

  返回一个布尔值。

<script>

        "use strict";

        console.log(Number.isInteger(39.5));  // false

</script>

 

  使用isNaN()方法可判断是否为NaN

  返回一个布尔值。

<script>

        "use strict";

        console.log(Number.isNaN(39.5));  // false

</script>

 

NaN


  NaN表示无效的数值,并且不能使用 == 比较。

  除了可以使用isNaN()方法外,也可以使用Object对象的is方法进行判定。

<script>

        "use strict";

        // NaN代表无效的数值
        let res = "两百" / 2;
        console.log(res);
        // 使用isNaN()
        console.log(Number.isNaN(res));  // true
        // 使用Object.is()
        console.log(Object.is(res,NaN)); // true

</script>

 

浮点舍入


  使用toFixed()方法对数值进行四舍五入操作,可指定保留小数点后的位数。

<script>

        "use strict";

        let float_num = 123.456;
        
        // 四舍五入,保留小数点后两位。
        console.log(float_num.toFixed(2)); // 123.46

</script>

 

浮点精度


  大部分编程语言在浮点数计算时都会有精度误差问题,Js也不例外。

<script>

        "use strict";

        console.log(0.1+0.2); // 0.30000000000000004

</script>

 

  这是因为计算机以二进制处理数值类型,上面的0.1与0.2转为二进制后是无穷的。

<script>

        "use strict";

        console.log((0.1).toString(2)) //0.0001100110011001100110011001100110011001100110011001101
        console.log((0.2).toString(2)) //0.001100110011001100110011001100110011001100110011001101

</script>

 

  一种方式使用toFixed()方法进行小数截取

<script>

        "use strict";

        // 保留小数点后两位
        console.log((0.1 + 0.2).toFixed(2));  // 0.30

</script>

 

  也可通过一些第三方库进行操作,下面演示decimal.js库来进行处理。

<script src="https://cdn.bootcss.com/decimal.js/10.2.0/decimal.min.js"></script>
<script>

        "use strict";

        // 保留小数点后两位
        console.log(Decimal.add(0.1, 0.2).valueOf()) // 0.3

</script>

 

普通转换


  使用Number()函数包裹住需要转换的对象。

  基本上所有的数据类型都能转换为Number类型,区别是有的会转换为有效数值,有的会转换为NaN即无效数值。

<script>

        "use strict";

        console.log(Number('hello')); //NaN
        console.log(Number(true));    //1
        console.log(Number(false));    //0
        console.log(Number('99'));    //99
        console.log(Number([]));    //0
        console.log(Number([51]));    //51
        console.log(Number([5, 2]));    //NaN
        console.log(Number({}));    //NaN

</script>

 

  我们也可以使用算术运算符进行隐式转换。

<script>

        "use strict";

        let str = "123";
        let res = str * 1;
        console.log(res); // 123
        console.log(typeof res); // number

</script>

 

强制转换


  如果一个String即包含数字又包含其他字符,可使用强制转换。

 

方法 说明
parseInt() 提取字符串开始去除空白后的数字转为整数。
parseFloat() 转换字符串为浮点数,忽略字符串前面空白字符。

 

<script>

        "use strict";

        let str = " 123.4这是一个字符串"
        // 强制转换为整数
        console.log(parseInt(str));  // 123
        // 强制转换为小数
        console.log(parseFloat(str));  // 123.4

</script>

 

undefined

  undefined更多代表的是未定义。

 

  第一种情况:定义好变量 但是未进行赋值

<script>

        "use strict";

        let num;
        console.log(num);  // undefined

</script>

 

  第二种情况:函数无返回值

<script>

        "use strict";

        function test() {
                console.log("执行了...");
        };

        let res = test();
        console.log(res);  // undefined

</script>

 

null

  表示未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。    

<script>

        "use strict";

        let n = null;  // null代表未引用任何对象,也就是为被实例化。此时它所属object对象
        let a = [];  // 虽然是一个空数组,但是它是Array的实例对象

        console.log(n);  // null
        console.log(a);  // []

        console.log(typeof n);  // object
        console.log(typeof a);  // object

</script>

 

  ECMA中,认为nullundefined是相等的。

  并且值undefined是值null派生出的。


喜欢 (0)