字符串与数组

我爱学习1234

已于 2023-07-25 10:59:38 修改

阅读量1k

点赞数

文章标签： html 前端

于 2023-04-07 18:44:35 首次发布

本文链接：https://blog.csdn.net/weixin_46684391/article/details/130005028

版权

1. 字符串

1.1 包装对象

点语法只有引用数据可以使用。基本数据调用点语法时，有一个隐式操作，将基本数据转化成对象。字符串的所有方法，都保存在String.prototype中，所以可以用点语法。

例：var re=str.toUpperCase隐式操作是new String(str).toUpperCase，也就是把string包装成一个对象。

案例：

        var str="hello";
        str.x=100;   //系统自动隐式转换，创建对象
        console.log(str.x);//打印undefined

        var str2=new String();//手动创建对象
        str2.x=90;
        console.log(str2.x); //打印90

        function Person(){

        };
        var p1=new Person();
        var p2=new Person();
        console.log(p1==p2);//false
        //p1和p2是两个不同的对象，只是它们的原型对象一样

1.2 常用方法：参考W3C

1. 转大写：str.toUpperCase()

2. 转小写：str.toLowerCase()

3. 取单个字符：str[0];当数组来取，通过下标来取

str.charAt(0)

4. str.trim()：去掉前导空格和后导空格

5. 取编码：str.charCodeAt(下标) a:97 A:65

案例：

        var str="afdQHbdAx";
        function fn(str){
            var str2="";
            for(var i=0;i<str.length;i++){
                if(str[i].charCodeAt(0)>=97){
                    str2+=str[i].toUpperCase()
                }
                else{
                    str2+=str[i].toLowerCase()
                }
            }
            return str2;
        }
        var a = fn(str);
        console.log(a);   //AFDqhBDaX

字符串的截取
1. str.substring(start:number , end?:number) ?可选，可写可不写
  
  end默认为到最后一个字符
  
  包含start，不包含end；取非负数；取负数仍然是从第一个开始截取

两个参数可交换位置；

2. str.substr(from:number , length?:number)

length：默认为到最后一个字符

from：为正，包含；为负，从后往前数第几个开始截取

包含length；取非负数；

两个参数不能交换位置

3. str.slice(start?:number , end?:number)

包含start，不包含end，均可正可负

两个参数不能交换位置，字符串只能从左往右截取

4. str.split("-")。以-为分界线来剪切。str.split(" ")，将字符串转换成数组

案例：

      var str="dgs-dv-wfs-cxzzdf-w";
        var arr=str.split("-");
        console.log(arr)  //['dgs', 'dv', 'wfs', 'cxzzdf', 'w']

经典笔试题：把当前页面地址中的url的参数转化为obj对象

var str ="http://www.hqyj.com/index.html?uid=123&page=12&dt=04071826&name=jcm";
function fn(str) {
    var arr1 = str.split("?");
    var arr2 = arr1[1].split("&"); //["uid=123","page=12","dt=04071826","name=jcm"]
    var obj = {};
    for (var i = 0; i < arr2.length; i++) {
       var arr3 = arr2[i].split("="); //第一次分割成["uid","123"]  第二次分割成["page","12"]
       obj[arr3[0]] = arr3[1];
       }
       return obj;
     }
var urlobj = fn(str); 
console.log(urlobj); //{uid: '123', page: '12', dt: '04071826', name: 'jcm'}

2. 子串的查找

1. str.includes("子串",从哪个字符开始查)：返回布尔值 es6

2. str.indexof("子串",从哪个字符开始查)：查找到，返回子串的下标；没查到就返回-1

案例：

      var str = `中新网5月5日电 据秘鲁《公言报》报道,秘鲁总理托雷斯表示,他将于当地时间5月12日出席国会接受质询,对此,他已经做好了一切准备。据报道,托雷斯说：“国会最终可能会对我发起谴责,我现在还不知道,但我将出席国会为所发生的一切作证。”托雷斯将出席国会回答7个问题,要关于政府处理公民抗议的措施,以及4月5日在利马和Callao进行宵禁的最高法令。托雷斯还表示,他与总统府前秘书长布鲁诺·帕切科举行的会面是在总统卡斯蒂略不知情的情况下进行的,而且没有任何证人,会见的目的是为了查明在帕切科办公室卫生间发现的2万美元的来源。托雷斯说:“他告诉我,那2万美元是他从银行取的,他有银行收据。”`;

      var FirstStartPosition = str.indexOf("托雷斯");
      var SecondStartPosition = str.indexOf("托雷斯", FirstStartPosition + 2);
      var tls1 = str.substring(FirstStartPosition + 3, SecondStartPosition);
      console.log(FirstStartPosition, SecondStartPosition); //24 69

      var firstWord = str.indexOf("“");
      var secondWord = str.indexOf("”");
      var tls2 = str.substring(firstWord + 1, secondWord);
      //document.write(tls2);  在网页上显示
      console.log(tls2);  //国会最终可能会对我发起谴责,我现在还不知道,但我将出席国会为所发生的一切作证。

