JS 字符串

程序员文章站 2022-06-08 19:05:48

...

循环遍历数组的方法

 	方法1: 通过for循环,生成所有的索引下标
        /*
            for(var i = 0 ; i <= arr.length-1 ; i++){ 程序内容 }
        */

        方法2: 通过JavaScript程序,给我们提供的方法来实现循环遍历

        // 语法:  
        /*
        
            数组.forEach(function(形参1,形参2,形参3){})
        
            形参1: 存储的是当前循环次数时,获取的单元数据
            参数2: 存储的是当前循环次数时,获取的单元索引下标
            参数3: 存储的是原始数组

            三个形参,不一定都要定义,可以根据实际需求
            
            形参可以任意定义,只要符合命名规范就可以

            forEach() 只能循环遍历数组,不能循环遍历对象

        */  
        /*
            for...in   
            for(var 自定义变量 in 数组){程序}
            
            会将 数组的索引下标,存储在自定义变量中

            通过自定义变量存储的索引,来获取数组的单元数据信息

            只能获取索引,别的不能获取
        
        */

总结

forEach() 专门针对数组的循环遍历
语法形式:
数组.forEach(function(参数1,参数2,参数3){程序})
参数1 : 存储数组单元数据
参数2 : 存储数组单元索引
参数3 : 存储原始数组
参数名称可以任意定义,参数个数,根据需求来定义
for…in 数组,对象都可以使用的循环
语法形式:
for(var 自定义变量 in 数组){程序}
自定义变量 : 存储数组单元索引
存储的索引的数据类型是字符串类型
如果要执行加法运算,需要转化为数值类型
只有for…in需要转化
for循环 forEach()循环 for…in循环
针对数组而言,都可以完成我们的需求
只是针对不同的情况
推荐使用 forEach() 最简单最方便
for循环的优点是,可以控制循环的起始和结束
for…in一般是针对对象的循环
for…in 数组,对象都可以使用的循环遍历

        var arr = ['北京','上海','广州','重庆','天津'];

        /*
            第一次循环,循环对象是 第一个单元 
                val : 存储数据 '北京'   key : 存储索引 0   arr : 存储原始数组
        
            第二次循环,循环对象是 第二个单元 
                val : 存储数据 '上海'   key : 存储索引 1   arr : 存储原始数组

            第三次循环,循环对象是 第三个单元 
                val : 存储数据 '广州'   key : 存储索引 2   arr : 存储原始数组

            第四次循环,循环对象是 第四个单元 
                val : 存储数据 '重庆'   key : 存储索引 3   arr : 存储原始数组

            第五次循环,循环对象是 第五个单元 
                val : 存储数据 '天津'   key : 存储索引 4   arr : 存储原始数组
        */

        // arr.forEach(function(val,key,arr){
        //     console.log(val,key,arr);
        // })


        var arr = ['北京','上海','广州','重庆','天津'];

        for(var key in arr){  // 自定义变量,存储索引 0 1 2 3 4 ....
            console.log(key,arr[key]);   // arr[key] 就是索引对应的数据
        }

数组循环for in

<style>
      table{
          border-collapse: collapse;
      }

      table td{
          border:1px solid #000;
          width: 100px;
          line-height: 40px;
          text-align: center;
          font-size: 30px;
      }
  </style>
</head>
<body>
  <table>
      <thead>
          <tr>
              <td>序号</td>
              <td>姓名</td>
              <td>性别</td>
              <td>年龄</td>
              <td>城市</td>
          </tr>
      </thead>
      <tbody id="tb"></tbody>
  </table>

  <script>    
      var arr = [
          ['张三1' , '男' , 18 , '北京'],
          ['张三2' , '男' , 18 , '北京'],
          ['张三3' , '男' , 18 , '北京'],
          ['张三4' , '男' , 18 , '北京'],
          ['张三5' , '男' , 18 , '北京'],
          ['张三6' , '男' , 18 , '北京']
      ];
      
      setTab();
  
      function setTab(){
          var str = '';
          // val 存储的是 二维数组 ['张三1' , '男' , 18 , '北京']  ['张三2' , '男' , 18 , '北京'] ....
          // key 存储的是 一维索引  0  1  2  3 ....
          //     就相当于for循环中的 i
          arr.forEach(function(val , key){
              str += '<tr>';
              str += `<td>${key+1}</td>`;   //  key+1 就相当于 i+1
              val.forEach(function(v){      //  二维数组的数据 : 张三1  男  18 北京
                  str += `<td>${v}</td>`;   //  v就是二维数组数据,相当于for循环中 $arr[i][j]
              })
              str += '</tr>';
          })

          tb.innerHTML = str;
      }
  
  
  
  </script>
