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

Ⅰ、数组常用的 API：

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

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

其二、ES5 常用的数组 API：

01、array.push() 操作;
      push() 向数组末尾添加一个或多个元素(而多个元素之间用逗号隔开)，
      返回值是改变后的数组长度;

02、array.unshift() 操作;
      unshift() 向数组前面添加一个或多个元素(而多个元素之间用逗号隔开)，
      返回值是改变后的数组长度;

03、array.pop() 操作;
      pop()  删除数组最后一个元素  无参  返回被删除的元素;

04、array.shift() 操作;
      shift() 删除数组第一个元素  无参  返回被删除的元素；

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开始删除两个元素，
            再添加两个元素(即：替换)  返回值是删除元素组成的数组; 

 06、array.slice() 操作(截取操作);
      slice() 截取数组      参数[start,end)      返回一个新数组且原数组
      不改变     
      arr.slice(1,3);      截取：从角标为1开始(即：包括1)，到角标3结束
      (即：不包括3)，截取2(3-1)个值的数组；

07、array.join() 操作(拼接操作);
      join() 拼接元素       参数(有参：就以参数拼接元素，无参：默认以逗号
      拼接)      返回值：拼接好的字符串元素；
      arr.join("- ");     拼接：传参时，就以指定符号连接；   返回值为：
      拼接好的字符串元素；

08、array.concat() 操作(数组间连接操作);
      concat()数组间连接    参数(数组1，数组2，值)       返回值：连接后
      的新数组；
      arr3.concat(arr4,arr5,1);      数组间连接：将arr3,arr4,arr5 及
       10 连接成一个新数组；

  09、array.reverse()操作(逆序操作); 
      reverse()对数组元素进行逆序，会改变原数组      无参       
      返回值：原数组逆序后的数组；
      arr3.reverse();      逆序：将arr3数组逆序操作；       
      返回值为：逆序后的数组；

其三、ES5新增的数组 API：

10、array.forEach() 操作；
      forEach()            参数(函数作实参，(函数中的参数：(item(数组值
      ),  index(索引),arr(原数组))))              无返回值(undefined)；

    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；
        }
    });

11、array.indexOf() 操作(数组中是否有该值)；
      indexOf()           参数：待判断值；                
      返回值：数组中存在待判断值就返回该值的数组下标(索引)，不存在就返回
       -1；
      arr.indexOf(34);

12、array.filter() 操作(满足一定条件的过滤);
      filter()      参数(函数作实参，(函数中的参数：(item(数组值),  
      index(索引),arr(原数组))))      
      返回值：对原数组进行过滤，由每次函数返回值为true对应的元素组成一个
      新数组，且原数组不变；

    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);

13、array.map() 操作(映射);
      map()         参数(函数作实参，(函数中的参数：(item(数组值),  
      index(索引),arr(原数组))))     
      返回值：返回新的数组 新数组长度与原数组长度一样,原数组不变；

    var res2 = array.map(function(item,index,array) {
        //return 0;
        //返回值没写就默认为undefined;
    });
    console.log(array); // 原数组不变
    console.log(res2);

14、array.reduce() 操作;
      reduce()      参数：第一个参数为函数中的参数(prev(累计器),
      next(当前值),currentIndex(当前索引),arr(源数组))，
      第二个参数存在传与不传的情况；         
      返回值：最后一次的计算的返回值;

  其一、当第二个参数不传值 (即：没有第二个参数) 时：
        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);

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;

16、array.every() 操作(所有元素是否都能通过某个指定函数的测试);
      every()             参数(函数作实参，(函数中的参数：(item(数组值)
      ,  index(索引),arr(原数组))))              
      返回值：true/false(即：布尔值)；
      let res3 = [1,2,3].every(item=>item<2);    //every中会从头到尾去
      //循环，把每个元素都代到函数里面去执行，从头到尾去找，只要找到有一
      //个元素代入函数的元素返回值为false,后面就不找了；
      console.log(res3);                          
      // 此时的输出结果为：false；

其四、ES6 新增的数组 API：

