(js) 字符串和数组的常用方法

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

JS中字符串和数组的常用方法
    js中字符串常用方法
        查找字符串
            根据索引值查找字符串的值
            根据字符值查找索引值
        截取字符串的方法
        字符串替换
        字符串的遍历查找
        字符串转化为数组
    数组中常用的方法
        往数组里增加项
        从数组里删除项
        更改数组项
        查询数组项
        遍历数组
        截取数组值
        其他的数组方法

js中字符串常用方法

查找字符串

根据索引值查找字符串的值

• string.charAt(index)返回给定位置的那个字符值；

  • 参数：index指的是字符串中某个位置的数字，即字符在字符串中下标；
  • 返回值：字符串string的第index个索引对应的字符。

  var str = 'abcdefg';
  console.log(str.charAt(3));//d

根据字符值查找索引值

• string.indexOf(substring,start)从一个字符串搜索指定的子字符串，返回子字符串的位置(没有找到返回-1)。

  • 参数：
    • substring ：要在字符串string中检索的子串（可以只有一个值，也可以是多个值的子串）。
    • start ：一个可选的整数参数，声明了在字符串String中开始检索的位置。它的默认取值是0，从字符串的第一个字符开始检索。
  • 返回值：在string中的start位置之后，substring第一个值在string中第一次出现的位置。如果没有找到，则返回-1。

  var str = 'abcedcbadefghi';
  //从第5个索引（值为c）开始查找，找不到，返回-1；
  console.log(str.indexOf('dc',5));//-1
  //从str的第一位开始往后查找，返回子串中第一个值d在str中出现的索引位。
  console.log(str.indexOf('dc',0));//

• String.lastIndexOf(start,value ) 从后向前检索一个子字符串；

  • 参数同上
  • 返回值：在string中的start位置之前，substring第一个值在string中第一次出现的位置。如果没有找到，则返回-1。

  var str = 'abcedcbadefghi';
  // 此时是从第一位开始往前查找，找不到，返回-1.
  console.log(str.lastIndexOf('ed',0));//-1
  //从str的第11位值g开始往前找，最后一次出现''ed'的位置。
  console.log(str.lastIndexOf('ed',11));//
  //从str的第11位值g开始往前找，最后一次出现e的位置。
  console.log(str.lastIndexOf('e',11));//

• String.search( ) 检索与正则表达式相匹配的子串

  • 参数：
    • regexp 要在字符串string中检索的RegExp对象，该对象具有指定的模式。
    • 如果该参数不是RegExp对象，则首先将它传递给RegExp()构造函数，把它转换成 RegExp对象。
  • 返回值：string中第一个与regexp相匹配的子串的起始位置。如果没有找到任何匹配的子 串，则返回-1。

  var str = 'abcedcbadefghi';
  console.log(str.search('ed'));//

截取字符串的方法

• string.slice(start, end)截取一个子串

  • 参数：
    • start：索引开始的位置。倒着数的话为负数，-1代表最后一位的索引。
    • end：索引结束的位置。如果没有，默认截取到最后一位；
  • 返回值：
    • 一个新字符串；
    • 从start开始(包括start)到end为止(不包括end)的所有字符；

  var str = 'abcedcbadefghi';
  console.log(str.slice(2,5));//ced
  console.log(str);//abcedcbadefghi

• string.substr(start, length) 抽取一个子串

  • 参数：
    • start：索引开始的位置。倒着数的话为负数，-1代表最后一位的索引。
    • length：子串中的字符数。如果没有指定length，返回的字符串包含从start到结尾的字符。
  • 返回值：
    • 一个新字符串；
    • 从string的start处(包括start所指的字符)开始的1ength个字符。

  var stringValue = "hello world";
  alert(stringValue.substr(3)); //"lo world" ;
  alert(stringValue.substr(3,7)); //"lo worl" 

• string.substring(from, to):返回字符串的一个子串

  • 参数：
    • from 一个整数，截取开始的索引位置。
    • to 索引结束的位置。如果没有，默认截取到最后一位；
  • 返回值：
    • 一个新字符串，其长度为to-from，从from开始(包括from)到to为止(不包括to)的所有字符。

var stringValue = "hello world";
alert(stringValue.substring(3,7)); //"lo w" 

字符串替换

• string.replace(regexp, replacement)
  • 字符串string的方法replace()执行的是查找并替换的操作。
  • 参数
    • regexp ，声明了要替换的模式的RegExp对象。如果该参数是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换成RegExp对象。
    • replacement ，一个字符串，声明的是替换文本或生成替换文本的函数。

//替换
var text = "cat,bat,sat,fat";
var result = text.replace("at","ond");
alert(result); //"cond,bat,sat,fat"  

字符串的遍历查找

• string.match(regexp)找到一个或多个正则表达式的匹配
  • 返回值：存放匹配的数组.

var text = "cat,bat,sat,fat";
var pattern = /.at/;
var matches = text.match(pattern);
console.log(matches); //["cat"] 

var str = 'abcedcbadefghi';
console.log(str.match())//['']
console.log(str.match('a'))//['a']  

字符串转化为数组

