JS总结:数组 字符串 对象



JS总结:数组 字符串 对象

JS中的数据分类:

            1)基本数据类型  数据存储在栈区

                number, string, boolean, und, null

            2)引用数据类型  数据存储在堆区(引用地址在栈区)

                array(数组), function(函数), object(对象),、date、regexp等

        引用类型数据栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。

array中可以装大量数量,能装大量数据的,叫容器。

在JS中,除了数组容器之外,还有对象容器。

一、数组

1 数组介绍

       变量中存储一个数据,数组中可以存储一堆数据。

1.1 数组数据类型:

            也是JS中的一种数据类型,是引用数据类型,数据是存储在堆区的。

            数组中每一个数据,都有对应的编号,这个编号叫索引,也叫下标。下标默认是从0开始的。

            可以通过索引或下标操作数组中的某个数据。

            操作: 查看,添加,修改,删除   说到操作,你就是要想到增删改查(CRUD)

1.2 创建一个数组:

            1)通过字面量的形式创建数组

                var arr = [1,"a",123,true,und,888]; // []表示一个数组   arr是变量

                在[]中就可以写一堆的数据。

            2)通过构建器(当成java中的类)来创建一个数组

                JS内部帮我们提供了一个构造函数,也叫类   Array

                // arr是对象   放到JS高级中讲

                var arr = new Array(); // Array是类   new一个类,就得到一个对象

    <script>
        //   创建数组时,直接添加数据:
        //     1)如果是字面量的形式创建,数据直接写在[]中,数据和数据之间使用逗号隔开。
        //     2)如果使用new 类的形式创建,在new时,可以给Array中传递数据。
        //         在Array中写多个数据。
        // 1)通过字面量的形式创建数组
        // 1这个数据的下标是   0
        // "a"这个数据的下标是 1
        // 2这个数据的下标是   2
        // .....
        var arr1 = [1,"a",2,"b",true,undefined];
        // 2)通过构建器(当成java中的类)来创建一个数组
        // 10不是代表10这个数据,代表是这个数组中可以放10个元素(数据)
        var arr = new Array(10);
        // length代表数据中的长度
        // arr是对象 对象中有很多属性或方法  通过打点,就可以调用这个属性或方法
        // console.log(arr.length);
        // a,b,c就代表数组中的三个数据
        let arr2 = new Array("a","b","c")
        console.log(arr2.length);

    </script>

2 操作数组:

2.1 数组中有一个length属性   表示数组的一个长度。length属性可读可写。

                读:获取数组的长度

                写:设置数组的长度

                    当我们设置的比本身长度小,那么就相当于删除

                    当我们设置的比本身长度大,那么多出来的就是空补齐

2.2 数组索引操作

                默认情况下,数组中的每一个元素都索引,从0开始,依次+1。最后一个元素的索引是lenght-1。

                索引也是一个可读可写的属性:

                    读:读取的是指定索引位置的数据

                     => 如果数组确实有这个索引,那么就是这个位置的数据

                     => 如果数组没有这个索引位置,那么就是und

                    写:设置指定索引位置的数据

                     => 如果有这个索引位置,那么就给这个索引位置重新设置数据

                     => 如果这个索引位置不存在,那么就是添加一个新数据

2.3 数组的遍历

                所谓的遍历就是指把数据中的每一个元素都取出来的。

                使用for循环进行遍历,除了for循环,还有其它方案,后面说。

2.4 数据中其它的操作(一堆方法)

                push()
                    => 语法:数组.push(数据1,数据2,数据3...)
                    => 作用:把新的数据,追加到数组的末尾位置
                    => 返回值:新数组的长度
                    => 影响原数组
                
                pop()
                    => 语法:数组.pop()
                    => 作用:删除数组中最后一个数据
                    => 返回值:被删除的数据
                    => 影响原数组

                unshift()
                    => 语法:数组.unshift(数据1,数据2,数据3...)
                    => 作用:把新的数据,插入到数组的前面位置
                    => 返回值:新数组的长度
                    => 影响原数组
                
                shift()
                    => 语法:数组.shift()
                    => 作用:删除数组中第一个数据
                    => 返回值:被删除的数据
                    => 影响原数组

                reverse()
                    => 语法:数组.reverse()
                    => 作用:方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个
                    => 返回值:返回该数组
                    => 影响原数组
                
                sort()
                    => 语法:数组.sort()
                    => 作用:对数组的元素进行排序,并返回数组。
                    => 返回值:返回数组
                    => 影响原数组
                
                splice()
                    => 语法:数组.splice(开始索引,多少个)
                    => 作用:删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
                    =>   1)截取数组    2)替换新内容
                    =>    截取:  数组.splice(开始索引,多少个)  如果第2个参数不写,默认就截取到最后
                    =>    替换新内容: 数组.splice(开始索引,多少个,替换数据1,替换数据2....)
                    =>       把替换数据按照顺序插入到你截取的位置
                    => 返回值:返回一个数组
                    => 影响原数组
                
                concat();
                     => 语法:数组.concat(数组1,数组2...)
                     => 作用:合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
                     => 不会影响原数组