17、array.from() 操作(将类数组转成数组);
      from(arguments)            参数：类数组元素；                   
      返回值：转换后的数组；
      Array.from(arguments);         
      // 返回值是一个数组；(且有 length 等属性，
      //即：Array.from(arguments).length );

18、array.of() 操作(添加指定元素);
      of()                       参数：待添加的指定元素；              
      返回值：添加指定元素后的数组；
      console.log(new Array(3));  
      //显示结果为：(3) [empty × 3]；(即：[,,])
      console.log(Array.of(3));   
      //显示结果为：[3]; (且有 length 等属性，即：Array.of(3).length，
      //输出结果为：1(即：表示仅有一个元素)； );

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；(类似替换)

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]；

 21、array.find() 操作(满足提供的测试函数的第一个元素的值);
      find()            参数(函数作实参，(函数中的参数：(item(数组值), 
       index(索引),arr(原数组))))             
       返回值: 满足条件的第一个数组的元素值 或 undefined(没有合适的值)；
      let res4 = [1,2,3].find(item=>item > 1);       
      // find内部也会做循环，每次把数组的元素传到 item 中来，并会找第一
      //个返回值为 true 的数组元素，并作为整个函数的返回值；
      console.log(res4);            // 此时的输出结果为：2;

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;

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

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

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

01、String.charAt(n)方法:             返回值：对应 n 位置上的字符；
      str.charAt(0);            返回位置为0的字符; 即为:c;

 02、String.charCodeAt(n)方法:       返回值：对应 n 位置上的字符编码；
      str.charCodeAt(0);        返回位置为0的字符的字符编码; 即为:99;

 03、String.fromCharCode()方法:        返回值：n编码值对应的字符；
      String.fromCharCode(90);   返回字符编码为90的字符值； 即为:Z;

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

04、String.indexOf()方法：               返回值：字符串中的位置(索引)；
      str.indexOf("to");         查找在字符串中有没有包含某个字符串,并
      返回其位置; 此时的输出结果为：8   代表第一个to中t的位置在原串的位置
      为8(从0开始计算);

05、String.lastIndexOf()方法：        返回值：字符串中的位置(索引)；
      str.lastIndexOf("to");     从右往左找 注意编号还是从左到右(即：
      元素位置的值仍是从左往右；)，  此时的输出结果为：11；

以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个字符,返回值为截取的字符串;

07、String.substring[start,end)方法：      
参数：开始的位置，结束的位置(前后位置不限制，可颠倒);；          
返回值：截取的字符串；
      A、str.substring(5);           
      从下标为5开始截取到最后 此时等价于substr(5)；
      B、str.substring(5,9);         
      从下标为5开始截取到下标为9为止  包含下标5而不包含下标9；

08、slice() 与数组slice() 用法类似； (但其前后位置不能颠倒);

以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", "?"];

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

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

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

11、String.startsWith()方法：         返回值：一个布尔值(true/false)；
      let url = 'http://www.baidu.com';
      let flag = url.startsWith('Http');      
      // 判断 url 是否以 'Http' 开头；

 12、String.endWith()方法：            返回值：一个布尔值(true/false)；
      let img_name = '2.png';  
      let bool = img_name.endsWith('png');    
      // 判断 img_name 是否以 'png' 结尾；

13、String.includes()方法：           返回值：一个布尔值(true/false)；
      console.log('along666'.includes('L'));     
      // 判断 'along66' 字符串中是否含有 'L' 元素；

 14、String.repeat(n)方法：            返回值：一个重复 n 次的字符串；
      console.log('abc'.repeat(3));            
      //此时的输出结果为：abcabcabc(即：重复三次 'abc' 的字符串);

15、String.padStart(m,n)方法：        
返回值：在所给的字符串前以 n 作为填充物，填充到 m 位的字符串；
      console.log('0'.padStart(8,9));     
      // 此时的输出结果为：'99999990'；

 16、String.padEnd(m,n)方法：          
 返回值：在所给的字符串后以 n 作为填充物，填充到 m 位的字符串；

  console.log('0'.padEnd(8,9));     // 此时的输出结果为：'09999999'； 

Ⅲ、小结：

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