• string.split(delimiter, limit)将字符串分割成字符串数组

  • 参数：
    • delimiter ，必须有！！！字符串或正则表达式，从该参数指定的地方分割string。
    • limit ，这个可选的整数指定了返回的数组的最大长度。
      • 如果设置了该参数，返回的子串不会多于这个参数指定的数字。
      • 如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
  • 返回值：一个字符串数组，是通过在delimiter指定的边界处将字符串string分割成子串创建的。返回的数组中的子串不包括delimiter自身。
  • 注意，String.split()执行的操作与Array.join()执行的操作相反。

  //将一个字符串进行倒序输出
  var str = 'abcdefg';
  var str3 = str.split('').reverse().join('');
  console.log(str3);//gfedcba

数组中常用的方法

往数组里增加项

• array.push(value, ...)给数组最后添加一个或多个元素；

  • 参数：value，要添加到array尾部的值，可以是一个或多个。
  • 返回值：把指定的值添加到数组后数组的新长度。

  var arr = [3,4,5,2,1,9,4,2,5,3,8,1];        console.log(arr.push('a','s','f'));//
  console.log(arr);//[3, 4, 5, 2, 1, 9, 4, 2, 5, 3, 8, 1, "a", "s", "f"]

• array.unshift(value, ...) 给数组最前边添加一个或多个元素；

  • 参数：value，要插入数组头部的一个或多个值。
  • 返回值：把指定的值添加到数组后数组的新长度。

  var arr = [3,4,5,2,1,9,4,2,5,3,8,1];
  console.log(arr.unshift('a','s','f'));//
  console.log(arr);//["a", "s", "f", 3, 4, 5, 2, 1, 9, 4, 2, 5, 3, 8, 1]

从数组里删除项

• Array.pop( ) 删除并返回数组的最后一个元素

  • 参数：无
  • 返回值：array的最后一个元素。
  • 方法pop()将删除array的最后一个元素，把数组长度减1，并且返回它删除的元素的值。
  • 如果数组已经为空，则pop()不改变数组，返回undefined。

  var arr = [3,4,5,2,1,9,4,2,5,3,8,1];
  console.log(arr.pop());//
  var arr1 = [];
  console.log(arr1.pop());//undifined

• Array.shift( ) 将元素移出数组

  • 参数：无
  • 返回值：数组原来的第一个元素
  • 方法shift()将把array的第—个元素移出数组，返回那个元素的值，并且将余下的所有元素前移一位，以填补数组头部的空缺。
  • 如果数组是空的，shift()将不进行任何操作，返回undefined。
  • 方法shift()和方法Array.pop()相似，只不过它在数组头部操作，而不是在尾部操作。该方法常常和unshift()一起使用。

  var arr = [3,4,5,2,1,9,4,2,5,3,8,1];
  console.log(arr.shift());//
  var arr1 = [];
  console.log(arr1.shift());//undifined

更改数组项

• Array.reverse( ) 颠倒数组中元素的顺序

  • Array对象的方法reverse()将颠倒数组中元素的顺序。
  • 它在原数组上实现这一操作，即重排指定的array的元素，但并不创建新数组。
  • 如果对array有多个引用，那么通过所有引用都可以看到数组元素的新顺序。

  var arr = [3,4,5,2,1,9,4,2,5,3,8,1];
  console.log(arr.reverse());//[1, 8, 3, 5, 2, 4, 9, 1, 2, 5, 4, 3]
  //修改原数组，而不会创建新的数组；
  console.log(arr);//[1, 8, 3, 5, 2, 4, 9, 1, 2, 5, 4, 3]

• Array.sort(fun ) 对数组元素进行排序

  • 参数：fun可以控制是意外的数字排序；
  • 返回值：对数组的引用。注意，数组在原数组上进行排序，不制作副本。
  • 如果调用方法sort()时没有使用参数，将按字母顺序(更为精确地说，是按照字符编码的顺序)对数组中的元素进行排序。
  • fun:function(a, b) { return a - b; }(从小到大排序)；

  var arr = [3,4,35,200,1,90,4,2,54,3,81,1];
  console.log(arr.sort());
  //[1, 1, 2, 200, 3, 3, 35, 4, 4, 54, 81, 90];
  console.log(arr.sort(function(a,b){return a-b}));
  //[1, 1, 2, 3, 3, 4, 4, 35, 54, 81, 90, 200]

查询数组项

• indexOf();
• lastindexOf();
• 这两个属性可以参照字符串的定义和介绍；

遍历数组

• array.forEach(item[, thisObject]);

  • 参数：
    • item : 函数测试数组的每个元素；
    • thisObject : 对象作为该执行回调时使用。
  • 返回值:
    • 返回创建数组。

  var arr = [3,4,35,200,1,90,4,2,54,3,81,1];
  arr.forEach(function(item){
      console.log(item)
  });
  //输出的是数组的每一项的值。

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

  • 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