二、字符串

1 字符串创建

1.1 通过字面量的形式创建字符串  用的比较多

                var str = "hello"   使用双引号包起来

                var str = 'hello'   使用单引号包起来

1.2 new 一个类创建一个字符串

                var str = new String("hello");

            区别:

                在控制器打印时有区域,使用起来没什么区别

2 字符串本身也是对象:

            str.length  获取字符串中共多少个字符

3 字符串的操作:

            1)获取字符串长度(符串中共多少个字符)  str.length   空格也是一个字符

               length是只读,只能获取,不能设置

            2)字符串也是有索引的,索引也是从0开始,可以通过索引来获取某个字符,但是不能设置

            3)字符串也可以遍历(取出字符串每一个字符)

    <script>
        var str = "hello world~";
        console.log(str);
        // 通过某个索引来获取某个字符
        // console.log(str[0]);
        // console.log(str[6]);

        for(var i=0; i<str.length; i++){
            console.log(str[i]);
        }
    </script>

4 模板字符串

        模板字符串:

            使用的是反引号:``  可以把一个字符串放到一个反引号中。

            ES6中的语法。  ES6也叫ES2015

    <script>
        var name = "wangcai";
        var age = 20;

        // name+"今年"+age 叫字符串拼接
        var str = name+"今年"+age;   // "name 今年 age "
        console.log(str);
    </script>

    <script>
        var name = `xiaoqiang`;  // `xiaoqiang`也表示一个字符串
        var age = 110;

        // 在``中可以写${}  {}中可以写变量
        var str = `${name}今年${age}`;  // `${name}今年${age}`也是字符串
        console.log(str);

        var str2 = `${ 110 * 2 }~~~~~~~~~~~`;
        console.log(str2);
    </script>

5 字符串中的方法

    <script>
        // charAt:从一个字符串中返回指定的字符
        var str = "hello world~";
        let res = str.charAt(3)
        console.log(res);
        // charCodeAt:方法返回 0 到 65535 之间的整数,表示给定索引处的 UTF-16 代码单元
        var str = "hello world~";
        var str = "中国"
        let res = str.charCodeAt(0);
        console.log(res);
        // substr:方法返回一个字符串中从指定位置开始到指定字符数的字符
        var str = "hello world~";
        console.log(str.substr(1,2));
        // substring: 方法返回一个字符串在开始索引到结束索引之间的一个子集
        var str = "hello world~";
        包前不包后
        console.log(str.substring(2,4));

        var str = "hello word";
        console.log(str.toUpperCase());
        var str2 = "AAABBB";
        console.log(str2.toLowerCase());
    </script>

6 练习字符串

     <script>
        // 关键字隐藏
        // fsadfasMMdrwqlkMMjfsavnasrnMMvasdfMMsdrwe
        // 需求是把MM替换成 **

        let str = "fsadfasMMdrwqlkMMjfsavnasrnMMvasdfMMsdrwe";
        while( str.indexOf("MM") !== -1 ){//: indexOf()返回某个指定字符在字符串中首次出现处的索引,如果此字符串中没有这样的字符,则返回 -1。
            str = str.replace("MM","**")
        }
        // console.log(str);

        let str = "fsadfasMMdrwqlkMMjfsavnasrnMMvasdfMMsdrwe";
        // split 把一个字符串转成数组
        // join 把一个数组转成字符串
        console.log(str.split("MM").join("**"));
    </script>

split() 方法用于把一个字符串分割成字符串数组。