3.字符串的填充 es6

str.padStart(number,"")：如果字符串位数不够number，则在开头填充内容，直到满足位数。

str.padEnd()：在后面填充

案例：

      var str="afdQHbdAx";
      var str1=str.padStart(15); // 没有第二个参数，默认在字符串前面用空格填充够15位
      console.log(str1);  //      afdQHbdAx

      var str2=str.padStart(15,"jcm");
      console.log(str2);  //jcmjcmafdQHbdAx  
      
      var str3=str.padEnd(15,"jcm");  //在后面填充
      console.log(str3);   //afdQHbdAxjcmjcm

4. 重复字符串 es6

str.repeat(n) //将str字符串重复n次，不改变原来的字符串

5. str.startsWith("子串"); //目标字符串是不是以子串开头返回值为布尔值

str.endWith("子串"); //目标字符串是不是以子串结尾

es6

4和5的案例：

    var str = "hello";
    console.log(str.repeat(2));  //hellohello
    console.log(str);  //hello
    console.log(str.startsWith("h"));  //true
    console.log(str.endsWith("h"));  //false
    console.log(str.endsWith("o"));  //true

2. 数组

2.1 基础用法

1. 添加元素

arr.push(57)，原数组后面添加元素，会改变原数组，返回值为数组元素个数

arr.unshift(57)，原数组前面添加元素，会改变原数组

2. 删除元素

arr.pop()，删除数组最后一个元素，返回值为删除的元素

arr.shift()，删除数组第一个元素，返回值为删除的元素

arr.splice(从下标几开始删除，删除几个元素，在该位置插入的元素)，可以表示前面四个功能，返回值为删除的元素，但不常用。

