(js) 字符串和數組的經常使用方法

時間 2019-11-08

原文原文鏈接

JS中字符串和數組的經常使用方法

JS中字符串和數組的經常使用方法
    js中字符串經常使用方法
        查找字符串
            根據索引值查找字符串的值
            根據字符值查找索引值
        截取字符串的方法
        字符串替換
        字符串的遍歷查找
        字符串轉化爲數組
    數組中經常使用的方法
        往數組裏增長項
        從數組裏刪除項
        更改數組項
        查詢數組項
        遍歷數組
        截取數組值
        其餘的數組方法

js中字符串經常使用方法

查找字符串

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

string.charAt(index)返回給定位置的那個字符值；web
- 參數：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));//4
```

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));//3
//從str的第11位值g開始往前找，最後一次出現e的位置。
console.log(str.lastIndexOf('e',11));//9

String.search( ) 檢索與正則表達式相匹配的子串bash
- 參數：
  - regexp 要在字符串string中檢索的RegExp對象，該對象具備指定的模式。
  - 若是該參數不是RegExp對象，則首先將它傳遞給RegExp()構造函數，把它轉換成 RegExp對象。
- 返回值：string中第一個與regexp相匹配的子串的起始位置。若是沒有找到任何匹配的子串，則返回-1。
```
var str = 'abcedcbadefghi';
console.log(str.search('ed'));//3
```
```
 
```

截取字符串的方法

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) 抽取一個子串post
- 參數：
  - 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)將字符串分割成字符串數組ui
- 參數：
  - 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, ...)給數組最後添加一個或多個元素；this
- 參數：value，要添加到array尾部的值，能夠是一個或多個。
- 返回值：把指定的值添加到數組後數組的新長度。
```
var arr = [3,4,5,2,1,9,4,2,5,3,8,1];        console.log(arr.push('a','s','f'));//15
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'));//15
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());//1
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());//3
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'
```