• 00、数组及字符串常用的 API(详细剖析)


    Ⅰ、数组常用的 API:

    其一、使用数组 API 需要掌握的四点:

    01、方法名;
    02、方法功能;
    03、是否传递参数;
    04、返回值;

    其二、ES5 常用的数组 API:

    01、array.push() 操作;
          push() 向数组末尾添加一个或多个元素(而多个元素之间用逗号隔开),
          返回值是改变后的数组长度;
    
    • 1
    • 2
    • 3
    02、array.unshift() 操作;
          unshift() 向数组前面添加一个或多个元素(而多个元素之间用逗号隔开),
          返回值是改变后的数组长度;
    
    • 1
    • 2
    • 3
    03、array.pop() 操作;
          pop()  删除数组最后一个元素  无参  返回被删除的元素;
    
    • 1
    • 2
    04、array.shift() 操作;
          shift() 删除数组第一个元素  无参  返回被删除的元素;
    
    • 1
    • 2
    05、array.splice() 操作(三种情况);
            A、【删除】     删除数组中指定的元素   参数[start, num)       
                            返回被删除的元素(可能也是个数组); 
                arr.splice(1,2);     删除:从角标为1开始删除2个元素 返回值是
                删除元素组成的数组; 
                
            B、【添加】     在数组的指定位置添加   参数(start, 0,)   
                            返回值是空数组;       
                arr.splice(2,0,10);  添加:从角标为1开始  添加元素时:第二个
                参数为0(即:不删除)   返回值是删除元素组成的数组,而此时的数
                组已经在arr[2]的位置上添加了值为 10,即数组长度加一;  
    
            C、【替换】     在数组的指定位置替换   参数(start, num,) 
                            返回值是被替换的原数组的值;      
                arr.splice(2,2,100,200); 替换:从角标为2开始删除两个元素,
                再添加两个元素(即:替换)  返回值是删除元素组成的数组; 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
     06、array.slice() 操作(截取操作);
          slice() 截取数组      参数[start,end)      返回一个新数组且原数组
          不改变     
          arr.slice(1,3);      截取:从角标为1开始(即:包括1),到角标3结束
          (即:不包括3),截取2(3-1)个值的数组;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    07、array.join() 操作(拼接操作);
          join() 拼接元素       参数(有参:就以参数拼接元素,无参:默认以逗号
          拼接)      返回值:拼接好的字符串元素;
          arr.join("- ");     拼接:传参时,就以指定符号连接;   返回值为:
          拼接好的字符串元素;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    08、array.concat() 操作(数组间连接操作);
          concat()数组间连接    参数(数组1,数组2,值)       返回值:连接后
          的新数组;
          arr3.concat(arr4,arr5,1);      数组间连接:将arr3,arr4,arr5 及
           10 连接成一个新数组;
    
    • 1
    • 2
    • 3
    • 4
    • 5
      09、array.reverse()操作(逆序操作); 
          reverse()对数组元素进行逆序,会改变原数组      无参       
          返回值:原数组逆序后的数组;
          arr3.reverse();      逆序:将arr3数组逆序操作;       
          返回值为:逆序后的数组;
    
    • 1
    • 2
    • 3
    • 4
    • 5

    其三、ES5新增的数组 API:

    10、array.forEach() 操作;
          forEach()            参数(函数作实参,(函数中的参数:(item(数组值
          ),  index(索引),arr(原数组))))              无返回值(undefined)
    • 1
    • 2
    • 3
        var arr = [10,30,50,70];
        arr.forEach(function(item,index,arr) {
            //console.log(item,index); //显示结果为:10 0, 30 1, 50 2, 70 3;
            //console.log(arr);        //显示结果为:(4) [10,30,50,70];
            //每次都能把值和索引拿到;
            if(item >= 20) {
                console.log(item);    //显示结果为:30,50,70;
            }
        });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    11、array.indexOf() 操作(数组中是否有该值)indexOf()           参数:待判断值;                
          返回值:数组中存在待判断值就返回该值的数组下标(索引),不存在就返回
           -1;
          arr.indexOf(34);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    12、array.filter() 操作(满足一定条件的过滤);
          filter()      参数(函数作实参,(函数中的参数:(item(数组值),  
          index(索引),arr(原数组))))      
          返回值:对原数组进行过滤,由每次函数返回值为true对应的元素组成一个
          新数组,且原数组不变;
    
    • 1
    • 2
    • 3
    • 4
    • 5
        var array = [10,23,21,34,44,88];
        var res = array.filter(function(item,index,arr) {
            console.log(item);  //根据布尔值来决定,其是否在res中保留;
            return item%2===0;  //若当前返回值为false,res就不会保留其结果;
        });                     //而若当前返回值为true,res就保留其结果;
        console.log(res);
        console.log(array);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    13、array.map() 操作(映射);
          map()         参数(函数作实参,(函数中的参数:(item(数组值),  
          index(索引),arr(原数组))))     
          返回值:返回新的数组 新数组长度与原数组长度一样,原数组不变;
    
    • 1
    • 2
    • 3
    • 4
        var res2 = array.map(function(item,index,array) {
            //return 0;
            //返回值没写就默认为undefined;
        });
        console.log(array); // 原数组不变
        console.log(res2);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    14、array.reduce() 操作;
          reduce()      参数:第一个参数为函数中的参数(prev(累计器),
          next(当前值),currentIndex(当前索引),arr(源数组)),
          第二个参数存在传与不传的情况;         
          返回值:最后一次的计算的返回值;
    
    • 1
    • 2
    • 3
    • 4
    • 5
      其一、当第二个参数不传值 (即:没有第二个参数) 时:
            prev 指:第一次的值默认是数组第一个元素;
            next 指:第一次的值默认是数组中prev的下一个值;
    
      其二、当第二个参数传值 (即:有第二个参数,尽管可能是0,但0也是参数) 时:
            prev 指:第一次的值就是第二个参数传的值;
            next 指:第一次的值就是数组中的第一个值;
    
        var sum = array.reduce(function(prev,next,currentIndex,arr) {
            //console.log(arr); 
            console.log(prev+"----"+next); 
            return prev + next;
        },0); // 当第二个参数不传值时, prev的值:第一次默认是数组第一个元素 ;
              // 而当传入第二个参数时 prev的值:第一次就是该参数;
              //此时认为array.reduce(function(), 0);中,第一个参数为function(),而第二个参数为0;
        console.log(sum);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    15、array.some() 操作(是否至少有1个元素通过了被提供的函数测试);
          some()              参数(函数作实参,(函数中的参数:(item(数组值)
          ,  index(索引),arr(原数组))))              
          返回值:true/false(即:布尔值)let res2 = [1,2,3].some(item=>item>12);     
          // some中会从头到尾去循环,把每个元素都代到函数里面去执行,从头到尾
          //去找,只要找到有一个元素代入函数的元素返回值为true,后面就不找了;
          console.log(res2);                          
          // 此时的输出结果为:false;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    16、array.every() 操作(所有元素是否都能通过某个指定函数的测试);
          every()             参数(函数作实参,(函数中的参数:(item(数组值)
          ,  index(索引),arr(原数组))))              
          返回值:true/false(即:布尔值)let res3 = [1,2,3].every(item=>item<2);    //every中会从头到尾去
          //循环,把每个元素都代到函数里面去执行,从头到尾去找,只要找到有一
          //个元素代入函数的元素返回值为false,后面就不找了;
          console.log(res3);                          
          // 此时的输出结果为:false;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    其四、ES6 新增的数组 API:

    17、array.from() 操作(将类数组转成数组);
          from(arguments)            参数:类数组元素;                   
          返回值:转换后的数组;
          Array.from(arguments);         
          // 返回值是一个数组;(且有 length 等属性,
          //即:Array.from(arguments).length );
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    18、array.of() 操作(添加指定元素);
          of()                       参数:待添加的指定元素;              
          返回值:添加指定元素后的数组;
          console.log(new Array(3));  
          //显示结果为:(3) [empty × 3];(即:[,,])
          console.log(Array.of(3));   
          //显示结果为:[3];  (且有 length 等属性,即:Array.of(3).length,
          //输出结果为:1(即:表示仅有一个元素); );
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    19、array.fill() 操作(数组填充);
          fill(a,m,n)                
          参数:(a,m,n)(即:待填充的元素,待填充的位置[m,n);          
          返回值:改变后的数组(类似于替换操作)let arr = [1,2,3,4,5];
          arr.fill('a',1,3);  //显示结果为:[1,"a","a",4,5];  
          //从序号 1 开始到序号 3(不包括序号3) 位置结束,填充a;(类似替换)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    20、array.copyWithin() 操作(数组覆盖);
          copyWithin(a,m,n)          参数:(a,m,n)(即:拿到[m,n)的元素,
          然后从 array 的 a 位置开始覆盖);         
          返回值:改变后尾灯数组元素;
          let arr2 = [1,2,3,4,5];
          arr2.copyWithin(0,2,4); // 拿出序号为2 到4(不包括4) 的元素值来,
          //从序号为0的位置开始覆盖(取出几位就再覆盖几位),从而得出的结果;      
          // 此时的输出结果为:[3, 4, 3, 4, 5];
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
     21、array.find() 操作(满足提供的测试函数的第一个元素的值);
          find()            参数(函数作实参,(函数中的参数:(item(数组值), 
           index(索引),arr(原数组))))             
           返回值: 满足条件的第一个数组的元素值 或 undefined(没有合适的值)let res4 = [1,2,3].find(item=>item > 1);       
          // find内部也会做循环,每次把数组的元素传到 item 中来,并会找第一
          //个返回值为 true 的数组元素,并作为整个函数的返回值;
          console.log(res4);            // 此时的输出结果为:2;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    22、array.findIndex() 操作(满足提供的测试函数的第一个元素的索引);
          findIndex()       参数(函数作实参,(函数中的参数:(item(数组值),
            index(索引),arr(原数组))))              
            返回值:满足条件的第一个数组的元素的索引 或 -1(没有合适的值)let res = [1,2,3].findIndex(item=>item > 1);    
          // findIndex内部也会做循环,每次把元素传到 item 中来,并会找第一个
          //返回值为 true 的数组元素的序号(即:索引),并作为整个函数的返回值;
          console.log(res);                               
          // 此时的输出结果为:1(即:表示满足条件的第一个数组的元素的索引为:
          //1);    若没有找到合适的返回值,那么输出为:-1;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Ⅱ、字符串(String)常用的 API:

    其一、ES5 常用的字符串 API:

    var str = 'china is great';字符串为例;

    01、String.charAt(n)方法:             返回值:对应 n 位置上的字符;
          str.charAt(0);            返回位置为0的字符; 即为:c;
    
    • 1
    • 2
     02、String.charCodeAt(n)方法:       返回值:对应 n 位置上的字符编码;
          str.charCodeAt(0);        返回位置为0的字符的字符编码; 即为:99;
    
    • 1
    • 2
     03、String.fromCharCode()方法:        返回值:n编码值对应的字符;
          String.fromCharCode(90);   返回字符编码为90的字符值; 即为:Z;
    
    • 1
    • 2

    var str = 'welcome to to beijing';字符串为例;

    04、String.indexOf()方法:               返回值:字符串中的位置(索引);
          str.indexOf("to");         查找在字符串中有没有包含某个字符串,并
          返回其位置; 此时的输出结果为:8   代表第一个to中t的位置在原串的位置
          为8(0开始计算);
    
    • 1
    • 2
    • 3
    • 4
    05、String.lastIndexOf()方法:        返回值:字符串中的位置(索引);
          str.lastIndexOf("to");     从右往左找 注意编号还是从左到右(即:
          元素位置的值仍是从左往右;),  此时的输出结果为:11
    • 1
    • 2
    • 3

    var str = 'good good study,day day up';字符串为例;

    06、String.substr[start,length)方法(字符串的截取):        
    参数:开始的位置,取的字符长度;         返回值:截取的字符串;
          A、str.substr(5);    
          从下标为5开始截取到最后,返回值为截取的字符串;  
          B、str.substr(5,4);           
          从下标为5开始截取4个字符,返回值为截取的字符串;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    07、String.substring[start,end)方法:      
    参数:开始的位置,结束的位置(前后位置不限制,可颠倒);;          
    返回值:截取的字符串;
          A、str.substring(5);           
          从下标为5开始截取到最后 此时等价于substr(5)B、str.substring(5,9);         
          从下标为5开始截取到下标为9为止  包含下标5而不包含下标9
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    08、slice() 与数组slice() 用法类似; (但其前后位置不能颠倒);
    
    • 1

    var str = 'what is your name?';字符串为例;

    09、String.split()方法:              
    返回值:字符串的分隔(字符串和数组之间可以互相转换);
          str.split(" ");           
          以空格分隔,将每一个分隔的元素转化成一个子串,并构成一个大数组;
           ["what", "is", "your", "name?"]
          而没有空格分隔,则是将每一个元素都转化成一个子串,并构成一个大数组;
          ["w", "h", "a", "t", " ", "i", "s", " ", "y", "o", "u", "r",
           " ", "n", "a", "m", "e", "?"];
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    var str = 'tmd,祝你幸福,tmd,永远不见';字符串为例;

    10、String.replace()方法:            
    返回值:返回一个替换后的新字符串,而原字符串不变;
          A、str.replace("tmd","**");         
          //默认替换第一个(这个函数有些懒)
          B、str.split("tmd").join("**");     
          //将全局的"tmd"信息都替换成了"**";
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    其二、ES6 常用的字符串 API:

    11、String.startsWith()方法:         返回值:一个布尔值(true/false)let url = 'http://www.baidu.com';
          let flag = url.startsWith('Http');      
          // 判断 url 是否以 'Http' 开头;
    
    • 1
    • 2
    • 3
    • 4
     12、String.endWith()方法:            返回值:一个布尔值(true/false)let img_name = '2.png';  
          let bool = img_name.endsWith('png');    
          // 判断 img_name 是否以 'png' 结尾;
    
    • 1
    • 2
    • 3
    • 4
    13、String.includes()方法:           返回值:一个布尔值(true/false);
          console.log('along666'.includes('L'));     
          // 判断 'along66' 字符串中是否含有 'L' 元素;
    
    • 1
    • 2
    • 3
     14、String.repeat(n)方法:            返回值:一个重复 n 次的字符串;
          console.log('abc'.repeat(3));            
          //此时的输出结果为:abcabcabc(即:重复三次 'abc' 的字符串);
    
    • 1
    • 2
    • 3
    15、String.padStart(m,n)方法:        
    返回值:在所给的字符串前以 n 作为填充物,填充到 m 位的字符串;
          console.log('0'.padStart(8,9));     
          // 此时的输出结果为:'99999990';
    
    • 1
    • 2
    • 3
    • 4
     16、String.padEnd(m,n)方法:          
     返回值:在所给的字符串后以 n 作为填充物,填充到 m 位的字符串;
    
    • 1
    • 2
      console.log('0'.padEnd(8,9));     // 此时的输出结果为:'09999999'; 
    
    • 1

    Ⅲ、小结:

    其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
    其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

  • 相关阅读:
    MT8385 Android AB分区系统升级(命令模式)
    SpringBoot SpringBoot 原理篇 1 自动配置 1.8 bean 的加载方式【六】
    Linux内核与驱动面试经典“小”问题集锦(7)
    Linux的子shell
    关于python的内存管理机制和python变量占用内存及时释放的问题
    k8s集群安装部署实战详细手册
    十倍增量的海外客户开发新方式来了!外贸企业可直接照做
    分布式限流不会用?一个注解简单搞定
    03 最小CMake项目
    JavaScript-day01笔记(变量 语法 事件 文本操作 样式操作)
  • 原文地址:https://blog.csdn.net/weixin_43405300/article/details/126131820