• 前端笔记之JavaScript(五)关于数组和字符串那点事


    一、数组

    1.1数组概念

    数组(array)是一个有序的数据集合。说白了,数组就是一组数。数组内部可以存放一个或多个单独的数据,整体组成数组。

    定义数组最简单的方式:数组字面量。

    数组的字面量“[]”。习惯将数组赋值给一个变量。

    复制代码
    var arr = [];
    
    var arr = [1,2,3,4,5,6,7,888,999,666];
    arr[5] = 88; //把数组下标为5的项改为88(设置数组中的某一项)
    console.log(arr);
    console.log(arr[0]); //1
    console.log(arr[8]); //999
    console.log(arr[9]); //666
    console.log(arr[12]); //undefined
    复制代码

    数组的字面量就是方括号,这是定义数组最简单的方式,至于更多创建数组的方式,后续会提到。

    里面用“,”逗号隔开每个值,最后一项没有逗号。

    变量arr就是一个数组变量,里面存储的不是一个数字,而是一组数。可以使用下标(编号)或称为“索引值(index)”,来精确访问数组中的某一项,下标从0开始。

    数组中,并不规定保存相同类型的值,但是实际应用中,一般还是将相同类型的值保存在一起。

    下面的数组中,存储的内存类型都不一样,是合法。

    复制代码
    function fn(){
       alert("你好");
    }
    var arr = [3,4,"么么哒!",12,true,[],fn];
    console.log(arr);
    console.log(arr[6]);
    arr[6]();//数组下标为6的项,是以函数,是函数就能运行
    复制代码

     

    1.2数组length属性

    数组有一个length属性,英语是“长度”的意思,表示这个数组的项的个数。

    什么是“属性”,数组是对象,对象就有属性,属性就是描述这个对象的特点、特征、特性。用来表示一个对象的属性,用“.”点来表示一个对象的属性:

     arr.length;

    复制代码
    var arr = [100,200,3,4,5,6,7,888,999,666,12345,3333,7777];
    console.log(arr);
    console.log(arr.length); //12 数组中有几项,就弹出几
    console.log(arr[0] + 1); //数组第0项是100,所以100+1 =101
    console.log(arr[arr.length-1]); //获取数组最后一项,数组最大下标是arr.length-1,比arr.length-1还大是undefined
    
    console.log(arr[100]); //undefined
    arr[4] = "我是下标第4项";
    arr.length = 18; //强行把数组长度属性改为18
    arr[66] = 8989; //可以跳跃设置数组,设置下标为66的项,并拉长了数组
    console.log(arr); 
    复制代码

    写一个小于数组元素的值会缩短数组,写0会彻底清空数组arr.length = 2;那么只会有两项,其余都丢失了

     arr.length = 2;

     arr.length = 100;

    案例:

    用数组判断星期几:

    var arr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
    //假如今天是星期二、判断1000天后是星期几
    var week = (1000 % 7 + 2) % 7;//0~6
    console.log(week);
    console.log(arr[week]);

    随机点名:

    var stuName = ["王大锤","李铁锤","二蛋","二狗子","黑猫","白猫","小丸子"];
    var num = parseInt(Math.random() * stuName.length);
    console.log(stuName[num]);
    document.write('<h1>'+stuName[num]+'</h1>');

    1.3数组的遍历

    数组里面存放的是一组数,我们经常需要对这些数字都进行一些操作。

    就需要用for循环语句来遍历它。这是一个经典的for壳子:

    复制代码
    var arr = [21,214,52,85,88,2,53,77,100,76];
    for(var i = 0;i <= arr.length - 1;i++){
       if(arr[i] % 2 == 0){
           console.log(arr[i]); //取出每一项能整除2的数据,进行输出
       }
    }

    //给数组中的每一项都乘以2,数组遍历,计算后给每一项赋值
    for(var i = 0;i <= arr.length - 1;i++){
       arr[i] *= 2;
    }
    console.log(arr);

    
    
    //数组样本
    var arr = [...];
    //遍历,计算偶数的个数
    //计算平均数,平均数就是:总和/个数
    var count = 0; //累加偶数个数
    var sum = 0; //计算平均数
    for(var i = 0;i < arr.length;i++){
        sum += arr[i]; //计算所有项的总和
        if(arr[i] % 2 == 0){
            count++; //如果是偶数,计数器+1
        }
    }
    alert("偶数的个数是:" + count);
    console.log("平均数是:" + (sum / arr.length));
    复制代码

    1.4数组是引用类型

     var arr = [1,2,3,4];

     console.log(typeof arr); //object

    用typeof arr 检测,会发现数组是Object,数组是对象。

    怎么检测数组是数组呢?高级JS再说。

    基本类型:是保存值,判断时,是判断值是否相等。 

    var a = 1; //基本类型
    var b = a; //会把a的值复制一个副本给b
    console.log(a);//1
    console.log(b);//1
    console.log(a == b);//true,值是相等的

    引用类型:保存内存地址,比较时是判断内存地址是否相等。

    复制代码
    //都是数组[1,2,3,4],内存、长度、项的位置完全一样,但是不相等。
    var a = [1,2,3,4];
    var b = [1,2,3,4]; //因为数组是引用类型,要比较地址,a和b变量指向地址不一样,不能判相等。
    console.log(a == b);//数组中的值一样,但引用类型判断内存地址是否相同,所以是false

    var a = [1,2,3,4];
    var b = a; //b变量引用了a变量的值,所以都指向同一个内存地址
    console.log(a == b);//true
    var a = [1,2,3,4];
    var b = a; //b变量引用了a变量的值,所以都指向同一个内存地址
    b[0] = 88; //修改的是数组b下标为0的项
    console.log(a); //数组a和b下标为0的项都被修改为88
    console.log(b);
    console.log(a == b);//true
    复制代码

    复制代码
    var a = [1,2,3,4];
    var b = a; //b变量引用了a变量的值,所以都指向同一个内存地址
    b[0] = 88; //修改的是数组b下标为0的项
    console.log(a);
    console.log(b);
    b = [6,7,8,9]; //b现在是新的数组(指向了新的内存地址),不再继续影响a
    console.log(a);
    console.log(b);
    console.log(a == b);//false
    复制代码

    基本类型和引用类型讲解:

     

    如果a里面存储的是基本类型,那么b=a就是把a的值复制一份给b

    如果a里面存储的是引用类型,那么b将指向a现在指向的内存地址,a的值不会复制一份,a、b指向同一个内存地址。

    在浏览器加载HTML页面时,首先会开辟一个供js代码执行的环境-->"全局作用域"(window/global)

    栈内存(作用域):存储基本数据类型的值;提供js代码执行的环境;

    堆内存:存储引用数据类型的值,首先会开辟一个新的内存空间,然后把代码存储到这个空间中,最后把空间的地址给相关的变量-->我们把新开辟的这个内存空间称之为"堆内存"。

    堆内存的作用:存储引用数据类型值

     


    二、数组的方法

    数组是对象,现在要知道对象有属性和方法。属性已经介绍了,数组有length属性。

    属性:就是描述对象的特点。比如“性别”,“姓名”,“身高”,“体重”。

    方法:就是对象能执行的事情。比如“吃饭”,“睡觉”,“抠脚打dota”。

    现在就要学习数组能执行什么方法,看以下手册:

     

    2.1数组的头尾操作pop()、push()、shift()、unshift()

    push() 向数组的末尾添加一个或多个元素,并返回新的长度。

    unshift() 向数组的开头添加一个或多个元素,并返回新的长度。

    shift() 删除并返回数组的第一个元素

    pop() 删除并返回数组的最后一个元素

    push()方法,向数组的末尾添加一个或更多元素,并返回新的长度。

     var arr = ['东','南','西','北'];

     arr.push('中','发','白');

     console.log(arr);

    unshift()向数组的开头添加一个或更多元素,并返回新的长度。

     var arr = ['东','南','西','北'];

     arr.unshift('一万','八万','九万');

     console.log(arr);

     

    pop()删除数组的最后一项,只能删最后一项,无法删多项。并返回被删除的元素。

    复制代码
     var arr = ['东','南','西','北'];
    
     var last = arr.pop(); //删除数组的最后一项
    
     console.log(last);    //pop有返回值,返回值就是被删除的那一项
    
     arr.pop();
    
     arr.pop();
    
     console.log(arr);//["东"]
    复制代码

    shift()删除数组的开头项,只能删第一项,无法删多项。并返回被删除的元素

    复制代码
     var arr = ["东","南","西","北"];
    
     var first = arr.shift(); //删除数组的第一项,并返回删除的值
    
     console.log(first); //shift有返回值,返回值就是被删除的那一项
    
     arr.shift();
    
     console.log(arr);
    复制代码

     


    题目1:尾删头插

    复制代码
    var arr = ["东","南","西","北"];
    arr.unshift(arr.pop()); // ["北", "东", "南", "西"]
    console.log(arr);
    arr.unshift(arr.pop()); // ["西", "北", "东", "南"]
    console.log(arr);
    arr.unshift(arr.pop()); // ["南", "西", "北", "东"]
    console.log(arr);
    arr.unshift(arr.pop()); // ["东", "南", "西", "北"]
    console.log(arr);
    arr.unshift(arr.pop()); // ["北", "东", "南", "西"]
    console.log(arr);
    复制代码

    题目2:头删尾插

    复制代码
    var arr = ["东","南","西","北"];
    arr.push(arr.shift()); // ["南", "西", "北", "东"]
    console.log(arr);
    arr.push(arr.shift()); // ["西", "北", "东", "南"]
    console.log(arr);
    arr.push(arr.shift()); // ["北", "东", "南", "西"]
    console.log(arr);
    arr.push(arr.shift()); // ["东", "南", "西", "北"]
    console.log(arr);
    arr.push(arr.shift()); // ["南", "西", "北", "东"]
    console.log(arr);
    复制代码

    2.2数组合并concat()

    concat()合并两个或更多的数组,并返回结果。

    该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

    var arr1 = ["东","南","西","北"];
    var arr2 = ['一条','二条'];
    var arr = arr1.concat(arr2); //concat是把arr1和arr2合并为一个新数组返回
    console.log(arr1);//不变
    console.log(arr2);//不变
    console.log(arr); //合并的新数组

    concat的参数非常灵活,可以是数组变量、数组字面量、散的值也行。

     var arr3 = arr1.concat(arr2,['一筒','五条'],'幺鸡');

     console.log(arr);

     


    2.3数组截取slice()

    slice()方法可以从已有的数组中返回选定的元素。

    arr.slice(start,end)

    参数

    描述

    start

    必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

    end

    可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

    返回值返回一个新的数组,包含从 start 到 end(不包括该元素)的中的元素。

     

     var arr1 = ['东','南','西','北','中','发','白'];

     var arr2 = arr1.slice(1,4); //截取下标1、2、3的为一个新数组并返回

     console.log(arr2);  //["南", "西", "北"]

    arr.slice(start,end) 返回一个新的数组,包含从 start 到 end(不包括该元素)的元素。

    只写start开始参数:

     var arr = ["东","西","南","北","中","发","白"];

     var arr2 = arr.slice(3); //从下标3开始,截取到后面全部的项

     console.log(arr2);   // ["北", "中", "发", "白"]

     

    slice(a,b)取出了b-a项:

    从倒数第4项倒数第2项(不包括倒数第2项)。"白"是倒数第1项。slice(a,b)取出了b-a项

     var arr = ["东","西","南","北","中","发","白"];

     var arr2 = arr.slice(-4,-2); //从下标倒数第四个开始,截取到倒数第二个

     console.log(arr2);   // ["北", "中"]

     var arr = ["东","西","南","北","中","发","白"];

     var arr2 = arr.slice(-4); //从下标倒数第四个开始,截取到后面全部的项

     console.log(arr2);   // ["北","中","发","白"]

     var arr1 = ["东","南","西","北","中","发","白"];

     //var arr2 = arr1.slice(3,1); //顺序错误

     var arr2 = arr1.slice(3,3);   //顺序错误

     console.log(arr2);//[] 空数组


    2.3多功能splice()添加、删除、替换

     array.splice(index,howmany,item1,.....,itemX)

     

    参数

    描述

    index

    必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

    howmany

    必需。要删除的项目数量。如果设置为 0,则不会删除项目。

    item1, ..., itemX

    可选。向数组添加的新项目。

    返回值

    类型

    描述

    Array

    包含被删除项目的新数组,如果有的话。

    说明

    splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从数组对象中删除了元素,则返回的是含有被删除的元素的数组。

    确定一件事:一旦应用,arr立即改变,并不需要重新赋值,换句话说,这个函数不返回新的数组。

    //**************替换一些项**********
    var arr = ["A","B","C","D","E","F","G"];
    arr.splice(3,2,"苹果","香蕉"); //从数组下标3开始,删除两项,改为后替换的内容
    console.log(arr);

    //**************替换一些项**********
    var arr = ["A","B","C","D","E","F","G"];
    arr.splice(3,2,"苹果","香蕉","葡萄","橘子"); //从数组下标3开始,删除两项,插入4项
    console.log(arr);

    // **************更改一些项**********
    var arr = ["A","B","C","D","E","F","G"];
    arr.splice(2,4,"哈哈"); //从数组下标3开始,删除两项,插入1项
    console.log(arr); //["A", "B", "哈哈", "G"]

    // **************更改一个项**********
    var arr = ["A","B","C","D","E","F","G"];
    arr.splice(2,1,"哈哈"); //从数组下标3开始,删除两项,插入1项
    console.log(arr); //["A", "B", "哈哈", "D", "E", "F", "G"]

    //**************删除一些项**********
    var arr = ["A","B","C","D","E","F","G"];
    arr.splice(2,4); //没有东西可以替换,直接删除4项
    console.log(arr); //["A", "B", "G"]

    //**************插入一些项,但不删除**********
    var arr = ["A","B","C","D","E","F","G"];
    arr.splice(2,0,"嘻嘻","哈哈"); //从下标2开始插入2项,不删除
    console.log(arr); //["A", "B", "嘻嘻", "哈哈", "C", "D", "E", "F", "G"]


    splice依据参数的多少,和参数是什么,有多功能。现在你要能反应过来。

    删除数组的最后5项。

     arr.pop();

     arr.pop();

     arr.pop();

     arr.pop();

     arr.pop();

    简化为:

     for(var i = 1 ; i <= 5 ; i++){

      arr.pop();

     }

    也可以:

    var arr = ["A","B","C","D","E","F","G","H","I","J","K","L"];
    //arr.splice(-5);
    arr.splice(-5,5);         
    console.log(arr);    

    2.4倒序reverse();

    reverse()方法就是立即让数组倒置:

    var arr = ["A","B","C","D","E","F","G"];
    arr.reverse();   //不需要赋值
    console.log(arr);  //["G", "F", "E", "D", "C", "B", "A"]


    2.5排序sort()

    sort()方法排序

    var arr = ["G","A","C","B","I","H","G","I","B"];
    arr.sort();
    console.log(arr);

    //sort函数默认是按照字符顺序排的,隐式将数字转为string
    //比字符编码顺序
    var arr = [23,435,456,23,2,345,2,32,11,324,32,43,65,667,78,43];
    arr.sort();
    console.log(arr);

    sort()里面有一个参数,这个参数是一个函数。

    复制代码
    var arr = [41,4,52,64,99,66,88,77,100,412,78,43,2];
    // 升序排序,从小到大
    arr.sort(function(a,b){
        //如果a要放在b前面,那么return负数
        //如果a要放在b后面,那么return正数
        //如果a和b不区分大小,那么return 0
        if(a < b){
            return -1;  //满足第一个条件,返回值是-1,a要排在b前面
        }else if(a > b){
            return 1;   //满足第二个条件,返回值是1,a要排在b后面
        }else if(a == b){
            return 0;
        }
    });
    console.log(arr);
    复制代码

    按五角星的个数排序:

    复制代码
    var arr = ["★★★","★★★★★","★★","★","★★★★","★★★★","★★★★★★"];
    arr.sort(function(a,b){
       // 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
       // 若 a 等于 b,则返回 0。
       // 若 a 大于 b,则返回一个大于 0 的值。
       if(a < b){
           return -1; //满足第一个条件,返回值是-1,a在b前面
       }else if(a > b){
           return 1; //满足第二个条件,返回值是1,a在b后面
       }else if(a == b){
           return 0;
       }
    });
    console.log(arr);
    复制代码


     

    2.6数组分割join()

    join() 方法用于把数组中的值放入一个字符串,并且可以通过指定的分隔符进行分隔的。

    var arr = [1,2,3,4,5,6,7];
    var str = arr.join("★"); //转为字符串用新变量接收
    console.log(str);

    语法:

     var str = arr.join(分隔符);

    如果不写分隔符,默认用逗号分割:

     var arr = [1,2,3,4,5,6,7];

     var str = arr.join();

     console.log(str);

     

    如果是空字符串""就不分割:

     var arr = [1,2,3,4,5,6,7];

     var str = arr.join("");

     console.log(str);

     


    三、字符串的属性和方法

    3.1字符串属性

    属性length就是字符串的长度

    1 var str = "我们都非常喜欢JavaScript!希望能找到能带你*****飞的工作。";

    1 console.log(str.length);

    中文、数字、英语字母、空格、特殊符号,都算1个长度。


     

    3.2字符串方法

    3.2.1 charAt()查找字符串

    返回字符串中指定下标位置的字符,下标从0开始

     //返回字符串中指定下标位置的字符,下标从0开始

     console.log("abcdef".charAt(0)) ;//a

     console.log("abcdef".charAt(2)) ;//a

     "abcdef".charAt(0);  

     "abcdef".charAt(2) ;//c

     和数组下标类似的。

    var str = "abcdefg"
    for(var i = 0 ; i < str.length ; i++){
        console.log(str.charAt(i));
    }

    3.2.2 indexOf()查找字符串下标

    indexOf(检索的字符串,开始检索的位置)

    返回某个指定的字符串值在字符串中首次出现的下标位置(索引值)。

     console.log(str.indexOf("非常喜欢"));

     

    如果要检索的字符串值没有完全匹配的值,则该方法返回 -1。

    console.log(str.indexOf("喜欢呀"));

     


    3.2.3 lastIndexOf()

    该方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

     console.log(str.lastIndexOf("的"));


    3.2.4 replace()替换

    该方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

     "abcdefghijka".replace("a","苹果");//把a替换乘苹果,只替换一个

    把a替换乘苹果,只替换一个。


    3.2.5 split()字符串分割为数组

    方法用于把字符串分割成数组(字符串→数组),从什么地方拆分,就是参数

     "我爱你亲爱祖国人民币".split("的");  

     

     1嘻嘻2嘻嘻3嘻嘻4嘻嘻5嘻嘻6".split("嘻嘻")

     


    3.2.6 substr()提取字符串

    方法可在字符串中抽取从 start 下标开始的指定数目的字符  

    "字符串".substr(start,length)

    start参数:开始下标,可以为正数,也可以为负数,-1最后一个,-2指倒数第二个,以此类推。

    length参数:截取总长度。可以不写,直接截取到最后。

    var str1 = str.substr(4,9); //从下标4开始,截取9个
    var str2 = str.substr(-9,4);//从下标-9开始,截取4个
    var str3 = str.substr(-9); //从下标-9开始,截取到最后
    console.log(str1);
    console.log(str2);
    console.log(str3);


    3.2.7 substring()提取字符串

    方法用于提取字符串中介于两个指定下标之间的字符。

    "字符串".substring(start,end); 不包括end,参数只能是正数,都是索引值。

    截取时,从开始位置截取到结束位置,不包含结束位置。在选择开始位置之前,会先比较以下两个参数的大小,其中小的作为start值,大的作为stop。

    复制代码
    var str = "我们都非常喜欢JavaScript!希望能找到能带你*****飞的工作。";
    var str1 = str.substring(4,9);    //从下标4开始,截取到下标为9的位置(不包括结束)
    // var str2 = str.substring(-9,4);//错误的,不能用负数
    var str3 = str.substring(9,4);    //从下标4开始,截取到下标为9的位置(不包括结束)
    var str4 = str.substring(4);     //从下标4开始,截取到最后
    console.log(str1);
    console.log(str3);
    console.log(str4);
    复制代码


    3.2.8 slice()字符串截取

    方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。(该方法在数组中学习过)

    一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

    复制代码
    var str = "我们都非常喜欢JavaScript!希望能找到能带你*****飞的工作。";
    var str1 = str.slice(4,9);  //从下标4开始,截取到下标为9的位置(不包括结束)
    var str2 = str.slice(-9,-4); //从下标-9开始,截取到下标为-4的位置(不包括结束)
    var str3 = str.slice(3); //从下标3开始,截取到最后
    console.log(str1);
    console.log(str2);
    console.log(str3);
    复制代码

    三种截取方法的相同和不同点:

    参数

    参数正负

    第二个参数

    slice

    正:开始和结束的下标

    负:从后往前数

    两个参数不能颠倒位置

    可以为正,可以为负

    可以不写

    substring

    开始和结束的下标

    两个参数的大小,可以随意互换

    只能是正数

    可以不写

    substr

    第一个参数:是下标或者后面往前的位置

    第二个参数:截取长度

    第一个参数:可以为负或正

    可以不写

    substr和substring不一样:

     "我爱你亲爱的祖国的人民币".substr(6,2); //从下标6开始,截取2个字符

     "我爱你亲爱的祖国的人民币".substring(6,8);//从下标6开始截取到下标8

     


    3.2.9 concat()字符串拼接

    方法用于连接两个或多个数组或字符串。在数组方法中已经学习过。

    //该方法没有改变原有字符串,但是会返回新字符串或数组
    var str1 = "你好";
    var str2 = "世界";
    var str = str1.concat(str2);
    console.log(str);//你好世界

    该方法没有改变原有字符串,但是会返回新字符串或数组。


     

    3.2.10大小写转换方法

    toLowerCase() 方法用于把字符串转换为小写。

    toUpperCase() 方法用于把字符串转换为大写。

    不需要传递参数:将所有字符串中的字母进行大小写的转换

     "abcdefg".toUpperCase()

     "ABCDEFG".toLowerCase()

     

  • 相关阅读:
    2312--1.3.4 Prime Cryptarithm 牛式
    Slava and tanks 877C
    World Cup 996B(排队模拟)
    css内边距 边框
    iframs刷新的两种方法
    JS DOM节点
    JS对话框
    JS事件常用事件
    JS数组
    JS第一天
  • 原文地址:https://www.cnblogs.com/10ve/p/10742585.html
Copyright © 2020-2023  润新知