<style>
      table{
          border-collapse: collapse;
      }

      table td{
          border:1px solid #000;
          width: 100px;
          line-height: 40px;
          text-align: center;
          font-size: 30px;
      }
  </style>
</head>
<body>
  <table>
      <thead>
          <tr>
              <td>序号</td>
              <td>姓名</td>
              <td>性别</td>
              <td>年龄</td>
              <td>城市</td>
          </tr>
      </thead>
      <tbody id="tb"></tbody>
  </table>

  <script>
      var arr = [
          ['张三1' , '男' , 18 , '北京'],
          ['张三2' , '男' , 18 , '北京'],
          ['张三3' , '男' , 18 , '北京'],
          ['张三4' , '男' , 18 , '北京'],
          ['张三5' , '男' , 18 , '北京'],
          ['张三6' , '男' , 18 , '北京']
      ];
      console.log(arr);

      setTab();

      function setTab(){
          var str = '';
                               // 这里的key的作用,就是相当于for循环中的i
          for(var key in arr){ // key 存储一维索引   arr[key] 索引对应的二维数组
              str += '<tr>';   
              str += `<td>${ parseInt(key) +1}</td>`;  // key是字符串类型,执行加法是拼接操作, parseInt(key) 获取整数部分,转化为数值类型

              for(var k in arr[key]){                 // 这里的k的作用就相当于 for循环中的j
                  str += `<td>${arr[key][k]}</td>`;   // arr[key][k]  二维数组的索引
              }
              
              str += '</tr>';
          }

          tb.innerHTML = str;
      }

字符串的循环操作

字符串是一个非常神奇的数据类型；字符串,虽然是一种基本数据类型,也没有length属性；但是当我们企图使用 length 和索引下标的方式来操作字符串，也是可以操作的；字符串类型,也称作包装数据类型；在操作时,会给自己包装成一个伪数组的形式；支持 length 和索引下标的操作,但是一些数组的操作方法,不支持；不支持, forEach() 方法循环遍历字符串。

    var str= 'abcdefg';
    console.log(str);
    console.log(str[0]);  // 字符串中索引下标是0,实际是第一个字符
    console.log(str.length);  //  获取字符串的长度,也就是字符个数
    str.length = 2;       // 不能通过设定length属性来设定字符串串度
    console.log(str);     // 输出,字符串没有变化

    // 使用for循环,生成字符串所有的所有索引下标
    // 通过索引下标,获取对应的字符
    for(var i = 0 ; i <= str.length-1 ; i++){
        console.log(str[i]);
    }

    // 使用for...in方法循环遍历字符串
    // 自定义变量key中 存储的是 str 字符串的索引下标
    // str[key] 就是索引下标对应的字符
    for(var key in str){
        console.log(str[key]);
    }

    // 字符串是伪数组,不支持forEach() 方法循环遍历,会报错
    str.forEach(function(val){
        console.log(val);
    })

变量.toString()

将数据类型强制转化为字符串
参数是转化的进制

    var int = 100;
    // console.log( int.toString(8) );

    // 数组的扁平化
    // 将多维数组,转化为一维数组
    var arr = [1,2,3,4,5,[6,7,8,9,10,[11,12,13,[14,15,16]]]];
    // console.log(arr);

    // 获取数组中数值的内容,以逗号间隔
    var str = arr.toString();
    // console.log(str);

    // 再将字符串转成数组
    var newArr = str.split(',');
    // console.log(newArr);

    // 转化之后的所有数据类型,都是字符串
    // 而且还不能转换话存储对象,函数的数组
    // 要完美转化,我们之后有其他方法学习,先记住这种粗糙的方式

变量.indexOf() — 字符首次出现的位置

查找数组或者字符串中是否有某个数值后者某个字母
如果有这个内容,返回值是这个内容的索引下标
如果没有这个数据,返回值是 -1
这里执行的是 === 全等比较

        var arr = ['北京','上海','广州',1,2,3,4,5];
        // console.log( arr.indexOf('广州') );
        // console.log( arr.indexOf(5) );
        // console.log( arr.indexOf(500) );
        // console.log( arr.indexOf('5') );

lastIndexOf() — 字符最后一次出现的位置

