JavaScript简单类型和复杂类型

WangZhang_521

已于 2022-03-06 18:52:34 修改

阅读量409

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-02-24 23:03:20 首次发布

本文链接：https://blog.csdn.net/WangZhang_521/article/details/123121530

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

01-基本包装类型

<!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>基本包装类型</title>
    <script>
        var str = 'andy'; //声明一个字符串变量 简单的数据类型
        console.log(str.length); //4
        //对象才有属性和方法 复杂数据类型才有属性和方法
        //简单数据类型为什么会有length属性呢
        // 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String Number Boolean(三种基本数据类型)
        // 基本包装类型：就是将简单数据类型包装成了复杂数据类型，这样基本数据类型就有了方法和属性

        //相当于执行了以下代码

        //(1)将简单数据类型包装成复杂数据类型
        var temp = new String('andy'); //带new的都是复杂数据类型
        //(2)把临时变量的值给str
        str = temp;
        //(3)销毁这个临时变量
        temp = null;
    </script>
</head>

<body>

</body>

</html>

02-字符串不可变性

<!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>字符串不可变性</title>
    <script>
        //1.字符串的不可变指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间,原有的内存空间继续保留
        var str = 'andy';
        console.log(str);
        str = 'red';
        console.log(str);
        //因为我们字符串的不可变，所以不要大量拼接字符串  反复拼接，反复开辟新的空间，比较占内存资源，会导致电脑卡顿
        var str = '';
        for (var i = 0; i <= 10; i++) {
            str = str + i;
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

03-字符串对象-根据字符返回位置

<!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>字符串对象-根据字符返回位置</title>
    <script>
        //字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串
        //字符串对象 根据字符返回位置 str.indexOf('要查找的字符'，[起始的位置]) []表示里面的内容可有可没有
        var str = '改革春风吹满地,春天来了';
        console.log(str.indexOf('春')); //2
        console.log(str.indexOf('春', 3)); //从索引号是3的位置开始往后查找 结果是8
    </script>
</head>

<body>

</body>

</html>

04-返回字符位置案例

<!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>返回字符位置案例</title>
    <script>
        //查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数 (经典面试题)
        // 案例分析：
        // (1)核心算法：先查找第一个o出现的位置
        // (2)然后只要indexOf()返回的结果不是-1,就继续往后查找
        // (3)因为indexOf()只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
        var str = "abcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0; //次数
        //console.log(index); 3 此时index=3
        while (index !== -1) {
            console.log(index); //3
            num++;
            index = str.indexOf('o', index + 1); //然后从4开始查找
        }
        console.log('0出现的次数是:' + num);
    </script>
</head>

<body>

</body>

</html>

05-根据位置返回字符(重点)

<!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>根据位置返回字符(重点)</title>
    <script>
        // 方式一 charAt(index) 根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3)); //y
        //遍历所有的字符
        for (i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        // 方式二 charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下了哪个键
        console.log(str.charCodeAt(0)); //97 对应的是小写的a

        // 方式三 str[index] H5新增的 有兼容性问题
        console.log(str[0]); //a
    </script>
</head>

<body>

</body>

</html>

06-统计出现次数最多的字符和次数(重重难点)

<!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>统计出现次数最多的字符和次数(重重难点)</title>
    <script>
        //有一个对象  通过此方法 对象['属性名'] 可以判断对象里面有没有该属性
        var o = {
            age: 18
        }

        console.log(o['age']); // 属性值，输出18
        if (o['sex']) {
            console.log('里面有该属性');
        } else {
            console.log('没有该属性');
        }
        // 案例:判断一个字符串 "abcoefoxyozzopp"中出现次数最多的字符，并统计其次数
        // o.a=1
        // o.b=1   
        // o.c=1   
        // o.o=4

        // 案例分析：(1)核心算法：利用charAt()遍历这个字符串
        // (2)把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
        // (3)遍历对象，得到最大值和该字符
        var str = "abcoefoxyozzopp";
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); //chars是字符串的每一个字符
            if (o[chars]) { //o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        //遍历对象 
        var max = 0;
        var ch = '';
        for (var k in o) { //循环对象o得到每个属性，下边可以根据属性得到属性值
            //k得到的是属性名
            //o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>
</head>

<body>

</body>

</html>

07-拼接以及字符串截取(字符串操作方法)

<!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>拼接以及字符串截取(字符串操作方法)</title>
    <script>
        // (字符串操作方法) 重点
        // 1.concat('字符串1','字符串2'....)    连接两个或多个字符串  拼接字符串 等效于+ +更常用
        var str = 'andy';
        console.log(str.concat('red'));
        // 2.substr('截取的起始位置','截取几个字符串');
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); //第一个2是索引号的2，从第几个开始    第二个2是取几个字符串
        // 3.slice(start,end) 从start开始，截取到end位置，end取不到  start,end都是索引号
        console.log(str1.slice(2, 5));
        // 4.substring(start,end) 从start开始，截取到end位置，end取不到 基本和slice相同 但不接受负值
        console.log(str1.substring(2, 6));
    </script>
    <script>
    </script>
</head>

<body>

</body>

</html>

08-替换字符串以及转换为数组

<!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>替换字符串以及转换为数组</title>
    <script>
        //1. 替换字符 replace('被替换的字符','替换为的字符') 只替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));
        // 有一个字符串'abcoefoxyozzopp' 要求把里面所有的o替换为*
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);

        //2. 字符转换为数组 split('分隔符') 前面学过join 把数组转换为字符串
        var str2 = 'red,pink,blue';
        console.log(str2.split(',')); // ['red', 'pink', 'blue']
        var str3 = 'red&pink&blue';
        console.log(str3.split('&')); // ['red', 'pink', 'blue']

        //3.toUpperCase() 返回转为大写形式的字符串。此方法不会影响原字符串本身的值，因为JavaScript中字符串的值是不可改变的。
        var str4 = 'abcdfh';
        console.log(str4.toUpperCase()); //  ABCDFH   ()里不需要参数

        //4.toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回。
        str5 = 'ABDSHKJKLNL';
        console.log(str5.toLowerCase()); //abdshkjklnl
    </script>
</head>

<body>

</body>

</html>

09-简单数据类型和复杂数据类型

<!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>简单数据类型和复杂数据类型</title>
    <script>
        // 1.简单数据类型又叫基本数据类型或者值类型，复杂数据类型又叫引用类型
        //值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
        //如 string 字符串型 number数字型 boolean 布尔值 undefined null
        // 特殊简单数据类型 null 返回的是一个空的对象object
        var timer = null;
        console.log(typeof timer);
        // 如果有个变量以后打算存储为对象，暂时没想好放啥， 这个时候就给null

        // 2.引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
        // 通过new关键字创建的对象（系统对象，自定义对象），如 Object对象 Array数组 Date日期对象

        // 3.堆栈空间分配区别：
        // 1.栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放在栈里面
        // 2.堆（操作系统）：存储复杂数据类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面
        // 注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言

        // 4.数据类型的内存分配
        // (1) 值类型（简单数据类型）变量的数据直接存放在变量（栈空间中），里面直接开辟一个空间存放的是值
        // (2) 复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

10-简单数据类型传参

<!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>简单数据类型传参</title>
    <script>
        //函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部的变量
        function fn(a) {
            a++;
            console.log(a); //11
        }
        var x = 10;
        fn(x);
        console.log(x); //10
    </script>
</head>

<body>

</body>

</html>

11-复杂数据类型传参

<!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>复杂数据类型传参</title>
    <script>
        // 函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象
        function Person(name) {
            this.name = name;
        }

        function f1(x) { //x=p
            console.log(x.name); //2.这个输出什么? 刘德华
            x.name = '张学友';
            console.log(x.name); //3.这个输出什么? 张学友
        }
        var p = new Person('刘德华');
        console.log(p.name); //1.这个输出什么? 刘德华
        f1(p);
        console.log(p.name); //4.这个输出什么? 张学友
    </script>
</head>

<body>

</body>

</html>

WangZhang_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单类型和复杂类型

01-基本包装类型<!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"> <t
复制链接

扫一扫

专栏目录