• forEach和map的区别

  • forEach是遍历，而map是映射；
  • 个人理解：就是forEach就是遍历而已，全查一遍，而map是让他们干点什么。

  var arr = [3,4,35,200,1,90,4,2,54,3,81,1];
  var arra = arr.map(function(item){
      console.log(item);
      return item*2;
  });
  console.log(arra);//[6, 8, 70, 400, 2, 180, 8, 4, 108, 6, 162, 2]
  
  var arra1 = arr.forEach(function(item){
      console.log(item);
      return item*2;
  });
  console.log(arra1);//undefined

  • 假设我们有一个数组，每个元素是一个人。你面前站了一排人。

    • foreach 就是你按顺序一个一个跟他们做点什么，具体做什么，随便

    people.forEach(function (dude) {
         dude.pickUpSoap();
    });

    • map 就是你手里拿一个盒子（一个新的数组），一个一个叫他们把钱包扔进去。结束的时候你获得了一个新的数组，里面是大家的钱包，钱包的顺序和人的顺序一一对应。

    var wallets = people.map(function (dude) {
      return dude.wallet;
    });

    • reduce 就是你拿着钱包，一个一个数过去看里面有多少钱啊？每检查一个，你就和前面的总和加一起来。这样结束的时候你就知道大家总共有多少钱了。

  var totalMoney = wallets.reduce(function (countedMoney, wallet) {
    return countedMoney + wallet.money;
  }, 0);

    - 补充一个 filter 的：你一个个钱包数过去的时候，里面钱少于 100 块的不要（留在原来的盒子里），多于 100 块的丢到一个新的盒子里。这样结束的时候你又有了一个新的数组，里面是所有钱多于 100 块的钱包：

  var fatWallets = wallets.filter(function (wallet) {
    return wallet.money > 100;
  });

截取数组值

• array.slice(start, end)；返回数组的一部分

  • 参数
    • star，数组片段开始处的数组下标。如果是负数，它声明从数组尾部开始算起的位置。
    • end ，数组片段结束处的后一个元素的数组下标。
    • 如果没有指定end，则默认包含从start开始到数组结束的所有元素。
  • 返回值：一个新数组，包含从start到end(不包括该元素)指定的array元素。
  • 注意：不改变原数组！！！如果想删除数组中的一段元素，应该使用方法Array.splice。

  var arr = [3,4,35,200,1,90,4,2,54,3,81,1];
  var newarr = arr.slice(2);
  console.log(newarr);//[35, 200, 1, 90, 4, 2, 54, 3, 81, 1]
  //原数组没有改变
  console.log(arr);//[3, 4, 35, 200, 1, 90, 4, 2, 54, 3, 81, 1]

• array.splice(start, length, value, ...)； 插入、删除或替换数组的元素 ;

  • 参数：
    • start ，开始插入和(或)删除的数组元素的下标。
    • length，从start开始，包括start所指的元素在内要删除的元素个数。如果没有指定length，splice()将删除从start开始到原数组结尾的所有元素。
    • value, ... ：要插人数组的零个或多个值，从start所指的下标处开始插入。
  • 返回值：如果从array中删除了元素，返回的是含有被删除的元素的数组。

var arr = [3,4,35,200,1,90,4,2,54,3,81,1];
var newarr = arr.splice(2);
//没有第二个参数时，默认是截取到最后。返回截取出来的数组。
console.log(newarr);//[35, 200, 1, 90, 4, 2, 54, 3, 81, 1]；
//原数组立马发生了改变
console.log(arr);// [3, 4]

var arr = [3,4,35,200,1,90,4,2,54,3,81,1];
var arr1 = arr.splice(2,5,'w','d','r','y','h');
console.log(arr1);// [35, 200, 1, 90, 4]
//将原数组进行了改变！
console.log(arr);//[3, 4, "w", "d", "r", "y", "h", 2, 54, 3, 81, 1]

其他的数组方法

• array.concat(value, ...)；拼接数组

  • 参数：value, ... ，要增加到array中的值，可以是任意多个。
  • 返回值：一个新的数组；
  • 方法concat()将创建并返回一个新数组，这个数组是将所有参数都添加到array中生成的。
  • 不修改原数组array。
  • 如果要进行concat()操作的参数是一个数组，那么添加的是数组中的元素，而不是数组。

  var arr = [1,2,3];
  console.log(arr.concat(4, 5))
  //返回 [1,2,3,4,5]
  
  console.log(arr.concat([4,5]))
  //返回 [1,2,3,4,5]
  
  console.log(arr.concat([4,5],[6,7]))
  //返回 [1,2,3,4,5,6,7]
  
  console.log(arr.concat(4, [5,[6,7]]))
  //返回 [1,2,3,4,5,[6,7]]

• Array.join(separator) 将数组元素连接起来以构建一个字符串

  • 参数：separator ，在返回的字符串中用于分隔数组元素的字符或字符串，它是可选的。如果省略了这个参数，用逗号作为分隔符。
  • 返回值：—个字符串，通过把array的每个元素转换成字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而生成。

  var arr = [1,2,3];
  var arr1 = arr.join('+');
  console.log(arr);// [1, 2, 3]
  console.log(arr1);//'1+2+3'

 

 

链接：https://juejin.im/post/5c9f38a66fb9a05e3e056f9e