Javascript中数组和字符串的常用方法

Javascript中数组与字符串常用方法

数组常用方法

学习思路：这个方法干啥用？是否要传入参数？是否有返回值？原数组是否改变？

第一组

• 增加，删除，替换

  • push()

    • 给数组末尾增加一项(ary[ary.length]=xxx)
    • 需要实参，传入增加的数
    • 返回新数组的长度
    • 原始数组发生改变，变成添加新项后的数组

  • delete

    • 删除一个数组中的一项：delete ary[1]：删除数组的索引值为1的数

    • 返回true

    • 要是删除的元素在数组里面，则原数组里面会出现一个undefined占位，输出数组的长度依旧是原来的长度，原数组发送改变

          var array = [1, 2, 3];
      
         delete array[1]; // 移除 2  原数组：【1，undefined，3】
         alert(array); // "1 , , 3"
         
         alert(array.length); // but the length is still 3
         
         array.forEach(alert); // 弹出的仅仅是1和3
         ```  
      
      

  • pop()

    • 删除数组最后一项
    • 不需要参数
    • 返回被删除的内容
    • 原始数组发生改变，变成删除最后项的数组

• unshift()

  • 给数组头部增加一项
  • 需要实参，传入插入的项
  • 返回插入新项后数组的长度
  • 原始数组发送改变，变成插入新项后数组

• shift()

  • 删除数组第一项
  • 不需要参数
  • 返回被删除的内容
  • 原始数组发生改变，变成删除项后的数组

第二组

• splice()

  1. 插入/增加 ：splice（Index，0，要添加的内容）

     • 在指定的索引index前面，插入要添加的内容，添加的内容个数不限，类型不限，也可以添加字符串string，还可以插入一个对象{}
     • 需要3个参数，第二个参数默认是0
     • 返回空数组[]
     • 原始数组发生改变，变成插入要添加内容的新数组

  2. 删除：splice(index,deleteCount)

     • 从指定的索引值地方开始删除几个（包括索引位置的值）
     • 2个参数（指定的索引值后面，删除的个数）
     • 返回被删除的内容，以一个新数组的形式返回
     • 原始数组发送改变，变成删除内容的新数组

  3. 替换：splice(index,deleteCount,'angular','h5+c3')

     • 从指定的索引值开始，删除几个（delectCount），并替换为我们想要替换的内容（长度不限）
     • 三个参数（要删除的索引位置，删除的个数，在删除的索引位置上添加的内容）
     • 返回被替换掉的内容，也就是被删除的内容，以一个新数组的形式返回
     • 原始数组发送改变

第三组

• 克隆和截取/查找

  1. slice(n,m)

     • 从索引n开始，查找到索引m，包前不包后
     • 两个参数
     • 返回要查找索引所对应的内容，个数为m-n
     • 原始数组没有改变
     • 面试题：请找到数组中[n,m]项，包括n和m
     • 考题：ary.slice(n-1,m)
     • 克隆功能：ary.slice(0)或者ary.slice()或者ary.concat()或者ary.splice(0)或者for循环

  2. concat()

  • 数组拼接/克隆ary.concat()
  • 参数不确定，想拼接几个数组，里面参数就写几个数组名，也可以写成数组的形式，在数组后面拼接
  • 返回拼接的新数组
  • 原始数组没有发生改变
  • 不传入参数就是克隆

第四组

• 数组转字符串

  • toString()
    • 数组转字符串
    • 不用参数
    • 默认返回用逗号分割的新字符串
    • 原始数组没有改变
  • join(拼接形式)
    • 数组转换字符串
    • 拼接形式可以是任何运算符号
    • 返回用指定的拼接形式分割的新字符串
    • 原始数组没有改变
    • 如果拼接形式为+的类型，需要实现运算，可以用eval()，里面传入ary.join("+")返回的字符串就行
    • eval()：把字符串作为js代码来执行

• 数组的翻转和排序

  • 数组翻转ary.reverse()
    • 实现数组的翻转
    • 没有参数
    • 返回被翻转的数组
    • 原始数组发生改变

• 数组排序：sort里面有一个函数，函数里面有两个参数ary.sort(function(a,b){retuen a-b})

  ary.sort(function(a,b)){
        return a-b;//从小到大的排序
        return b-a;//从大到小的排序
    }
  

第五组

• 数组常用但不兼容的方法

  • indexOf()

    • 查找指定内容的位置
    • 传入要查找的内容
    • 如果找到就返回内容对应的索引值，没有找到，就返回-1
    • 原始数组没有改变

  • forEach()：遍历数组 ；IE里面的Array没有这个方法：Array.prototype.forEach返回的是undefined；使用return退出循环

    • 两个参数：

      • callback（回调函数，函数的定义阶段）
      • context ：改变回调函数里面this的指向（改变this指向的方法有：apply(),call(),bind()），可传可不传，如果不传默认是window

    • callback中有三个参数：item （遍历的数组内容）index（内容对应的数组索引） input（数组本身）
      ```
      [].forEach(function(value, index, array) {
      // code
      console.log(array[index] == item); // true
      });

      ```
      

    • 对比与jQuery中的$.each方法，前面两个参数正好相反；$.map也是如此：

       ```
           [].forEach(function(index, value, array) {
           // code
       });
       ```
      
       ```
           数组求和：
           var sum = 0;
       [1, 2, 3, 4].forEach(function (item, index, array) {
         console.log(array[index] == item); // true
         sum += item;
       });
       
       alert(sum); // 10
       
             
       ```
         
         - 说明第二个参数的例子：
       
       ```
       var database = {
         users: ["张含韵", "江一燕", "李小璐"],
         sendEmail: function (user) {
           if (this.isValidUser(user)) {
             console.log("你好，" + user);
           } else {
             console.log("抱歉，"+ user +"，你不是本家人");  
           }
         },
         isValidUser: function (user) {
           return /^张/.test(user);  //正则方法检测
         }
       };
       
       // 给每个人发邮件
       database.users.forEach(  // database.users数组中人遍历
         database.sendEmail,    // 发送邮件（函数）
         database               // 使用database代替上面的this
       );
       
       // 结果：
       // 你好，张含韵
       // 抱歉，江一燕，你不是本家人
       // 抱歉，李小璐，你不是本家
       
       ```
      

  • 原始数组不变
  • 没有返回值
  • map()：遍历数组，映射 [].map()

    • 与forEach()功能一样，但是有返回值

    • array.map(callback,[ thisObject]);

    • callback中的参数与forEach()类似

      [].map(function(value, index, array) {
          // ...
          return ；//需要返回值
      });
      

    • 原数组被“映射”成对应新数组，例子：

    var data = [1, 2, 3, 4];
    
    var arrayOfSquares = data.map(function (item) {
      return item * item;
    });
    
    alert(arrayOfSquares); // 1, 4, 9, 16
    

    • 在实际使用的时候，我们可以利用map方法方便获得对象数组中的特定属性值们。

       var users = [
        {name: "张含韵", "email": "zhang@email.com"},
        {name: "江一燕",   "email": "jiang@email.com"},
        {name: "李小璐",  "email": "li@email.com"}
      ];
      
      var emails = users.map(function (user) { return user.email; });
      
      console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com
      

字符串常用方法

• 通过下标找对应的字符

  • charAt()：通过下标找对应的字符
  • charCodeAt()：通过下标找对应的字符编码

• 通过字符找下标

  • indexOf()：从前往后找，找到就返回，不再继续查找；（兼容的）数组里面的（indexOf（））方法是不兼容的
  • lastIndexOf()：从后面往前面找

• 字符串截取

  • slice(n,m)：从索引n截取到索引m；不包含m；包前不包后；但是slice可以取负值；数组里面也有这个方法；截取这个数组的部分，包前不包后。
  • substr(n,m)：从索引n开始，截取m个字符，m变量可以省略，省略就是截取到末尾，n和m不写的话，就是截取整个字符串，返回截取的
  • substring(n,m)：从索引n截取到索引m；但是不包括m包前不包后，与slice（）差不多，但是slice（）可以取得负数。

• 字符串转数组

  • split(切割形式)：把字符串按照切割形式切割，返回分割好字符串的数组

• 字符串转大小写

  • toUpperCase():转大写
  • toLowerCase()转小写

//需求：把 icessun-----> Icessun
var str='icessun';
var str2=str.charAt(0).toUpperCase()+str.substr(1);//从位置1开始截取后面的全部全部

var res=str.replace("i","I");

字符串的面试题：把一个字符串变成一个对象输出，方便我们操作里面的数据

var str="name=bob&age=10&sex=boy";
function str2obj(str){
   var ary=str.split('&');//返回的是拆分后形成的数组
   var obj={};
   for(var i=0;i<ary.length;i++){
        var ary2=ary[i].split('=');
        obj[ary2[0]]=ary2[1];//对象的属性（ary2[0]）设置为属性值（ary2[1]）
     }
    return obj;
}
var res=str2obj(str);

• 跟正则匹配的方法
  • split()：切割字符串方法
  • match()：找到的情况下，把你要找的内容提出来，找不到返回null
  • replace('','')：后面替换前面，返回替换的数组
  • search()找到的情况下，返回对应内容的索引，找不到就返回-1