js数组和字符串操作

sunn。

已于 2023-06-27 17:36:35 修改

阅读量171

点赞数 1

文章标签： javascript 前端 js

于 2023-01-29 11:10:48 首次发布

本文链接：https://blog.csdn.net/weixin_43850458/article/details/124859946

版权

1.字符串操作

//1.1 charAt 返回指定索引位置的字符
    var str = 'abc';
    console.log(str.charAt(1));//h

//1.2 charCodeAt返回指定索引位置的字符的Unicode值
    var str = 'abc';
    console.log(str.charCodeAt(1));//98

//1.3 concat 连接两个或多个字符串，返回连接后的字符串 tip:数组也可以使用这个方法
    var str = 'abc';
    var s = 'def'
    console.log(str.concat(s));// 'abcdef'
    
    //数组方法
    var str = [1,2];
    var s = [2,3,4];
    console.log(str.concat(s));//  [1, 2, 2, 3, 4]

//1.4 fromCharCode 将Unicode转为字符串 是String对象的静态方法 只能由String对象使用
    console.log(String.fromCharCode(98,97));//'ba'

//1.5 indexOf 返回字符串中检索指定字符串第一次出现的位置 如果没有则为-1，数组也能使用这个方法
    var str = 'abc';
    var arr = ['a','b','c'];
    console.log(str.indexOf('a'));//0
    console.log(arr.indexOf('b'));//1

//1.6 lastIndexOf 和indexOf相反，返回字符串检索指定字符最后一次出现的位置

//1.7 localeCompare 用本地特定的顺序来比较两个字符串 在排序中常用，例如地名按照字母排序

//1.8 match 找到一个或多个正则表达式的匹配，类似indexOf和lastIndexOf，不过该方法返回的是值，而不是位置
    var str="1 plus 2 equal 3";
    console.log(str.match(/\d+/g));//['1', '2', '3']

//1.9 replace,replaceAll 替换与正则表达式匹配的子串，前一个只会取代第一个，后一个取代所有，当replace的正则出现全局匹配g，那么此时他相等于replaceAll
    var str="Hello world!";
    console.log(str.replace('l',0));// 'He0lo world!'

//1.10 search 检索与正则表达式相匹配的值，返回第一个与值匹配的子串的起始位置，如没有子串则返回-1，类似indexOf,不过它的参数支持正则表达式或者子串
    var str="Visit W3School!";
    console.log(str.search(/W3School/));//6

//1.11 slice 提取字符串中的片段，并在新的字符串中返回被提取的部分，该方法可以适用于数组
    var str="Visit W3School!";
    var arr = [1,2,3,4,5,6];
    console.log(str.slice(3));//it W3School!
    console.log(arr.slice(3));//[4, 5, 6]

//1.12 split 将字符串分割为子字符串数组

//1.13 substr 从起始索引号提取字符串中指定数目的字符
    var str="Visit W3School!";
    console.log(str.substr(3,1));// i

//1.14 substring 提取字符串中两个指定的索引号之间的字符，类似于slice
    var str="Visit W3School!";
    console.log(str.substring(3));// it W3School!

//1.15 toLocaleLowerCase,toLocaleUpperCase 根据主机的语言环境切换字符串大小写

//1.16 toLowerCase,toUpperCase 切换字符串大小写

//1.17 toString 返回字符串对象值

//1.18 trim 去掉字符串首尾空白

//1.19 valueOf 返回某个字符串对象的原始值

2. 数组操作

//2.1 concat 合并数组，并返回合并之后的数据，字符串也可以使用该方法
    var arr1 = [1,2,3]
    var arr2 = arr1.concat();
    console.log(arr1);           //[1,2,3]---原数组
    console.log(arr1 === arr2);  //false
    console.log(arr2);           //[1,2,3]---原数组的副本

//2.2 join 使用分隔符，将数组转为字符串并返回，和字符串的split方法相反

//2.3 pop 删除最后一位，并返回删除的数据

//2.4 shift 删除第一位，并返回删除的数据

//2.5 unshift 在第一位新增一位或多位数据，返回长度
    var arr = [1,2,3];
    console.log(arr.unshift("hello"));  //4 代表新数组的长度为4
    console.log(arr);                   //["hello",1,2,3]---原数组改变

//2.6 push 在最后一位新增一个或多个数据，返回长度

//2.7 reverse 反转数组，返回结果。会改变原数组
    var arr = [1,2,3];
    console.log(arr.reverse());     //[3,2,1]
    console.log(arr);               //[3,2,1]---原数组改变
    
//2.8 slice 截取指定位置的数组，并返回，不包含结束位置。字符串也可以使用该方法
    var arr = ["1","2","3","4","5"];
    console.log(arr.slice(1,3));        //["3","4"]

