JS中字串和陣列的常用方法

木頭房子發表於2019-03-30

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));//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( ) 檢索與正規表示式相匹配的子串
- 引數：
  - 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) 抽取一個子串
- 引數：
  - 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'));//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'
複製程式碼
```

字串和陣列常用方法整理
2019-01-04
字串陣列
工作中常用的字串和陣列方法
2024-11-27
字串陣列
js常用陣列方法
2018-11-26
JS陣列
js中陣列常用方法總結
2019-06-29
JS陣列
JS陣列字串方法整理
2018-03-22
JS陣列字串
js字串與陣列常用方法速查.個人筆記
2018-10-20
JS字串陣列筆記
js陣列常用方法總結
2020-12-28
JS陣列
JavaScript陣列常用方法解析和深層次js陣列扁平化
2022-05-18
JavaScript陣列JS
JS 陣列中常用方法總結
2019-07-27
JS陣列
2024-05-10 js 常用陣列方法
2024-05-10
JS陣列
js與jquery常用陣列方法總結
2020-08-26
JSjQuery陣列
JS常用陣列方法總結筆記
2019-04-18
JS陣列筆記
陣列的常用方法
2019-03-25
陣列
陣列常用的方法
2019-04-11
陣列
7.PHP陣列和字串常用函式
2018-04-11
PHP陣列字串函式
JS陣列的方法
2018-05-25
JS陣列
JS常用陣列操作
2018-10-29
JS陣列
常用陣列方法
2019-04-07
陣列
陣列常用方法
2019-07-17
陣列
陣列和字串
2024-08-03
陣列字串
js 陣列方法
2023-09-25
JS陣列
JS 陣列的迭代方法
2018-06-28
JS陣列
常用陣列方法梳理
2019-02-28
陣列
javascript陣列常用方法
2018-05-22
JavaScript陣列
陣列常用物件方法
2019-02-07
陣列物件
JS中陣列的遍歷方法（3種）
2020-12-17
JS陣列
慎用JS中的slice()、concat()和assign()方法來複制陣列
2018-07-29
JS陣列
Javascript - 陣列和陣列的方法
2019-02-17
JavaScript陣列
shell指令碼字串和陣列的使用操作方法
2020-11-12
指令碼字串陣列
js將陣列中的字串執行字母表排序
2019-04-01
JS陣列字串排序
JS陣列基本方法
2018-11-21
JS陣列
Js陣列方法解析
2019-03-05
JS陣列
js陣列方法集合
2020-12-03
JS陣列
js中的字串方法
2020-12-10
JS字串
js 陣列的方法小結
2018-10-12
JS陣列
JS常用陣列操作全解析
2018-11-07
JS陣列
js 陣列,字串,json互相轉換
2018-04-23
陣列字串JSON
JS陣列中（for...in）和(for...of)的區別
2024-08-15
JS陣列

JS中字串和陣列的常用方法

js中字串常用方法

查詢字串

根據索引值查詢字串的值

根據字元值查詢索引值

擷取字串的方法

字串替換

字串的遍歷查詢

字串轉化為陣列

陣列中常用的方法

往陣列裡增加項

從陣列裡刪除項

更改陣列項

查詢陣列項

遍歷陣列

擷取陣列值

其他的陣列方法

相關文章