数组,字符串都可以使用
有符合条件的数据,执行结果是最后一次出现位置的索引下标
没有符合条件的数据,执行结果是-1
进行的也是 === 全等比较

    var arr1 = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];
    // console.log(arr1);
    // console.log( arr1.indexOf(5) );
    // console.log( arr1.lastIndexOf(5) );
    // console.log( arr1.lastIndexOf('5') );

所有字符大写,所有字符小写

不会改变字符串存储的原始内容,如果需要改变,要做赋值操作
字符串.toUpperCase() 字符串中所有字符大写
字符串.toLowerCase() 字符串中所有字符小写

    // 做字符串判断时,有时需要先统一大小写
    var str1 = 'hello word';
    // 将函数值操作的返回值,赋值给变量
    // str1 = str1.toUpperCase();
    // console.log(str1);
    var str2 = 'HELLO WORD';
    str2 = str2.toLowerCase();
    // console.log(str2);
    // 获取指定位置的字符
    // 字符串.charAt()
    // []语法也可以达到效果

    var str3 = 'abcdefg';
    // console.log( str3.charAt(0) );

    // 获取指定位置的字符的编码数值
    // 字符串.charCodeAt()
    // 返回字符在ASCII码表中的数值
    // 范围是 0-255 一共 256 个字符
    // console.log( str3.charCodeAt(0) );

字符串.substring()

字符串截取:从原始字符串(母串)中,截取一部分字符串(子串)
参数1: 截取起始字符的索引下标
参数2: 截取结束字符的索引下标
定义1个参数: 从指定的索引位置开始,截取至字符串的结尾
定义2个参数: 从指定的索引位置开始,截取至指定的结束位置索引
包含起始索引,不包含结束索引
两个参数相同,结果是空字符串
如果是第1个数值小,第2个数值大,是向字符串结尾截取
如果是第1个数值大,第2个数值小,是向字符串起始截取
第一个参数是负数,相当于从字符串的起始位置开始截取
第二个参数是负数,相当于从指定的位置开始,向前截取,截取到字符串的起始字符串
不包括起始字符
一般使用就是定义两个正数的参数

    var str4 = 'abcdefghijklmn';
    // 从索引下标是4,实际是第5个字符开始截取,到字符串的结尾
    // console.log( str4.substring(4) );

    // 从索引是4,实际是第五个字符开始截取
    // 截取至索引是5,实际是第六个字符结束
    // 包裹索引是4的字符,不包括索引是5的字符
    // console.log( str4.substring(4 , 5) );

    // 从索引是4的位置开始,向索引是0的位置截取
    // 此时,不会包括4索引的字符,会包括0索引的字符
    // console.log( str4.substring(4 , 0) );

    // 第一个参数是负数,效果是从字符串起始位置开始截取
    // console.log( str4.substring(-4) );

    // 第二个参数是负数,效果是从指定位置开始,向字符串的起始位置截取
    // 截取至字符串的第一个字符
    // 不包含指定位置的字符串
    // 指定索引是3,向字符串起始位置截取
    // 结果是 索引是2的字符,至起始第一个字符
    // console.log( str4.substring(3 , -6) );

substr()

从母串中截取子串
参数1: 指定截取的起始位置
参数2: 指定截取的字符个数
语法1:只定义一个参数.从指定位置开始,截取至字符串结尾
语法2:定义两个参数.从指定位置开始,截取指定个数的字符
语法3:第一个参数是负数,指定起始位置是倒数第几个字符

    // var str5 = 'abcdefghijklmn';
    // 从索引是3,也就是第四个字符开始,截取至字符串结尾
    // console.log( str5.substr( 3 ) );

    // 从索引是3,也就是第四个字符开始,截取3个字符
    // console.log( str5.substr( 3 , 3 ) );

    // 从倒数第三个字符开始截取,截取至字符串结尾
    // console.log( str5.substr( -3 ) );

    // 从倒数第三个字符开始截取,截取两个字符
    // console.log( str5.substr( -3 , 2 ) );

    // 第二个参数是负数,结果是空字符串
    // console.log( str5.substr( 3 , -2 ) );

字符串.split()

将字符串按照指定的字符,切割成数组
可以用来删除字符串中的关键词

字符串.replace()

字符串内容替换函数
将制定的字符串内容,替换为新的内容
第一个参数:字符串原有的,要替换没的
第二个参数:字符串没有的,要新替换进来的
默认只能执行一次替换,要替换所有符合的内容,必须要配合正则表达式

    var str6 = '北京卧槽今天卧槽的天气卧槽有点热';
    // 将关键词替换为 ** 只能替换第一个符合的内容
    str6 = str6.replace('卧槽' , '**');
    console.log(str6);

