JavaScript数组与字符串方法小小总结

1. 一般的增加，删除，替换

接口名	参数列表	返回值	原数组是否改变	新数组长度	备注
array.push(item)	实参	新数组长度	改变	+1	相当于 array[array.length] = item
delete array[index]	实参	true	改变	不变	删除的索引处使用undefined占位 *
array.pop()	空	弹出的元素	改变	-1	删除数组最后一个元素
array.unshift(item)	实参	新数组长度	改变	+1	在数组头部添加一项
array.shift()	空	被删除的元素	改变	-1	删除数组首项

* delete操作后的数组：

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

2. 用splice()实现增加/插入、删除和替换

• 插入/增加：splice(index, 0, item...)

  • 在 index 前插入要添加的内容，内容个数、类型。
  • 3+个参数，第二个参数为 0 以达到插入目的。
  • 返回空数组 [ ]。
  • 原始数组发生改变，变成插入要添加内容的新数组。

• 删除：splice(index, deleteCount)

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

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

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

3. 克隆、截取和查找

• slice(n, m)

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

• concat()

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

4. 数组转字符串

• 数组转字符串

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

• 数组的翻转和排序

  • 数组翻转array.reverse()

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

  • 数组排序：array.sort(func)
    里面有一个函数，函数里面有两个参数：

    array.sort(function (a, b) {
      return a - b;
    });
    

5. 数组循环

• 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) {
      console.log(array[index] == item); // true
    });
    

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

    [].forEach(function(index, value, array) {
    
    });
    
    // 数组求和：
    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
    );
    // 结果：
    // 你好，张含韵
    // 抱歉，江一燕，你不是本家人
    // 抱歉，李小璐，你不是本家
    

6. 数组其它重要方法

• 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": "[email protected]"
      },
      {
        name: "江一燕",
        "email": "[email protected]"
      },
      {
        name: "李小璐",
        "email": "[email protected]"
      }
    ];
    var emails = users.map(function (user) {
      return user.email;
    });
    console.log(emails.join(", ")); // [email protected], [email protected], [email protected]
    

• map()

  map方法用于遍历数组，有返回值，可以对数组的每一项进行操作并生成一个新的数组，有些时候可以代替for和forEach循环，简化代码，比如：

  let arr3 = [1, 2, 3, 4, 5];
  let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10
  console.log(newArr3); // [10, 20, 30, 40, 50]
  

• filter()

  filter方法同样用于遍历数组，顾名思义，就是过滤数组，在每一项元素后面触发一个回调函数，通过判断，保留或移除当前项，最后返回一个新的数组，比如：

  let arr4 = [1, 2, 3, 4, 5];
  let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模，过滤余数不为0的数
  console.log(newArr4); // [2，4]
  

• some()

  some方法用于遍历数组，在每一项元素后面触发一个回调函数，只要一个满足条件就返回true，否则返回false，类似于 || 比较，比如：

  let arr5 = [{result: true}, {result: false}];
  let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true，即为true
  console.log(newArr5); // true
  

• every()

  every方法用于遍历数组，在每一项元素后面触发一个回调函数，只要一个不满足条件就返回false，否则返回true，类似于 && 比较，比如：

  let arr6 = [{result: true}, {result: false}];
  let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为false
  console.log(newArr6); // false
  

7. 关于字符串常用方法

• 通过下标找对应的字符

  • 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

参考资料：

• JavaScript巧学巧用
• Javascript中数组和字符串的常用方法