//2.9 splice(start,num,data1,data2,...) 向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素

    var arr = ["1","2","3","4","5"];
    //2.9.1 不传参时：无操作
    console.log(arr.splice());      //[]
    console.log(arr);               //["1","2","3","4","5"]---无操作

    //2.9.2 只传入start：表示从索引为start的数据开始删除，直到数组结束
    console.log(arr.splice(2));     //["3", "4", "5"]
    console.log(arr);               //["1", "2"]---原数组改变

    //2.9.3 传入start和num：表示从索引为start的数据开始删除，删除num个 
    console.log(arr.splice(2,2));   //["3", "4"]
    console.log(arr);               //["1", "2", "5"]---原数组改变

    //2.9.4 传入更多：表示从索引为start的数据开始删除，删除num个，并将第三个参数及后面所有参数，插入到start的位置
    console.log(arr.splice(2,2,"a","b"));  //["3", "4"]
    console.log(arr);                      //["1", "2", "a", "b", "5"]---原数组改变

    //2.9.5 传入更多：表示从索引为start的数据开始删除，删除num个，并将第三个参数及后面所有参数，插入到start的位置  
    console.log(arr.splice(2,0,"a","b"));  //[]
    console.log(arr);    //["1", "2", "a", "b", "3", "4", "5"]---原数组改变

//2.10 sort 排序，返回结果。默认升序，如果操作字符串并希望按照预期结果那么需要在sort参数重新书写排序规则。
    var arr = [6,1,5,2,3];
    console.log(arr.sort());    //[1, 2, 3, 5, 6]
    console.log(arr);           //[1, 2, 3, 5, 6]---原数组改变

//2.11 toString 直接转为字符串并返回

//2.12 valueOf 返回数组对象的原始值

//2.13 indexOf,lastIndexOf 返回数组索引，一个是从前往后检索，一个是从后往前检索，和字符串操作类似。

//2.14 forEach 参数为回调函数，会遍历数组所有的项，回调函数接收三个参数，分别是vlaue，index，self，没有返回值

//2.15 map同forEach，参数同forEach，会返回由回调函数操作后的新数组

//2.16 filter，筛选数组，参数同forEach。返回回调函数为true的值

//2.17 every，筛选数组，参数同forEach。当回调函数所有结果都为true，返回true

//2.18 some，筛选数组，参数同forEach。当回调函数存在结果为true，返回true

//2.19 reduce 迭代器，迭代数组的所有项，并构建一个最终值
    //2.19.1:不省略initial参数，回调函数没有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
    }, 2019)
    // 打印结果为：
    // 2019--10--0--true
    // undefined--20--1--true
    // undefined--30--2--true
    // undefined--40--3--true
    // undefined--50--4--true
    // 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

    //2.19.2:省略initial参数，回调函数没有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
    })
    // 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
    // 10--20--1--true
    // undefined--30--2--true
    // undefined--40--3--true
    // undefined--50--4--true
    // 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

    //2.19.3:不省略initial参数，回调函数有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
        return "hello";
    }, 2019)
    // 打印结果为：
    // 2019--10--0--true
    // hello--20--1--true
    // hello--30--2--true
    // hello--40--3--true
    // hello--50--4--true
    // 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

    //2.19.4:省略initial参数，回调函数有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
        return "hello";
    })
    // 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
    // 10--20--1--true
    // hello--30--2--true
    // hello--40--3--true
    // hello--50--4--true
    // 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

    //2.19.5：使用reduce计算数组中所有数据的和
    var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    })
    console.log(sum);      //150
    // 回调函数的最后一次return的结果被返回到reduce方法的身上

    //2.19.6：使用reduce计算数组中所有数据的和
    var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    }, 8)
    console.log(sum);      //158
    // 回调函数的最后一次return的结果被返回到reduce方法的身上
    // 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8

//2.20 reduceRight 反向迭代器，迭代数组的所有项，并构建一个最终值

3. 扩展方法

//3.1 flat 将嵌套数组转为一维数组
    var arr = [1,[2,3,[4,5,6]]];
    console.log(arr.flat(3)); //[1,2,3,4,5,6] 参数为嵌套数组的层数，可以使用Infinity 为不管多少层，是最深的转换

//3.2 includes 数组和字符串都可以使用，检索是否包含指定子项，返回值为布尔类型
    console.log([1,2,3].includes(1));//true
    console.log("123".includes(1));//true

//3.3 padStart,padEnd字符串方法，在首部或尾部补齐固定位数，例如时间为两位数
    "123".padStart(4,0);//"0123"

//3.4 find找到数组中符合条件的元素，如果有多个符合条件值则返回第一个值

tip:数组方法代码参考链接如下:JavaScript数组（Array）方法大全 - 简书 (jianshu.com)

参考链接：苏恩博客