数组去重 / 字符串去除重复字母

    // 数组中存储重复的数值
    // 去除重复数值之后,应该是 [1,2,3,4,5]
    var arr = [1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,4,4,4,4,5,5,5,5,5]

    // 基本思路1 indexOf()
    // 建立一个新的数组,将原始数值中的数值,向新的数组中写入
    // 如果这个数值不存在于新的数组中,就执行写入,如果已经存在,就不写入

    // 建立一个空数组,来存储原始数组中,不重复数据
    var newArr = [];

    // 循环遍历,获取原始数组arr中的所有数值
    arr.forEach(function(v){

        // 在新数组中,查找当前获取的原始数组的数值
        // newArr.indexOf(v) 执行结果如果是 -1
        // 证明在新数组中,没有这个原始数组的数据
        if(newArr.indexOf(v) === -1){
            // 将这个数据,写入到新数组中
            newArr.push(v)
        }
    })

    console.log( newArr );

    var str = 'aaabbbbcccddddeeeeefffff';

    // 原理相同,只是字符串不能使用forEach()循环

    var newStr = '';

    // 通过for...in来循环遍历,字符串
    // key存储的是每个字母的索引下标
    for(var key in str){
        // str[key] 是 当前循环,获取的索引下标,对应的字符串中的字母
        // newStr.indexOf(str[key]) 判断 新字符串中,是否有当前这个字母
        // 如果结果是 -1 证明新字符串中没有这个字母
        if(newStr.indexOf(str[key]) === -1){
            // 执行字符串拼接操作,将这个字母拼接入新的字符串中
            newStr += str[key];
        }
    }

    console.log(newStr);

截取扩展名

文件名称由两部分组成,
文件名.扩展名
在执行一些操作时,要判断文件类型是否符合规定的类型
例如上传图片,经常要求必须是 jpg 类型的图片
就需要获取文件名称中的扩展名来进行判断

文件名是任意的名称形式可以是 123.456.7989.jpg 123.456.7989.html
我们无法确定,扩展名具体的字符个数; 只能确定是文件名中最后一个点之后的内容,一定是扩展名; 需要截取的是最后一个点之后的内容。

    var fileName = '123.456.abc.jpg';

    // 找到最后一个点的位置 --- lastIndexOf()
    // 执行结果是 最后一个点的索引下标
    // 实际需求的是,点之后的内容,不包括点
    // 实际截取扩展名的起始字符索引,是 点索引+1
    
    // var num = fileName.lastIndexOf('.') ;
    // console.log(num);

    // 从这个位置开始,截取至字符串的尾部
    // 要截取至字符串末位,只需要定义一个起始字符的索引下标
    // substring substr  效果相同,爱用哪个用那个
    
    // var res = fileName.substr(num+1);

    // 可以写成一行代码
    var res = fileName.substr( fileName.lastIndexOf('.') +1);

    console.log(res);

	 // 输入的字符串中,没有关键词和敏感词
    // 例如 卧槽  这样的关键词会被屏蔽为 **

    var str = '北京卧槽今天卧槽的天气卧槽有点热';

    // 思路:
    // 1,以关键词为间隔符号,将字符串切割为数组
    // 新数组的单元,是没有关键词的
    // 2,将数组再拼接成字符串,以 ** 为间隔符号


    var arr = str.split('卧槽');
    // 数组单元中,数据就没有  卧槽  关键词了
    console.log(arr);

    // 用 ** 作为拼接字符串的间隔符号
    // 效果就是将 关键词 替换为 **
    var newStr = arr.join('**');
    console.log(newStr);

JS 字符串

JS 字符串

数组循环for in

字符串的循环操作

变量.toString()

变量.indexOf() — 字符首次出现的位置

lastIndexOf() — 字符最后一次出现的位置

所有字符大写,所有字符小写

字符串.substring()

substr()

字符串.split()

字符串.replace()

数组去重 / 字符串去除重复字母

截取扩展名

Nginx if语句加正则表达式实现字符串截断

用在PHP里的JS打印函数

Nginx+SSL+Node.js运行环境配置教程

js init : function ()

JS计算两个数组的交集、差集、并集、补集（多种实现方式）

JS求1到任意数之间的所有质数的方法详解

用原生JS写省市二级联动

如何取得中文字符串中出现次数最多的子串

JS实现选项卡效果的代码实例

js特效教程（javascript特效代码大全）