如果您希望把单词分割为字母,或者把字符串分割为字符,可使用下面的代码:
"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]
若只需要返回一部分字符,请使用 howmany 参数:
"hello".split("", 3)	//可返回 ["h", "e", "l"]

join() 方法用于把数组中的所有元素放入一个字符串。

arr.join("*")

返回一个字符串。该字符串是通过把 arr的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入* 字符串而生成的。

三、对象

1 类和对象:

            类是对对象的抽象。

            对象是一个具体的事物。

            var obj = {

                name:"wc",

                age:100

            }

2 对象数据类型:

            创建一个对象也有两种方式:

                1)字面量创建   var obj = {}   一个{}在JS中就表示一个对象

                2)new Object也可以创建  var obj = new Object();   Object在构造器,在其它语言叫类

    

    <script>
        // 字面量创建  用的比较多
        // 在JS中,对象是属性的无序集合
        // 集合:容器  放大量的数据
        // 无序:属性是无序
        var obj1 = {
            name:"wc",  // name:"wc"叫属性  name叫属性名  "wc"叫属性值  键值对  
            age:100,
            score:88,
            address:"bj"
        }
        // .属性访问运算符  
        // 就是用来访问一个对象上面的属性的  str.length   arr.push
        console.log(obj1.name);
        // new Object也可以创建
        // var obj2 = new Object()
    </script>

3 对象的操作

        点语法: .叫属性访问运算符  用的最多的

            增:  对象名.属性名 = 属性值

            删: delete 对象名.属性名   delete是用来删除一个对象中的属性的  deltet是运算符

            改: 对象名.属性名 = 新的属性值

            查: 对象名.属性名  如果去获取一个属性,但是这个属性没有,得到undefined

        []语法:  看到[],先想到数组,但是在对象中也可以使用[]

            增: 对象名["属性名"] = 属性值

            删: delete 对象名["属性名"]

            改: 对象名["属性名"] = 新的属性值

            查: 对象名["属性名"]

<script>
        var obj = { name: "wc", age: 100 }
        console.log(obj.name);
        console.log(obj["name"]);
        // a是一个变量  变量的值是一个字符串
        var a = "name";
        // 要求,需要通过a访问对象中的属性
        console.log(obj.a); // 表示访问obj对象中的a属性(输出undefined访问失败)
        console.log(obj[a]);//访问成功
        // 两种方式的区别
    </script>
    如果对象的键存储在一个变量中,要通过这个变量去访问属性,此时只能使用[]语法, 不能使用.语法
    键值,键就是属性名,值就是内容。
    <script>
        // 对象的遍历
        var oo = new Object();//创建对象
        var oo = {};//创建对象
        oo.name = "康";//增
        oo["sex"] = "男";//增
        delete oo.name;//删
        delete oo["sex"];//删
        oo.name = "孔";//改
        oo["sex"] = "女";//改
        console.log(oo.name);//查(表示访问oo对象中的name属性)
        console.log(oo["sex"]);//查
        console.log(oo);
        var obj = { name: "wc", age: 100, score: 88, address: "bj" }
        // obj中没有length
        // console.log(obj.length);

        // 不能使用for循环遍历对象
        // 在JS中可以使用for in对对象进行遍历
        console.log(obj);
        for (var key in obj) {
            console.log(key, obj[key]);//key是属性名;obj[key]是key对应的值
        }
    </script>

4 对象练习题

判断字符串str内字符频率,并把最多的输出,如果一样多,都要找出来

    <script>
        // 判断字符串str内字符频率,并把最多的输出,如果一样多,都要找出来
        var str = "aaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbcccccccccccccccccdsfasdf";
        let obj = {}; // 空对象

        for(var i=0; i<str.length; i++){
            var s = str[i];
            if(obj[s]){//如果属性名(重复)新增
                obj[s]++;//属性值加1
            }else{
                obj[s] = 1;  // {b:1,e:1,f:1,a:1,s:1,d:1}(属性名:属性值)
            }
        }
        console.log(obj);//

        var max = 0; 
        var char = "";//创建字符串
        for (var key in obj) {//for in对对象进行遍历

            if(obj[key] === max){
                char += " "+key//这里加的每一个key是循环判定和max相同的值的属性名;(是下次循环相等的值)
            }
            if(obj[key] > max){
                max = obj[key];//给max赋值最大的对象
                char = key;
            }
        }
        console.log(char,max);
    </script>

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值