arr.slice(开始截取的下标，结束截取的下标），返回值为截取的元素。

案例：

        var arr = [3,12,1,54,2,13,66];
        arr.push(10086);   //在数组末尾添加10086
        console.log(arr);  //[3, 12, 1, 54, 2, 13, 66, 10086]

        arr.unshift(10087);  //在数组开头添加10087
        console.log(arr);   //[10087, 3, 12, 1, 54, 2, 13, 66, 10086]

        var re1 = arr.pop();   //删除数组最后一个元素，返回值为删除的元素
        console.log(arr); //[10087, 3, 12, 1, 54, 2, 13, 66]
        console.log(re1); //10086

        var re2 = arr.shift();  // 删除数组第一个元素，返回值为删除的元素
        console.log(arr); //[3, 12, 1, 54, 2, 13, 66]
        console.log(re2); //10087

        var re3 = arr.splice(2,2,"hi");  //从下标2开始删除，删除两个元素，并在结束位置增加“hi”,返回值是删除的元素
        console.log(arr); //[3, 12, 'hi', 2, 13, 66]
        console.log(re3); //[1,54]

        var re4 = arr.slice(1,3);  //从下标1开始截取，截取到下标3之前，不包括下标3的元素
        console.log(arr);  //[3, 12, 2, 13, 66]
        console.log(re4);  //[12, 2]

3. 数组转为字符串 arr.join()

返回值为字符串（将数组的元素用逗号连接，成为一个字符串）

4.反转数组元素 arr.reverse()

返回值为数组，改变原数组

案例：

//数组转为字符串
var arr = [3,12,2,13,66];
var re1 = arr.join();
console.log(re1);  //3,12,2,13,66
console.log(typeof(re1));  // string

//反转数组
var re2 = arr.reverse();
console.log(arr);  //[66, 13, 2, 12, 3]
console.log(re2);  //[66, 13, 2, 12, 3]

笔试题：判断某个字符串是不是回文

        var str="雾锁山头山锁雾";
        var arr=str.split("");
        console.log(arr);
        var arr1 = arr.reverse();
        if(arr1 == arr){
            console.log(true);
        }
        //true

5. 查找子元素

arr.indexOf("要查找的元素",从下标几开始查)，在数组中查找元素，如果找到，返回该元素的下标；没有，返回-1。

arr.includes("要查找的元素",从下标几开始查)，在数组中查找元素，如果找到，返回true；没有，返回false。

6. 拼接数组 arr.concat(数组名)，将数组拼接到arr数组上

案例：

var arr = [4, 534, 32, 36, 72, 6, { age: 66 }]; //语法糖，生成一个数组
var arr2 = [1, 32, 5, 65];
var arr3 = [1, 3, 5, 6];

//查找子元素，找到返回子元素的下标，找不到返回-1
var re1 = arr.indexOf({ age: 66 }); //indexOf()隐式操作,生成了一个新的对象，和arr的原型对象一样，但不是同一个对象
var re2 = arr.indexOf(32);
console.log(re1, re2); //-1 2

//查找子元素，找到返回true,找不到返回false
var re3 = arr.includes(36);
console.log(re3);   //true
var re4 = arr.includes(50);
console.log(re4);   //false

//拼接数组
var re3 = arr2.concat(arr3, 1, 51);
console.log(re3); // [1,32,5,65,1,3,5,6,1,51]

7. 按顺序排列元素

数组按升序排列：arr.sort(function(n1,n2){ return n2-n1 }

数组按降序排列：arr.sort(function(n1,n2){ return n1-n2 }

案例：

var arr = [51,43,78,1,435,4,76,9];
var re = arr.sort();
console.log(re);  // [1, 4, 43, 435, 51, 76, 78, 9]
 //升序
var re1 = arr.sort(function (n1, n2) {
           return n1 - n2;
        });
console.log(re1);  //[1, 4, 9, 43, 51, 76, 78, 435]
//降序
var re2 = arr.sort(function (n1, n2) {
           return n2 - n1;
         });
console.log(re2);  //[435, 78, 76, 51, 43, 9, 4, 1]

2.2 遍历数组

将数组的每个元素取出来，一遍后面使用

2.2.1 for语句

1. for循环兼容性最好

2. for-in 兼容性不好，旧浏览器可以。可以遍历对象，但会遍历出原型

for(el in arr){ console.log(el) } //遍历数组的下标

for(el in arr){ console.log(arr[el]) } //遍历数组每一个元素

for(el in obj){ console.log(el) } //遍历对象的成员名

var arr=[1,34,6,3,457,0]
var obj={age:123,name:"karen"}
for(el in arr){
   console.log(el,arr[el]) //遍历数组下标和元素，打印数组下标及元素
   }
for(el in obj){
   console.log(el)  //遍历对象的属性名，打印age name
   }

2.2.2 arr数组的API（官方提供）

1. arr.map(function(){ } ) ，map会回调函数。调用一次函数，就传一个元素进来，数组有几个元素，就调用几次函数。函数形参可以是多个，返回值为一个新数组。

2. arr.forEach( function(el,index?,arr?){ } ) 没有返回值

3.arr. find( function(el,index?,arr?){ if(){ } } ) 搭配if语句，查找满足条件的元素

4. arr.some( function(){ } )只要有元素通过就返回true

5. arr.every( function(){ } )每一个元素都通过就返回true，有不符合的就返回false

6. arr.filter( function(){ } ) 返回筛选通过的元素

案例：

      var arr=[1, 34, 6, 13, 0];
      arr.map(function(el){
      	console.log(el)
      });

      arr.forEach(function(el) {
        console.log(el)
      });

      var a=arr.find(function (el){
        if(el>13) { return true }
      })
      console.log(a);  //34 满足条件的第一个元素

      var b=arr.some(function (el){
        if(el>13) { return true }
      })
      console.log(b);   //true 布尔值

      var c=arr.every(function (el){
        if(el>13) { return "hi" }
      })
      console.log(c);   //false 布尔值

      var d=arr.filter(function (el){
        if(el>13) { return "hi" }
      })
      console.log(d);   // 34

7. reduce 从前往后遍历

array.reduce(callback[,initialValue])

1. 传了initialValue，那preReturnVal第一次就等于初始值，后续就是上一次的return值（上一次的调用结果）

2. 没传initialValue，name默认把数组的第一项作为初始值，然后从数组第二项开始循环

reduce的调用结果：把循环到数组最后一项的调用结果作为reduce的调用结果

应用：数组求和

var arr = [1, 34, 6, 13, 0];
var re = arr.reduce(function (n1, n2) {
       return n1 + n2;
     }, 0);
console.log(re);  //1+34+6+13+0=54
var re2 = arr.reduceRight(function(n1,n2){
console.log(n1,n2);   //0 13  13 6  6 34 92 34 1
                  });

实例：购物车算总价

      var arr = [{price:1}, {price:34},{price: 6},{price: 13}, {price:0}];
      var sum = arr.reduce(function (n1, n2) {
        return n1 + n2.price;   //去对象的price属性值
      }, 0);
      console.log(sum);  //1+34+6+13+0=54

8. reduceRight 从后往前遍历。案例看“应用：数组求和”

2.3 es6新提供的功能

Array.of() 将参数中所有值作为元素形成数组

arr.fill( "填充内容" ,从哪里开始填?,从哪里结束填?)，修改了原数组 ?表示可写可不写

arr.entries() 遍历键值对，调用结果为一个迭代器对象，可以通过.next()获取到键值对。迭代器对象可以通过for..of来循环取值。

        var arr = [10, 20, 30, 40];
        console.log(arr.entries(), 8888);
        for (const v of arr.entries()) {
            console.log(v);
        }

arr.flat(转几层，默认1层) 数组扁平化，将多维数组降维

var arr=[[1,2],13,45,[23,4,31],10];
console.log(arr.flat(1));
// [1,2,13,45,23,4,31,10]

var arr1 = [[1, [2,0]], 13, 45, [23, [4,22], 31], 10];
console.log(arr.flat(2)); 
//[1, 2, 0, 13, 45, 23, 4, 22, 31, 10]